Web开发领域存在大量的重复劳动。以创建一个菜单为例，不同的人或是同一个人在不同的时期去构建一个菜单，他创建出来的菜单格式都会存在差异；随着构件的菜单越来越多，我们会发现如果将构建菜单这件事形成一个框架，以后只要调用这个框架就能生成一个菜单，这样会极大地提高开发的效率。Bootstrap就是在这样的环境中产生。Bootstrap是一个用于构建响应式网站的前端框架，它将HTML，CSS和Javascript结合起来，为构建稳定的网站提供了基础的设施，提高了开发效率。Bootstrap为用户提供了一套基础的组建，展示出了很好的用户界面以及网站的交互能力。同时它也为用户提供了二次开发的可能性，如果你不喜欢某个bootstrap的默认界面元素，你可以通过配置LESS变量进行修改，经过一番定制，你一定可以得到适合自己需要的版本。
Bootstrap构建网站：包括一些基本的网站框架+预定义的CCS样式+内置的布局组件+支持的JavaScript插件。
一.网站框架这部分
A.默认网格系统的基本参数(12列，940px，不支持响应式布局等)
B.流式网格系统的列宽定义使用百分比，而不是像素(将某一行.row改成.row-fluid就会成为流式)
C.容器布局可以实现页面的固定宽度和居中的布局(<div class="container-fluid">...</div>)
D.响应式设计：针对浏览器设备对网页中的既有内容进行优化的方法。为适用不同的屏幕宽度，bootstrap使用CSS的媒体查询(media query)来检测浏览器视口的宽度。响应能力不是所有网站都需的，可以更具自己的需求进行添加和删除。
要想让bootstrap支持响应式布局，需要在<head>标签中添加<meta>标签以及<link>标签，比如：
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="bootstrap-responsive.css" rel="stylesheet">
</head>
</html>
二.预定义的CSS样式
这一部分主要定义了网页的基本排版，表格，表单，按钮，图片和图标的格式的使用方法。重点是列表，表格，表单，按钮的一些使用方法。
【列表】：无序列表，有序列表，定义列表；
无序列表：<ul><li></li><li></li>...<li></li></ul>，可以在相应的<ul>标签中添加class="unstyled"去掉无序列表前面的圆点
有序列表：<ol><li></li><li></li>...<li></li></ol>，样式中使用数字而非圆点
定义列表：<dl><dt><dd></dd></dt><dt><dd></dd></dt>...<dt><dd></dd></dt></dl>，没有块级的<li>元素，每个列表项由<dt>和<dd>组成；如果要让词条和解释并排显示，只要给<dl>标签上加上class="dl-horizontal"即可
【表格】：bootstrap支持的表格元素:<table><thead><tbody><tr><th><td><caption>等；如果想要一个简单的表格，内容间有少许内边距，同时还有水平分割线，只要给<table>添加.table类即可，会给每个<td>上方添加边框
除了基本的.table类之外，bootstrap还提供4个类为表哥添加不同的样式:.table-striped .table-bordered .table-hover和.table-condensed分别表示：带条纹背景表格，带边框表格，带悬停高度表格和紧缩的表格
可以添加给表格行的类：.success .error .warning .info适用于<tr>
【表单】：可选的表单布局+内置支持的表单控件+扩展的表单控件+设置表单大小+表单控件状态
可选表单布局：1.搜索表单(为<form>添加.form-search类，给<input>添加.search-query类)2.行内表单(为<form>添加.form-inline类)
3.横向表单($为<form>元素添加.form-horizontal类 $成对标签和控件包装在类为.control-group的<div>中$为每个标签添加.control-lable类$每个控件包装在类为.controls的<div>中，以便对齐)
内置的表单控件：1.输入框<input type="text" placeholder="Text input">2.文本区<textarea rows="3"></textarea>3.复选框和单选按钮<checkbox><radio>(让多个复选框或单选按钮在一行，可以给他们添加.inline类)4.选项列表<selece multiple="multiple"></select>
扩展表单控件：输入框的前置和后置组建：首先写一个类为.input-prepend或.input-append的<div>；然后在该<div>中将前置或后置内容放到类为.add-on的<span>中；最后将<span>放到相应的<input>元素的前面或是后面即可。
设置表单大小：1.设置输入控件的相对大小，通过在<input>中设置类为.input-mini .input-small .input-medium .input-large .input-xlarge等等
2.基于网格设置控件大小，通过在<input>中设置类为span*来基于网格设置控件大小。如果想让多个控件位列同一行，可以添加.control-row类以产生适当间距。
【按钮】：按钮可以使用下面这些类添加颜色class="..." btn btn-primary btn-info btn-success btn-warning btn-danger btn-inverse 等等，可以给连接或按钮添加.btn-large,.btn-small,.btn-mini类来改变按钮大小；添加.btn-block类使按钮宽度是100%;对于类.disabled可以实现禁用按钮操作。
三.内置的布局组件
这一部分主要讲解了导航条和媒体对象等。重点介绍：下拉菜单，按钮组，导航，导航条以及他们之间配合使用。
【下拉菜单】：下拉菜单以列表形式<ul>呈现<ul class="dropdown-menu"><li></li><li></li>...<li></li></ul>；为类.dropdown-menu添加.pull-right类可使下拉菜单右边缘与父对象右边缘对齐，在当前下拉菜单的任意<li>元素上添加.dropdown-submenu即可
【按钮组】：只要把相应的链接或按钮放在一个类为.btn-group的<div>中即可；如果是将多个按钮组放到一行上，可以使用类为.btn-toolbar的<div>来包装这些按钮组；要想把按钮垂直堆叠起来，可以在.btn-group后面添加一个.btn-group-vertical类。
【按钮下拉菜单】：将按钮和下拉菜单包装在一个.btn-group中即可，再加上一个<span class="caret"></span>.对于将下拉菜单改成上拉菜单，只要在.btn-group容器中再添加一个.dropup类就行；若还想让上拉菜单与开关按钮右对齐，在.dropdown-menu中再添加一个.pull-right类就行
例如：<div class="btn-group">
<button class="btn btn-danger">Danger</button>(用来形成某一形式的按钮)
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>(定义这一按钮为下拉按钮)
<ul class="dropdown-menu">(定义下拉菜单)
<li></li><li></li>...<li></li>
</ul>
</div>
【导航元素】：标签形导航：无序列表<ul>添加.nav和.nav-tabs类；胶囊型导航：用.nav-pills替代.nav-tabs类即可；垂直堆叠导航：再添加一个.nav-stacked类即可。
导航列表：带.nav类的无序列表，再添加一个.nav-list类就可以把它变成导航列表。
【导航加下拉菜单】：给一个列表项添加.dropdown类，然后给嵌套在这个列表项中的链接添加.dropdown-toggle类和data-toggle="dropdown"属性，再给嵌套在这个列表项中的无序列表元素添加.dropdown-menu类。
例如： <ul class="nav nav-tabs">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<b class="caret"></b></a>
<ul class="dropdown-menu">
<li></li><li></li>...<li></li>
</ul>
</li>
</ul>
【可切换的标签导航】：一定要分别为每个标签页(.tab-pane)定义一个唯一的ID，并把它们包装在.tab-content元素中。若让标签切换时有淡入淡出的动画，只要给每个.tab-pane加上.fade类即可。标签位置可以设置：底部(.tab-below)左侧(.tab-left)右侧(.tab-right)
例如： <div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Meats</a></li>
<li><a href="#tab2" data-toggle="tab">Fruits</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1"><p></p></div>
<div class="tab-pane" id="tab2"><p></p></div>
</div>
</div>
【导航条】：为保证导航条与页面同宽，可以把它放在类为.span12或者.container的容器元素中。通过添加.navbar的类定义导航条
【导航条菜单】：为导航条添加不同辅助类，可以改变它的定位方式。比如出现在页面顶部(.navbar-fixed-top)，底部(.navbar-fixed-bottom)，随页面滚动(.navbar-static-top)。为了让导航条具有响应能力，把需要隐藏的内容包装到类为.nav-collapse .collapse的<div>中。显示隐藏内容的按钮(链接)要有一个.btn-navbar类和两个data-*属性：data-toggle告诉javascript这个按钮做什么，data-target表示要切换的元素。若要创建反色导航条，在.navbar类后面添加.navbar-inverse类即可。
(响应式导航条的示例代码)例如：
<div class="header ">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"><span><span class="icon-bar"><span><span class="icon-bar"><span>
</a>
<a href="#" class="brand" >Project</a> //用来显示导航条的名字
<div class="nav-collapse collapse">
</div>
</div>
</div>
</div>
【其他导航】：面包屑式导航：一个类为.breadcrumb的无序列表，辅助类.divider能减轻颜色，减少字号。分页导航：给<div>添加.pagination类，还可以添加.pagination-centered类使分页导航居中。前后页导航：把一个无序列表包装在一个<div>中，定义.page类或者通过给相应的列表项添加.previous和.next类
【媒体对象】有两种媒体对象：.media和.media-list。如果准备的是一个无序列表，就是用.media-list；如果准备的只有一个<div>元素，那么就用.media。以下是创建媒体列表的代码。
例如： <ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64*64">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<p>......</p>
<div class="media"></div>(嵌套的媒体对象)
</div>
</li>
</ul>
四.支持的JavaScript插件
这里讲述了JavaScript插件，比如下拉菜单，传送带，模态框等等，它们为网站赋予交互能力，丰富了用户体验。一般来说，所有的bootstrap插件都可以使用两种方式来访问：内置的Data API和JavaScript代码两种方式。Bootstrap开发者希望用户通过JavaScript API使用所有插件，所有公开的API都是单个可连缀的方法，所有方法都可以接受一个可选对象，一个表示要调佣的方法字符串，或者什么参数也不接受。
例如：$('#myModal').modal('show')
这里我着重通过模态框的案例来分析如何使用支持的javaScript插件。
【模态框】：一个叠放在父窗口上的子窗口。创建模块框：
<div class=" modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body...</p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary">Save changes</a>
<a href="#" class="btn">Close</a>
</div>
</div>
关于模态框，重点是3个类。第一个.modal：用来把一个<div>标注为模态框；第二个.hide：告诉浏览器先把模态框隐藏起来；第三个.fade：模态框从无到有或是从有到无，淡入淡出的效果。
使用bootstrap的JavaScript Data API，需要设置几个数据属性，就可以实现模态框的调用；为此在作为开关的连接或按钮上设置data-toggle="modal"，再把data-target="#foo"设置为模态框的ID即可；
要通过JavaScript滴啊用id="myModal"的模态框，只需一行：$('#myModal').modal(options)
关于模态框的几个方法：1.选项$('#myModal').modal({keyboard:false}) 2.开关$('#myModal').modal('toggle')...................
关于模态框的事件：在模态框关闭之后弹出一个警告框：$('#myModal').on('hidden',function(){alert("Just do it!");})
1661
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
