Bootstrap简介、下载bootstrap及引入文件说明、响应式容器和满屏容器、栅格系统
Bootstrap簡介：
Bootstrap是Twitter（推特）開發(fā)的，目前最受歡迎的前端開源框架，基于jQuery用于開發(fā)HTML、CSS、JavaScript，簡潔靈活，常用于開發(fā)響應(yīng)式布局及移動端開發(fā)。其中文官方文檔：http://www.bootcss.com 官網(wǎng)：http://getbootstrap.com 推薦網(wǎng)站：http://bootstrap.css88.com
下載bootstrap：
拿到bootstrap文件包的方式有很多種，例如：官網(wǎng)下載、npm(后面介紹完node可以使用npm中：npm install bootstrap@4.0.0-beta.2直接download下來4.0版本)、使用在線文檔連接等。考慮到某些讀者可能沒接觸到node，這里小編通過官方下載bootstrap來介紹：訪問官方網(wǎng)址：http://getbootstrap.com，點(diǎn)擊右上角Download選擇對應(yīng)的版本繼續(xù)點(diǎn)擊編譯好的（Compiled CSS and JS）bootstrap下載，這里小編采用bootstrap4進(jìn)行簡介，bootstrap4放棄了IE8及iOS6，目前僅支持IE9+及iOS7+，實(shí)際開發(fā)中需要注意這點(diǎn)。
編譯后的bootstrap文件目錄結(jié)構(gòu)如下：（只需要拿需要的文件即可）
bootstrap/ ├── css/ │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ └── bootstrap.min.css.map └── js/├── bootstrap.bundle.js├── bootstrap.bundle.js.map├── bootstrap.bundle.min.js├── bootstrap.bundle.min.js.map├── bootstrap.js├── bootstrap.js.map├── bootstrap.min.js└── bootstrap.min.js.map引入資源：
需要注意：bootstrap基于jQuery，但是下拉菜單（dropdown）、彈出框（popover）和工具提示（tooltip）組件依賴Popper(https://popper.js.org/) 開發(fā)，bootstrap文件分css文件和js文件，如果只需要樣式，可以不需要引入js文件，如：
<!--將bootstrap文件及依賴文件引入到head靠前位置，便于自己樣式層疊--><link rel="stylesheet" href="lib/bootstrap/bootstrap.css"><!-- 條件注釋，第一個是解決html5新標(biāo)簽兼容性的，第二個是解決css媒體查詢兼容問題的，且此依賴不能以files方式打開使用--><!--[if lt IE 9]><script src="lib/html5shiv/html5shiv.js"></script><script src="lib/respond/respond.js"></script><![endif]--><script src="lib/jquery/jquery.js"></script><!-- 引入jQuer依賴（bootstrap依賴jQuery庫） --><script src="lib/popper/popper.js"></script><!-- 用于彈窗、提示、下拉菜單時引入此依賴，但是目前的 bootstrap.bundle.js已經(jīng)包含了/popper.js，自己判斷版本自行增刪 --><script src="lib/bootstrap/bootstrap.js"></script><!-- 引入bootstrap.js文件-->基本結(jié)構(gòu)說明：
<!-- 1.bootstrap要求使用HTML5文檔類型，現(xiàn)在最新html5聲明如下（可以簡寫為html）： --> <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><!-- 通常網(wǎng)頁開發(fā)都會聲明編碼--><!-- 2.bootstrap常用于移動端開發(fā)，如果是移動端開發(fā)，記得開啟視口，其標(biāo)準(zhǔn)視口書寫如下(新增自動適應(yīng)手機(jī)屏幕寬度屬性：shrink-to-fit=no，解決iOS9兼容問題)： --><meta name="viewport" content="width=device-width, initial-scale=1.0，user-scalable=no，maximum-scale=1.0,minimum-scale=1.0,shrink-to-fit=no"><!-- 3.引入jQuery插件，因?yàn)閎ootstrap是基于jQuery開發(fā)的： --><!-- <scrip src="lib/jquery/dist/jquery.js"></scrip> --><!---jquery本地文件在測試關(guān)閉提示框時出現(xiàn)報錯，經(jīng)調(diào)試，修改為網(wǎng)絡(luò)資源可以正常運(yùn)行--><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><!-- 4.引入bootstrap中樣式文件： --><link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"><!-- 5.如果需要做彈窗、提示、下拉菜單等功能，引入如下依賴： --><scrip src="lib/bootstrap/js/bootstrap.bundle.min.js"></scrip><!-- 6.如果需要使用bootstrap中行為，引入bootstrap中js文件: --><script src="lib/bootstrap/js/bootstrap.min.js"></script><!-- 7.條件注釋，第一個是解決html5新標(biāo)簽兼容性的插件，第二個是解決css媒體查詢兼容問題的，且此依賴不能以files方式打開文件--><!--[if lt IE 9]><sc src="lib/html5shiv/html5shiv.js"></sc><sc src="lib/respond/respond.js"></sc> <![endif]--><!-- 8.引入自己編寫的css文件層疊掉bootstrap中不符合的樣式: --><link rel="stylesheet" href="test.css"><title>Document</title> </head><body><div class='container'>配置好此模板，在這里就可以使用bootstrap了</div> </body></html>使用bootstrap中功能：
bootstrap中的功能使用起來很簡單，如果是給自己編寫的html骨架添加功能，只需要添加bootstrap中定義好有功能的類名即可，如果需要使用某個定義好的功能塊，那么直接將案例代碼拷貝到自己的代碼中即可。下面將介紹實(shí)際開發(fā)中常用的功能：
響應(yīng)式容器：
<!-- container:定義一個響應(yīng)式容器，使有此類名的容器在不同尺寸設(shè)備下顯示不同的尺寸，且水平居中，當(dāng)小于570px時不再做變小 --><div class='container'></div>滿屏容器：
<!-- container-fluid:定義一個占據(jù)全部視口的容器，無論設(shè)備屏幕尺寸多大，總是100%占據(jù)視口寬度 --><div class='container-fluid'></div>柵格系統(tǒng)：
默認(rèn)把頁面內(nèi)容分成12等份（當(dāng)然自己可以定制份數(shù)），由行和列組合的布局頁面,網(wǎng)格狀布局，在一個響應(yīng)式容器中定義行和列。由類名row定義柵格系統(tǒng)的行，由col-x-n定義柵格系統(tǒng)的列。col-x-n中n表示所占柵格12份中的幾份，x參數(shù):（xl屏幕尺寸大于1200px）其他如下：
柵格嵌套：每個柵格中是可以嵌套其它柵格的，就像div一樣，可以相互嵌套。
柵格偏移：col-(lg/md/sm/xs)-offset-n,給某個柵格添加此類可以使這個柵格向后偏移n份。
柵格排序：col-(lg/md/sm/xs)-push/pull-n,將某個柵格push推后幾份或?qū)⒛硞€柵格pull拉前幾份。
<div class="container"><!--1.柵格系統(tǒng)要放在固定寬度或全屏容器中，實(shí)際開發(fā)中會利用bootstrap的響應(yīng)式容器（媒體查詢原理固定的尺寸）--><div class="row"><!--row定義行--><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">1</div><!--col定義列，其中xs-12表示當(dāng)在bootstrap中定義的xs屏幕時，此列占一行中的12份，即一行占滿；lg-2表示當(dāng)在bootstrap中定義的尺寸為lg時，此時這列占一行中的2份，即2/12--><!--柵格嵌套開始：--><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"><div class="row"><!--在一個col中可以繼續(xù)嵌套row行，row行中可以繼續(xù)劃分列，如：--><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">柵格嵌套a</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">柵格嵌套b</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">柵格嵌套c</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">柵格嵌套d</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">柵格嵌套e</div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">柵格嵌套w</div></div></div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">3</div><!-- 柵格偏移col-x-offset-n：n表示這列向右偏移n份 --><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"><div class="row"><div class="col-lg-4 col-md-3 col-sm-2 col-xs-1">柵格偏移</div><div class="col-lg-4 col-lg-offset-4 col-md-3 col-md-offset-6 col-sm-2 col-sm-offset-8 col-xs-1 col-xs-offset-10">柵格偏移</div><!--col-lg-offset-4表示在lg尺寸下向右偏移4份--></div></div><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">5</div><!-- 柵格排序push推、pull拉 --><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"><div class="row arr"><div class="col-lg-6 col-lg-push-6 col-md-6 col-md-push-6 col-sm-6 col-sm-push-6 col-xs-6 col-xs-push-6">柵格排序-左邊</div><div class="col-lg-6 col-lg-pull-6 col-md-6 col-md-pull-6 col-sm-6 col-sm-pull-6 col-xs-6 col-xs-pull-6">柵格排序-右邊</div></div></div></div></div>提示：本文圖片等素材來源于網(wǎng)絡(luò)，若有侵權(quán)，請發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。
筆者：苦海
總結(jié)
以上是生活随笔為你收集整理的Bootstrap简介、下载bootstrap及引入文件说明、响应式容器和满屏容器、栅格系统的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机应用的时间地点意义,计算机应用在教
- 下一篇： javascript中BOM介绍、屏幕尺