【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