為什么要學Bootstrap框架

Bootstrap框架中重點學什么

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

放一個整體的一個大盒子

在ip端只要修改版心的寬度為100%

在移動端只需要將版心寬度為100%

• 在移動端中,先將ul的寬度改大(自定義一個值),目的為了保證li一行顯示

• 由于ul的寬度超出了其父元素的寬度,所以給其父元素設置滾動條

  overflow: scroll | auto

行高只能實現單行文字垂直居中

設置鼠標樣式

響應式布局