转载

沉鱼落雁的CSS ✧ (≖ ‿ ≖)✧ BootStrap手册简化版本

快速上手

本文主要如何用漂亮的BootStrap来美化网页，并二次简化了官网版本。

注：BootStrap是依赖JQuery运行的，因此没有JQuery也是空谈。

我就是页头标题与内容的分隔.

代码：

<div class="page-header">   <h1>标题 <small>小标题...</small></h1> </div>

巨幕展现内容的关键主体.

效果：（直接放代码在本文效果不好，故采用图片形式）

沉鱼落雁的CSS ✧ (≖ ‿ ≖)✧ BootStrap手册简化版本

代码：

<div class="jumbotron">   <h1>我是巨幕的大标题</h1>   <p>我是巨幕的小标题</p>   <p><a class="btn btn-primary btn-lg" href="#" role="button">我是巨幕的按钮</a></p> </div>

按钮五彩缤纷，美轮美奂.

代码：

<button class="btn btn-primary" type="button">按钮</button>

切换状态

添加了 data-loading-text 之后，就可以使用 $.button("loading") 和 $.button("reset") 来显示和重置状态.

点我试试

警告框警告消息或反馈消息.

class="alert alert-success" role="alert"

class="alert alert-info" role="alert"

class="alert alert-warning" role="alert"

class="alert alert-danger" role="alert"

仔细看！ 这个警告框是可以关闭的.还可以附带个链接~

基础代码：

“成功”绿色提示：<div class="alert alert-success" role="alert">内容...</div> “信息”蓝色提示：<div class="alert alert-info" role="alert">内容...</div> “警告”黄色提示<div class="alert alert-warning" role="alert">内容...</div> “危险”红色提示<div class="alert alert-danger" role="alert">内容...</div>

带关闭按钮（×）的代码：

<div class="alert alert-warning alert-dismissible" role="alert">   <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>   <strong>小秘密！</strong> 其实关闭警告框就是从DOM中删除。 </div>

我是警告信息，我是alert.js

我可以可以为警告信息添加点击并消失的功能。当使用 .close 按钮时，它必须是 .alert-dismissible 的第一个子元素，并且在它之前不能有任何文本内容。

警告信息代码：

<div class="alert alert-danger alert-dismissible fade in"><button class="close" type="button" data-dismiss="alert"><span>×</span></button>   <h4>我是警告信息，我是alert.js</h4>   <p>我可以可以为警告信息添加点击并消失的功能。当使用 <code>.close</code> 按钮时，它必须是 <code>.alert-dismissible</code> 的第一个子元素，并且在它之前不能有任何文本内容。</p>   <p><button class="btn btn-danger" type="button">错了</button> <button class="btn btn-default" type="button">错了错了</button></p> </div>

提示框和警告框比，哪个更好看呢？"o((>ω< ))o"

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="bs-callout bs-callout-danger">   <h4>标题</h4>   <p>内容...</p> </div>

扁平化代码：

<div class="bs-callout bs-callout-info bs-callout-metro">   <h4>标题</h4>   <p>内容...</p> </div>

进度条展现项目的进度，我还会动呢！

45%（可自定义显示内容）

代码：

<div class="progress">     <div class="progress-bar" role="progressbar" style="width: 60%;">         60%     </div> </div>

颜色可以自定义，只需要改变class的值：

绿：class="progress-bar progress-bar-success" 蓝：class="progress-bar progress-bar-info" 黄：class="progress-bar progress-bar-warning" 红：class="progress-bar progress-bar-danger"

60%

来点好玩的：

35% Complete (success)

20% Complete (warning)

10% Complete (danger)

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

这里的动画可以自定义，代码是可以穿插的，比如我可以不要动，只要条纹：

这真的是太难看了！

代码：

<div class="progress">   <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">     <span class="sr-only">40% Complete (success)</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内容放到一个盒子里.

这个面板没有标题，在 class="panel panel-default" 内的class="panel-body"里面添加内容

标题

这里是内容主体，标题放在 class="panel-heading" 里面

标题

class="panel panel-primary"

标题

class="panel panel-success"

标题

class="panel panel-success"

标题

class="panel panel-info"

代码：

<div class="panel panel-default">     <div class="panel-heading">         <h3 class="panel-title">标题</h3>     </div>     <div class="panel-body">         这里是内容主体,标题部分可以根据需求去掉     </div> </div>

好！（Well）体现出内嵌（inset）效果.

看，我很“好”。

代码：

<div class="well">内容...</div>

有三种可选样式（尺寸）：

普通： 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">选项1</a></li>  <li><a href="#tab2" role="tab" data-toggle="tab">选项2</a></li> </ul> <div class="tab-content">  <div class="tab-pane fade in active" id="tab1">   <p>选项1内容...</p>  </div>  <div class="tab-pane fade" id="tab2">   <p>选项2内容...</p>  </div> </div>

胶囊式导航

给ul添加 .nav-pills 类，可以给选项卡标签另一种样式

媒体对象就像 QQ空间 Facebook/Twitter的评论或消息一样.

某某回复：

呵呵

某某回复：

呵呵
XXX说：

我也这么想 =。=

轮显像本站头部一样的漂亮/(≧▽≦)/

就像本站头部一样的漂亮~此代码来自@上位者的怜悯再次感谢他无私分享的精神！

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来实现：$(".slide-menu").affix({offset: {top:xxx} }); 这里的 top值 建议在初始化的时候动态获取

方法二：在想要浮动的标签加上 data-spy="affix" ，使用 data-offset-top="xx" 来让标签在什么高度开始浮动

注意： 无论哪一种方法，都要在style中添加 top:xxx 来设置浮动的位置

表格多种样式的表格，总能满足你的需求. <在这里显示会稍有差别，我的CSS有点小出入>

基本样式

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

条纹状表格

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

带边框的表格

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

代码调用：

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

紧缩表格

只需在class上加上 .table-condensed 即可让表格更加紧凑，单元格中的内部（padding）均会减半。

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

状态提示：

Class	描述
`.active`	鼠标悬停在行或单元格上时所设置的颜色
`.success`	标识成功或积极的动作
`.warning`	标识警告或需要用户注意
`.danger`	标识危险或潜在的带来负面影响的动作

分页百度或Google页底的12345...

代码：

<nav>   <ul class="pagination">     <li>       <a href="#" aria-label="Previous">         <span aria-hidden="true">«</span>       </a>     </li>     <li><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="#">5</a></li>     <li>       <a href="#" aria-label="Next">         <span aria-hidden="true">»</span>       </a>     </li>   </ul> </nav>

分页还有很多需要注意的，本站没有用到。需要的可以去官网查询。