太美了！CSS style n(*≧▽≦*)n
BootStrap
BootStrap真的是个非常棒的前端框架 n(*≧▽≦*)n
巨幕 一个显眼的提示.imax Σ(⊙▽⊙"a...
在这里显示效果不好(╬▔＾▔)凸
<div class="jumbotron">
<h1>Demos in BootStrap</h1>
<p>使用bootstrap进行布局，可以获得更好的视觉体验</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>
页头 与内容形成分隔.（我就是页头..）
效果如上面的部分
<div class="page-header">
<h1>页头 <small>与内容形成分隔</small></h1>
</div>
警告框 警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息.反正看起来挺美的｡◕‿◕｡
Oh snap! You got an error!
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
说明
样式分别有：success,info,warning,danger 直接写入class就可以获取想要的效果，下面附上带关闭按钮的代码。
<div class="alert alert-success alert-dismissible fade in" role="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
提示框 提示框一般用作一些说明.
danger
class="bs-callout bs-callout-danger"
danger
class="bs-callout bs-callout-danger"
info
class="bs-callout bs-callout-info"
内部h4标签用作title，p标签用作content
metro
额外的添加bs-callout-metro就可以让提示框扁平化
进度条 通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈.（可自定义穿插代码）
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%;">
60%
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
很帅是吧？进度动画和条纹（可以单独条纹不动，个人认为不好看）可以混搭的
进度条样式：progress-bar-success,progress-bar-info,progress-bar-warning,progress-bar-danger
通用写法：class="progress-bar progress-bar-warning progress-bar-striped active"
面板 某些时候你可能需要将某些 DOM 内容放到一个盒子里.
标题
标题
标题
标题
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">标题</h3>
</div>
<div class="panel-body">
这里是内容主体,标题部分可以根据需求去掉
</div>
</div>
well 把 Well 用在元素上，能有嵌入（inset）的的简单效果.
就像这样...
有3个尺寸供选择
class="well" class="well well-lg" class="well well-sm"
Tab 切换面板.
点击切换面板，这里是tab1，使用导航栏内a标签的 $.tab("show") 可以动态切换选项
这里是tab2，使用导航栏内a标签的 $.tab("show") 可以动态切换选项
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#tab1" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#tab2" role="tab" data-toggle="tab">Profile</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<p>点击切换面板，这里是tab1，使用导航栏内a标签的 $.tab("show") 可以动态切换选项</p>
</div>
<div class="tab-pane fade" id="tab2">
<p>这里是tab2，使用导航栏内a标签的 $.tab("show") 可以动态切换选项</p>
</div>
</div>
胶囊式导航
给ul添加 .nav-pills 类，可以给选项卡标签另一种样式
按钮 各种样式的按钮，可切换显示状态.
切换状态
添加了 data-loading-text 之后，就可以使用 $.button("loading") 和 $.button("reset") 来显示和重置状态.
轮显 漂亮的轮显（轮流显示）！
var slider = $("#homeBanner").slider({
id: "homeBanner",
imgs: [
"http://i2.tietuku.com/e5859ff3e6487575.png",
"http://i2.tietuku.com/884e69c2eb02316b.png",
"http://i2.tietuku.com/f07bd295f4cdbd7a.png",
"http://i2.tietuku.com/89e657a08f9f13f6.png",
"http://i2.tietuku.com/0f8738e9cfbb9485.png",
"http://i2.tietuku.com/462506e0ed7b0c25.png"
],
scale: 5 / 2,
border: true,
x: 4,
y: 3
});
分页 js结合bootstrap，简单快速的生成分页组件.
js+bootstrap
还是根本停不下来~
表格 多种样式的表格，总能满足你的需求.<在这里显示会稍有差别，我的CSS有点小出入>
基本样式
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
条纹状表格
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
带边框的表格
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap | |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
代码调用：
<table class="table"><table class="table table-striped"><table class="table table-bordered">
.........
</table></table></table>
说明：可以额外为表格加上鼠标悬停，紧缩和状态
鼠标悬停：
只需在class上加上 .table-hover 即可让表格的每一行响应鼠标悬停状态。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
紧缩表格：
只需在class上加上 .table-condensed 即可让表格更加紧凑，单元格中的内部（padding）均会减半。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
紧缩表格：
只需在class上加上 .table-condensed 即可让表格更加紧凑，单元格中的内部（padding）均会减半。
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
状态提示：
| Class | 描述 |
|---|---|
.active |
鼠标悬停在行或单元格上时所设置的颜色 |
.success |
标识成功或积极的动作 |
.warning |
标识警告或需要用户注意 |
.danger |
标识危险或潜在的带来负面影响的动作 |
黏住 在滚动的时候黏在屏幕固定位置.
方法一：使用js来实现：$(".slide-menu").affix({offset: {top:xxx} }); 这里的 top值 建议在初始化的时候动态获取
方法二：在想要浮动的标签加上 data-spy="affix" ，使用 data-offset-top="xx" 来让标签在什么高度开始浮动
注意： 无论哪一种方法，都要在style中添加 top:xxx 来设置浮动的位置
媒体对象 默认样式的媒体对象组件允许在一个内容块的左边或右边浮动一个多媒体内容（图像、视频、音频）.
-
某某回复：
呵呵
某某回复：
呵呵
-
XXX说：
我也这么想 =。=
头像 就是头像啦.
class="scale"
滚动监听 让你的菜单动起来.
很简单，一句话了事
$('body').scrollspy({ target: '.slide-menu' }) 用滚动的元素，绑定要监听元素(.nav)的父元素
注意
scrollspy还有其它要注意的东西，但是本站没有用到就不赘述了.
无耻的求推荐：您有没有对本文章感兴趣呢？（正确答案：有✧ (≖ ‿ ≖)✧）