Bootstrap简介、下载bootstrap及引入文件说明、响应式容器和满屏容器、栅格系统
Bootstrap簡介：
Bootstrap是Twitter（推特）開發的，目前最受歡迎的前端開源框架，基于jQuery用于開發HTML、CSS、JavaScript，簡潔靈活，常用于開發響應式布局及移動端開發。其中文官方文檔：http://www.bootcss.com 官網：http://getbootstrap.com 推薦網站：http://bootstrap.css88.com
下載bootstrap：
拿到bootstrap文件包的方式有很多種，例如：官網下載、npm(后面介紹完node可以使用npm中：npm install bootstrap@4.0.0-beta.2直接download下來4.0版本)、使用在線文檔連接等。考慮到某些讀者可能沒接觸到node，這里小編通過官方下載bootstrap來介紹：訪問官方網址：http://getbootstrap.com，點擊右上角Download選擇對應的版本繼續點擊編譯好的（Compiled CSS and JS）bootstrap下載，這里小編采用bootstrap4進行簡介，bootstrap4放棄了IE8及iOS6，目前僅支持IE9+及iOS7+，實際開發中需要注意這點。
編譯后的bootstrap文件目錄結構如下：（只需要拿需要的文件即可）
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/) 開發，bootstrap文件分css文件和js文件，如果只需要樣式，可以不需要引入js文件，如：
<!--將bootstrap文件及依賴文件引入到head靠前位置，便于自己樣式層疊--><link rel="stylesheet" href="lib/bootstrap/bootstrap.css"><!-- 條件注釋，第一個是解決html5新標簽兼容性的，第二個是解決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已經包含了/popper.js，自己判斷版本自行增刪 --><script src="lib/bootstrap/bootstrap.js"></script><!-- 引入bootstrap.js文件-->基本結構說明：
<!-- 1.bootstrap要求使用HTML5文檔類型，現在最新html5聲明如下（可以簡寫為html）： --> <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><!-- 通常網頁開發都會聲明編碼--><!-- 2.bootstrap常用于移動端開發，如果是移動端開發，記得開啟視口，其標準視口書寫如下(新增自動適應手機屏幕寬度屬性：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插件，因為bootstrap是基于jQuery開發的： --><!-- <scrip src="lib/jquery/dist/jquery.js"></scrip> --><!---jquery本地文件在測試關閉提示框時出現報錯，經調試，修改為網絡資源可以正常運行--><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新標簽兼容性的插件，第二個是解決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中定義好有功能的類名即可，如果需要使用某個定義好的功能塊，那么直接將案例代碼拷貝到自己的代碼中即可。下面將介紹實際開發中常用的功能：
響應式容器：
<!-- container:定義一個響應式容器，使有此類名的容器在不同尺寸設備下顯示不同的尺寸，且水平居中，當小于570px時不再做變小 --><div class='container'></div>滿屏容器：
<!-- container-fluid:定義一個占據全部視口的容器，無論設備屏幕尺寸多大，總是100%占據視口寬度 --><div class='container-fluid'></div>柵格系統：
默認把頁面內容分成12等份（當然自己可以定制份數），由行和列組合的布局頁面,網格狀布局，在一個響應式容器中定義行和列。由類名row定義柵格系統的行，由col-x-n定義柵格系統的列。col-x-n中n表示所占柵格12份中的幾份，x參數:（xl屏幕尺寸大于1200px）其他如下：
柵格嵌套：每個柵格中是可以嵌套其它柵格的，就像div一樣，可以相互嵌套。
柵格偏移：col-(lg/md/sm/xs)-offset-n,給某個柵格添加此類可以使這個柵格向后偏移n份。
柵格排序：col-(lg/md/sm/xs)-push/pull-n,將某個柵格push推后幾份或將某個柵格pull拉前幾份。
<div class="container"><!--1.柵格系統要放在固定寬度或全屏容器中，實際開發中會利用bootstrap的響應式容器（媒體查詢原理固定的尺寸）--><div class="row"><!--row定義行--><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">1</div><!--col定義列，其中xs-12表示當在bootstrap中定義的xs屏幕時，此列占一行中的12份，即一行占滿；lg-2表示當在bootstrap中定義的尺寸為lg時，此時這列占一行中的2份，即2/12--><!--柵格嵌套開始：--><div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"><div class="row"><!--在一個col中可以繼續嵌套row行，row行中可以繼續劃分列，如：--><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>提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。
筆者：苦海
總結
以上是生活随笔為你收集整理的Bootstrap简介、下载bootstrap及引入文件说明、响应式容器和满屏容器、栅格系统的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机应用的时间地点意义,计算机应用在教
- 下一篇： javascript中BOM介绍、屏幕尺