首页 > 代码库 > 【BootStrap】 布局组件 II
【BootStrap】 布局组件 II
BootStrap 布局组件 II
■ 分页
BS中通过.pagination的ul元素来实现一个分页集合，一个典型的分页如下：
<ul class="pagination"> <li><a href="#">«</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="#">»</a></li></ul>
得到效果：
由于分页键的本体仍然是一个超链接，所以依然可以适用.active和.disabled类来表示选中和禁用某个分页。同导航菜单中提到过的一样，这里的选中和禁用只是形式上的，实质上的选中和禁用应该要通过JS的逻辑判断和运算来实现。另外，还有.pagination-lg, .pagination-sm可以控制分页集合的整体大小。
这是巨细的分页方式，还有一种分页方式就是通过当前页面的上一页和下一页进行页面跳转。这种上下页的翻页用的是.pager的ul元素实现。同时ul元素中可以让某两个li元素分别称为.previous和.next，BS会把这两个元素自动相对ul的父元素左对齐和右对齐使得更有上下页翻页的味道。实例：
<ul class="pager"> <li class="previous"><a href="#">←previous</a></li> <li class="next"><a href="#">next→</a></li></ul>
效果：
也可以在li元素中添加.disabled来使某个翻页键看起来被禁用了一样。
■ 标签
标签通常是以一个span的形式跟在其他一些文字后面，从功能上来说可以用来计数，提示等等。BS提供的标签的类主要有以下这些：
.label 标签基础类
.label-default 标签默认样式
.label-info/previous/warning/danger/success 不同着色的标签类型
下面的实例试着将标签添加到导航菜单以及按钮中的文字中去：
<ul class="nav nav-tabs"> <li><a href="#">已读消息<span class="label label-default">20</span></a></li> <li><a href="#">未读消息<span class="label label-danger">5</span></a></li> </ul> <br> <button class="btn btn-default">Button<span class="label label-success">成功</span></button>
效果：
■ 徽章
上面这个未读消息的标签，怎么看怎么有点违和感，主要是因为平时网页上看到的提示未读消息的往往是个圆圆的提示，这就是徽章。换言之，徽章和标签在用法上很类似，只不过徽章是椭圆形的，外形和标签不同。
另外，徽章似乎没有那么多种着色方案，只有.badge类的span，颜色是灰色的徽章。比如：
<ul class="nav nav-tabs" id="mynav"> <li><a href="#">已读消息<span class="badge">20</span></a></li> <li><a href="#">未读消息<span class="badge">5</span></a></li> <li><a href="#">垃圾箱<span class="badge">12</span></a></li> </ul>
效果：
■ 页面标题
这个页面标题不是<head>里面的<title>的标题。而是在页面上，显示的一个较为醒目的提示文字。用法非常简单，用一个.page-header的div来总括标题即可：
<body> <div class="page-header"> <h1>Hello,<small>World</small></h1> </div> <p>Here is some content</p></body>
效果：
可以看到，BS自动为标题添加了一条下划线以隔开标题和内容。
■ 缩略图
在BS的CSS那篇曾经说到过关于BS中图片的一些样式，比如img-thumbnails等等，这些可以看做是图片的静态样式，而缩略图这个组件，可以让图片有一点动态效果。缩略图用到的是.thumbnail这个类，通常用超链接标签a来包裹一个img，一个常见的缩略图的写法应该是：
<a class="thumbnail" href="#"> <img src="xxx.jpg" alt="Some Text" /></a>
这样得到的一个缩略图，外面有一圈灰色的相框，当鼠标移动到图片上面时这圈相框会变成蓝色，就有了一定的动态效果（也是因为标签是a的原因）
通常在缩略图的附近应该要有一些文字按钮等附加的东西，可以用一个div把它们包起来就好了。比如下面这个实例：
<div class="col-sm-6 col-md-3"> <a class="thumbnail"> <img src="../photo.jpg" alt="通用的占位符缩略图"> </a> <div class="caption"> <h3>缩略图标签</h3> <p>一些示例文本。一些示例文本。</p> <p> <a href="#" class="btn btn-primary" role="button"> 按钮 </a> <a href="#" class="btn btn-default" role="button"> 按钮 </a> </p> </div> </div>
效果：
■ 警告框
可以用.alert类的div用于警告框的创建，一个简单的警告框可以包含.alert alert-xxx alert-dismissable这几个类：
.alert类是警告框的基础类
.alert-xxx代表不同严重程度的警告框，比如alert-info,alert-warning,alert-danger,alert-success
.alert-dismissable可以让我们为警告框添加了一个叉，让用户可以在看完警告之后关闭警告框。
实例：
<div class="alert alert-success alert-dismissable"> <button class="close" data-dismiss="alert">x</button> <p>这是一条成功消息</p></div><div class="alert alert-warning alert-dismissable"> <button class="close" data-dismiss="alert">x</button> <p>这是一条警告消息</p></div><div class="alert alert-danger alert-dismissable"> <button class="close" data-dismiss="alert">x</button> <p>这是一条错误消息</p></div>
效果：
在这个实例中，消息是会自动浮动到最上面的，也就是说叉掉最上面的成功消息之后，剩下两个消息会往上移动。这是因为在删掉成功消息后，成功消息的那个div整个都被删除了。虽然看着很合理，但是我试了一下把这几条消息放到同一行的并排的几个网格中之后，发现不对。。删掉最左边的消息之后，右边的格式会发生某种不可描述的变化，我猜可能是BS设定的CSS和我给出的冲突了。所以从最佳实践的角度来说，还是应该把这些消息尽量铺满一整行地显示，以体现BS的实用性。
顺便一提，如果想让消息的提示文字变成一个链接，且匹配这个消息的配色的话，那么BS为<a>提供了一个.alert-link类，可以用.alert-link的a来代替上面的p元素。
■ 进度条
一个基本的进度条的结构：
先创建一个.progress的div，在这个div中加入一个.progress-bar的div，.progress-bar的div有css属性width，用百分比来调节这个width属性就是模拟了进度条的读条状态了。如果想要更加友好点可以考虑在这个div中加入一个<span class="text-center">里面放上一些提示文字。下面是一个通过设置定时来实现动态进度条的实例：
<script> var progress = "0%"; function startCount(){ progress = parseInt(progress.replace("%","")); progress += 1; $("#progressbar").css({"width":progress.toString()+"%"}); if (progress > 10) { $("#progressbar").find("span.text-center").text("已完成" + progress.toString() + "%"); } if (progress < 100){ t = setTimeout("startCount()",50); } else{ clearTimeout(t) } progress = progress.toString()+"%" } $(document).ready(function(){ $("#test").click(function(){ startCount() }); }); </script></head><body> <div class="container"> <div class="progress"> <div class="progress-bar" role="progressbar" style="width:0%" id="progressbar"> <span class="text-center"></span> </div> </div> <button id="test">Start</button> </div></body>
效果：
进度条也有很多样式，比如
progress-bar-striped 带条纹的进度条
progress-striped 这个类是添加在比较上层的.progress的那个div里面，作用和progress-bar-striped一样都是让进度条带条纹，然后.progress progress-striped的div后面还可以再加个.active使得进度条的条纹也会动起来，看起来更加漂亮。
progress-bar-info/success/warning/danger 各种配色的进度条
单纯搞一个进度条甚至一个会动的进度条不是什么难事，难的是如何将进度条和实际的业务联系起来，使得进度条真的可以用来反映工作进度。
■ 列表组
列表组是一个不怎么常见的组件，其用法是向ul添加.list-group然后向此ul中的所有li元素添加.list-group-item类。如此可以得到一个简单的列表组：
<ul class="list-group"> <li class="list-group-item">Item1</li> <li class="list-group-item">Item2</li> <li class="list-group-item">Item3<span class="badge">new</span></li> </ul>
效果：
这种的列表框只是展示，没有点击等功能。如果需要点击（也就是说列表框中的项应该是超链接的话）就只要把ul和li分别替换成div和a即可。替换成a之后自然也就可以进行.active和.disabled的操作了。
■ 面板
总的来说面板就是一块显示信息的地方，BS中的面板基础类是.panel，一个简单的面板应该是这样的：
<div class="panel panel-default"> <div class="panel-heading"> <h3>This is panel title</h3> </div> <div class="panel-body"> <p>this is some content</p> </div> <div class="panel-footer"> <p>some footage</p> </div> </div>
效果：
如此，一个面板有面板头（放置标题），面板体（必须存在，放置内容），和脚注部分组成。面板体中可以放各种各样的元素比如放个表格，列表组什么的使面板更加丰富。除了默认的这种灰灰的panel-default面板样式之外，我们还有panel-info/primary/warning/danger/success等各种不同的配色方案。需要注意的是脚注不属于面板的前景内容之一，所以即使配了色改变的仅仅是面板头和边框的颜色，脚注依然是灰灰的。
顺便提一下，当要往面板体中加入表格时，可以不把表格写在面板体的div中，而是直接独立的接在面板头div的后面，成为面板头div的同级元素，这样得到的表格和面板头是无缝衔接的。其他的一些元素像列表组，导航菜单等等也都是这么个意思。总之.panel-body就像是一个.container，可以存放很多东西，但存放的同时也给他们加了一些margin，padding之类的样式参数。
■ 凹陷容器
.well类的div在视觉效果上是一种凹陷进去的容器，写出来供参考：
<div class="well"> <p>This is well</p></div>
【BootStrap】 布局组件 II