Bootstrap框架
Bootstrap框架
-
為什么要學Bootstrap框架
Bootstrap框架: 為我們提供了用來實現響應式開發的公共資源 總結: Bootstrap框架用來實現響應式布局 -
Bootstrap框架中重點學什么
Bootstrap框架提供了很多豐富的網頁開發資源,代碼有上萬行代碼.1. 重點學習框架中提供的基礎樣式 2. 重點學習框架中提供的柵格系統(用來實現響應式布局) -
Bootstrap框架使用
-
下載 （bootstrap.css）
- 生產環境: 該框架代碼是經過壓縮后的代碼,文件的命名是以 .min命名的
- 源碼: 將框架的源代碼,沒有經過壓縮的代碼使用
- Sass: 與less一樣,也是用來寫CSS代碼的另外一種工具
-
使用
-
網頁中必須引用bootstrap.css文件或者對應的bootstrap.min.css
bootstrap.css : 沒有壓縮的 bootstrap.min.css : 壓縮過后的文件
-
-
-
知識點-Bootstrap-全局樣式介紹
-
排版樣式
-
用來表示網頁標題的可以通過
到 表示 -
還可以通過 ‘.h1’ - '.h6’表示標題
-
在網頁中表示副標題通過 標簽 或者 ‘.small’
-
對齊方式:
.text-left 左對齊 .text-center 居中對齊 .text-right 右對齊 -
修改字母大小寫轉化
.text-lowercase 將字母轉為小寫字母 .text-uppercase 將字母轉化為大寫字母 .text-capitalize 將首字母轉為大寫為什么通過設置類名可以實現字母大小寫轉化? 本質上就是使用了: text-transform屬性實現的 -
列表
.list-unstyled ----> 去掉列表的默認樣式 .list-inline ----> 實現列表項一行顯示 -
表格
.table ---> 設置表格基礎樣式 .table-bordered ----> 設置帶有邊框的表格 .table-hover --->設置鼠標懸停表格時候的樣式
-
-
圖標字體使用
1. 要引用 bootstrap.css 2. 直接在標簽上使用對應的類名就可以了例如: <span class="glyphicon glyphicon-hand-right"></span>
-
-
知識點-Bootstrap-柵格系統介紹
-
Bootstrap-柵格系統作用
Bootstrap-柵格系統作用: 就是用來實現響應式布局 -
Bootstrap-柵格系統使用
1. 準備一個父容器,父容器的類名必須叫: 'container' 或 'container-fluid'container: 表示的是當前父容器是一個居中的盒子 (固定寬度)container-fluid : 表示的是父容器是一個通欄的盒子 (100%)2. 通過柵格參數實現響應式布局[必須要記住的].col-md-值 : 當前盒子在PC端所占的比例(份數, 寬度).col-sm-值 : 當前盒子在ipad端所占的比例(份數, 寬度).col-xs-值 : 當前盒子在移動端所占的比例(份數,寬度).col-lg-值: 當前盒子在超大設備中占的比例 -
柵格系統使用
1. 柵格參數后面的值只能在 1 - 12 之間取值 2. 不管在什么設備下,柵格系統最多將設備分為12列(12等份)注意:1. 如果柵格參數的值相加大于12,那么多余的元素會自動換行
-
-
阿里百秀案例-Bootstrap
案例底部結構
-
放一個整體的一個大盒子
<div class="footer"><div class="w"><div class="top"></div><div class="middle"></div><div class="bot"></div></div> </div> -
在ip端只要修改版心的寬度為100%
-
在移動端只需要將版心寬度為100%
-
在移動端中,先將ul的寬度改大(自定義一個值),目的為了保證li一行顯示
-
由于ul的寬度超出了其父元素的寬度,所以給其父元素設置滾動條
overflow: scroll | auto
-
知識總結
-
行高只能實現單行文字垂直居中
-
設置鼠標樣式
cursor: help | pointer | move -
響應式布局
和string.join(ls))
 A. Even Substrings)
