Bootstrap常用样板

http://blog.csdn.net/Star_449/article/details/76098292

1、图片样式

1.1、.img-responsive：

直接为图片添加该样式，可以实现响应式图片

<div>

</div>

1.2、.center-block：

图片居中样式，而不能使用.text-center样式

<div>

</div>

1.3、图片形状样式：

.img-rounded：圆角图片；

.img-circle：圆形图片；

.img-thumbnail：表框圆角；

<div>

</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、三角符号：

2.4、快速浮动类：

.pull-left（左浮动）、.pull-right（右浮动）；

2.5、清除浮动：

为父类添加.clearfix，可以清除浮动

<h2class="page-header">浮动和清除的应用</h2>

</li>

</li>

</li>

</li>

</ul>

</div>

2.6、让内容块网页居中：

<divclass="center-block"></div>

3、CSS组件——下拉菜单

3.1、.dropdown：

将下拉菜单触发器和下拉菜单包含在其中（下来菜单父元素）

3.2、.data-toggle属性：

下拉菜单触发器。取值为“dropdown”

3.3、.dropdown-menu：

给<ul>制定下来菜单的样式

下拉菜单 <span class="caret"></span>

</button>

</ul>

</div>

3.4、.dropup：向上弹出下来菜单

下拉菜单 <span class="caret"></span>

</button>

</ul>

</div>

3.5、下拉菜单对齐方式：

.dropdown-menu-left和.dropdown-menu-right

3.6、.divider：

为下拉菜单添加分割线，用于多个链接分组

<divclass="dropdown">

下拉菜单 <span class="caret"></span>

</button>

<liclass="divider"></li>

</ul>

</div>

3.7、.disabled：禁用的菜单项

4、CSS组件--按钮组

4.1、.btn-group：（按钮组：可以实现将一组按钮放在同一行）

</div>

4.2、.btn-toolbar：按钮组工具栏（将多个按钮组放在其中）

<divclass="btn-group">

</div>

<divclass="btn-group">

</div>

<divclass="btn-group">

</div>

4.3、按钮组的尺寸：

.btn-group-lg、.btn-group-sm、.btn-group-xs、

4.4、.btn-group-vertical：垂直排列的按钮组

</div>

5、CSS组件—按钮式的下拉菜单

5.1、按钮式下拉菜单：

<divclass="btn-group">

star-1 <span class="caret"></span>

</button>

</ul>

</div>

个人观点：按钮式下拉菜单与下拉菜单的表现形式相同，区别在于在代码中下拉菜单为：class="dropdown"而按钮式下拉菜单为：class="btn-group"，表明btn-group中包含了dropdown中的功能。

5.2、分裂式下拉按钮：

<ulclass="dropdown-menu">

</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">

<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>

7.4、.nav-pills胶囊式标签页

7.5、.nav-stacked胶囊式标签页堆放排列（垂直排列）

</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>元素。

<pclass="navbar-text">Welcome!</p>

</div>

</ul>

</div>

<button type="button"class="btn btn-default">search</button>

</form>

</div>

</nav>

9、CSS组件—路径导航

9.1、.breadcrumb：赋给<ol>可以实现面包屑效果

9.2、.active赋给当前栏目，当前栏目不加链接

<olclass="breadcrumb">

</ol>

10、 CSS组件—缩略图

10.1、.thumbnail赋给<a>元素，可以实现缩略图样式。

10.2、.caption可以实现缩略图标题及描述

<divclass="row">

</div>

</div>

</div>

11、 CSS组件—分页

11.1、.pagination赋给<ul>元素可以实现分页效果

11.2、&laquo：上一页

11.3、&raquo：下一页

11.4、.disabled：禁用状态

11.5、.active：激活状态

11.6、.pagination-lg：分页大尺寸

11.7、.pagination-sm：分页小尺寸

11.8、.pager可以实现翻页效果。上一页、下一页效果

<divclass="text-center">

<li><ahref="#">&laquo</a></li>

<li><ahref="#">&raquo</a></li>

</ul>

</div>

--------------------------------------------------------------------------

本文均为学习笔记，仅供个人参考。