bootstrap丰富的html标签和css类(一)网格系统、文本排版、代码块显示、表格显示
一、概览
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 响应式的列重置
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>
他实际上是这样的:
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>
<article>
<h1>Article Heading</h1>
</article>
<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>
-
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>
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>
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>