Bootstrap01

Bootstrap01內容概要

一.使用Bootstrap的步驟

　　1.下載Bootstrap類庫,包含三個部分,fonts,css,Bootstrap

　　2.導入項目中,在頭部引入JQ,css和Bootstrap

　　注意:JQ要引入在Bootstrap前面!

　　3.使用css樣式時,全部使用class屬性

二.全局CSS概要

　　1.僅支持H5文檔格式

　　2.移動設備優先,需要在頭部寫上:

<meta name="viewpoint" content="width=width-device,initial-scale=1.0"? />

?三.全局CSS-----布局容器

　　1.固定容器

　　　　class="container":使得網頁內容自動居中,兩側自動縮進

　　2.流式容器

　　　　class="container-fluid":使得網頁內容填充整行

　　效果如下:

四.全局CSS-----按鈕

　　1.success? 綠色

　　2.danger? 紅色

　　3.info? 淺藍色

　　4.warning? 橙黃色

　　5.primary? 海軍藍

　　6.default? 默認白

　　效果圖:

?

　　7.拓展:類似未讀消息提示,代碼和效果如下:

?

?

五.柵格系統 01的重點!

　　1.簡單網格系統示例及效果

　　　2.列偏移和柵格嵌套示例及效果

　　3.柵格位置交換示例及效果

?