转载

沉鱼落雁的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的评论或消息一样.

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

    某某回复:

    呵呵

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

    某某回复:

    呵呵

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

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

  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • »

代码:

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

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

关于记不记得住的问题

很多人问我,如果记不住这些代码怎么办??其实这些都不用去记的,只要用的多,自然就记住了。

暂时先写到这,有更多的想法我会继续写下去的。

本文为半原创,作者@b1ta

无耻的求推荐:您有没有对本文章感兴趣呢?(正确答案:有✧ (≖ ‿ ≖)✧)

(●'◡'●)ノ♥

那么点右下方的推荐吧...~/(≧▽≦)/~

(┳_┳)...

我会再努力的...(☍﹏⁰)

那么,为了鼓励我,点右下方的推荐如何?✧ (≖ ‿ ≖)✧

正文到此结束
Loading...