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>
■ 模态对话框
一般对话框可以用alert，comfirm等函数来调用，但是这些对话框普遍比较丑而且独立于页面存在。Bootstrap自带了一种在页面内的对话框，被称为模态对话框，这种对话框比较漂亮同时支持比较*的定义。一个模态对话框的定义如下：
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<!-- fade这个class指出了对话框以何种效果出现，fade是有淡入淡出效果的 -->
<div class="modal-dialog"> <!-- 对话框div -->
<div class="modal-content"> <!-- 对话框内容div -->
<div class="modal-header"> <!--对话框内容分成了三部分：header,body和footer，其中内容都可以*定义 -->
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Hello World</h4>
</div>
<div class="modal-body">
Some message added here.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm" data-dismiss="modal">close</button>
<button type="button" class="btn btn-sm btn-danger">delete</button>
</div>
</div>
</div>
</div>
data-dismiss这个属性指出了点击某个元素可以关掉这个模态框（这个属性之前在flask的flash消息那里也接触到过）。在页面中写完这个模态框之后，它并不会马上出现，而是需要有data-toggle的DOM来调用它。比如我们在页面上设计一个超链接点击：<a href="#" data-toggle="modal" data-target="#myModal">test</a>。点击这个链接之后，这个模态框就会跳出来了。点击框上的叉，close按钮或者框外任何变暗的地方都可以dismiss掉这个框。
● 关于点击框外区域框就自动关闭的问题
通过上面的方法得到的模态框，如果点击框外的区域，默认行为是和点击close按钮一样的，这个功能有时候很好，有时候却是多余的。如果想要去除这个功能，那么可以在role是dialog即最外面的那层div中增加两个属性：aria-hidden="true"和data-show="false"。加上这两个属性之后，再为这个div增加一些modal属性，这个操作用jQuery来表示的话就是：
$("#infoModal").modal({backdrop:"static",keyboard:false});。前者那个属性就是设置点击框外区域是否关闭框的，而后者是设置按下键盘上的ecs键会不会关掉框，false即不会。
● 模态框的一些回调方法
在模态框决定被展示出来（show方法被调用），经过动画效果模态框完整展示出来，模态框被决定关闭（hide方法被调用），模态框完全被隐藏。在这四个时间点上，模态框各自开放了一个回调点供回调函数使用。使用的方法是这样的：
$("#infoModal").on("show.bs.modal",function(){...}) 第一个回调点
$("#infoModal").on("shown.bs.modal",function(){...}); 第二个回调点
$("#infoModal").on("hide.bs.modal",function(){...}); 第三个回调点
$("#infoModal").on("hiden.bs.modal",function(){...}); 第四个回调点
■ 弹出框的使用
弹出框也是一个友好性比较高的bs插件，当客户端点击一个可点击的组件比如<a>或者<button>的时候，在一定条件下可以在这个组件的四周弹出一个像漫画里面的话语框一样的弹出框。下面讲一下它的基本用法。
首先是HTML层面的准备，比如：
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Some Content">
Popover on 左侧
</button>
data-toggle="popover"注册了这个弹出框，设置data-placement可以决定弹出框向哪个方向弹出，默认是右侧，这里写left就会在左侧弹出。data-content则是指出了弹出框的内容，如果写在HTML里面就是指出了一些默认显示的内容。data-container指出的是新加入页面的这个弹出框元素放到哪个既存元素下面，一般情况下body就可以了，默认值也是body。顺便一提，如果需要弹出框有标题和内容两部分像panel那样的话那么可以再加上一个title参数。
在有了HTML作为基础之后，可以到JS中调用popover方法来显示弹出框。基本的用法是：
//在合适的地方调用popover，比如在点击本元素时:
$('button').click(function(event){
$(this).popover('show');
});
这个是最基本的使用。其实popover方法中有很多参数，比如'show'，'hide'，'toggle'分别是指出了当前调用要让弹出框以何种形式出现。除此之外，HTML中出现的各个属性也都可以在popover方法的参数中进行设置。更多详细的参数可以参考官方文档【https://v3.bootcss.com/javascript/#popovers-examples】
● 消失更快的弹出框
在上面这样的代码中搞出来的弹出框，点击按钮的时候会出现弹出框，但是要再点击一下按钮弹出框才会消失。一般映像中弹出框似乎只要点击页面上任何一处就应该消失的。打造这种更方便的消失的弹出框,本质是让弹出框的data-trigger从默认的click改成focus。此外还需要将HTML中设计的<button>改成<a>然后添加上role="button"并且加上tabindex属性。比如下面这样：
<a id="test" class="btn btn-default" role="button" data-container="body" data-toggle="popover" data-content="Hello" data-trigger="focus" data-placement="bottom" tabindex="0" title="Test">
测试
</a>
这个就是一个随便点击一下哪里就会消失的弹出框了。我还给他加上了title。