Bootstrap介紹
Bootstrap是Twitter開源的基於HTML、CSS、JavaScript的前端框架。
它是為實現快速開發Web應用程序而設計的一套前端工具包。
它支持響應式布局,並且在V3版本之后堅持移動設備優先。
為什么要使用Bootstrap?
在Bootstrap出現之前:
命名:重復、復雜、無意義(想個名字費勁)
樣式:重復、冗余、不規范、不和諧
頁面:錯亂、不規范、不和諧
在使用Bootstrap之后: 各種命名都統一並且規范化。 頁面風格統一,畫面和諧。
Bootstrap下載
我們使用V3版本的Bootstrap,我們下載的是用於生產環境的Bootstrap。
Bootstrap環境搭建(預編譯版)
目錄結構:
bootstrap/
├── css/
│ ├── bootstrap.css // Bootstrap主要導入這個css
│ ├── bootstrap.css.map // css源碼映射表
│ ├── bootstrap.min.css // css的壓縮版
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css // Bootstrap的自帶的主題樣式
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js // Bootstrap的js插件
│ └── bootstrap.min.js // 壓縮版
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
處理依賴
由於Bootstrap的某些組件依賴於jQuery,所以請確保下載對應版本的jQuery文件,來保證Bootstrap相關組件運行正常。
Bootstrap源碼
Bootstrap 源碼包含了預先編譯的 CSS、JavaScript 和圖標字體文件,並且還有 LESS、JavaScript 和文檔的源碼。具體來說,主要文件組織結構如下:
bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/
less/
、js/
和 fonts/
目錄分別包含了 CSS、JS 和字體圖標的源碼。dist/
目錄包含了上面所說的預編譯 Bootstrap 包內的所有文件。docs/
包含了所有文檔的源碼文件,examples/
目錄是 Bootstrap 官方提供的實例工程。除了這些,其他文件還包含 Bootstrap 安裝包的定義文件、許可證文件和編譯腳本等。
基本模板
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標簽*必須*放在最前面,任何其他內容都*必須*跟隨其后! --> <title>Bootstrap Template</title> <!-- 引入你的Bootstrap --> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> </head> <body> <h1>你好,世界!</h1> <h1>Hello World!</h1> <!-- 引入你的jQuery (Bootstrap的所有JavaScript插件都依賴jQuery,所以必須引入且放在前邊) --> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 --> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
Bootstrap全局樣式
排版、按鈕、表格、表單、圖片等我們常用的HTML元素,Bootstrap中都提供了全局樣式。
我們只要在基本的HTML元素上通過設置class就能夠應用上Bootstrap的樣式,從而使我們的頁面更美觀和諧。
標題相關
標題
<h1>一級標題36px</h1> <h2>二級標題30px</h2> <h3>三級標題24px</h3> <h4>四級標題18px</h4> <h5>五級標題14px</h5> <h6>六級標題12px</h6> <!--除了使用h標簽,Bootstrap內置了相應的全局樣式--> <!--內聯標簽應用標題樣式--> <span class="h1">一級標題36px</span> <span class="h2">二級標題30px</span> <span class="h3">三級標題24px</span> <span class="h4">四級標題18px</span> <span class="h5">五級標題14px</span> <span class="h6">六級標題12px</span>
副標題
<!--一級標題中嵌入小標題--> <h1>一級標題<small>小標題</small></h1>
文本對齊
<!--文本對齊--> <p class="text-left">文本左對齊</p> <p class="text-center">文本居中</p> <p class="text-right">文本右對齊</p>
文本大小寫
<!--大小寫--> <p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
表格
Class | 描述 |
.table-striped | 條紋狀表格 |
.table-bordered | 帶邊框的表格 |
.table-hover | 鼠標懸停變色的表格 |
.table-condensed | 緊縮型表格 |
.table-responsive | 響應式表格 |
狀態類
Class | 描述 |
---|---|
.active |
鼠標懸停在行或單元格上時所設置的顏色 |
.success |
標識成功或積極的動作 |
.info |
標識普通的提示信息或動作 |
.warning |
標識警告或需要用戶注意 |
.danger |
標識危險或潛在的帶來負面影響的動作 |
表單
內聯表單
表單狀態
帶圖標的表單
按鈕
<a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit">
按鈕樣式
<!-- Standard button --> <button type="button" class="btn btn-default">(默認樣式)Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">(首選項)Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">(成功)Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">(一般信息)Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">(警告)Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">(危險)Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">(鏈接)Link</button>
按鈕大小
<p> <button type="button" class="btn btn-primary btn-lg">(大按鈕)Large button</button> <button type="button" class="btn btn-default btn-lg">(大按鈕)Large button</button> </p> <p> <button type="button" class="btn btn-primary">(默認尺寸)Default button</button> <button type="button" class="btn btn-default">(默認尺寸)Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">(小按鈕)Small button</button> <button type="button" class="btn btn-default btn-sm">(小按鈕)Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button> <button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button> </p>
圖片
<img src="..." class="img-responsive" alt="Responsive image">
圖片形狀
<img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">
輔助類
文本顏色
<p class="text-muted">...</p> <p class="text-primary">...</p> <p class="text-success">...</p> <p class="text-info">...</p> <p class="text-warning">...</p> <p class="text-danger">...</p>
背景顏色
<p class="bg-primary">...</p> <p class="bg-success">...</p> <p class="bg-info">...</p> <p class="bg-warning">...</p> <p class="bg-danger">...</p>
關閉按鈕
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
下拉三角
<span class="caret"></span>
快速浮動
<div class="pull-left">...</div> <div class="pull-right">...</div>
內容塊居中
<div class="center-block">...</div>
清除浮動
<!-- Usage as a class --> <div class="clearfix">...</div>
顯示與隱藏
<div class="show">...</div> <div class="hidden">...</div>
常用Bootstrap組件
- 字體圖標
- 下拉菜單
- 按鈕組
- 輸入框俎
- 導航
- 分頁
- 標簽和徽章
- 頁頭
- 縮率圖
- 進度條
模擬滾動的進度條:

var $d1 = $("#d1"); var width = 0; var theID = setInterval(setValue, 200); function setValue() { if (width === 100) { clearInterval(theID); } else { width++; $d1.css("width", width+"%").text(width+"%"); } }
響應式開發
為什么要進行響應式開發?
隨着移動設備的流行,網頁設計必須要考慮到移動端的設計。同一個網站為了兼容PC端和移動端顯示,就需要進行響應式開發。
什么是響應式?
利用媒體查詢,讓同一個網站兼容不同的終端(PC端、移動端)呈現不同的頁面布局。
用到的技術
CSS3@media查詢
用於查詢設備是否符合某一特定條件,這些特定條件包括屏幕尺寸、是否可觸摸、屏幕精度、橫屏豎屏等信息。
常見屬性:
- device-width, device-height 屏幕寬、高
- width,height 渲染窗口寬、高
- orientation 設備方向
- resolution 設備分辨率
語法:
@media mediatype and|not|only (media feature) { CSS-Code; }
不同的媒體使用不同的stylesheet
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
響應式布局示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css" rel="stylesheet"> <style> .c1{ background: red; } @media (min-width: 600px) { .c1{ background: green; // 大於600px寬度就顯示綠色 } } </style> </head> <body> <div class="c1"> asdfasdf </div> <img src="" alt=""> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/carousel.js"></script> </body> </html>
viewport
手機瀏覽器是把頁面放在一個虛擬的"窗口"(viewport)中,通常這個虛擬的"窗口"(viewport)比屏幕寬,這樣就不用把每個網頁擠到很小的窗口中(這樣會破壞沒有針對手機瀏覽器優化的網頁的布局),用戶可以通過平移和縮放來看網頁的不同部分。
設置viewport
一個常用的針對移動網頁優化過的頁面的 viewport meta 標簽大致如下:
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
- width:控制 viewport 的大小,可以指定的一個值,如果 600,或者特殊的值,如 device-width 為設備的寬度(單位為縮放為 100% 時的 CSS 的像素)。
- height:和 width 相對應,指定高度。
- initial-scale:初始縮放比例,也即是當頁面第一次 load 的時候縮放比例。
- maximum-scale:允許用戶縮放到的最大比例。
- minimum-scale:允許用戶縮放到的最小比例。
- user-scalable:用戶是否可以手動縮放。
Bootstrap的柵格系統
- container
- row
- column
注意事項: 使用Bootstrap的時候不要讓自己的名字與Bootstrap的類名沖突。
Bootstrap自帶的常用插件
模態框
注意:
模態框的HTML代碼放置的位置:務必將模態框的HTML代碼放在文檔的最高層級內(也就是說,盡量作為 body 標簽的直接子元素),以避免其他組件影響模態框的展現和/或功能。
<!-- 觸發模態框的按鈕 --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- 模態框 --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <!-- 模態框內容 --> <div class="modal-content"> <div class="modal-header"> <!-- 模態框 標題--> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <!-- 模態框 主體內容(可以是表單等等)--> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
注意:
- 通過為模態框設置
.bs-example-modal-lg
和.bs-example-modal-sm
來控制模態框的大小。 - 通過
.fade
類來控制模態框彈出時的動畫效果(淡入淡出效果)。 - 通過在
.modal-body
div中設置.row
可以使用Bootstrap的柵格系統。
模態框的調用方式:
1.通過data屬性
通過在一個觸發彈出模態框的元素(例如:按鈕)上添加 data-toggle="modal"
屬性,然后設置 data-target="#foo"
屬性或 href="#foo"
屬性,用來指向被控制的模態框。
<button type="button" data-toggle="modal" data-target="#myModal">顯示模態框</button>
2.通過JS代碼調用
$('#myModal').modal("show"); // 顯示 $('#myModal').modal("hide") // 隱藏
常用參數:
名稱 | 可選值 | 默認值 | 描述 |
---|---|---|---|
backdrop | true/false/'static' | true | false表示有沒有遮罩層,'static'表示點擊遮罩層不關閉模態框 |
keyboard | true/false | true | 鍵盤上的 esc 鍵被按下時關閉模態框。 |
show | true/false | true | 模態框初始化之后就立即顯示出來。 |
方法:
$('#myModal').modal({ keyboard: false })
輪播圖
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
可以繼續為圖片添加介紹信息
<div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> <h3>...</h3> <p>...</p> </div> </div>
設置切換間隔為2秒,默認是5秒。
$('.carousel').carousel({ interval: 2000 })
常用的前端插件合集
FontAwesome字體
詳細用法參見上述站點的Examples。
SweetAlert系列
SweetAlert示例
基本使用:
swal("標題","內容","success);
使用SweetAlert在Ajax提交成功(done)或失敗(error)時分別提示不用的內容。
這是更新之前版本的寫法
function deleteRecord(recordID) { swal({ title: "確定要刪除這個產品嗎?", text: "刪除后可就無法恢復了。", type: "warning", showCancelButton: true, closeOnConfirm: false, confirmButtonText: "是的,我要刪除!", confirmButtonColor: "#ec6c62", cancelButtonText: "容我三思" }, function (isConfirm) { if (!isConfirm) return; $.ajax({ type: "post", url: "/delete/", data: {"id": recordID}, success: function (data) { var dataObj = $.parseJSON(data); if (dataObj.status === 0) { //后端刪除成功 swal("刪除成功", dataObj.info, "success"); $("#p-" + recordID).remove() //刪除頁面中那一行數據 } else { swal("出錯啦。。。", dataObj.msg, "error"); //后端刪除失敗 } }, error: function () { // ajax請求失敗 swal("啊哦。。。", "服務器走丟了。。。", "error"); } }) }); }
更新之后用這么寫
swal({ title: "這里寫標題", text: "這里放內容", icon: "warning", // 這里放圖標的類型(success,warning,info,error) buttons: { cancel: { text: "容我三思", visible: true, value: false }, confirm: { text: "我就是要刪除" } } }).then(function (isConfirm) { if (isConfirm){ swal("你死定了", {button: "確認"}); }
Toastr通知
toastr["success"]("你已經成功被綠!")
jQueryLazyload懶加載
示例:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>懶加載示例</title> </head> <body> <div> <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div> ... <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="jquery.lazyload.min.js"></script> <script> $("img.lazy").lazyload({ effect: "fadeIn", event: "click" }) </script> </body> </html>
模板
一個不錯的管理后台模板
Bootstrap實例精選
- 封面圖
- Carousel
- 博客頁面
- 控制台
- 登錄頁
- Offcanvas

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF8"> <meta http-euqiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap登錄驗證</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body style="background-color: #eeeeee;"> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4" style="margin-top: 70px"> <h2 class="text-center">歡迎登錄</h2> <form> <div class="form-group"> <label for="exampleInputEmail1">郵箱</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="郵箱"> <span class="help-block"></span> </div> <div class="form-group"> <label for="exampleInputPassword1">密碼</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密碼"> <span class="help-block"></span> </div> <div class="checkbox"> <label> <input type="checkbox"> 記住我 </label> </div> <button type="submit" class="btn btn-success btn-block" id="login-btn">登錄</button> </form> </div> </div> </div> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> <script> // 給登錄按鈕綁定點擊事件 $("#login-btn").click(function (){ // 定義一個是否允許提交的標志位 var flag = true; // 1. 找到登錄框中所有的input框,判斷值是否為空 $(".form-group input").each(function () { var Value = $(this).val().trim(); if (!Value){ // 2. 為空就顯示提示信息 // 2.1 給下面的span標簽設置文本提示信息 var errorMsg = $(this).prev().text() + "不能為空"; $(this).next().text(errorMsg); // 2.2 給父標簽設置has-error的樣式 $(this).parent().addClass('has-error'); // 2.3 阻止表單提交 flag = false; } }); return flag; }); // 給input框綁定focus事件 $(".form-group input").focus(function (){ // 1. 清空當前input框后面的span標簽的文本 $(this).next().text(''); // 2. 刪除父標簽的has-error樣式 $(this).parent().removeClass('has-error'); }) </script> </body> </html>