BootStrap CSS全局样式和表格样式源码解析

#技术教程发布时间： 2026-01-18

CSS全局样式

1、布局容器类样式：.container 和 .container-fluid

.container 固定宽度并且具有响应式。
.container-fluid 自由宽度(100%宽度)。

这2个class是直接在body标签下建立一个div标签，class等于这2个中的一个。
然后其他内容全部写在这个div标签中即可！

例如:

<!DOCTYPE html>
<html>
<head>
 <title>BootStrap基础入门</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css">

 <script type="text/javascript" src="js/jquery.slim.min.js" ></script>
 <script type="text/javascript" src="bootstrap3/js/bootstrap.min.js" ></script>
</head>
<body>
 <div class="container">
 <h1>标题H1</h1>
 <p>正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正</p>
 </div>
</body>
</html>

再看.container-fluid：
只修改了这里，其他地方不变

也就是说，container-fluid这个是和页面两边是没有间隔的。
而container是有一定间隔的，而且左右两边的间隔相等。

2、标题样式： <h1>到<h6>、.h1 ~ .h6

<h1>~<h6>样式重写了，基本上做到了兼容性。
（如未加说明，则新代码是接在上面的代码后面）
下面的代码在上面代码的p标签后

<h1>标题H1</h1>
<font class="h1">标题H1</font>

3、行内文本样式：

<b>：加粗
<strong>加粗
<i>：斜体
<em>斜体，HTML5新标记
<del>删除线，HTML5新标记。
<s>删除线

这几个就不演示了，你自己简单的用一个就懂了。

4、文本对齐样式：.text-left、.text-center、.text-right、.text-justify

.text-left：文本左对齐
.text-right：右对齐
.text-center：居中对齐
.text-justify：两端对齐

<div class="text-left">左对齐:正文正正文正文正文正文正</div>
<div class="text-right">右对齐:正文正正文正文正文正文正</div>
<div class="text-center">居中对齐:正文正文正文正文正</div>
<div class="text-justify">两端对齐:正正文正文正文正正</div>

5、列表样式：

.list-unstyled(无符号)：去掉前面的符号。
.list-inline(行内块)

普通的列表样式：首先是前面有一定的空隙，不是和文本同间隔的。
另外的就是有小圆点，当然，你可以改这个符号。

在BootStrap中，我们只需要在ul上加一个class就可以解决这个问题。

在这里，我发现BootStrap4不支持ul在一行显示，也就是添加class=”list-inline”是无效的。
所以，我在这里就改用bootstrap3了。

<ul class="list-unstyled">
  <li>HTML</li>
  <li>Java</li>
  <li>JavaScript</li>
 </ul>
 <ul class="list-inline">
  <li>在一行</li>
  <li>HTML</li>
  <li>Java</li>
  <li>JavaScript</li>
</ul>

表格样式

1、.table ：表格全局样式(少量padding和水平方向的分割线)。

 <table class="table">
 <tr>
  <td>编号</td>
  <td>新闻标题</td>
  <td>发布者</td>
  <td>发布时间</td>
 </tr>
 <tr>
  <td>001</td>
  <td>A</td>
 <td>CHX</td>
  <td>2017</td>
 </tr>
 <tr>
 <td>002</td>
 <td>B</td>
 <td>ANYI</td>
 <td>2017</td>
 </tr>
</table>

2、.table-striped：有条纹的背景色行(隔行变色)

<table class="table table-striped">
...
</table>

颜色很浅，不知道你们能不能看清。

3、.table-bordered：带边框的表格

<table class="table table-striped table-bordered">
...
</table>

4、.table-hover：鼠标悬停效果(放上变色、离开恢复)

<table class="table table-striped table-bordered table-hover">
...
</table>

5、.table-condensed：紧凑的表格(单元格内补会减半)

<table class="table table-striped table-bordered table-hover table-condensed">
...
</table>

6、行或单元格背景色：

注意：只能给tr或td添加类样式。

.active：当前样式
.success
.info
.warning
.danger

<tr class="active">
     <td>编号</td>
     <td>新闻标题</td>
     <td>发布者</td>
     <td>发布时间</td>
    </tr>
    <tr class="success">
     <td>001</td>
     <td>A</td>
     <td>CHX</td>
     <td>2017</td>
    </tr>
    <tr class="info">
     <td>002</td>
     <td>B</td>
     <td class="warning">ANYI</td>
     <td class="danger">2017</td>
    </tr>

7、响应式表格：

将.table元素包裹在.table-responsive元素内，即可创建响应式表格
当屏幕宽度小于768px时，表格会出现滚动条。
当屏幕宽度大于768px时，表格的滚动条自然消失。

也就是在table标签外再创一个div标签，div的class设置为table-responsive即可。

<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover table-condensed">
     <tr class="active">
      <td>编号</td>
      <td>新闻标题</td>
      <td>发布者</td>
      <td>发布时间</td>
      <td>发布者</td>
      <td>发布时间</td>
      <td>发布者</td>
      <td>发布时间</td>
     </tr>
     <tr class="success">
      <td>001</td>
      <td>A</td>
      <td>CHX</td>
      <td>2017</td>
      <td>CHX</td>
      <td>2017</td>
      <td>CHX</td>
      <td>2017</td>
     </tr>
     <tr class="info">
      <td>002</td>
      <td>B</td>
      <td class="warning">ANYI</td>
      <td class="danger">2017</td>
      <td>CHX</td>
      <td>2017</td>
      <td>CHX</td>
      <td>2017</td>
     </tr>
    </table>
   </div>

本节源码：https://github.com/chenhaoxiang/BootStrap/tree/master/OneDay

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇 : BootStrap 图片样式、辅助类样式和CSS组件的实例详解

下一篇 : iOS 18 将搭载生成式 AI 功能国内或将采用百度的服务

首页

关于我们

SEO服务

品牌推广

营销学院

联系我们

BootStrap CSS全局样式和表格样式源码解析

SEO公司

SEO套餐

SEO教程

SEO资源

SEO建站

推荐阅读

为什么我的服务器费用比预期高得多？常见原

为什么网站需要高可用务器？如何选择？

Cpanel建站完成后访问失败：SSL证

IP被墙后是否需要更换服务器？需要注意哪

2025年开源内容管理系统（CMS）的功

FTP建站时如何确保传输过程中的数据安全

2025年中国建站：网站内容管理系统的选

BigCommerce商品管理后台操作疑

云服务器上搭建WordPress网站：从

2025年建站代理行业：电子商务网站搭建

2008系统建站过程中常见的安全问题及防

ASP企业网站自助建站系统免费版提供哪些

ASP拖拽式建站支持哪些支付网关和电子商

HostHatch是否支持自定义域名绑定

BigCommerce平台支持哪些物流配

个人网站服务器租用：国内和国外服务器有何

80端口建站后，如何监控和分析网站流量及

800元建站小程序：如何确保网站的安全性

上传网站到服务器时遇到权限问题怎么办？

128内存建站：有哪些方法可以减少HTT

个人网站租用服务器：如何选择最合适的服务

Linux服务器：SSH连接突然中断的原

Apache服务器中如何使用.htacc

2025年中国建站：如何提高网站的加载速

2025年最流行的开源内容管理系统(CM

云服务器 vs 传统服务器：各自优势及应

2008云服务器建站：成本控制与性能提升

2025年中国建站：如何选择最适合的网站

Dedecms建站教程：从免费域名注册到

Cera机房支持哪些类型的网站建设（如电

256内存建站：如何应对高流量访问的挑战

DNS设置错误：网页无法访问的罪魁祸首及

2025年移动优先：响应式网站设计的最佳

临沂网站服务器租赁与购买，哪个更划算？价

IIS 0中如何设置和管理虚拟目录以优化

SSL证书申请及配置：确保云服务器网站数

2008云服务器建站：遇到故障时，快速排

CentOS 0下怎样优化MySQL数据

Dreamweaver云建站的托管服务有

ADSL网络的稳定性对SEO排名有何影响