Bootstrap部分标签介绍(1)

标签：

标题：<h1></h1>（h1~h6）

副标题:<small></small>(不加粗，灰色#999)

段落：<p></p>

加粗：<b></b>、<strong></strong>

斜体：<em></em>、<i></i>

列表：

1、无序列表使用ul，有序列表使用ol标签

2、给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

3、通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。

也可以说内联列表就是为制作水平导航而生。

 

定义列表：

<dl>
    <dt>W3cplus</dt>
    <dd>一个致力于推广国内前端行业的技术博客</dd>
    <dt>慕课网</dt>
    <dd>一个真心在做教育的网站</dd>
</dl>
给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。

Bootstrap主要提供了三种代码风格：　
1、<code></code>来显示单行内联代码
2、<pre></pre>来显示多行块代码
3、<kbd></kbd>来显示用户输入代码

不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“&lt;”来替代，大于号(>)使用“&gt;”来替代。

在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

类：

标题：.h1~.h6

强调： .lead(增大文本字号，加粗文本)

.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）

 

文本对齐：

.text-left：左对齐

.text-center：居中对齐

 .text-right：右对齐

 .text-justify：两端对齐

 

 表格：

.table：基础表格

 .table-striped：斑马线表格

 .table-bordered：带边框的表格

 .table-hover：鼠标悬停高亮的表格

 .table-condensed：紧凑型表格

 .table-responsive：响应式表格

 

Bootstrap中带边框的表格使用方法和斑马线表格的使用方法类似，只需要在基础表格<table class="table">基础上添加一个“.table-bordered”类名即可：

<table  class="table table-bordered">
  …
</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时，表格底部水平滚动条就会消失。

 

Bootstrap还为表格的行元素<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色：

使用方式：

<tr class="active">

　　<td>...</td>

<tr>

 

表单控件（按钮）

种类：

控制大小：

用法：

如何使按钮宽度充满整个父容器（width:100%）？

图像：

图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格：

1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片
3、img-circle：圆形图片
4、img-thumbnail：缩略图片

 使用方法：

图标：

速查网站：

http://glyphicons.com/

http://getbootstrap.com/components/#glyphicons

其它（第三方为Bootstrap框架设计的图标字体）：

http://www.bootcss.com/p/font-awesome/

使用方法：