Bootstrap(Web框架)的简单使用教程
前言
我們在寫前端網頁的時候，如果全部都是自己一點一點的編寫，工作量巨大，效率不高，而且界面可能也不一定符合大眾審美；因此就有了框架來讓開發變得更加的簡單，且更有效率，而這Web開發中，Bootstrap就是一個很常用的框架。
目錄
- 前言
- 一、什么是Bootstrap？
- 二、使用步驟
- 1.下載Bootstrap
- 2.部署文件
- 3.創建html頁面，引入必要的資源文件
- 三、Bootstrap詳解
- 1.柵格系統
- 2.CSS全局樣式
- （1）按鈕
- （2）圖片邊框
- （3）表格
- （4）簡易登錄界面
- 3.常用組件
- （1）導航欄
- （2）分頁條
- （3）輪播圖
一、什么是Bootstrap？
Bootstrap的概念：
Bootstrap （Web框架）：
一個前端開發的框架，Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發更加快捷。
Bootstrap是目前很受歡迎的一個前端框架，那么什么是框架呢？
框架：
一個半成品軟件，開發人員可以在框架基礎上，在進行開發，簡化編碼。
Bootstrap 框架的優點：
1. 其中定義了很多的css樣式和js插件。開發人員直接可以使用這些樣式和插件得到豐富的頁面效果。
2. 使用了響應式布局（同一套頁面可以兼容不同分辨率的設備）。
什么是響應式布局呢？簡單來說就是在不同大小的屏幕上能夠有不同的顯示效果，比較好的一個例子就是蘋果的官網，當屏幕較大時，導航欄顯示的很多，而屏幕較小時，導航欄的內容也相應減少。
例：蘋果官網
隨著屏幕縮小，頁面變化為：
而淘寶的官網就不是響應式布局，而是用了兩個網站來區分大小屏幕的，當我們屏幕縮小，大屏幕版的顯示方式也不會發生變化。
例：淘寶網電腦版
例：淘寶網觸屏版
（注：這里只是區分響應式布局和非響應式布局，沒有打廣告和鼓勵大家買東西，希望大家理性消費哈）
二、使用步驟
剛剛大致講了一下BootStrap框架和它的優點，接下來就開始簡單講一下BootStrap的使用步驟。
1.下載Bootstrap
BootStrap官網下載地址為：https://v3.bootcss.com/
在官網里，不僅僅有下載地址，還有很多對應的組件的使用方法，但我們使用的時候可以去官網查閱。
2.部署文件
下載后解壓后復制三個文件夾css、fonts、js到項目中去
3.創建html頁面，引入必要的資源文件
導入上圖所勾選的三個文件，代碼為：
<link href="css/bootstrap.min.css" rel="stylesheet"><script src="js/jquery-3.2.1.min.js"></script><script src="js/bootstrap.min.js"></script>在html文件中使用方式如下：
<!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 HelloWorld</title><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --><script src="js/jquery-3.2.1.min.js"></script><!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 --><script src="js/bootstrap.min.js"></script> </head> <body> <h1>你好，世界！</h1></body> </html>運行結果如下：
接下來我們就來使用Bootstrap框架，看看其具體的組件怎么實現吧！
三、Bootstrap詳解
1.柵格系統
在前面已經簡單的介紹了Bootstrap的使用，我們知道Bootstrap中使用的是響應式布局，即同一套頁面可以兼容不同分辨率的設備，而在Bootstrap中，響應式布局的實現依賴于柵格系統。
實現：將一行平均分成12個格子，可以指定元素占幾個格子。
實現步驟如下：
容器又可分為兩類：
（1）container：兩邊留白
（2）container-fluid：每一種設備都是100%寬度
樣式：col-設備代號-格子數目
設備代號：
（1）xs：超小屏幕 手機 (<768px)：col-xs-12
（2）sm：小屏幕 平板 (≥768px)
（3）md：中等屏幕 桌面顯示器 (≥992px)
（4）lg：大屏幕 大桌面顯示器 (≥1200px)
注意：
示例：
<!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>Bootstrap 柵格系統</title><link href="css/bootstrap.min.css" rel="stylesheet"><script src="js/jquery-3.2.1.min.js"></script><script src="js/bootstrap.min.js"></script><style>.inner {border: 1px solid red;}</style> </head> <body> <div class="container"><div class="row"><div class="col-md-4 inner">柵格</div><div class="col-md-4 inner">柵格</div><div class="col-md-4 inner">柵格</div></div> </div> </body> </html>代碼表示在中等大小的屏幕每個柵格占4格，前面已經知道了一共有12個格子，那么在屏幕較大時，三個柵格各占1/3。
屏幕較大時：
屏幕較小時，不足12格，每個柵格占滿一行：
2.CSS全局樣式
（1）按鈕
不使用Bootstrap，原樣式：
<a href="#">Link</a><button type="submit">Button</button><input type="button" value="Input"><input type="submit" value="Submit">使用Bootstrap，在每一個標簽中加上class=“btn btn-default”：
<a class="btn btn-default" href="#">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">按鈕對比，上面為原樣式，下面為使用Bootstrap后的樣式：
另外還有幾個其他的按鈕樣式，大家可以根據自己的需要使用：
（2）圖片邊框
使用方法如下：
<img src="img/xxx" class="img-responsive"/> <img src="img/xxx" class="img-responsive img-rounded"/> <img src="img/xxx" class="img-responsive img-circle"/> <img src="img/xxx" class="img-responsive img-thumbnail"/>"img-responsive"表示圖片始終占滿屏幕，隨屏幕大小變化而變化；
"img-rounded"表示圖片四個邊上變為圓角；
"img-circle"表示取圖片為圓形狀，如果圖片過長，會拉伸圖片為橢圓；
" img-thumbnail"表示給圖片加一個相框。
具體在這里不做圖片展示了，大家自己動手試試吧！
（3）表格
<table class="table table-bordered table-hover"><tr><th>編號</th><th>姓名</th><th>年齡</th></tr><tr><td>001</td><td>張三</td><td>23</td></tr><tr><td>002</td><td>李四</td><td>21</td></tr><tr><td>003</td><td>王五</td><td>20</td></tr> </table>如果不加上class=“table table-bordered table-hover”，效果為：
使用Bootstrap，加上class=“table table-bordered table-hover”，效果為：
可以看到效果明顯美觀很多，不僅多了邊框，并且放置在上面也挺美觀。
（4）簡易登錄界面
<form class="form-horizontal"><div class="form-group"><label for="exampleInputEmail1" class="col-sm-2 control-label">Email address</label><div class="col-sm-10"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="Password"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label><input type="checkbox"> Remember me</label></div></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">Sign in</button></div></div> </form>效果如圖：
3.常用組件
常用組件，包括上面的樣式都可以在Bootstrap官網查閱對應的使用方法，將代碼修改以達到自己想要的效果，在這里簡單講兩個常用的組件的使用方法。
（1）導航欄
<nav class="navbar navbar-inverse"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><!-- 定義漢堡按鈕 --><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">首頁</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --> </nav>效果如圖：
（2）分頁條
<nav aria-label="Page navigation"><ul class="pagination"><li class="disabled"><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>效果如圖：
（3）輪播圖
<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="img/banner_1.jpg" alt="..."></div><div class="item"><img src="img/banner_2.jpg" alt="..."></div><div class="item"><img src="img/banner_3.jpg" alt="..."></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>效果如圖：
具體的使用只需要復制代碼然后改變圖片即可。
大家有什么不懂的地方或者想使用的控件就多去Bootstrap官網上查看，很多都有對應的使用方法，如果有不知道代碼是什么功能的可以刪除又加上對比效果，通過在基礎代碼上做修改來達到自己想要的效果。文章如果有錯誤的話歡迎指出，一起加油學習吧！
總結
以上是生活随笔為你收集整理的Bootstrap(Web框架)的简单使用教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： GDI+生成准考证
- 下一篇： 安卓学习日记——广告