簡介

中文官網：www.bootcss.com

1.響應式框架

2.HTML5文檔類型

3.移動設備優先：必須設置viewport

Bootstrap框架使用

BT使用安裝

1.安裝：1.下載引入：生產環境版本

2.CDN服務

3.使用第三方工具安裝

2.文件結構：

css:樣式文件bootstrap[.min].css：全局樣式文件bootstrap-theme[.min].css：主題樣式文件 -- 一般不用*.map：源碼映射表 -- less或sass開發時，源碼與編譯之后的代碼對應關系 fonts:字體圖標字體 js:js功能插件bootstrap[.min].js：所有js功能插件npm.js：CommonJS環境中，用來加載所有的js功能插件

BT框架的CSS樣式

1.重寫了所有標簽的默認樣式 -- Normalize.css

2.提供了很多全局樣式(class)可以直接調用

3.將標簽和全局樣式結合生成了組件可以直接使用

全局樣式

1.布局容器：.container：通過媒體查詢設置固定寬度的容器

.container-fluid：類似100%寬度的容器

2.柵格系統：

1.將屏幕等分成12列,一行超出12列，則多余列所在的元素會自動換行

2.柵格系統必須由布局容器包裹，布局容器下為行(.row)，行下面為列(col)，所有的內容必須放在列中

3.列與列之間都有15px的間隔，可以通過給row設置row-no-gutters移除

3.表格：.table--基本樣式

4.按鈕：.btn--基本樣式

5.圖片：.img-responsive -- 設置為響應式圖片

img-rounded -- 圖片圓角效果

img-circle -- 圖片圓形效果

img-thumbnail -- 圖片縮略圖效果（灰色邊框）

6.其他：.center-block：將塊級元素水平居中

.text-center：將文本水平居中

.pull-left或pull-right：快速浮動

.clearfix：清除浮動 -- 給父元素添加

組件

1.字體圖標

2.導航：所有的導航組件都依賴.nav

BT框架的JS插件

1.BT框架的JS插件依賴jQuery

2.引入方式：

1.全部一次性引入：bootstrap[.min].js

2.單個引入：根據功能引入對應的js文件 -- 插件之間有依賴

3.data屬性：可以直接通過data-*屬性設置插件相關效果 -- 推薦

總結

以上是生活随笔為你收集整理的Bootstrap框架使用（安装，全局样式，组件，插件）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。