概述
GitHub上这样介绍 bootstrap:
- 简单灵活可用于架构流行的用户界面和交互接口的
html、css、javascript 工具集
。 - 基于
html5
、css3
的 bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档。 - 自定义
JQuery
插件,完整的类库,基于 Less 等。
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
标题
Bootstrap 对标题样式进行了显著的优化重置。
副标题
,使用 <small>
来制作副标题 ,副标题具有自己独特的样式。
- 行高都是1,而且
font-weight
设置了 normal,变成了常规效果(不加粗),同时颜色被设置为灰色(#999
)。 <small>
内的文本字体在 h1-h3 内,其大小都设置为当前字号的 65%;而在 h4-h6 内的字号都设置为当前字号的 75%。
<h1>Bootstrap标题一<small>我是副标题</small></h1>
段落(正文文本)
源码默认样式:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
p {
margin: 0 0 10px;
}
强调内容
一个段落p突出显示,可以通过添加类名 lead
实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理。
<p>我是一个普通的段落,我不需要强调显</p>
<p class="lead">这部分内容需要特别的强调,我和别人长得不一样</p>
源码样式:
.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 200;
line-height: 1.4;
}
@media (min-width: 768px) {/*大中型浏览器字体稍大*/
.lead {
font-size: 21px;
}
}
除此之外,Bootstrap还通过元素标签: <small>
、<strong>
、<em>
和 <cite>
给文本做突出样式处理。
粗体
粗体就是给文本加粗,在普通的元素中我们一般通过 font-weight
设置为 bold
关键词给文本加粗。在 Bootstrap 中,可以使用 <b>
和 <strong>
标签让文本直接加粗。
斜体
除了可以给元素设置样式 font-style
值为 italic
实现之外,在 Bootstrap 中还可以通过使用标签 <em>
或 <i>
来实现。
强调相关的类
在Bootstrap中除了使用标签 <strong>
、<em>
等说明正文某些字词、句子的重要性, Bootstrap 还定义了一套类名,这里称其为强调类名(类似前面说的“.lead
”),这些强调类都是通过颜色来表示强调
,具本说明如下:
.text-muted
:提示
,使用浅灰色(#999).text-primary
:主要
,使用蓝色(#428bca).text-success
:成功
,使用浅绿色(#3c763d).text-info
:通知信息
,使用浅蓝色(#31708f).text-warning
:警告
,使用黄色(#8a6d3b).text-danger
:危险
,使用褐色(#a94442)
<div class="text-danger">.text-danger效果</div>
文本对齐风格
Bootstrap 通过定义四个类名
来控制文本的对齐风格:
.text-left
:左对齐.text-center
:居中对齐.text-right
:右对齐.text-justify
:两端对齐
列表
在 HTML 文档中,列表结构主要有三种:有序列表、无序列表和定义列表。
<!--无序列表-->
<ul>
<li>…</li>
</ul>
<!--有序列表-->
<ol>
<li>…</li>
</ol>
<!--定义列表-->
<dl>
<dt>…</dt>
<dd>…</dd>
</dl>
Bootstrap 根据平时的使用情形提供了六种形式的列表
:
- 普通列表
- 有序列表
- 去点列表
- 内联列表
- 描述列表
- 水平描述列表
无序列表、有序列表
无序列表和有序列表使用方式和我们平时使用的一样(无序列表使用 ul
,有序列表使用 ol
标签),在样式方面,Bootstrap 只是在此基础上做了一些细微的优化,只是在 margin
上做了一些调整。在 Bootstrap 中列表也是可以嵌套的。
去点列表
通过给无序列表添加一个类名“.list-unstyled
”,这样就可以去除默认的列表样式的风格。
.list-unstyled {
padding-left: 0;
list-style: none;
}
除了项目编号之外,还将列表默认的左边内距也清0了。
内联列表
Bootstrap 像去点列表一样,通过添加类名“.list-inline
”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。也可以说内联列表就是为制作水平导航而生
。
源码样式:
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
示例:
<ul class="list-inline">
<li>W3cplus</li>
<li>Blog</li>
<li>CSS3</li>
<li>jQuery</li>
<li>PHP</li>
</ul>
定义列表
对于定义列表而言,Bootstrap 并没有做太多的调整,只是调整了行间距
,外边距
和字体加粗效果
。
<dl>
<dt>北京</dt>
<dd>北京是中国的首都,是政治文化集中地</dd>
<dt>上海</dt>
<dd>上海号称东方的巴黎</dd>
</dl>
水平定义列表
水平定义列表就像内联列表一样,Bootstrap 可以给 <dl>
添加类名“.dl-horizontal
”给定义列表实现水平显示效果。
代码风格
用于显示代码的风格。在 Bootstrap 主要提供了三种代码风格:
- 使用
<code></code>
来显示单行内联代码,一般是针对于单个单词或单个句子
的代码。 - 使用
<pre></pre>
来显示多行块代码,一般是针对于多行代码
(也就是成块的代码)。 - 使用
<kbd></kbd>
来显示用户输入代码,一般是表示用户要通过键盘输入的内容
。
<div>Bootstrap的代码风格有三种:
<code><code></code>
<pre><pre></pre>
<kbd><kbd></kbd>
</div>
注意:不管使用哪种代码风格,在代码中碰到小于号(<)要使用硬编码“<”来替代,大于号(>)使用“>”来替代
。而且对于 <pre>
代码块风格,标签前面留多少个空格,在显示效果中就会留多少个空格。
有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小。Bootstrap 也考虑到这一点,你只需要在 pre
标签上添加类名“.pre-scrollable
”,就可以控制代码块区域最大高度为 340px,一旦超出这个高度,就会在 Y 轴出现滚动条。
源码:
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
如果您了解 LESS 或 Sass 这样的 CSS 预定定义处理器
,你完全可以通过 code.less
或者 _code.scss
文件修改样式
,然后重新编译,你就可以得到属于自己的代码样式风格
。
表格
表格是 Bootstrap 的一个基础组件之一,Bootstrap 为表格提供了1种基础样式
和4种附加样式
以及1个支持响应式的表格
。在使用 Bootstrap 的表格过程中,只需要添加对应的类名
就可以得到不同的表格风格。
.table
:基础表格.table-striped
:斑马线表格.table-bordered
:带边框的表格.table-hover
:鼠标悬停高亮的表格.table-condensed
:紧凑型表格.table-responsive
:响应式表格
表格行的类
Bootstrap 还为表格的行元素 <tr>
提供了五种不同的类名,每种类名控制了行的不同背景颜色
,具体说明如下表所示:
注意:除了”.active
”之外,其他四个类名和”.table-hover
”配合使用时,Bootstrap 针对这几种样式也做了相应的悬浮状态的样式设置,所以如果需要给 tr
元素添加其他颜色样式时,在”.table-hover
”表格中也要做相应的调整。
注意要实现悬浮状态
,需要在<table>
标签上加入 table-hover
类。
基础表格(table)
对表格的结构,跟我们平时使用表格是一样的:
<table>
<thead>
<tr>
<th>表格标题</th>
…
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
…
</tr>
…
</tbody>
</table>
在 Bootstrap 中,对于基础表格是通过类名“.table
”来控制。如果在 <table>
元素中不添加任何类名,表格是无任何样式效果的。想得到基础表格,我们只需要在 <table>
元素上添加“.table
”类名,就可以得到 Bootstrap 的基础表格:
<table class="table">
…
</table>
“.table
”主要有三个作用:
- 给表格设置了
margin-bottom:20px
以及设置单元内距; - 在
thead
底部设置了一个 2px 的浅灰实线; - 每个单元格顶部设置了一个 1px 的浅灰实线。
斑马线表格(table-striped)
让表格带有背景条纹效果
,在 Bootstrap 中实现这种表格效果并不困难,只需要在 <table class="table">
的基础上增加类名“.table-striped
”即可:
<table class="table table-striped">
…
</table>
其效果与基础表格相比,仅是在 tbody
隔行有一个浅灰色的背景色。其实现原理也非常的简单,利用 CSS3 的结构性选择器
“:nth-child
”来实现,所以对于 IE8 以及其以下浏览器,没有背景条纹效果。
带边框的表格(table-bordered)
Bootstrap 出于实际运用,也考虑这种表格效果,即所有单元格具有一条1px 的边框
。
Bootstrap 中带边框的表格使用方法和斑马线表格的使用方法类似,只需要在基础表格 <table class="table">
基础上添加一个“.table-bordered
”类名即可:
<table class="table table-bordered">
…
</table>
鼠标悬浮高亮的表格(table-hover)
当鼠标悬停在表格的行上面有一个高亮的背景色
,这样的表格让人看起来就是舒服,时刻告诉用户正在阅读表格哪一行的数据。Bootstrap 的确没有让你失望,他也考虑到这种效果,其提供了一个“.table-hover
”类名来实现这种表格效果。
<table class="table table-hover">
…
</table>
紧凑型表格(table-condensed)
何谓紧凑型表格,简单理解,就是单元格没内距或者内距较其他表格的内距更小。换句话说,要实现紧凑型表格只需要重置表格单元格的 内距 padding
的值。那么在 Bootstrap 中,通过类名“table-condensed
”重置了单元格内距值。
<table class="table table-condensed">
…
</table>
注意,不管制作哪种表格都离不开类名“table
”。所以大家在使用 Bootstrap 表格时,千万注意,你的 <table> 元素中一定不能缺少类名“table”
。
响应式表格()
Bootstrap 提供了一个容器
,并且此容器设置类名“.table-responsive
”,此容器就具有响应式效果
,然后将 <table class="table">
置于这个容器当中`,这样表格也就具有响应式效果。
<div class="table-responsive">
<table class="table table-bordered">
…
</table>
</div>
Bootstrap 中响应式表格效果表现为:当你的浏览器可视区域小于 768px 时
,表格底部会出现水平滚动条
。当你的浏览器可视区域大于 768px 时
,表格底部水平滚动条就会消失
。