Bootstrap學習-排版-表單

一、標題

<h1>~<h6>，全部標題的行高都是1.1（也就是font-size的1.1倍）。

二、副標題

<small>，行高都是1，灰色（#999）

<h1>主標題

　　<small>副標題</small>

</h1>

三、Body樣式

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}

四、<p>，段落樣式

p { margin: 0 0 10px; }

五、強調樣式 .lend

.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 200;
line-height: 1.4;
}

六、粗體<b><strong>

b,strong {
  font-weight: bold; /*文本加粗*/
}

七、斜體<i><em>

<em> <strong> 通常是展示給爬蟲看的（偏重語義），<i><b>是展示給用戶的（偏重視覺效果）。

八、字體顏色

• .text-muted：提示，使用淺灰色（#999）
• .text-primary：主要，使用藍色（#428bca）
• .text-success：成功，使用淺綠色(#3c763d)
• .text-info：通知信息，使用淺藍色（#31708f）
• .text-warning：警告，使用黃色（#8a6d3b）
• .text-danger：危險，使用褐色（#a94442）

九、文字對齊方式

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

十、列表去點 .list-unstyled

.list-unstyled {
padding-left: 0;
list-style: none;
}

十一、水平導航.list-inline

<ul class="list-inline">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

十二、定義列表

<dl>
    <dt>主題一</dt>
    <dd>內容一</dd>
    <dt>主題二</dt>
    <dd>內容二</dd>
</dl>

水平定義列表.dl-horizontal

1三、輸入代碼樣式

（1）<code>：通常是針對於單個單詞或單個句子的代碼
（2）<pre>：通常是針對於多行代碼（也就是成塊的代碼）
（3）<kbd>:通常是表示用戶要經過鍵盤輸入的內容

1四、表格樣式

.table：基礎表格-不可缺乏

.table-striped：斑馬線表格

.table-bordered：帶邊框的表格

.table-hover：鼠標懸停高亮的表格-能夠與其餘表格樣式疊加使用

.table-condensed：緊湊型表格

.table-responsive：響應式表格-小屏添加滾動條

表格背景顏色

1五、基礎表單

role是一個html5的屬性，role="form"告訴輔助設備（如屏幕閱讀器）這個元素所扮演的角色是個表單

1六、水平表單

.form-horizontal

1七、內聯表單

<div class="form-group">
  <label >QQQ</label>
  <input type="">
</div>

1八、輸入框input

輸入類型 - email
email 輸入類型用於應該包含電郵地址的輸入字段。
當提交表單時，會自動地對 email 字段的值進行驗證。

1九、複選框checkbox和單選擇按鈕radio

.checkbox

<div class="checkbox">
    <label>
      <input type="checkbox" value="">
      QQQ
    </label>
  </div>

.radio

  <div class="radio">
    <label>
      <input type="radio" value="love" checked>
      CCC
    </label>
  </div>

水平顯示

    <div class="form-group">
        <label class="radio-inline">
            <input type="radio" value="mazey" name="mazey">男性
        </label>
        <label class="radio-inline">
            <input type="radio" value="mazey" name="mazey">中性
        </label>
        <label class="radio-inline">
            <input type="radio" value="mazey" name="mazey">女性
        </label>
    </div>

一、若是checkbox須要水平排列，只須要在label標籤上添加類名「checkbox-inline」
二、若是radio須要水平排列，只須要在label標籤上添加類名「radio-inline」

20、表單控件大小-僅改變高度

一、input-sm:讓控件比正常大小更小
二、input-lg:讓控件比正常大小更大

2一、表單驗證狀態

一、.has-warning:警告狀態（黃色）
二、.has-error：錯誤狀態（紅色）
三、.has-success：成功狀態（綠色）

顯示勾號叉號要加.has-feedback

  <div class="form-group has-success has-feedback">
      <label class="control-label" for="qqq">E-Mail地址</label>
      <input type="text" class="form-control" id="qqq" placeholder="qqq">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>

表單提示文字.help-block

  <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">錯誤狀態</label>
    <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態">
    <span class="help-block">你輸入的信息是錯誤的</span>
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>

2二、按鈕樣式

.btn

.btn-default

能夠用在a，span，div等標籤中。

   <button class="btn" type="button">基礎按鈕.btn</button>  
   <button class="btn btn-default" type="button">默認按鈕.btn-default</button>
   <button class="btn btn-primary" type="button">主要按鈕.btn-primary</button>
   <button class="btn btn-success" type="button">成功按鈕.btn-success</button>
   <button class="btn btn-info" type="button">信息按鈕.btn-info</button>
   <button class="btn btn-warning" type="button">警告按鈕.btn-warning</button>
   <button class="btn btn-danger" type="button">危險按鈕.btn-danger</button>
   <button class="btn btn-link" type="button">連接按鈕.btn-link</button>

HTML <button> 標籤的 type 屬性
值 描述
submit 該按鈕是提交按鈕（除了 Internet Explorer，該值是其餘瀏覽器的默認值）。
button 該按鈕是可點擊的按鈕（Internet Explorer 的默認值）。
reset 該按鈕是重置按鈕（清除表單數據）

2三、按鈕大小

<button class="btn btn-primary btn-lg" type="button">大型按鈕.btn-lg</button>
<button class="btn btn-primary" type="button">正常按鈕</button>
<button class="btn btn-primary btn-sm" type="button">小型按鈕.btn-sm</button>
<button class="btn btn-primary btn-xs" type="button">超小型按鈕.btn-xs</button>

2四、塊狀按鈕

.btn-block 使按鈕充滿整個容器（父級元素）。

2五、按鈕狀態

當按鈕處理正在點擊狀態（也就是鼠標按下的未鬆開的狀態），對於<button>元素是經過「:active」僞類實現，而對於<a>這樣的標籤元素則是經過添加類名「.active」來實現。

禁用狀態.disabled

disabled="disabled" 用類禁用可能有禁用樣式，但沒有禁用效果，依然能夠點。

2六、圖像

一、img-responsive：響應式圖片，主要針對於響應式設計
二、img-rounded：圓角圖片
三、img-circle：圓形圖片
四、img-thumbnail：縮略圖片

因爲樣式沒有對圖片作大小上的樣式限制，因此在實際使用的時候，須要經過其餘的方式來處理圖片大小。好比說控制圖片容器大小。（注意不能夠經過css樣式直接修改img圖片的大小，這樣操做就不響應了）對於圓角圖片和圓形圖片效果，由於是使用了CSS3的圓角樣式來實現的，因此注意對於IE8以及其如下版本不支持，是沒有圓角效果的。

2七、圖標

這裏說的圖標就是Web製做中常看到的小icon圖標，能夠說這些小icon圖標是一個優秀Web中不可缺乏的一部分，起到畫龍點睛的效果。在Bootstrap框架中也爲你們提供了近200個不一樣的icon圖片，而這些圖標都是使用CSS3的@font-face屬性配合字體來實現的icon效果。

    <span class="glyphicon glyphicon-search"></span>
    <span class="glyphicon glyphicon-asterisk"></span>
    <span class="glyphicon glyphicon-plus"></span>
    <span class="glyphicon glyphicon-cloud"></span>

還有Font Awesome字體。

定製圖標網站：Link

 

連接