2.17學(xué)習(xí)經(jīng)驗分享#

Bruce_Zhu于2017.2.17

一. bootstrap-全局css樣式-柵格布局系統(tǒng)-重點難點

1. 所有的行必須放在容器中.container或container-fluid

   container

   screen>1200px(超大PC顯示器-lg)  容器寬1170px
   screen>992px(普通PC顯示器-md)   容器寬970px
   screen>768px(平板顯示器-sm)     容器寬750px
   screen<768px(手機顯示器-xs)     容器寬auto
   

   container-fluid: width:auto+befor+after

2. 分為多行，一行最多分為12列

3. 網(wǎng)頁內(nèi)容只能放在列中，不能放到行中

4. 可以在col中再嵌套row

5. col分為四大類 col-xs-i col-sm-i col-md-i col-lg-i， i值可以為1-12，值為某個列的寬度

6. 可以為一個列指定不同屏幕下的寬度

7. col-lg-i 大PC
   col-md-i 大PC 普通PC
   col-sm-i 大PC 普通PC 平板
   col-xs-i 大PC 普通PC 平板 手機

8. hidden-lg 大PC
   hidden-md 普通PC
   hidden-sm 平板
   hidden-xs 手機

9. 列的偏移問題

   col-xs-offset-i 大PC 普通PC 平板 手機
   col-sm-offset-i 大PC 普通PC 平板
   col-md-offset-i 大PC 普通PC
   col-lg-offset-i 大PC

一行中放一列
一行中放多列
一個行中指定不同寬度的列
一個列中指定不同屏幕下的不同寬度
不同屏幕下列寬的有效范圍

10. 使用柵格系統(tǒng)實現(xiàn)響應(yīng)式布局

11.補充.

1. web開發(fā)頁面布局可以采用的方式

   1. 使用table做布局

      簡單不易出錯，但加載效率低

   2. HTML+CSS

      加載速度快，靈活，不易控制

3）使用bootstrap提供的柵格(grid layout)布局系統(tǒng)

    加載速度快，靈活，支持響應(yīng)式功能，容易控制(有行和列的概念)

2. css相關(guān)知識

   1. 如何解決父元素的第一個子元素margin-top越界問題

      給父元素加border-top
      給父元素指定padding-top
      給父元素指定overflow:hidden
      讓該元素不是第一個子元素
      為父元素添加前置內(nèi)容生成-推薦使用
      .parent:before {
      content:" ";
      display:table;
      }

   2. 如果解決所有子元素浮動后，父元素高度變?yōu)?，且影響后續(xù)元素

      給父元素指定overflow:hidden
      為父元素指定高度
      為父元素添加后置內(nèi)容生成-推薦使用
      .parent:after {

      content:"";
      display:table;
      clear:both;
      

      }

3. bootstrap系統(tǒng)中容器的特點

   寬度做了媒體查詢
   添加了前置和后置內(nèi)容生成，可以防止子元素的越界,浮動影響

二. bootstrap-全局css樣式-表單-重點難點

1. bootstrap中的表單分為三種
   
  1) 默認(rèn)表單

      <form>

         <div class="form-group">
           <label class="control-label"></label>

           <input class="form-control">
           <span class="help-control"></span>

         </div>
         
         //bootstrap指定：單選和雙選按鈕要放到label標(biāo)簽中

         <div class="checkbox">
         <label>
             <input type="checkbox">我接受本站的使用條款
         </label>
         </div>

      </form>

  2) 行內(nèi)表單

     給表單添加form-inline即可

  3) 水平表單


     默認(rèn)的柵格系統(tǒng)：container->row->col-*
     默認(rèn)的柵格系統(tǒng)：form-horizontal->form-group->col-*

三. bootstrap-組件-圖標(biāo)字體

 1.glyphicons是一套收費的圖標(biāo)字體，提供了web/移動開發(fā)中常用的小圖標(biāo)

 2. bootstrap中可以免費使用這套字體中的250+個，以服務(wù)器端字體形式出現(xiàn)的

 3. 圖標(biāo)字體的本質(zhì)不是圖片，而是字體

 4. glyphicon 圖標(biāo)字體只能用于空元素-不能包含任何內(nèi)容或子元素；

 5. 用法

    <span class="glyphicon glyphicon-user"></span>

    字體文件夾fonts必須跟html文件同級

四. bootstrap-組件-按鈕組

  btn-group 水平按鈕組
  btn-group-vertical 豎直按鈕組
  btn-group btn-group-justified 水平且兩端對齊的按鈕組
  btn-group-lg
  btn-group-xm
  btn-group-xs

五. bootstrap-組件-下拉菜單 重點簡單

 1. 必須html結(jié)構(gòu)

    <div class="dropdown"> 相對定義的父元素
      <a data-toggle="dropdown">觸發(fā)元素</a>
      <ul/div class="dropdown-menu">隱藏元素</ul/div>  絕對定位
    </div>

 2. 
    divider 分割線
    dropdown-header 分類頭