BootStrap基础知识学习-No.1
来源：互联网 发布：linux 主机管理系统 编辑：程序博客网 时间：2024/05/18 00:18
BootStrap中文网
一、Bootstrap简介 
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，是一个用于快速开发 Web 应用程序和网站的前端框架。
Bootstrap内容包括：
1.基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
2.全局CSS样式：Bootstrap 自带全局的 CSS 样式、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统等特性。
3.Bootstrap组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
4.JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。可以直接包含所有的插件，也可以逐个包含这些插件。
5.定制：可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到自己的版本。
二、Bootstrap使用–下载Bootstrap源码
三、Bootstrap全局css样式
3.1.bootstrap栅格系统
3.1.1栅格系统简介
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，页面内容放置于列(column)中，只有“列（column）”可以作为行（row）”的直接子元素。
页面的设计与开发根据当前用户行为以及设备环境(如系统平台、屏幕尺寸等)进行相应的调整，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列，均可自动切换分辨率、图片尺寸等。包含了预定义类，如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
3.1.2媒体查询
媒体查询是响应式设计的核心要素，其功能十分强大，Bootstrap主要用到min-width，max-width以及and语法，用于在不同的分辨率下设置不同的css样式。
/* 超小屏幕（手机，小于 768px） */@media (max-width: @screen-xs-max) { ... }/* 默认的设置，--移动设备优先 *//* 小屏幕（平板，大于等于 768px） */@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }/* 中等屏幕（桌面显示器，大于等于 992px） */@media (min-width: @screen-md-min) and (max-width: @screen-md-max){ ... }/* 大屏幕（大桌面显示器，大于等于 1200px） */@media (min-width: @screen-lg-min) { ... }3.1.3.栅格系数 
3.1.4.栅格系统的使用
1.基本的栅格系统以及流式布局容器下的栅格系统
<div class="container"><!--container样式是bootstrap已定义的，会根据屏幕大小自动设置div的宽度--><!-- <div class="container-fluid"> 流式布局容器：将固定宽度的栅格布局转换为 100% 宽度的布局 --> <div class="row"> <!--指定行，这个行只能放在container里面！规定！--> <!--col-md-1代表中等分辨率中只占一列--> <!--兼容性：小分辨率在大分辨率的时候依然可以使用--> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> <div class="col-md-1">col-md-1</div> </div> <div class="row"> <!--col-md-1代表中等分辨率中只占八列和四列--> <div class="col-md-8">col-md-8</div> <div class="col-md-4">col-md-4</div> </div> <!--多个分辨率下的栅格布局--> <div class="row"> <div class="col-md-8 col-sm-6">小分辨率6列，中等分辨率8列</div> <div class="col-md-4 col-sm-6">小分辨率6列，中等分辨率4列</div> </div></div> 2.列偏移( .col-md-offset-n)、列嵌套、列排序 (.col-md-push-n .col-md-pull-n)
<div class="container"> <!--列偏移--> <div class="row"> <div class="col-md-4 col-md-offset-4">col-md-4</div> <div class="col-md-2 col-md-offset-2">col-md-2</div> </div> <!--列组合--> <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-8">col-md-8 <div class="row" id="qiaotao"> <div class="col-md-4">列嵌套-4</div> <div class="col-md-8">列嵌套-8</div> </div> </div> </div> <!--列排序--> <div class="row"> <div class="col-md-4 col-md-push-5"> col-md-4向后推5格 </div> <div class="col-md-2 col-md-pull-2"> col-md-2向左拉两格 </div> </div></div>3.不同分辨率下行数的不同以及清除浮动
<div class="container"> <div class="row"> <div class="col-xs-6 col-sm-3">xs排两行，sm排一行1</div> <div class="col-xs-6 col-sm-3">xs排两行，sm排一行2</div> <div class="col-xs-6 col-sm-3">xs排两行，sm排一行3</div> <div class="col-xs-6 col-sm-3">xs排两行，sm排一行4</div> </div> <!--清除浮动--> <div class="row"> <div class="col-xs-6 col-sm-3"> xs排两行，sm排一行1<br />第二行内容 </div> <div class="col-xs-6 col-sm-3"> xs排两行，sm排一行2 </div> <!--在第三列清除浮动--> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3"> xs排两行，sm排一行3 </div> <div class="col-xs-6 col-sm-3"> xs排两行，sm排一行4 </div> </div></div>3.1.4禁止响应式布局
- 删除viewpt的meta
- 为.container设为固定宽度
- 对导航移除折叠和展开行为
3.2.bootstrap排版基础
3.2.1标题
<h1>hello<small>bootstrap</small></h1><h2>hello<small>bootstrap</small></h2><h3>hello<small>bootstrap</small></h3><h4>hello<small>bootstrap</small></h4><h5>hello<small>bootstrap</small></h5><h6>hello<small>bootstrap</small></h6><span class="h1">hello</span><br /><span class="h2">hello</span><br /><span class="h3">hello</span><br /><span class="h4">hello</span><br /><span class="h5">hello</span><br /><span class="h6">hello</span><br />3.2.2页面主题
- body全局样式
<!--bootstrap定义-->body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff;}- p全局样式： 通过添加 .lead 类可以让段落突出显示。
<!--bootstrap定义-->p { margin: 0 0 10px;}.lead { margin-bottom: 20px; font-size: 16px; font-weight: 300; line-height: 1.4;}- 对齐方式：text-right；text-center；text-left
<!--bootstrap定义-->.text-left { text-align: left;}.text-right { text-align: right;}.text-center { text-align: center;}3.2.3内联文本元素
- 小号字体：small
- 着重：strong
- 斜体：em
- 带下划线文本：u
- 插入文本：ins
- 无用文本：s
- 删除文本：del
- 高亮：mark
3.2.4缩略语：abbr
1.首字母缩略语：为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。
2.基本缩略语：想看完整的内容可把鼠标悬停在缩略语上, 但需要为abbr元素设置 title属性。
<abbr title="内容">abbr</abbr><abbr title="内容" class="initialism">abbr</abbr>3.2.5改变大小写
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>3.2.6地址元素address
<!--bootstrap定义-->address { margin-bottom: 20px; font-style: normal; line-height: 1.42857143;}3.2.7引用blockquote
引用里面最好放一个p标签
3.2.8列表
- 无序列表
- 有序列表
- 去点列表：移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的。
<ol class="list-unstyled"> <li>bootstrap</li> <li>bootstrap</li> <li>bootstrap</li> <li>bootstrap</li> <li>bootstrap</li> <li>bootstrap</li></ol>- 内联列表
设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。
<ol class="list-inline"> <li>bootstrap</li> <li>bootstrap</li> <li>bootstrap</li> <li>bootstrap</li> <li>bootstrap</li> <li>bootstrap</li></ol>- dl列表：dd取消了缩进
- 水平列表：.dl-horizontal 可以让dl 内的短语及其描述排在一行。开始是像 dl 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。
<dl class="dl-horizontal"> <dt>bootstrap</dt> <dd>内容</dd> <dt>bootstrap</dt> <dd>内容</dd></dl>3.2.9代码
- code：显示单行内联代码
通过“code” 标签包裹内联样式的代码片段。
- kbd：显示用户输入代码
- pre：多行代码块
- var：变量
- samp：程序结果
3.3.bootstrap表格样式
3.3.1基础样式table
为任意table 标签添加 .table 类可以为其赋予基本的样式——少量的内补（padding）和水平方向的分隔线。
3.3.2特殊样式table
带背条纹表格 .table-striped
带边框 .table-border
悬停 .table-hover
紧凑 .table-condensed
3.3.3行样式 .active .success .info .danger .waring
3.3.4响应式表格
要放到div中 .table-responsive
<div class="row"> <div class="col-sm-4"> <div class="table-responsive"> <table class="table table-bordered table-hover"> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>01</td> <td>name</td> <td>22</td> </tr> <tr> <td>02</td> <td>name2</td> <td>23</td> </tr> </table> </div> </div></div>3.4.bootstrap表单
3.4.1基础表单：全局样式.form-control–>把文本框宽度设置为100%(input、select、textarea 元素)。
<div class="form-group"> <label>用户名：</label> <input type="text" class="form-control" name="name" id="name" placeholder="请输入姓名"/></div>3.4.2内联表单：form-inline(需要手动设置宽度)
在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单将这些元素的宽度设置为 width: auto，因此，多个控件可以排列在同一行。根据布局需求，可能需要一些额外的定制化组件。(一定要添加 label 标签，不过可以通过为 label 设置 .sr-only 类将其隐藏。)
3.4.3横向表单： .form-horizontal
使用栅格系统，通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
<form action="#" method="post" class="form-horizontal"> <div class="form-group"> <!--control-label：对齐--> <label class="col-sm-2 control-label">姓名：</label> <div class="col-sm-8"> <input type="text" name="name" class="form-control" id="name" placeholder="请输入姓名" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">密码：</label> <div class="col-sm-8"> <input type="password" class="form-control" name="pwd" /> </div> </div></div>3.4.4表单控件
1.输入框input
包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
2.select选择
使用默认选项或添加 multiple 属性可以同时显示多个选项。
<div class="form-group"> <label class="col-sm-2 control-label">选择：</label> <div class="col-sm-8"> <select name="sle" class="form-control" multiple> <option value="1">No.1</option> <option value="1">No.2</option> </select> </div></div>3.文本域textarea
支持多行文本的表单控件。可根据需要改变 rows 属性。
<div class="form-group"> <label class="col-sm-2 control-label">概述：</label> <div class="col-sm-8"> <textarea name="te" rows="4"class="form-control"></textarea> </div></div>4.checkbox&radio
(1)单选或多选框禁止点击：设置 disabled 属性
(2)希望悬停于上方的鼠标设置为“禁止点击”的样式，可以将 .disabled 类赋予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 fieldset。
(3) .checkbox-inline 或 .radio-inline ：使得多选框（checkbox）或单选框（radio）控件排列在一行。
<div class="radio"> <label><input type="radio" />女</label> <label><input type="radio" />男</label></div><div class="checkbox"> <label class="checkbox-inline disabled"> <input type="checkbox" /> No.1 </label> <label class="checkbox-inline"> <input type="checkbox" /> No.2 </label> </div>5.静态控件.form-control-static
如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 p 元素添加.form-control-static。
<div class="form-group"> <label class="col-md-2 control-label">姓名：</label> <p class="form-control-static"> No.1</p> <label class="col-md-2 control-label">年龄：</label> <div class="col-md-8"> <input type="text" class="form-control" /> </div></div>3.4.5控件状态
1.焦点状态：autofocus
<input type="tel"autofocus placeholder="请输入" class="form-control" />2.禁用状态：disabled
<input type="tel" placeholder="请输入" class="form-control" disabled/>
3.被禁用的fieldset：a 标签的链接功能不受影响
4.只读状态：readonly
<input type="tel" placeholder="请输入" class="form-control" readonly/>
5.校验状态：has-success、has-waring、 has-error
3.4.6添加额外图标
has-feedback
<span class="glyphicon glyphicon-asterisk form-control-feedback"></span>通过为 label 元素添加 .sr-only 类，可以让表单控件的 label 元素不可见。在这种情况下，Bootstrap 将自动调整图标的位置。
3.4.7控件大小：
1.input-lg&input-sm，并通过 .col-lg-* 类似的类可以为控件设置宽度。
<div class="form-group"> <input type="text" class="form-control input-lg" placeholder="大" /> <input type="text" class="form-control input-sm" placeholder="小" /> <input type="text" class="form-control" placeholder="正常" /></div>2.水平排列的表单组的尺寸：input-group-lg&input-group-sm
<div class="form-group form-group-lg"> <label class="col-sm-2 control-label">姓名：</label> <div class="col-sm-10"> <input type="text" class="form-control" placeholder="大"/> </div></div><div class="form-group"> <label class="col-sm-2 control-label">学号：</label> <div class="col-sm-10"> <input type="text" class="form-control" placeholder="中"/> </div></div><div class="form-group form-group-sm"> <label class="col-sm-2 control-label">学号：</label> <div class="col-sm-10"> <input type="text" class="form-control" placeholder="小"/> </div></div>3.栅格系统：用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。
<div class="form-group"> <div class="row"> <p>控制控件大小：栅格系统</p> <div class="col-sm-3"> <input type="text" class="form-control" placeholder="col-sm-3"/> </div> <div class="col-sm-6"> <input type="text" class="form-control" placeholder="col-sm-6"/> </div> </div></div>3.4.8辅助文本：help-block
3.5.bootstrap按钮
3.5.1按钮样式
- 默认样式：btn-default
- 首选项：btn-primary
- 一般信息：btn-info
- 警告：btn-waring
- 链接：link
<button type="button" class="btn btn-default btn-xs">(默认)(xs)Default</button><button type="button" class="btn btn-primary">(首选项)Primary</button><button type="button" class="btn btn-success btn-default">(成功)(default)Success</button><button type="button" class="btn btn-info">(一般信息)Info</button><button type="button" class="btn btn-warning btn-sm">(警告)(sm)Warning</button><button type="button" class="btn btn-danger btn-lg">(危险)(lg)Danger</button><button type="button"class="btn btn-link">(链接)link</button>3.5.2按钮大小
- .btn-lg
- .btn-sm
- .btn-xs
- btn-block：设置占满容器
<button type="button" class="btn btn-warning btn-sm">(警告)(sm)Warning</button><button type="button" class="btn btn-danger btn-lg">(危险)(lg)Danger</button><button type="button" class="btn btn-warning btn-sm btn-block">占满容器</button>3.5.3多标签支持：可以支持a，div 等标签
虽然按钮类可以应用到“a” 和”button” 元素上，但是，导航和导航条只支持“button”元素。
<a href="index.html" class="btn btn-danger">嘻哈</a><div class="btn btn-warning">嘻哈</div>3.5.4活动状态：按钮被按下去：active
3.5.5禁用状态：disabled
<button type="button" class="btn btn-danger" disabled>禁用状态1</button><!--在类选择器中加入disabled--><button type="button" class="btn btn-danger disabled">禁用状态2</button>3.6.图片与辅助样式
3.6.1响应式图片：img-responsive
3.6.2图片形状
img-rounded：圆角
img-circle：圆形
img-thumbnail：边框
Internet Explorer 8 不支持 CSS3 中的圆角属性。
3.6.3文本样式
柔和灰：text-muted
主要蓝：text-primary
成功绿：text-success
信息蓝：text-info
警告黄：text-waring
危险红：text-danger
<div style="width: 100px; height: 100px;" class="bg-danger">嘻哈</div><div style="width: 100px; height: 100px;" class="bg-warning">嘻哈</div><div style="width: 100px; height: 100px;" class="bg-info">嘻哈</div><div style="width: 100px; height: 100px;" class="bg-primary">嘻哈</div><div style="width: 100px; height: 100px;" class="bg-success">嘻哈</div>3.6.4文本背景样式
主要蓝：bg-primary
成功绿：bg-success
信息蓝：bg-info
警告黄：bg-waring
危险红：bg-danger
<p class="text-muted">嘻哈</p><p class="text-info">嘻哈</p><p class="text-success">嘻哈</p><p class="text-primary">嘻哈</p><p class="text-warning">嘻哈</p><p class="text-danger">嘻哈</p>3.6.5辅助图标
关闭图标：close
向下箭头：caret
3.6.6内容浮动
.pull-right
.pull-left
.clearfix
3.6.7隐藏与显示
.show
.hidden
<!--内容浮动、隐藏与显示--><div class="center-block">居中</div><div class="pull-left" style="width: 100px;height: 50px;">居左</div><div class="pull-right" style="width: 100px;height: 50px;">局右</div><!--代表在小分辨率下才显示--><div class="clearfix visible-md"></div><!--<div class="hidden-md">hello</div>--><div class="visible-md">hello</div><div class="visible-sm">hello~</div>3.7.响应式工具 
四、Bootstrap组件 
4.1.图标
4.1.1基本用法
- 不要和其他组件混合使用
- 图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的”span”标签，并将图标类应用到这个”span” 标签上。
- 只针对内容为空的元素起作用
图标类只能应用在不包含任何文本内容或子元素的元素上。
4.1.2应用场景
1.可以在各个元素内使用
<button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star"></span> Star</button>2.工具条中的按钮组
<div class="btn-toolbar"> <div class="btn-group"> <a href="index.html" class="btn btn-default"> <span class="glyphicon glyphicon-heart"></span> </a> <a href="index.html" class="btn btn-default"> <span class="glyphicon glyphicon-heart"></span> </a> <a href="index.html" class="btn btn-default"> <span class="glyphicon glyphicon-heart"></span> </a> <a href="index.html" class="btn btn-default"> <span class="glyphicon glyphicon-heart"></span> </a> </div></div>3.输入栏
<div class="col-md-5 col-md-offset-2"> <div class="input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-heart"></span> </span> <input type="text" class="form-control" /> </div></div>4.导航
4.2.下拉菜单
4.2.1对齐
为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。
4.2.2标题：dropdown-header
4.2.3分隔线：divider
4.2.4禁用菜单： .disabled
<div class="container"> <div class="dropdown"> <button type="button" class="btn btn-danger" data-toggle="dropdown" > <span class="glyphicon glyphicon-heart"></span> <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-left"> <li class="dropdown-header">我是标题</li> <li class="active"><a href="index.html"> <span class="glyphicon glyphicon-heart"></span> active</a></li> <li><a href="index.html"> <span class="glyphicon glyphicon-heart"></span> 嘿哈</a></li> <li class="disabled"> <a href="index.html">disabled</a></li> <li class="divider"> <a href="index.html">divider</a></li> <li><a href="index.html">嘻哈</a></li> </ul> </div></div>4.3.按钮组
4.3.1基本实例
<div class="btn-group"> <a href="index.html" class="btn btn-danger">danger</a> <a href="index.html" class="btn btn-danger">danger</a> <a href="index.html" class="btn btn-danger">danger</a> <a href="index.html" class="btn btn-danger">danger</a> </div>4.3.2按钮工具栏： .btn-toolbar
4.3.3尺寸：.btn-group-*
<div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default btn-xs btn-group-sm">在这个里面设置的btn-group-sm不起作用</button> <button type="button" class="btn btn-default btn-xs">(默认)(xs)Default</button> </div>4.3.4嵌套：只须把 .btn-group 放入另一个 .btn-group 中。
4.3.5垂直排列：btn-group-vertical
分列式按钮下拉菜单不支持这种方式。
4.3.6两端对齐排列的按钮组：.btn-group .btn-group-justified
必须将每个按钮包裹进一个按钮组中
4.4.按钮式下拉菜单
4.4.1组合式下拉菜单
<div class="btn-group dropdown"> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"> 下拉 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="index.html">啊哈</a></li> <li><a href="index.html">啊哈</a></li> <li><a href="index.html">啊哈</a></li> <li><a href="index.html">啊哈</a></li> </ul> ......</div>4.4.2分裂式按钮功能
<div class="btn-group dropup"> <button type="button" class="btn btn-primary">下拉</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="index.html">啊哈</a></li> <li><a href="index.html">啊哈</a></li> <li><a href="index.html">啊哈</a></li> <li><a href="index.html">啊哈</a></li> </ul></div>4.4.3按钮大小： btn-lg、btn-sm
4.4.4向上弹起的菜单：dropup
4.5.输入框
<div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" /> <span class="input-group-addon">~~</span></div>4.5.1尺寸： input-group-lg、 input-group-sm
4.5.2作为额外元素的多选框和单选框：附加框加addon
<span class="input-group-addon"> <input type="checkbox"></span>4.5.3作为额外元素的按钮及按钮式下拉菜单： 按钮加addon
<div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> 按钮 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="index.html">Helloween</a></li> <li><a href="index.html">Helloween</a></li> <li><a href="index.html">Helloween</a></li> <li><a href="index.html">Helloween</a></li> </ul> <button type="button" class="btn btn-danger"> 按钮 ... </button> </span> <input type="text" class="form-control" /></div>4.5.5作为额外元素的分裂式按钮下拉菜单：分段按钮作为addon
<div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-danger">下拉</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="index.html">Helloween</a></li> <li><a href="index.html">Helloween</a></li> <li><a href="index.html">Helloween</a></li> <li><a href="index.html">Helloween</a></li> </ul> </span> <input type="text" class="form-control" /> </div>4.6.导航
4.6.1选项卡标签页：nav-tabs
<ul class="nav nav-tabs"> <!--nav-tabs表示为选项卡的导航--> <li class="active"><a href="index.html">首页</a></li> <li><a href="index.html">首页</a></li> <li class="disabled"><a href="index.html">首页</a></li> <li><a href="index.html">首页</a></li> </ul>
4.6.2胶囊式标签页
1.水平：nav-pills
2.竖直：nav-pills nav-stacked 
4.6.3自适应标签页： .nav-justified
<ul class="nav nav-tabs nav-justified">
4.6.4两端对齐的标签页
4.6.5禁用的链接
4.6.6添加下拉菜单–>二级导航
4.7导航条&面包屑导航、分页导航和翻页导航
4.7.1基础导航条
<nav class="navbar navbar-default"> <nav class="navbar-header"> <a href="index.html" class="navbar-brand">导航条</a> </nav> <ul class="nav navbar-nav"> <li class="active"><a href="index.html">首页</a></li> <li><a href="index.html">首页</a></li> <li class="disabled"><a href="index.html">首页</a></li> <li><a href="index.html">首页</a></li> </ul></nav>
4.7.2导航条中的表单： .navbar-form
<form action="index.html" method="get" class="navbar-form navbar-right" style="margin-right: 650px;"> <div class="form-group"> <input type="text" class="form-control" /> </div> <button type="button" class="btn btn-danger">click</button></form>
4.7.3导航条中的文本、链接、按钮
.navbar-btn
.navbar-text
.navbar-link
<p class="navbar-text">文本</p><a href="index.html" class="navbar-link">链接</a><button type="button" class="btn btn-warning navbar-btn">按钮</button>
4.7.4顶部固定和底部固定
.navbar-fixed-top
.navbar-fixed-bottom
需要为 body 元素设置内部（padding）
4.7.5静止在顶部：.navbar-static-top
通过添加.navbar-static-top即可创建一个与页面的导航条。它会随着页面向下滚动而消失。和.navbar-fixed-*类不同的是，你不用给body添加padding。——实现效果：静止在顶部！
4.7.6反色导航条：.navbar-inverse 
4.7.7响应式导航条
增强导航条的可访问性，在屏幕小于768px时，菜单会进行隐藏。
为了增强可访问性，务必给每个导航条加上 role=”navigation” 属性。 
4.7.8面包屑导航：.breadcrumb 
4.7.9分页导航：pagnation 
4.7.10翻页导航：pager 
4.8.标签、徽章、巨幕、页头
4.8.1label
4.8.2.badge
<a href="index.html">未读消息<span class="badge">6</span></a><br /><br /><button type="button">读取消息<span class="badge">66</span></button><br /><br /><ul class="list-group"> <li class="list-group-item">消息列表<span class="badge">66</span></li> <li class="list-group-item">消息列表<span class="badge">66</span></li> </ul>4.8.3jumbotron
4.8.4page-header
页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。
4.9.缩略图和警告框
4.9.1缩略图：.thumbnail
<div class="row"><div class="col-md-4 col-xs-6"> <div class="thumbnail"> <img src="..." alt="..."/> <div class="caption"> <h3>缩略图</h3> <p>...</p> <p> <a href="index.html" class="btn btn-danger" role="button">click me</a> <a href="index.html" class="btn btn-default" role="button">click me</a> </p> </div> </div></div>4.9.2可关闭的警告框
4.9.4多采样式警告框
4.9.5警告框中的链接
<div class="alert alert-danger"> <button type="button" class="close" data-dismiss="alert">×</button> <p>警告框 <a href="index.html" class="alert-link">嘻嘻哈哈</a></p></div><div class="alert alert-info"> <button type="button" class="close" data-dismiss="alert">×</button> <p>警告框 <a href="index.html" class="alert-link">嘻嘻哈哈</a></p></div><div class="alert alert-warning"> <button type="button" class="close" data-dismiss="alert">×</button> <p>警告框 <a href="index.html" class="alert-link">嘻嘻哈哈</a></p></div><div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert">×</button> <p>警告框 <a href="index.html" class="alert-link">嘻嘻哈哈</a></p></div><div class="alert alert-dismissible alert-danger"> <button type="button" class="close" data-dismiss="alert">×</button> <p>警告框 <a href="index.html" class="alert-link">嘻嘻哈哈</a></p></div>
4.10.进度条和媒体对象
4.10.1进度条
1.进度条基本样式以及多彩样式：info danger waring …
<div class="progress"> <div class="progress-bar" style="width: 45%;background: violet;"></div></div><div class="progress"> <div class="progress-bar progress-bar-danger" style="width: 45%;"></div></div>2.条纹状：.progress-bar-striped
<div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 45%;"></div></div>3.动画状：active
<div class="progress"> <div class="progress-bar progress-bar-success active progress-bar-striped" style="width: 45%;"></div></div>4.堆叠
<div class="progress"> <div class="progress-bar progress-bar-danger active progress-bar-striped" style="width: 10%;"></div> <div class="progress-bar progress-bar-info active progress-bar-striped" style="width: 20%;"></div> <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 30%;"></div> <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 40%;"></div></div>4.10.2媒体对象
<!--媒体+媒体列表--><div class="media-list"><div class="media"> <div class="media-right media-middle"> <a href="index.html"> <img src="..." class="media-object" style="width: 100px; height: 100px;"/> </a> </div> <div class="media-body"> <h4 class="media-heading">媒体对象</h4> <p> ...... </p> </div></div>五、JavaScript插件 
5.1.js选项卡
5.1.1选项卡的组成和布局
1.选项卡组件
2.底部可切换的选项卡面板
5.1.2声明式用法
<ul class="nav nav-tabs"> <li><a href="#I" data-toggle="tab">I</a></li> <li class="active"><a href="#II" data-toggle="tab">II</a></li> <li><a href="#III" data-toggle="tab">III</a></li></ul><!--对应面板--><div class="tab-content"> <div class="tab-pane" id="I"> I I I I </div> <div class="tab-pane active" id="II"> II II II II </div> <div class="tab-pane" id="III"> III III III III </div></div><!--胶囊式选项卡 nav-pills data-toggle="pill"-->5.1.3JS选项卡
$(document).ready(function(){ $(".nav a").click(function(){ $(this).tab("show") });});5.1.4事件
1.Hiden.bs.tab：隐藏上一个元素
2.Show.bs.tab：显示当前元素
3.Hideen.bs.tab：隐藏上一个元素完成
4.Shown.bs.tab：显示当前元素完成
5.2.工具提示框
5.2.1基本用法：data-toggle、data-placement
5.2.2JS用法：
$(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip( //实现点击显示 { trigger:"click" } ); <!--JS实现--> $("#show").click(function(){ $('[data-toggle="tooltip"]').tooltip('toggle'); }); <!--事件--> $('[data-toggle="tooltip"]').on('show.bs.tooltip', function(){ $('#showdiv').css("background","darkviolet"); });});<button type="button" class="btn btn-danger" title="向左" data-toggle="tooltip" data-placement="left">向左</button><button type="button" class="btn btn-success" title="向上" data-toggle="tooltip" data-placement="top">向上</button><button type="button" class="btn btn-info" title="向下" data-toggle="tooltip" data-placement="bottom">向下</button> <button type="button" class="btn btn-warning" title="向右" data-trigger="click" data-toggle="tooltip" data-placement="right">向右</button> <!--js--><button type="button" class="btn bg-danger" id="show">显示</button><div id="showdiv"></div>5.3.弹出框和警告框
1.弹出框
<button type="button" class="btn btn-danger" title="tittle" data-toggle="popover" data-content="内容" data-placement="left">向左</button>2.警告框
<div class="alert alert-danger fade-in"> <button type="button" class="close" data-dismiss="alert">×</button> <p>内容</p> <button type="button" class="btn btn-danger" data-dismiss="alert">关闭</button></div>5.4.折叠
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#" data-toggle="collapse" data-target="#con1" data-parent="#accordion">No.1</a> </h4> </div> <div class="panel-collapse collapse" id="con1"> <div class="panel-body"> <p>内容1</p> </div> </div> </div> ......</div>5.5.焦点轮播
<div class="row"> <div class="col-md-3"> <!--焦点图容器：carousel_container--> <!--data-ride="carousel":页面开始就进行轮播--> <!--每一秒进行轮换--> <div data-ride="carousel" data-interval="1000" id="carousel_container" class="carousel slide"> <!--图片容器--> <div class="carousel-inner"> <div class="item"> <img src="..." alt="I"/> <div class="carousel-caption"> <h5>内容</h5> </div> </div> .....添加其他图片 </div> <!--小圆点儿容器--> <ol class="carousel-indicators"> <li data-slide-to="0" data-target="#carousel_container"></li> ...如上 </ol> <!--左右按钮容器--> <a href="#carousel_container" data-slide="prev" class="left carousel-control"> <span class="图标"></span> </a> <a href="#carousel_container" data-slide="next" class="right carousel-control"> <span class="图标"></span> </a> <!--prev为上一个--> <!--单击链接对href="#carousel_container"起作用，如果是button则为data-target=""--> </div> </div></div>- BootStrap基础知识学习-No.1
- Bootstrap-轮播图-No.1
- bootstrap 基础知识学习（导航+其他）
- bootstrap基础知识学习（下拉菜单+按钮）
- bootstrap 基础知识学习（图片+网格系统）
- bootstrap 基础知识学习（列表+表格）
- bootstrap基础知识
- bootstrap基础知识
- Bootstrap基础知识
- bootstrap学习笔记1
- bootstrap学习1
- bootstrap学习［1]
- bootstrap 学习（1）
- BootStrap学习笔记-1
- bootstrap学习笔记1
- Bootstrap 学习（1）
- bootstrap学习（1）
- 学习笔记-bootstrap(1)
- ACID特性理解
- 汇编指令大全
- T和Class<T>以及Class<?>的理解
- java 随笔--java成长路线
- linux(centOs 6.5)配置 phantomjs
- BootStrap基础知识学习-No.1
- 千杯毒酒
- MySQL 存储过程性能测试(Sysbench自定义lua脚本)
- 中断服务函数的写法
- Lua - 18
- 2012届KDD Cup 2011届KDD Cup 2009届KDD Cup
- 【Spring实战】----解析Spring AOP
- 快速破解哈希密文findmyhash
- MySql 常用语句
