bootstrap基础知识

2022-10-19 21:18:16

Bootstrap是Twitter推出的一款简洁、直观、强悍的前端开发框架。

Bootstrap基于 HTML、CSS、JAVASCRIPT。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。

~~~引入bootstrap的css和页面自身的css
~media="screen" //该样式表适用于屏幕类的设备
<link rel="stylesheet" href="http://www.w3cschool.cc/try/bootstrap/demo-v3/bootstrap.min.css" media="screen" />
<link rel="stylesheet" href="http://www.w3cschool.cc/try/bootstrap/demo-v3/custom.css" media="screen" />

~~~设置视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no" />

~~~让IE8支持HTML5标签和媒体查询

~~~导航和下拉列表
~ .navbar.navbar-inverse.navbar-fixed-top > nav.navbar-nav > .active
~ .dropdown > .dropdown-toggle + .dropdown-menu > li
~ .navbar-brand
~ .nav-header
~ .navbar-text

~~~浮动 pull-left pull-right
<nav class="navbar navbar-inverse navbar-fixed-up" role="navigation">
<ul class="nav navbar-nav">
<li class="active"><a>Home</a></li>
<li><a>Price</a></li>
<li><a>Contact</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Social</a>
<ul class="dropdown-menu">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</li>
</ul>
</nav>

~~~ 轮播
~ .carousel.slide > ( ol.carousel-indicators > li + li.active ) + ( .carousel-inner > (.item.active > img.img-responsive + .carousel-caption) + .item ) + (.left.carousel-control > .icon-prev ) + ( .right.carousel-control > .icon-next ) )

~~~按钮
~ .btn.btn-success.btn-lg
按钮基础类 .btn
按钮类型： .btn-warning, .btn-success, .btn-error btn-primary btn-info
按钮大小： .btn-lg, .btn-sm, .btn-xs

~~~图标
~ .icon-prev, .icon-next
<div id="carousel-example" class="carousel slide">
<ol class="carouse-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://www.w3cschool.cc/try/bootstrap/demo-v3/computer.jpg" class="img-responsive" alt="..." />
<div class="carousel-caption">
<h1>Large Desktops are everywhere</h1>
<p><button class="btn btn-success btn-lg">Try 30 days trial now</button></p>
</div>
</div>
<div class="item">
<img src="http://www.w3cschool.cc/try/bootstrap/demo-v3/mobile.jpg" class="img-responsive" alt="..." />
<div class="carousel-caption">
<h1>Mobile are outnumberings desktops</h1>
<p><button class="btn btn-success btn-lg">Try 30 days trial now</button></p>
</div>
</div>
<div class="item">
<img src="http://www.w3cschool.cc/try/bootstrap/demo-v3/cloud1.jpg" class="img-responsive" alt="..." />
<div class="carousel-caption">
<h1>Enterprises are adopting Cloud Computing fast</h1>
<p><button class="btn btn-success btn-lg">Try 30 days trial now</button></p>
</div>
</div>
<a class="left carousel-control" data-slide="prev"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next"><span class="icon-next"></span></a>
</div>

~~~栅格系统
~ .container.responsive 容器水平居中
~ .row 行
~ .col-lg-4 .col-md-4, .col-sm-4, .col-xs-4列

在现代 Web 开发中，有几个几乎所有的 Web 项目中都需要的组件。

Bootstrap 为您提供了所有这些基本的模块 - Grid、Typography、Tables、Forms、Buttons 和 Responsiveness。

此外，还有大量其他有用的前端组件，比如 Dropdowns、Navigation、Modals、Typehead、Pagination、Carousal、Breadcrumb、Tab、Thumbnails、Headers 等等。

有了这些，你可以搭建一个 Web 项目，并让它运行地更快速更轻松。

~~~ .table.table-bordered 表格 (.table-bordered:{border:#ddd})
~~~ .badge徽章文本
~~~ 表单
~ .form-horizontal

>> Bootstrap 3 CSS 概览
> HTML 5 文档类型（Doctype）
> 移动设备优先
Bootstrap 3 默认的 CSS 本身就是对移动设备友好的。Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport 元数据标签，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
> 响应式图片
通过添加 img-responsive class 可以让 Bootstrap 3 中的图片对响应式布局的支持更友好。让我们看看这个 class 包含了哪些 css 属性。其实质是为图片赋予了 max-width: 100%; 和 height: auto; 属性，可以让图片按比例缩放，不超过其父元素的尺寸。
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。
> 全局显示、排版和链接
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
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;
}

> 避免跨浏览器的不一致
Bootstrap 3，就像它之前的版本，使用了 Normalize，以建立跨浏览器的一致性。
> Container
Bootstrap 3 的 container class 用于包裹页面上的内容。让我们一起来看看下面这个 class
.container {
margin-right: auto;
margin-left: auto;
}
通过上面的代码，把 container 的左右边距交由浏览器决定。
.container:before,
.container:after {
display: table;
content: " ";
}
这会产生伪元素。设置 display 为 table，会创建一个匿名的 table-cell 和一个新的块格式化上下文。:before 伪元素防止上边距崩塌，:after 伪元素清除浮动。

如果 conteneditable 属性出现在 HTML 中，由于一些 Opera bug，围绕上述元素创建一个空格。这可以通过使用 content: " " 来修复。
.container:after {
clear: both;
}
它创建了一个伪元素，并确保了所有的容器包含所有的浮动元素。

Bootstrap 3 CSS 有一个申请响应的媒体查询，在不同的媒体查询阈值范围内都为 container 设置了max-width，用以匹配网格系统。

>> Bootstrap 网格系统
自版本 2.3.2 起，Bootstrap 提供了两种类型的网格。默认的网格系统是 940px 宽和 12 列( 每格60px宽 margin-left:20px)。您可以添加响应式的样式表让它随着呈现的视口调整宽度为 724px 和 1170px。
这里还设有一个流动网格系统，它是基于百分比的，而不是基于像素的。且可被扩展为像默认固定网格一样具有响应性。
~~~流动网格布局和固定网格布局
Bootstrap 使用 CSS 的 class "row" 来创建水平行，使用 CSS 的 class "spanx"（x 的值从 1 到 12）来创建垂直列。通过这两个就可以创建一个三列的网格（每一列包含一些文本内容），HTML 如下所示
<div class="container">
<div class="row">
<div class="span4"></div><div class="span3"></div><div class="span5"></div>
</div>
</div>

> 如何在固定网格中创建行
接下来，在我们继续其他实例之前，先来看看在固定网格中用来创建行和列的 CSS 规则。
.row {
margin-left: -20px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
line-height: 0;
content: "";
}
.row:after {
clear: both;
}

> 如何在固定网格中创建列
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
使用单独的 CSS 规则来设置列宽。具体如下面的表格所示
.span12 {
width: 940px;
}
.span11 {
width: 860px;
}
.span10 {
width: 780px;
}
...

> 添加响应性到默认网格
如果您想要给 Bootstrap 的默认网格添加响应性能，只需要在 HTML 文件的原生 CSS 后添加
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
默认网格系统发挥响应性有两个条件。当视口（网格渲染的可用空间）大于 1200px 时[通过 @media (min-width: 1200px) 获得]，当视口大于 768px 但小于 979px 时[通过 @media (min-width: 768px) 和 (max-width: 979px) 设置]。

> 偏移列：默认网格
偏移的宽度是在 Bootstrap CSS 中定义的。offset12 的最高左边距是 980px，offset1 的最低左边距是 100px。
<div class="row">
<div class="span4 offset4"></div>
</div>

> 嵌套列：默认网格
<div class="container">
<div class="row">
<div class="span7">
<div class="row">
<div class="span3"></div>
<div class="span4"></div>
</div>
</div>
<div class="span5"></div>
</div>
</div>

>> Bootstrap 布局
~~固定布局和流动布局响应布局
> 固定布局
固定布局的目的是为网页或 app 创建一个 940 像素（默认）宽的布局。
<div class="container">
<div class="row"><div class="span4"></div><div class="span8"></div></div>
</div>

> 流动布局
<div class="container-fluid">
<div class="row-fluid">
<div class="span3"> sidebar </div>
<div class="span9"> main </div>
</div>
</div>
.container-fluid{
padding-left:20px;
padding-right:20px;
}
.row-fluid{width:100%}
.row-fluid .span3{width: 23.404255317%;}

>> Bootstrap 响应式设计

媒体查询（Media Queries）会先检测设备的视口大小，然后加载特定于设备的样式。

第一个区域以 '@media (max-width: 480px)' 开始，为最大宽度为 480 像素的设备设置样式。

第二个区域以 '@media (max-width: 767px)' 开始，为最大宽度为 767像素的设备设置样式。

第三个区域以 '@media (min-width: 768px) 和 (max-width: 979px)' 开始，为最大宽度为 768 像素和最大宽度为 979 像素的设备设置样式。

下一个区域是为最大宽度为 979 像素的设备设置样式。所以是以 '@media (max-width: 979px)' 开始。

最后两个区域分别以 '@media (min-width: 980px)' 和 '@media (min-width: 1200px)' 开始，前一个是为最小宽度为 980 像素的设备设置样式，后一个是为最小宽度为 1200 像素的设备设置样式。

所以，这样样式表的基本作用就是，通过使用 'min-width' 和 'max-width' 属性，来根据设备的最大宽度和最小宽度决定使用的样式。

Bootstrap 有几个实用的用于开发对移动设备友好的布局的类。这些类可在 'responsive.less' 上看到。
.visible-phone .visible-tablet .visible-desktop .hidden-phone .hidden-tablet .hidden-desktop

>> Bootstrap 排版

h1~h6, p, address, strong, small, blockquote, ul li, dl dt dd, ol li
ul.unstyled 无圆点

>> Bootstrap 表格
table.table > thead(tr > th + th ..) + tbody ( tr > td + td)
.table.table-striped ~~斑马线表格

>> Bootstrap 表单
四种表单布局 - 垂直(默认).form-vertical 搜索内联水平
.well ~~灰色背景的圆角容器
垂直表单form-vertical label是块级的, label标签和文本框各占一行
<form class="well form-vertical">
<label>label name</label>
<input type="text" class="span3" /><span class="help-inline"> some help text</span>
<label><input type="checkbox"> check me out</label>
<button type="button" class="btn" >Submit</button>
</form>

水平表单form-horizontal label是左浮动固定宽度的，label标签和文本框同行位于左侧
~~~ .form-horizontal > fieldset( legend + .control-group(.control-label + .controls>input) + .control-group + .form-actions)
~~~ .help-inline 行内帮助文本， help-block块级帮助文本
~~~ .checkbox,.radio{padding-left:18px;}
.checkbox input[type="checkbox"], .radio input[type="radio"]{float:left; margin-left:-18px;}
<form class="form-horizontal">
<fieldset>
<legend>Bootstrap controls</legend>
<div class="control-group">
<label class="control-label" for="input01">input label:</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01" />
<p class="help-block">In additional to freeform text</p>
</div>
</div>
<div class="control-group">
<label class="control-label">Checkbox:</label>
<div class="controls">
<label class="checkbox"><input type="checkbox" />Option one</label>
</div>
</div>
<div class="form-actions">
<button class="btn btn-primary" type="submit">Save Changes</button>
<button class="btn">Cancel</button>
</div>
</fieldset>
</form>
~~~ <input type="text" readonly="true" /> <input type="text" disabled /> <button class="btn btn-primary" disabled></button> bootstrap已为禁用或只读的表单元素设置样式

~~~表单验证样式在control-group元素加上class(error, warning, success)即可
<form class="form-horizontal">
<fieldset>
<legend>bootstrap controls</legend>
<div class="control-group error">
<label class="control-label">User:</label>
<div class="controls">
<input type="text" class="input-xlarge" />
</div>
</div>
</fieldset>
</form>

搜索表单 form-search
<form class="well form-search">
<input type="text" class="search-query input-medium" /><button type="submit" class="btn" >Submit</button>
</form>
~~input-medium 中等宽度文本框， input-small 小宽度的文本框， input-xlarge 特大宽度文本框

内联表单form-inline label是inline-block的
<form class="well form-inline">
<input type="text" class="input-small" placeholder="email" />
<input type="text" class="input-small" placeholder="password" />
<label><input type="checkbox" />Remember me </label>
<button class="btn" type="submit">Submit</button>
</form>

>> Bootstrap 图标
> 作为 CSS Sprite 使用
所有的图标图像都捆绑到一起，并通过 background-position CSS 属性使用。图像文件是 glyphicons-halflings.png,所有的图标 class 都以 "icon-" 为前缀。Bootstrap 2.0 中定义了 120 个图标 class。
<button type="submit" class="btn"><i class="icon-search"></i> Search</button>
<button type="submit" class="btn"><i class="icon-search icon-white"></i> Search</button> ~~ icon-white得到白色图标
icon-user icon-upload icon-download ...
icon-align-left icon-align-right...

~~btn-toolbar > btn-group + btn-group(btn + btn ..)

~~~按钮调用： <button class="btn btn-primary">primary</button>
按钮类型： btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link
按钮大小： .btn-lg, .btn-sm, .btn-xs
块级按钮 btn-block
.btn-block {
display: block;
width: 100%;
padding-right: 0;
padding-left: 0;
}

.btn-block + .btn-block {
margin-top: 5px;
}

当前的活动按钮： active <button class="btn btn-primary active">激活状态的按钮</button>
禁用按钮：<button class="btn btn-info" disabled="disabled">不可用状态的按钮</button>
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
opacity: .65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}
禁用A标签表现的按钮 <a href="http://www.baidu.com" class="btn btn-primary disabled" role="button">primary</a>

可以通过 button、a 和 input 元素使用按钮 class。推荐通过 button 元素来使用
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input" />
<input class="btn btn-default" type="submit" value="Input" />

渐变背景
.btn-w3r {
background: #cb60b3; /* Old browsers */
background: -moz-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cb60b3), color-stop(50%,#ad1283), color-stop(100%,#de47ac)); / * Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* IE10+ */
background: linear-gradient(to bottom, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=0 ); /* IE6-9 */
}

>>> Bootstrap 图像
> img-rounded
.img-rounded {
border-radius: 6px;
}
> img-thumbnail
.img-thumbnail {
display: inline-block;
height: auto;
max-width: 100%;
padding: 4px;
line-height: 1.428571429;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
> .img-circle
.img-circle {
border-radius: 50%;
}

> 响应式图片 .img-responsive
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
这种响应式图片的局限是：无论设备屏幕大小都加载同样大的一张图；解决方案：HiSRC Jquery 插件

>> Bootstrap 使用清单组组件创建价格表
.list-group > .list-group-item.active + (.list-group-item > .list-group-item-heading + .list-group-item-text)
.list-group {
padding-left: 0;
margin-bottom: 20px;
}

.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #ffffff;
border: 1px solid #dddddd;
}

.list-group-item:first-child {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}

.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}

> 列表组徽章 badge
.list-group-item > .badge {
float: right;
}

.list-group-item > .badge + .badge {
margin-right: 5px;
}
<div class="container">
<div class="row">
<ul class="list-group col-lg-4">
<li class="list-group-item"><span class="badge">Very important</span>Unlimited Users</li>
<li class="list-group-item">Unlimited storage</li>
<li class="list-group-item">Forum support</li>
<li class="list-group-item">More....</li>
<li class="list-group-item">More.....</li>
</ul>
</div>
</div>

>> Bootstrap 导航
基本的基于标签和胶囊式标签的导航、堆叠的或垂直的基于标签和胶囊式标签的导航、基于标签和胶囊式标签的下拉菜单、使用导航列表创建堆叠导航、使用 JavaScript 创建可点击导航（不同的方向）。
> 标签式(tabs)的导航
.nav 和 .nav-tabs 用于创建基本的基于标签的导航。
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Practice Editor </a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>

.nav-tabs外包装一层div.tabbale，并引入bootstrap-tab.js即可实现标签切换。

> 堆叠的标签式导航
<div class="container">
<div class="row">
<div class="span8">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Practice Editor </a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>

> 胶囊式(pills)的导航
<div class="container">
<div class="row">
<div class="span8">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Practice Editor </a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>

> 堆叠的胶囊式导航
<div class="container">
<div class="row">
<div class="span2">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Practice Editor </a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>

> 基于标签的下拉菜单上拉菜单
dropdown, .dropdown-toggle, .dropdown-menu, .caret，divider

<div class="row">
<div class="span6">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Twitter Bootstrap</a></li>
<li><a href="#">Google Plus API</a></li>
<li><a href="#">HTML5</a></li>
<li class="divider"></li>
<li><a href="#">Examples</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">BackEnd<b class="caret bottom-up"></b></a>
<ul class="dropdown-menu bottom-up pull-right">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">PostgreSQL</a></li>
<li class="divider"></li>
<li><a href="#">Live Demos</a></li>
</ul>
</li>
</ul>
</div>
</div>

> 胶囊式下拉菜单
把上面的 nav-tabs 换成 nav-pills即可。

> 堆叠导航列表
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav nav-list">
<li class="nav-header">List header</li>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Applications</a></li>
<li class="nav-header">Another list header</li>
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
<li class="divider"></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
</div>

> 带图标的堆叠导航列表
<div class="container">
<div class="span6">
<ul class="nav nav-list">
<li class="nav-header">List header</li>
<li class="active"><a href="#"><i class="icon-white icon-home"></i> Home</a></li>
<li><a href="#"><i class="icon-book"></i> Library</a></li>
<li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
<li class="nav-header">Another list header</li>
<li><a href="#"><i class="icon-user"></i> Profile</a></li>
<li><a href="#"><i class="icon-cog"></i> Settings</a></li>
<li class="divider"></li>
<li><a href="#"><i class="icon-flag"></i> Help</a></li>
</ul>
</div>
</div>

>> Bootstrap 导航条
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a class="brand" href="#">w3cschool</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Services<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Web Design</a></li>
<li><a href="#">Web development</a></li>
<li><a href="#">Wordpress Theme development</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left">
<input type="text" class="search-query" placeholder="Search">
</form>
</div>
</div>
</div>

>> Bootstrap 内联标签和徽章
使用 Bootstrap，您可以创建内联标签（即 Label 和注释的文本）和徽章（即指标和未读计数）。
> 标签
<div class="row">
<div class="span12">
<p><span class="label">Default</span></p>
<p><span class="label label-success">Success</span></p>
<p><span class="label label-warning">Warning</span></p>
<p><span class="label label-important">Important</span></p>
<p><span class="label label-info">Info</span></p>
<p><span class="label label-inverse">Inverse</span></p>
</div>
</div>

> 徽章
<div class="row">
<div class="span12">
<p><span class="badge">1</span></p>
<p><span class="badge badge-success">2</span></p>
<p><span class="badge badge-warning">4</span></p>
<p><span class="badge badge-important">6</span></p>
<p><span class="badge badge-info">8</span></p>
<p><span class="badge badge-inverse">10</span></p>
</div>
</div>

>> Bootstrap 缩略图
使用 Bootstrap 创建缩略图，即图像、录像、文本的网格。展示产品图片的等用途
> .thumbnails .thumbnail

呈现更多内容的缩略图
<ul class="thumbnails">
<li class="span5">
<div class="thumbnail">
<img src="../bootstrap/shoes1.jpg" alt="product 1">
<div class="caption">
<h5>Product detail</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a href="#" class="btn btn-success">Buy</a> <a href="#" class="btn btn-warning">Try</a></p>
</div>
</div>
</li>
<li class="span5">
<div class="thumbnail">
<img src="../bootstrap/shoes2.jpg" alt="product 2">
<div class="caption">
<h5>Product detail</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a href="#" class="btn btn-success">Buy</a> <a href="#" class="btn btn-warning">Try</a></p>
</div>
</div>
</li>
</ul>

>> Bootstrap 进度条
> .progress > .bar
.progress.progress-striped > .bar
.progress.progress-striped.active > .bar
<div class="container">
<div class="row">
<div class="span4">
<h3>A basic Progress Bar with vertical gradient</h3>
<div class="progress">
<div class="bar" style="width: 60%;"></div>
</div>
<h3>A striped Progress Bar, uses gradient to create a striped effect</h3>
<div class="progress progress-striped">
<div class="bar" style="width: 60%;"></div>
</div>
<h3>An animated Progress Bar</h3>
<div class="progress progress-striped active">
<div class="bar" style="width: 50%;"></div>
</div>
</div>
</div>

其他颜色的进度条
.progress-info .progress-success .progress-danger .progress-warning
<div class="row">
<div class="span4">
<h3>Progress bars may also have additional colors</h3>
<div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped active" style="margin-bottom: 9px;">
<div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">
<div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped active" style="margin-bottom: 9px;">
<div class="bar" style="width: 80%"></div>
</div>
</div>
</div>

>> Bootstrap 面包屑导航
.breadcrumb > li(a + .divider) + li.active
<div class="container">
<div class="row">
<div class="span6">
<ul class="breadcrumb">
<li>
<a href="#">Home</a> <span class="divider">></span>
</li>
<li>
<a href="#">Tutorials</a> <span class="divider">></span>
</li>
<li class="active">HTML5</li>
</ul>
</div>
</div>
</div>

>> Bootstrap 分页
.pagination
<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
<li class="active">
<a href="#">1</a>
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>

只带有前后翻页的页码导航
.pager > li +li
<ul class="pager">
<li>
<a href="#">Previous</a>
</li>
<li>
<a href="#">Next</a>
</li>
</ul>

左右浮动的前后翻页
.pager > li.previous + li.next
<ul class="pager">
<li class="previous">
<a href="#">← Older</a>
</li>
<li class="next">
<a href="#">Newer →</a>
</li>
</ul>

>> Bootstrap 警告和错误
.alert > .close
.alert-block , .alert-heading
<div class="row">
<div class="span4">
<div class="alert">
<a class="close" data-dismiss="alert">×</a>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
</div>
</div>

<div class="alert alert-block">
<a class="close" data-dismiss="alert">×</a>
<h4 class="alert-heading">Warning!</h4>
What are you doing?! this will delete all files!!
</div>

提示类型: alert-error, alert-success, alert-info
<div class="alert alert-error">
<a class="close" data-dismiss="alert">×</a>
<strong>Error!</strong>This is a fatal error.
</div>
<div class="alert alert-success">
<a class="close" data-dismiss="alert">×</a>
<strong>Success!</strong>You have successfully done it.
</div>
<div class="alert alert-info">
<a class="close" data-dismiss="alert">×</a>
<strong>Info!</strong>Watch this, but you may forget.
</div>

>> Bootstrap LESS
Less 是一个 CSS 预处理器，让 CSS 具有动态性。您可以在 CSS 中使用 Bootstrap 的 Less 变量、mixins（混合）和 nesting（嵌套）。

>> Bootstrap 多媒体对象
我们可以在组件中使用图文混排，图片可以左对齐或者右对齐。媒体对象可以用更少的代码来实现多媒体对象与文字的混排。

你可以在HTML标签中添加以下两种形式来设置媒体对象：
.media: 该类允许将媒体对象里的多媒体（图像，视频）浮动到内容区块的左边或者右边。
.media-list: 如果你需要一个列表，各项内容是无序列表的一部分，可以使用该类。可用于评论列表与文章列表。

.media组件可以嵌套 ~~~实现图文左右2列布局
.media > a.pull-left( img.media-object ) + .media-body( media-heading)
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="/bootstrap/images/64.jpg"
alt="Media Object">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>

ul.media-list > li.media + li.media

>> Bootstrap面板

获取基础面板你只需要在<div>元素中添加 .panel 和 .panel-default 类即可。
使用.panel-heading类可以很简单的在你的面板中添加一个标题容器
使用 <h1> - <h6>元素并使用 .panel-title类到你的加一个预样式标题中。

<div class="panel panel-default">
<div class="panel-heading">
Panel heading without title
</div>
<div class="panel-body">
Panel content
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Panel With title
</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>

面板脚注
<div class="panel panel-default">
<div class="panel-body">
This is a Basic panel
</div>
<div class="panel-footer">Panel footer</div>
</div>

带警告色彩的面板
可以使用panel-primary, panel-success, panel-info, panel-warning, panel-danger类来设置带警告色彩的面板
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
This is a Basic panel
</div>
</div>

带表格的面板
.table类来设置无边框的表格。通过 .panel-body 类可以定义表格额外的文本内容
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
This is a Basic panel
</div>
<table class="table">
<th>Product</th><th>Price </th>
<tr><td>Product A</td><td>200</td></tr>
<tr><td>Product B</td><td>400</td></tr>
</table>
</div>

带列表组的面板
<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content.This is a Basic panel content.
This is a Basic panel content.This is a Basic panel content.
This is a Basic panel content.
</p>
</div>
<ul class="list-group">
<li class="list-group-item">Free Domain Name Registration</li>
<li class="list-group-item">Free Window Space hosting</li>
<li class="list-group-item">Number of Images</li>
<li class="list-group-item">24*7 support</li>
<li class="list-group-item">Renewal cost per year</li>
</ul>
</div>

>> Bootstrap Wells
如果你需要页面中有嵌入的效果，在Bootstrap中你只需要使用.well类即可
.well, .well-lg, .well-sm
<div class="well">Hi, am in well !!</div>
<div class="well well-lg">Hi, am in large well !!</div>
<div class="well well-sm">Hi, am in small well !!</div>

>> 模态对话框 modal
注意在页面底部引入bootstrap.min.js
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-success">Call to action</a>
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
触发弹出模态对话框
<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch demo modal</a></p>
或者用js
$('#example').modal(options);

options对象可以设置的选项有：
backdrop: false/true 是否显示半透明黑色遮罩背景。
keyboard: false/true 点击esc键是否关闭对话框
show: false/true 初始化时是否显示对话框 $('#example').modal({show:false});则不显示对话框
方法：
$obj.modal('toggle'); //切换对话框的显示隐藏。
$obj.modal('show'); //显示对话框
$obj.modal('hide'); //隐藏对话框
事件：
show: fn; 调用 $obj.modal('show')后被触发
shown: fn; 调用 $obj.modal('show')后且对话框完全渐现后触发
hide: fn;
hidden: fn;
$obj.bind('show',function(){ console.log('call show modal');});
$obj.modal('show'); // call show modal

>> Bootstrap Popover（弹出框）
rel="popover" data-content="some text" data-original-title="popover title"
<div class="container">
<h2>Example of creating Popover with Bootstrap</h2>
<div class="well">
<a href="#" id="example" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Bootstrap Popover">hover for popover</a>
</div>
</div>
$obj.popover(options);
options对象包含的选项有：
animation: boolean; 是否带css渐变过渡效果
placement: string | fn; 默认值是 'right'，可以是 top、bottom 和 left ，用于决定环绕锚文本周围的 Popover（弹出框）是位置。
selector: string，默认值是 false。把 Tooltip 对象授权给定的目标。
trigger: string，默认值是 'hover'，可以是 focus 和 manual
title: string | fn ,默认为'', 即默认不显示title属性的值
content:string | fn，默认值是 ''。即默认不显示 data-content 属性的值。
delay:number | object，默认值是 0。这决定了显示和隐藏 popover（弹出框）的等待时间，以毫秒为单位。如果值设置为一个数字，则等待时间会应用于显示和隐藏。如果值设置为一个对象，则结构为 delay: { show: 500, hide: 100}，其中 500 和 100 是以毫秒为单位的。

>> Bootstrap Dropdown（下拉菜单）
.dropdown > .dropdown-toggle( >.caret ) + .dropdown-menu ( li + li.divider + li)
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<a class="brand" href="#">w3cschool</a>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li class="divider"></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">HTML5</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

>> 滚动监听 scrollspy
data-spy="scroll" data-target="#navbarExample" data-offset="50"
<div class="span9 columns">
<h2>The links of the following navbar is going to be highlighted</h2>
<p>Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!</p>
<div id="navbarExample" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">w3resource</a>
<ul class="nav">
<li class="active"><a href="#php">PHP</a></li>
<li class=""><a href="#js">JS</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Databases<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><a href="#mysql">MySQL</a></li>
<li class=""><a href="#pgsql">PostgreSQL</a></li>
<li class=""><a href="#mgdb">MongoDB</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div data-spy="scroll" data-target="#navbarExample" data-offset="50" class="scrollspy-example">
<h4 id="php">PHP</h4>
<p>PHP, an acronym for Hypertext Preprocessor, is a widely-used open source general-purpose scripting language.
</p>
<h4 id="js">JS</h4>
<p>
JavaScript is a cross-platform, object-oriented scripting language developed by Netscape. JavaScript was created
</p>
<h4 id="mysql">MySQL</h4>
<p>
MySQL tutorial of w3resource is a comprehensive tutorial to learn MySQL. We have hundreds of examples covered,
</p>
<h4 id="pgsql">PostgreSQL</h4>
<p>
In 1986 the Defense Advanced Research Projects Agency (DARPA), the Army Research Office (ARO), the National
</p>
<h4 id="mgdb">MongoDB</h4>
<p>
how to prepare queries to fetch data against various conditions.
</p>
</div>
</div>

$('#navbarExample').scrollspy();
在 DOM 上创建和移除元素时使用 scrollspy（滚动监听）。但是，您必须调用 refresh 方法。
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});

使用 'offset' 方法来决定当计算滚动条位置时从顶部开始偏移的像素数。方法的类型是 number，默认值是 10。您需要增加或者减少这个值来让 scrollspy（滚动监听）正常工作。

一旦一个新的条目被 scrollspy（滚动监听）触发时，则触发 'activate' 事件。

>> Bootstrap 轮播
.carousel + carousel-inner (> item + item) + .carousel-control.left + .carousel-control.right

$('.carousel').carousel()
选项：
interval: 规定幻灯片轮换的等待时间，以毫秒为单位。值的类型为 number，默认值是 5000。如果为 false，轮播将不会自动开始循环。
pause: 规定当鼠标停留在幻灯片区域即暂停轮播，鼠标离开即启动轮播。值的类型为 string，默认值是 'hover'。

方法：
$('.carousel').carousel('cycle');
$('.carousel').carousel('pause');
$('.carousel').carousel(number); 将轮播定位到指定的帧上（帧下标以0开始，类似数组）。
$('.carousel').carousel('prev');
$('.carousel').carousel('next');

事件：
slide: 当 slide 实例方法被调用之后，此事件被立即触发。
slid: 当所有幻灯片播放完之后，此事件被触发。

>> Typeahead
在用户填写表单时，为用户提供提示或数据。

data-items, data-source
<div class="well">
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="["Ahmedabad","Akola","Asansol","Aurangabad","Bangaluru","Baroda","Belgaon","Berhumpur","Calicut","Chennai","Chapra","Cherapunji"]">
</div>
$('#inputId').typeahead()
可以通过dom传参或js传参如：
<input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" />
var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON'];
$('#search').typeahead({source: subjects})

$inp.typehead(options);
选项：
source: 规定包含查询时要显示的值的数据源。值的类型是 array，默认值是 [ ]。
items: 规定查询时要显示的条目的最大值。数据类型是 number，默认值是 8。
matcher: 决定查询是否匹配条目。带有一个单一的参数，即要测试查询的条目。当前查询通过 this.query 访问。返回一个布尔值 true，表示查询匹配。数据类型是 function。默认情况下是大小写不敏感的。
sorter: 用于自动分类结果。带有一个单一的参数，即具有 typeahead 实例范围的条目。当前查询通过 this.query 访问。数据类型是 function。默认值是精确匹配的，其他的值还可以是大小写敏感、大小写不敏感。
highlighter: 用于自动高亮突出显示结果。带有一个单一的参数，即具有 typeahead 实例范围的条目。数据类型是 function。默认情况下是高亮突出显示所有默认的匹配项。

>> 具有交互的按钮
data-loading-text="loading..." data-toggle="button"
.button-group[data-toggle="buttons-checkbox"]
.button-group[data-toggle="buttons-radio"]

<h3>Control state</h3>
<p><button id="fat-btn" data-loading-text="loading..." class="btn btn-primary">Loading State</button></p>
<h3>Single toggle</h3>
<p><button class="btn btn-primary" data-toggle="button">Single Toggle</button></p>
<h3>Checkbox</h3>
<p><div class="btn-group" data-toggle="buttons-checkbox">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Middle</button>
<button class="btn btn-primary">Right</button>
</div></p>
<h3>Radio</h3>
<p><div class="btn-group" data-toggle="buttons-radio">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Middle</button>
<button class="btn btn-primary">Right</button>
</div></p>
</div>

$('.nav-tabs').button() //其中 ' .nav-tabs ' 是包含按钮的 div 的 class。

方法：
<button class="btn mybtn1" data-toggle="button" >…</button> $('.mybtn1').button('toggle');
该方法切换按钮状态。赋予按钮被激活时的状态和外观。使用 'data-toggle="button"' 自动切换按钮为激活状态。
<button class="btn" data-loading-text="loading stuff..." >...</button>
该方法设置按钮状态为 loading - 即将按钮置为禁用状态并将文字内容切换为 loading。通过使用 'data-loading-text' 属性可以在按钮元素上定义 loading 文本。

如果您使用 Firefox 浏览器，您将发现，在页面加载之后，禁用状态不会自动解除，请使用 'autocomplete="off"' 来避免这个问题。

$().button('reset')
$().button(string) //该方法重置按钮状态，并将按钮上的文本重置为传入的值。

>> Bootstrap 折叠
.accordion > .accordion-group( > .accordion-heading(>accordion-toggle) + .accordion-body(>accordion-inner) ) + .accordion-group

<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Click me to exapand. Click me again to collapse. Part I.
</a>
</div>
<div id="collapseOne" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Click me to exapand. Click me again to collapse. Part II.
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Click me to exapand. Click me again to collapse. Part III.
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>

这里有三点需要注意。
第一，添加 data-toggle="collapse" 到您要点击的链接上，用来展开或折叠组件。
第二，添加一个 href 或一个 data-target 属性到父组件，它的值为子组件的 id。
第三，添加一个 data-parent 属性用来创建手风琴式的效果。data-parent 属性的值与主容器 div （保存整个手风琴组件）的 id 属性的值相同。如果您想要创建一个简单的折叠组件，不需要像手风琴那么复杂，就不需要添加这个属性。

$(".collapse").collapse() //触发折叠

选项：
parent:值的类型为 Selector。默认值为 false。当父元素显示时，父元素下所有的可折叠元素是关闭的。
toggle:值的类型为 Boolean。默认值为 true。当被调用时，切换所有的可折叠元素。

方法：
.collapse('toggle'):展示或隐藏一个可折叠的页面元素。
.collapse('show'):展示一个可折叠的页面元素。
.collapse(hide):隐藏一个可折叠的页面元素。

事件：
show:当 show 实例方法被调用之后，此事件被立即触发。
shown:当可折叠页面元素显示出来之后（同时 CSS 过渡效果也已执行完毕），此事件被触发。
hide:当 hide 实例方法被调用之后，此事件被立即触发。
hidden:当可折叠页面元素向用户隐藏之后（同时 CSS 过渡效果也已执行完毕），此事件被触发。

码农公寓

相关文章