bootstrap丰富的html标签和css类(一)网格系统、文本排版、代码块显示、表格显示

最新推荐文章于 2026-05-16 06:22:49 发布

原创最新推荐文章于 2026-05-16 06:22:49 发布 · 2.4k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

bootstrap 专栏收录该内容

3 篇文章

订阅专栏

本文全面解析Bootstrap框架，涵盖响应式设计原则、网格系统、文本排版、代码与表格显示技巧。深入探讨不同设备适配策略，展示如何利用Bootstrap构建美观且功能丰富的网页。

一、概览

1.1 bootstrap css概览

需要使用html5文档类型，也就是在html文件头部使用<!DOCTYPE html>
bootstarp3默认的css本身对移动设备友好支持。为了确保适当的绘制和触屏缩放，需要在头部加上viewport meta标签：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

其中，width是控制设备的宽度，若设置成device-width则是根据设备的分辨率来设置；而initial-scale=1.0的意思是初始化页面使不会缩放。

1.2 响应式图片

<img src="..." class="img-responsive" alt="响应式图片"
其中，元素的css属性中的max-width:100%;height:auto;能让图片自动缩放并且不会超过父元素的尺寸。

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

图片水平居中：<img src="..." class="img-responsive " alt="图片水平居中"

1.3 bootstrap的body样式

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

1.4 设置排版样式

通过@font-family-base、@font-size-base和@line-height-base属性作为排版样式。

1.5 设置全局连接的样色

通过@link-color设置全局链接的颜色。默认样式如下：

a:hover,
a:focus {
  color: #2a6496;
  text-decoration: underline;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
  /*轮廓偏移*/
}

1.6 设置浏览器的一致性

bootstrap通过Normalize.css来保持跨浏览器的一致性。

1.7 bootstrap的Container

通过<div class="container"></div来指定，默认的样式是：

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
   /*左右外边框由浏览器决定*/
}

默认情况下使用了container这个类的标签不可以嵌套。

二、网格系统

2.1 基本概念

流式网格系统，网格系统的列数会随着屏幕或者viewport的尺寸增加而增加，最多为12列。
网格系统的工作原理：

行必须放在.container class内，以获得适当的alignment和padding。
使用行来创建列的水平组。所以内容在行中的列内。（只有列可以是行的直接子元素）
列通过padding来创建列内容之间的间隙。
-形如.col-xs-4表示创建三个相等的列。

2.2 媒体查询

作用：在less文件中创建网格系统关键点的一些阀值。
语法：@media(设备规范and大小规则){...},在这里媒体查询代码中包含max-width是为了将css的影响限制在更小范围的屏幕大小内。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

2.3 网格选项

-	超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数量和	12	12	12	12
最大列宽	Auto	60px	78px	95px
间隙宽度	30px（一个列的每边分别 15px）	30px（一个列的每边分别 15px）	30px（一个列的每边分别 15px）	30px（一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

来看一个基本的bootstrap的结构。

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

代码中的*需要根据设备而定。
例如：只是简单的堆叠

<div class="col-md-6">....</div>
<div class="col-md-6">....</div>

需要兼容不同的设备

<div class="col-md-6 col-lg-4">....</div>
<div class="col-md-6 col-lg-8">....</div>

最后还需要小型设备

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

多余的列将从第二行起一行排列

2.4 响应式的列重置

Alt text

2.5 列偏移

在实际使用时，并不是所有的列都要从第一列开始的，所以需要用到.col-md-offset-*类来进行列偏移，*的范围是从1到11。
那么，我们就可以通过这种方法来居中了。例如：<div class="col-md-6 .col-md-offset-3"></div>

2.6 嵌套列

在列中嵌套列的时候，必须先在列中添加行，例如：

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第一列</h4>
            <p></p>
        </div>
        <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <h4>第二列 - 分为四个盒子</h4>
            <div class="row">
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p></p>
                </div>
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p></p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p></p>
                </div>
                <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                    <p></p>
                </div>
            </div>
        </div>
    </div>
</div>

他实际上是这样的：
Alt text

2.7 列排序

通过.col-md-push-*和.col-md-pull-*可以改变列的顺序，其实push和pull就是推和拉的意思。

三、文本排版

3.1 默认字体栈

Helvetica Neue、 Helvetica、 Arial 和 sans-serif

3.2 标题

<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>

3.3 内联子标题

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>

3.4 强调文本

<p class="lead"></p>给段落加lead类可以得到强调的引导主体副本。

3.5 强调

small、strong、em标签

3.6 bootstrap提供的其他文本类

<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

在这里插入图片描述

3.7 文本的缩写

通过abbr标签实现。属性title内的是详细内容。若继承了initialism类可以得到全大写的文本缩写。

<abbr title="全名李泰萱">ltx</abbr><br>
<abbr title="全名李泰萱全名李泰萱全名李泰萱" class="initialism">small ltx</abbr>

ltx

small ltx

3.8 地址

通过address标签来实现，这是一个block类型的标签。在其内部的文字需要通过br标签来换行。

3.9 引用

通过blockquote来实现，在其内部使用用来强调的small标签来表明来源，还可以继承pull-right类来实现右对齐。

3.10 列表

有序列表：以有序字符开头。通过ol标签实现，列表的每一个列表项通过li标签实现。
无序列表：以“着重号”开头，但是可以继承list-unstyled来移除这些开头符号。通过ul标签实现，列表项通过li标签实现。
内联列表：通过ol或ul标签继承list-inline类来实现。
定义列表：通过dl标签实现，列表项的标签是dd护着dt。定义列表的效果类似于字典。通过如下语法实现：

<dl>
	<dt>key1</dt>
	<dd>value1</dd>
	<dt>key2</dt>
	<dd>value2</dd>
</dl>

效果如下：

key1

value1

key2

value2

或者是通过dl标签继承dl-horizontal类实现行内定义表

<dl class="dl-horizontal">
	<dt>key1</dt>
	<dd>value1</dd>
	<dt>key2</dt>
	<dd>value2</dd>
</dl>

效果如下：

key1

value1

key2

value2

3.11 其他可以被继承的排版类

类	描述
.lead	使段落突出显示
.small	设定文本父文本的85%大小
.text-left
.text-center
.text-right
.text-justify	文本对齐，超出屏幕部分的文字自动换行
.text-nowrap	段落中超出屏幕部分不换行
.text-lowercase	文本小写
.text-uppercase	文本大写
.text-capitalize	文本标题化
.text-initialism	abbr标签中的文本小号字体显示
.blockquote-reverse	引用右对齐
.list-unstyled	移除无序列表中的默认样式
.list-inline	列表行内显示
.dl-horizontal	定义列表行内显示
.pre-scrollable	pre标签可滚动

四、bootstrap代码块显示

4.1 code标签

内敛式的代码块，类似于markdown的“单行代码”。

4.2 pre标签

多行代码的显示。pre是保留内部格式的标签。在pre标签内显示html标签的开头需要使用<，html标签的结尾需要使用>
例如：

<pre>
	 &lt;article&gt;
        &lt;h1&gt;Article Heading&lt;/h1&gt;
    &lt;/article&gt;
<pre>

效果如下：

for lines in range(1,):
	print lines

4.3 与代码显示有关的其他标签

类	描述
`<var>`	变量
`<kbd>`	按键提示
`<pre>`	多行代码
`<pre class="pre-scrollable">`	有滚动条的多行代码，最大高度为340px
`<samp>`	电脑程序输出
`<code>`	行内代码

五、bootstrap表格显示

5.1 表格的基本标签

<table>:表格标签
<thead>:标题行的容器，装一个tr标签，tr里面再装th标签。
<tbody>：记录行的容器，里面装一个或多个tr标签，里面装td标签。
<tr>:行标签，单行上的每个单元格（td）的容器
<td>:单个单元格
<th>:特殊的单元格
<caption>:用于说明表格的作用

5.2 table标签可以继承的类

啥也不加的情况下：

       
	<table >
		<thead>
			<tr>
				<th>#</th>
				<th>Firstname</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>Anna</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Debbie</td>
			</tr>
			<tr>
				<td>3</td>
				<td>John</td>
			</tr>
		</tbody>
	</table>

Alt text

table标签继承了table类，增加了横向分割线
table标签继承了table-striped类，增加了斑马条纹
table标签继承了table-bordered类，增加了边框
table标签继承了table-hover类，增加了鼠标悬停的效果
table标签继承了table-condensed类，让表格更紧凑

5.3 tr、th、td标签可以继承的类

啥也不加的情况下：

<table class="table">
  <caption>基本的表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
    </tr>
  </tbody>
</table>

Alt text

tr、th或td标签继承acive类:应用鼠标激活的颜色在行或单元格上，表示激活。
tr、th或td标签继承success类:表示操作成功。
tr、th或td标签继承info类:表示信息变更。
tr、th或td标签继承warning类:表示警告操作
tr、th或td标签继承danger类:表示危险操作

<table class="table">
	<caption>上下文表格布局</caption>
	<thead>
		<tr>
			<th>产品</th>
			<th>付款日期</th>
			<th>状态</th>
		</tr>
	</thead>
	<tbody>
		<tr class="active">
			<td>产品1</td>
			<td>23/11/2013</td>
			<td>待发货</td>
		</tr>
		<tr class="success">
			<td>产品2</td>
			<td>10/11/2013</td>
			<td>发货中</td>
		</tr>
		<tr  class="warning">
			<td>产品3</td>
			<td>20/10/2013</td>
			<td>待确认</td>
		</tr>
		<tr  class="danger">
			<td>产品4</td>
			<td>20/10/2013</td>
			<td>已退货</td>
		</tr>
		<tr class="info">
			<td>产品5</td>
			<td>20/10/2018</td>
			<td>信息变更</td>
		</tr>
	</tbody>
</table>

Alt text

5.4 响应式表格

通过table标签继承table类以及table标签的父类继承table-responsive标签类实现。

<div class="table-responsive">
	<table class="table">
		<thead><tr>
			<th></th>
			<th></th>
			<th></th>
		</tr></thead>
	</table>
	<tbody>
		<tr>
			<th></th>
			<th></th>
			<th></th>
		</tr>
		<tr>
			<th></th>
			<th></th>
			<th></th>
		</tr>
		<tr>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</tbody>
</div>