分針網——IT教育：Bootstrap的使用
阿新 • • 發佈：2017-05-17
bootstrap
一、下載Bootstrap
Bootstrap下載
下載完成後解壓得到目錄結構
目錄結構1
將目錄結構的三個文件夾全部導入所要應用的站點目錄中，註意需要在js文件夾中添加框架依賴的JS庫文件
導入站點目錄
使用基本模板創建H5文件即可生成最簡單的Bootstrap頁面
二、viewPort
1.通俗的講，移動設備上的viewport就是 設備的屏幕上能用來顯示我們的網頁的那一塊區域，在具體一點，就是瀏覽器上(也可能是一個app中的webview)用來顯示網頁的那部分區域，但viewport又不局限於瀏覽器可視區域的大小，要根據PC或移動端決定。註意：同樣大小的屏幕，如果後者分辨率是前者的兩倍，則後者的一個css像素等效於兩個物理像素
2.基本模版中有如下的meta標簽，作用是讓當前viewport的寬度等於設備的寬度，同時不允許用戶手動縮放。
<meta name="viewport" content="width=device-width , initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> //要得到ideal viewport(理想視口)默認的layout viewport的寬度設為移動設備的屏幕寬度。 //因為meta viewport中的width能控制layout viewport的寬度， //所以我們只需要把width設為width-device這個特殊的值就行了。
三、布局容器
Bootstrap 必須需要為頁面內容和柵格系統包裹一個.container 容器。我們提供了兩個作此用處的類。註意，由於padding等屬性的原因，這兩種 容器類不能互相嵌套
.container 類用於固定寬度並支持響應式布局的容器。 .container-fluid 類用於 100% 寬度，占據全部視口（viewport）的容器。
兩種容器的代碼書寫
註意使用容器默認內容前面會有間距，如果想取消就在當前html中的css樣式中添加paddings屬性值為0像素，盡量不要改動原有的bootstrap模版中css文件的內容
兩種容器的區別
四、排版/表格/表單/按鈕/圖片
在使用bootstrap創建頁面時通過在html標簽引入已有的css類生成對應的排版效果，例如通過在p標簽中調用class="text-xxx"使文本顏色發生相應變化
排版需調用的固定css類
具體樣式在使用時通過bootstrap文檔查詢即可
五、柵格系統
Bootstrap內置了一套響應式、移動設備優先的流式柵格系統，隨著屏幕設備或視口（viewport）尺寸的增加，系統會自動分為最多12列。 註意：如果一行的列數大於12，則多余的列數會作為一個整體另起一行排列 柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。 註意：如下面的案例中根據 -xs -md 的劃分，第二行在桌面端顯示為3列，在手機端中則前兩列顯示為一行，第三列另起一行。而一般手機端會隱藏部分列內容，使得排版更加簡潔美觀
案例1--移動設備和桌面
媒體查詢 在柵格系統中，我們在 Less 文件中使用以下媒體查詢（media query）來創建關鍵的分界點閾值
/* 超小屏幕（手機，小於 768px） */ /* 沒有任何媒體查詢相關的代碼，因為這在 Bootstrap 中是默認的（還記得Bootstrap 是移動設備優先的嗎？） */
/* 小屏幕（平板，大於等於 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面顯示器，大於等於 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面顯示器，大於等於 1200px） */ @media (min-width: @screen-lg-min) { ... }
六、響應式工具
可用的類 通過單獨或聯合使用以下列出的類，可以針對不同屏幕尺寸隱藏或顯示頁面內容。
可用的類
七、常用組件
下拉菜單：可套用模板修改菜單名和超鏈接
按鈕工具欄 導航：膠囊式標簽頁 導航條：表單/按鈕/文本 分頁 表單
八、JavaScript 插件
Carousel：實現輪播圖效果
一、下載Bootstrap
Bootstrap下載
下載完成後解壓得到目錄結構
目錄結構1
將目錄結構的三個文件夾全部導入所要應用的站點目錄中，註意需要在js文件夾中添加框架依賴的JS庫文件
導入站點目錄
使用基本模板創建H5文件即可生成最簡單的Bootstrap頁面
二、viewPort
1.通俗的講，移動設備上的viewport就是 設備的屏幕上能用來顯示我們的網頁的那一塊區域，在具體一點，就是瀏覽器上(也可能是一個app中的webview)用來顯示網頁的那部分區域，但viewport又不局限於瀏覽器可視區域的大小，要根據PC或移動端決定。註意：同樣大小的屏幕，如果後者分辨率是前者的兩倍，則後者的一個css像素等效於兩個物理像素
2.基本模版中有如下的meta標簽，作用是讓當前viewport的寬度等於設備的寬度，同時不允許用戶手動縮放。
<meta name="viewport" content="width=device-width , initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> //要得到ideal viewport(理想視口)默認的layout viewport的寬度設為移動設備的屏幕寬度。 //因為meta viewport中的width能控制layout viewport的寬度， //所以我們只需要把width設為width-device這個特殊的值就行了。
三、布局容器
Bootstrap 必須需要為頁面內容和柵格系統包裹一個.container 容器。我們提供了兩個作此用處的類。註意，由於padding等屬性的原因，這兩種 容器類不能互相嵌套
.container 類用於固定寬度並支持響應式布局的容器。 .container-fluid 類用於 100% 寬度，占據全部視口（viewport）的容器。
兩種容器的代碼書寫
註意使用容器默認內容前面會有間距，如果想取消就在當前html中的css樣式中添加paddings屬性值為0像素，盡量不要改動原有的bootstrap模版中css文件的內容
兩種容器的區別
四、排版/表格/表單/按鈕/圖片
在使用bootstrap創建頁面時通過在html標簽引入已有的css類生成對應的排版效果，例如通過在p標簽中調用class="text-xxx"使文本顏色發生相應變化
排版需調用的固定css類
具體樣式在使用時通過bootstrap文檔查詢即可
五、柵格系統
Bootstrap內置了一套響應式、移動設備優先的流式柵格系統，隨著屏幕設備或視口（viewport）尺寸的增加，系統會自動分為最多12列。 註意：如果一行的列數大於12，則多余的列數會作為一個整體另起一行排列 柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。 註意：如下面的案例中根據 -xs -md 的劃分，第二行在桌面端顯示為3列，在手機端中則前兩列顯示為一行，第三列另起一行。而一般手機端會隱藏部分列內容，使得排版更加簡潔美觀
案例1--移動設備和桌面
媒體查詢 在柵格系統中，我們在 Less 文件中使用以下媒體查詢（media query）來創建關鍵的分界點閾值
/* 超小屏幕（手機，小於 768px） */ /* 沒有任何媒體查詢相關的代碼，因為這在 Bootstrap 中是默認的（還記得Bootstrap 是移動設備優先的嗎？） */
/* 小屏幕（平板，大於等於 768px） */ @media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面顯示器，大於等於 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面顯示器，大於等於 1200px） */ @media (min-width: @screen-lg-min) { ... }
六、響應式工具
可用的類 通過單獨或聯合使用以下列出的類，可以針對不同屏幕尺寸隱藏或顯示頁面內容。
可用的類
七、常用組件
下拉菜單：可套用模板修改菜單名和超鏈接
按鈕工具欄 導航：膠囊式標簽頁 導航條：表單/按鈕/文本 分頁 表單
八、JavaScript 插件
Carousel：實現輪播圖效果
鏈接：http://www.f-z.cn/id/150
學習更多IT知識 加群：272292492
分針網——IT教育：Bootstrap的使用