Bootstrap常用样板
http://blog.csdn.net/Star_449/article/details/76098292
1、图片样式
1.1、.img-responsive：
直接为图片添加该样式，可以实现响应式图片
<div>
<img width="200"class="img-responsive" src="./1.gif" alt="嫌弃">
<p>内容</p>
</div>
1.2、.center-block：
图片居中样式，而不能使用.text-center样式
<div>
<img width="200"class="img-responsive img-circle center-block"src="./1.gif" alt="嫌弃">
<p>内容</p>
</div>
1.3、图片形状样式：
.img-rounded：圆角图片；
.img-circle：圆形图片；
.img-thumbnail：表框圆角；
<div>
<img width="200"class="img-responsive img-circle" src="./1.gif" alt="嫌弃">
<p>内容</p>
</div>
2、辅助类样式
2.1、文本颜色类：
.-text-muted（柔和的）、text-primary、.text-success、.text-info、.text-warning、.text-danger
2.2、背景颜色类：
. bg-primary、. bg -success、. bg t-info、. bg -warning、. bg –danger
2.3、三角符号：
<span class="caret"></span>
2.4、快速浮动类：
.pull-left（左浮动）、.pull-right（右浮动）；
2.5、清除浮动：
为父类添加.clearfix，可以清除浮动
<h2class="page-header">浮动和清除的应用</h2>
<div class="clearfix bg-info">
<ul class="list-unstyled">
<li class="pull-left">
<a href="#"><imgsrc="./1.gif" alt="嫌弃"></a><br>
<a href="#">嫌弃1</a>
</li>
<li class="pull-left">
<a href="#"><imgsrc="./1.gif" alt="嫌弃"></a><br>
<a href="#">嫌弃2</a>
</li>
<li class="pull-left">
<a href="#"><imgsrc="./1.gif" alt="嫌弃"></a><br>
<a href="#">嫌弃3</a>
</li>
<li class="pull-left">
<a href="#"><imgsrc="./1.gif" alt="嫌弃"></a><br>
<a href="#">嫌弃4</a>
</li>
</ul>
</div>
2.6、让内容块网页居中：
<divclass="center-block"></div>
3、CSS组件——下拉菜单
3.1、.dropdown：
将下拉菜单触发器和下拉菜单包含在其中（下来菜单父元素）
3.2、.data-toggle属性：
下拉菜单触发器。取值为“dropdown”
3.3、.dropdown-menu：
给<ul>制定下来菜单的样式
<div class="dropdown">
<button type="button" class="btnbtn-default" data-toggle="dropdown">
下拉菜单 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
</ul>
</div>
3.4、.dropup：向上弹出下来菜单
<div class="dropdown dropup">
<button type="button" class="btnbtn-default" data-toggle="dropdown">
下拉菜单 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li class="divider"></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
<li class="disabled"><ahref="#">菜单6</a></li>
</ul>
</div>
3.5、下拉菜单对齐方式：
.dropdown-menu-left和.dropdown-menu-right
3.6、.divider：
为下拉菜单添加分割线，用于多个链接分组
<divclass="dropdown">
<button type="button" class="btnbtn-default" data-toggle="dropdown">
下拉菜单 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<liclass="divider"></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
<li><a href="#">菜单6</a></li>
</ul>
</div>
3.7、.disabled：禁用的菜单项
4、CSS组件--按钮组
4.1、.btn-group：（按钮组：可以实现将一组按钮放在同一行）
<div class="btn-group">
<button type="button" class="btnbtn-info">star-1</button>
<button type="button" class="btnbtn-info">star-2</button>
<button type="button" class="btnbtn-info">star-3</button>
</div>
4.2、.btn-toolbar：按钮组工具栏（将多个按钮组放在其中）
<div class="btn-toolbar">
<divclass="btn-group">
<button type="button" class="btnbtn-info">star-1</button>
<button type="button" class="btnbtn-info">star-2</button>
<button type="button" class="btnbtn-info">star-3</button>
</div>
<divclass="btn-group">
<button type="button" class="btnbtn-primary">star-4</button>
<button type="button" class="btnbtn-primary">star-5</button>
<button type="button" class="btnbtn-primary">star-6</button>
</div>
<divclass="btn-group">
<button type="button" class="btnbtn-warning">star-7</button>
<button type="button" class="btnbtn-warning">star-8</button>
</div>
</div>
4.3、按钮组的尺寸：
.btn-group-lg、.btn-group-sm、.btn-group-xs、
4.4、.btn-group-vertical：垂直排列的按钮组
<div class="btn-group btn-group-vertical">
<button type="button" class="btnbtn-info">star-1</button>
<button type="button" class="btnbtn-info">star-2</button>
<button type="button" class="btnbtn-info">star-3</button>
</div>
5、CSS组件—按钮式的下拉菜单
5.1、按钮式下拉菜单：
<divclass="btn-group">
<button type="button" class="btnbtn-info" data-toggle="dropdown">
star-1 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><ahref="#">star-1-1</a></li>
<li><ahref="#">star-1-2</a></li>
<li><ahref="#">star-1-3</a></li>
</ul>
</div>
个人观点：按钮式下拉菜单与下拉菜单的表现形式相同，区别在于在代码中下拉菜单为：class="dropdown"而按钮式下拉菜单为：class="btn-group"，表明btn-group中包含了dropdown中的功能。
5.2、分裂式下拉按钮：
<div class="btn-group">
<button type="button"class="btn btn-info" >star-1 </button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span></button>
<ulclass="dropdown-menu">
<li><ahref="#">star-1-1</a></li>
<li><ahref="#">star-1-2</a></li>
<li><ahref="#">star-1-3</a></li>
</ul>
</div>
个人观点:分裂式下拉菜单只是为了美观而设计，并且将下来的功能转到下三角中，而文字按钮仅为一个按钮（PS：第三行中的dropdown-toggle是将下三角的边框也变成圆形边框）。
6、CSS组件--输入框组
6.1、.input-group：
只能用于文本框<input>,不能用于<select>和<textarea>
6.2、.input-grouop-addon：
用于在<input>前后添加额外元素，赋予一个人<span>元素即可。
6.3、注意：
将..input-grouop-addon和<input>元素包在.input-group之中
<divclass="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control"placeholder="test">
<spanclass="input-group-addon">.star</span>
</div>
6.4、.input-group-lg和.input-group-sm可以改变输入框的尺寸
6.5、.input-group-btn：
可以作为额外元素的按钮，应该是作为<button>的父元素。
7、CSS组件-标签页（选项卡）
7.1、.nav是标签的基类
7.2、.nav-tabs是标签页类样式
7.3、.active是标签页的状态类（垂直排列）
<ul class="navnav-tabs">
<li class="active"><ahref="#">star-1</a></li>
<li><ahref="#">star-2</a></li>
<li><ahref="#">star-3</a></li>
</ul>
7.4、.nav-pills胶囊式标签页
7.5、.nav-stacked胶囊式标签页堆放排列（垂直排列）
<ul class="navnav-pills nav-stacked">
<li class="active"><ahref="#">star-1</a></li>
<li><ahref="#">star-2</a></li>
<li><ahref="#">star-3</a></li>
</ul>
8、CSS组件—导航条
8.1、.navbar：导航栏的基类，用于<nav>元素
8.2、.navbar-default：导航栏默认样式，用于<nav>元素
8.3、.cotainer是<nav>的子元素。导航栏内容都放入其中
8.4、.navbar-header：导航栏头部样式
8.5、.navbar-brand：设置品牌图标样式
8.6、.collapse是折叠导航栏的样式的基类
8.7、.navbar-collapse是折叠导航栏样式
8.8、.nav是导航栏的链接基类
8.9、.navbar-nav是导航栏的链接样式
8.10、.navbar-from：导航栏表单，可以使表单元素排在同一行
8.11、.navbar-left和.navbar-right：组件排列。导航链接、表单、按钮或文本对齐
8.12、.navbar-btn：对于不在<form>中的<button>元素，实现垂直对齐
8.13、.navbar-text：对于导航栏的普通文本有了行距和颜色，通常用于<p>元素
8.14、.navbar-fixed-top：导航栏固定在顶部，用于<nav>元素。需要为<body>设置padding-top:70px；
8.15、.navbar-fixed-bottom：导航栏固定在底部，用于<nav>元素。需要为<body>设置padding-bottom:70px
8.16、.navbar-static-top：导航栏静止在顶部，用于<nav>元素。会随着滚动条移动而消失
8.17、.navbar-inverse：可以实现反色导航栏，用于<nav>元素。
<nav class="navbarnavbar-default navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navabr-header">
<a href="#"class="navbar-brand">Star</a>
<pclass="navbar-text">Welcome!</p>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-navnavbar-left">
<li class="active"><ahref="#">star-1</a></li>
<li><ahref="#">star-2</a></li>
<li><ahref="#">star-3</a></li>
<li><ahref="#">star-4</a></li>
<li><ahref="#">star-5</a></li>
</ul>
<form class="navbar-formnavbar-left">
<div class="form-group">
<input type="text"class="form-control" placeholder="Search">
</div>
<button type="button"class="btn btn-default">search</button>
</form>
</div>
</div>
</nav>
9、CSS组件—路径导航
9.1、.breadcrumb：赋给<ol>可以实现面包屑效果
9.2、.active赋给当前栏目，当前栏目不加链接
<olclass="breadcrumb">
<li><ahref="#">star-1</a></li>
<li><a href="#">star-2</a></li>
<li><ahref="#">star-3</a></li>
<li class="active">star-4</li>
</ol>
10、 CSS组件—缩略图
10.1、.thumbnail赋给<a>元素，可以实现缩略图样式。
10.2、.caption可以实现缩略图标题及描述
<divclass="row">
<div class="col-md-4">
<a href="#"class="thumbnail"><img src="./1.gif" alt="嫌弃"></a>
<div class="caption">
<h4 align="center">嫌弃</h4>
</div>
</div>
<div class="col-md-4">
<a href="#"class="thumbnail"><img src="./1.gif" alt="嫌弃"></a>
<div class="caption">
<h4 align="center">嫌弃</h4>
</div>
</div>
<div class="col-md-4">
<a href="#" class="thumbnail"><imgsrc="./1.gif" alt="嫌弃"></a>
<div class="caption">
<h4 align="center">嫌弃</h4>
</div>
</div>
</div>
11、 CSS组件—分页
11.1、.pagination赋给<ul>元素可以实现分页效果
11.2、«：上一页
11.3、»：下一页
11.4、.disabled：禁用状态
11.5、.active：激活状态
11.6、.pagination-lg：分页大尺寸
11.7、.pagination-sm：分页小尺寸
11.8、.pager可以实现翻页效果。上一页、下一页效果
<divclass="text-center">
<ul class="pagination pagination-lg">
<li><ahref="#">«</a></li>
<li><ahref="#">1</a></li>
<li><ahref="#">2</a></li>
<li><ahref="#">3</a></li>
<li><ahref="#">4</a></li>
<li class="active"><ahref="#">5</a></li>
<li><ahref="#">6</a></li>
<li><ahref="#">7</a></li>
<li><ahref="#">8</a></li>
<li><ahref="#">9</a></li>
<li><ahref="#">10</a></li>
<li><ahref="#">»</a></li>
</ul>
</div>
--------------------------------------------------------------------------
本文均为学习笔记，仅供个人参考。