溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下Bootstrap前端框架怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
1、Bootstrap 基本模板
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!--讓瀏覽器使用最新的IE內(nèi)核進(jìn)行渲染頁面--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--設(shè)置視口寬度等于當(dāng)前設(shè)備寬度，默認(rèn)縮放比為1--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --> <title>Bootstrap 101 Template</title> <!-- 導(dǎo)入Bootstrap核心CSS文件 --> <link href="css/bootstrap.css" rel="external nofollow" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!-- ①<!--[if lt IE 9]>…… <![endif]- ->這一對標(biāo)簽用于檢測當(dāng)前瀏覽器的版本，lt表示小于，gt表示大寫。所以這句話作用是，當(dāng)瀏覽器版本低于IE9執(zhí)行。 ②html5shiv：解決ie9以下瀏覽器對html5新增標(biāo)簽的不識(shí)別，并導(dǎo)致CSS不起作用的問題。 ③respond.min:讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。 --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h2>你好！</h2> <script src="js/jquery-3.1.1.js"></script> <!-- 導(dǎo)入BootStrap的JS插件 ①如果不使用BootStrap提供的JS插件，則這個(gè)JS文件無需導(dǎo)入； ②BootStrap的JS插件功能依賴JQuery，因此這個(gè)JS必須在JQuery之后導(dǎo)入； --> <script src="js/bootstrap.min.js"></script> </body> </html>
拷貝并粘貼上面的 HTML 代碼，這就是一個(gè)最簡單的 Bootstrap 頁面了。一定要注意，Bootstrap 的所有 JavaScript 插件都依賴 jQuery，因此 jQuery 必須在 Bootstrap 之前引入。
2、組件
Bootstrap中包含了豐富的Web組件，根據(jù)這些組件，可以快速的搭建一個(gè)漂亮、功能完備的網(wǎng)站。其中包括以下組件：
下拉菜單、按鈕組、按鈕下拉菜單、導(dǎo)航、導(dǎo)航條、路徑導(dǎo)航、分頁、排版、縮略圖、警告對話框、進(jìn)度條、媒體對象等。
2.1字體圖標(biāo)
bootstrap默認(rèn)提供了二百多個(gè)圖標(biāo)。我們可以通過span標(biāo)簽來使用這些圖標(biāo)：
<h4>圖標(biāo)</h4> <span class="glyphicon glyphicon-home"></span> <span class="glyphicon glyphicon-signal"></span> <span class="glyphicon glyphicon-cog"></span> <span class="glyphicon glyphicon-apple"></span>
讓我們來看一下效果：
2.2按鈕
<button></button>標(biāo)簽用于創(chuàng)建按鈕，bootstrap提供了豐富的按鈕樣式。按鈕除了有默認(rèn)的大小外，bootstrap還提供三個(gè)參數(shù)來調(diào)整按鈕的大小，分別是：btn-lg、btn-sm和btn-xs。
<h4>按鈕</h4> <button type="button" class="btn btn-default">按鈕</button> <button type="button" class="btn btn-primary">primary</button> <button type="button" class="btn btn-success">success</button> <button type="button" class="btn btn-info">info</button> <button type="button" class="btn btn-warning">warning</button> <button type="button" class="btn btn-danger">danger</button> <h4>按鈕尺寸</h4> <button type="button" class="btn btn-default">按鈕</button> <button type="button" class="btn btn-primary btn-lg">primary</button> <button type="button" class="btn btn-success btn-sm">success</button> <button type="button" class="btn btn-info btn-xs">info</button> <h4>把圖標(biāo)顯示在按鈕里</h4> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span> 按鈕</button>
效果：
2.3下拉菜單
下拉菜單是最常見的交互之一，bootstrap為我們提供了漂亮的樣式。
<h4>下拉菜單</h4> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li> </ul> </div>
看一下效果：
2.4輸入框
通過<input></input>標(biāo)簽去創(chuàng)建輸入框。
<h4>輸入框</h4> <div class="input-group"> <span class="glyphicon glyphicon-user"></span> <input type="text" placeholder="username"> </div> <div class="input-group"> <span class="glyphicon glyphicon-lock"></span> <input type="password" placeholder="password"> </div>
效果圖：
2.5導(dǎo)航欄
導(dǎo)航欄作為整個(gè)網(wǎng)站的指引必不可少。
<h4>導(dǎo)航欄</h4> <nav class="navbar navbar-inverse navbar-fixed-top"> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li> <li><a href="#about" rel="external nofollow" >About</a></li> <li><a href="#contact" rel="external nofollow" >Contact</a></li> <li class="dropdown"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </nav>
效果呢↓
2.6表單
人與系統(tǒng)之間數(shù)據(jù)的傳遞都需要依靠表單來完成。比如注冊/登錄信息的提交，查詢條件的提交等。用<form></form>標(biāo)簽來創(chuàng)建表單。
<h4>表單</h4> <form> <div class="form-group"> <span class="glyphicon glyphicon-user"></span> <input type="email" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <span class="glyphicon glyphicon-lock"></span> <input type="password" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
效果如下：
2.7警告框
警告框是系統(tǒng)向用戶傳達(dá)信息和提供指引的重要手段。沒有針對警告框的標(biāo)簽，通過bootstrap所提供的樣式可以瞬間制作出漂亮的警告框。
<h4>警告框</h4> <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div> <div class="alert alert-success" role="alert"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">success!</a> </div> <div class="alert alert-info" role="alert"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">info!</a> </div> <div class="alert alert-warning" role="alert"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">warning!</a> </div> <div class="alert alert-danger" role="alert"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="alert-link">danger!</a> </div>
效果圖：
2.8進(jìn)度條
系統(tǒng)的處理過程往往需要用戶等待，進(jìn)度條可以讓用戶感知到系統(tǒng)的處理過程，從而增加容忍度。
<h4>進(jìn)度條</h4> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" > 70% </div> </div>
3、Bootstrap柵格系統(tǒng)
首先，我們先要了解什么是柵格系統(tǒng)！往下看 ↓
Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。它包含了易于使用的預(yù)定義類，還有強(qiáng)大的mixin用于生成更具語義的布局。
柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，我們的內(nèi)容就可以放入這些創(chuàng)建好的布局中。下面就介紹一下 Bootstrap 柵格系統(tǒng)的工作原理：
“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）。
通過“行（row）”在水平方向創(chuàng)建一組“列（column）”。
你的內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。
類似 .row 和 .col-xs-4 這種預(yù)定義的類，可以用來快速創(chuàng)建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創(chuàng)建語義化的布局。
通過為“列（column）”設(shè)置 padding 屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過為 .row 元素設(shè)置負(fù)值 margin 從而抵消掉為 .container 元素設(shè)置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個(gè)等寬的列可以使用三個(gè) .col-xs-4 來創(chuàng)建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個(gè)整體另起一行排列。
柵格類適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備 ， 并且針對小屏幕設(shè)備覆蓋柵格類。 因此，在元素上應(yīng)用任何 .col-md-*柵格類適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備 ， 并且針對小屏幕設(shè)備覆蓋柵格類。 因此，在元素上應(yīng)用任何 .col-lg-*不存在， 也影響大屏幕設(shè)備。
3.1媒體查詢
在柵格系統(tǒng)中，我們在 Less 文件中使用以下媒體查詢（media query）來創(chuàng)建關(guān)鍵的分界點(diǎn)閾值。
/* 超小屏幕（手機(jī)，小于 768px） */
/* 沒有任何媒體查詢相關(guān)的代碼，因?yàn)檫@在 Bootstrap 中是默認(rèn)的（ Bootstrap 是移動(dòng)設(shè)備優(yōu)先） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面顯示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面顯示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }3.2柵格參數(shù)
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
輸入上面的代碼就可以實(shí)現(xiàn)上圖的樣式，是不是已經(jīng)對柵格系統(tǒng)有所了解了，我們繼續(xù)往下看↓
3.3響應(yīng)式列重置
即便有給出的柵格class，你也不免會(huì)碰到一些問題，例如，在某些閾值時(shí)，某些列可能會(huì)出現(xiàn)比別的列高的情況。為了克服這一問題，建議聯(lián)合使用 .clearfix 和響應(yīng)式工具類。
<div class="row"> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> </div>
除了列在分界點(diǎn)清除響應(yīng)， 您可能需要 重置偏移, 后推或前拉某個(gè)列。
<div class="row"> <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div> </div> <div class="row"> <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div> </div> <h3 ><span ><span class="autonum" title="" data-original-title="">3.2.1</span><span ><strong class="135brush" data-brushtype="text">內(nèi)部類作為事件監(jiān)聽器</strong></span></span></h3>
3.4列偏移
使用 .col-md-offset-* 類可以將列向右側(cè)偏移。這些類實(shí)際是通過使用 * 選擇器為當(dāng)前元素增加了左側(cè)的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側(cè)偏移了4個(gè)列（column）的寬度。
<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>
3.5嵌套列
為了使用內(nèi)置的柵格系統(tǒng)將內(nèi)容再次嵌套，可以通過添加一個(gè)新的 .row 元素和一系列 .col-sm-* 元素到已經(jīng)存在的 .col-sm-* 元素內(nèi)。被嵌套的行（row）所包含的列（column）的個(gè)數(shù)不能超過12（其實(shí)，沒有要求你必須占滿12列）。
<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div>
3.6列排序
通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序。
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
以上是“Bootstrap前端框架怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼