Bootstrap 中 類別樣式名稱和標簽（一）

每次看每次都覺得新鮮，用起來的時候卻還是習慣性的忘記其原有的東西，自己再寫出來一個自己都覺得是多余的內容。所以此次決定再捋一遍，記錄每個class 和標簽，具體的再不斷的完善更新吧，下次再用直接查筆記，就不用去官網了。哈哈（想得美(─.─|||）

一、頁面排版：

1.頁面主體

  全局 font-size:14px; line-height:1.428(即20px)； color:#333;

  <p> 段落元素為 1/2 行高（即10px）;

1. 　lead　

.lead  {

          margin-bottom: 20px;

          font-size: 16px;

          font-weight: 300;

          line-height: 1.4;


　　}

@media (min-width: 768px){
　　.lead{
　　　　font-size:21px;
　　}
}

 

2.標題  ( 內聯元素定義class=（.h1~h6）)

  <h1> //36px

  <h2> //30px

  <h3> //24px

  <h4> //18px

  <h5> //14px

  <h6> //12px

 可以嵌入 <small>元素作為副標題，h1~h3下的small, font-size:65%;(分別為23.4px ；19.5px; 15.6px) h4~h6下，font-size:75%;(分別為:13.5px;10.5px;9px;), 樣式更改：color:#777;line-height:1;font-weight:400; 其余樣式參考官網。

3.內聯文本元素

  <mark>      // 添加標記

  <del>         // 刪除文本

  <s>            // 無用本文

  <ins>         // 插入的文本

  <u>           // 下划線文本 效果同上

  <small>    // 標准字號的85%

  <strong>  // 加粗 700

  <em>       // 傾斜

4.對齊方式

  .text-left           //  居左

  .text-right        //  居右

  .text-center     //  居中

  .text-justify    //  兩端對齊，支持度不佳

  .text-nowrap  //  不換行

5.英文文本大小寫

  .text-lowercase     //  小寫

  .text-uppercase    //  大寫

  .text-capitalize    //  首字母大寫

 

6.縮略語

   <abbr>  //  沒有被復寫，可添加 class=“initialism”

   .initialism

.initialism{
     font-size:90%;
     text-transform:uppercase;    
}

 

7.地址文本

   <address>  //  去掉傾斜，設置行高，底部20px

8.引用為本

   <blockquote>  //  border-left:5px solid #eee; font-size:17.5px; margin:0 0 20px; padding:10px 20px; 

    .blockquote-reverse      // 反向（border-right:5px solid #eee; border-left:0; padding-right:15px; padding-left:0; text-align:right;）

    blockquote.pull-right   //  反向 (效果同上)

9.列表

    .list-unstyled  //  ul 移除默認樣式

    .list-inline      //  ul 設置成內聯方式

    .dl-horizontal  //  dl 水平排列描述列表

10.代碼

   <code>  //  內聯代碼 

   <kbd>  //  用戶輸入

   <pre>  //  代碼塊

   <var>  //  表示標記變量，沒有復寫css

   <samp>  //  代表程序輸出，沒有復寫css

11.表格

   *基於table添加class*

    .table  //  基本的表格樣式,以下類別要基於class=“table” 基礎上出現

    .table-striped   //  條紋狀的表格，<tbody>產生一行隔一行加單色背景效果

    .table-bordered  //  增加邊框

    .table-hover  //  <tbody>下表格懸停鼠標實現背景效果

   *在tr上添加class，設置每一行的背景樣式*

    .success      //  成功或者積極的動作

    .active        //   鼠標懸停在行或者單元格上

    .info           //  普通的提示信息或者動作

    .warning    //  警告或需要用戶注意

    .danger      //  危險或潛在帶來的負面影響的動作   

    .sr-only      //  隱藏行,不僅僅在tr用，可以在測試的地方用

   *響應式表格，父元素上設置，<768px出現邊框*

    .table-responsive      //  縮小的時候會加上邊框, 在小屏幕設備上（小於768px）水平滾動。當屏幕大於 768px 寬度時，水平滾動條消失

    fieldset      // Firefox 瀏覽器對 fieldset 元素設置了一些影響 width 屬性的樣式，導致響應式表格出現問題。可使用針對 Firefox 的 hack 代碼解決，但是以下代碼並未集成在 Bootstrap 中：    

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

 

 

 

 

12.按鈕 （a,button,input 通用的）

    1) 都為按鈕使用法:

<a href="#" class="btn">按鈕</a>

<button class="btn">Button</button>

<input type="button" class="btn" value="input" > 

  P.s. 1、導航和導航組件只支持<button>元素

        2、<a>作為按鈕使用，並有觸發某些功能，不用於鏈接頁面功能，那么，必設置 role="button" 屬性。

        3、跨瀏覽器展現，盡可能的使用<button>元素，匹配各個瀏覽器的兼容的繪制效果， <input> line-height屬性在firefox<30上出先bug。

   

      2) class 類名：

       .btn-default      //  默認樣式

       .btn-success     //  成功樣式     

       .btn-info          //  一般信息樣式 

       .btn-warning   //  警告樣式

       .btn-danger    //  危險樣式  

       .btn-primary  //  首選項樣式 

       .btn-link        //  鏈接樣式 

     3）尺寸大小：   (從大到小)    

       .btn.btn-lg   

       .btn   

       .btn.btn-sm     

       .btn.btn-xs   

    4) 其他類別:

       .btn.btn-block      //塊級換行
       .btn.active           //激活按鈕，點擊的樣式
       .btn.disabled      //禁用按鈕