[學習筆記] bootstrap (三): 按鈕,圖片,圖標

按鈕

        <button class="btn btn-primary">加入購物車</button>
        <br/>
        <br/>
        <button class="btn btn-success">加入購物車</button>
        <br/>
        <br/>
        <button class="btn btn-info">加入購物車</button>
        <br/>
        <br/>
        <button class="btn btn-warning">加入購物車</button>
        <br/>
        <br/>
        <button class="btn btn-danger">加入購物車</button>
        <br/>
        <br/>
        <button class="btn btn-link">加入購物車</button>
        <br/>
        <br/>
        <button class="btn btn-lg">加入購物車</button>
        <br/>
        <br/>
        <button class="btn btn-sm">加入購物車</button>
        <br/>
        <br/>
        <button class="btn btn-xs">加入購物車</button>
        <br/>
        <br/>
        <button class="btn btn-block">加入購物車</button>
        <br/>
        <br/>
        <button class="btn active">加入購物車</button>
        <br/>
        <br/>
        <button class="btn disabled">加入購物車</button>

以上分別有,顏色(psiwd),按鈕 模仿 鏈接 ,不同大小(lg,sm,xs),按鈕狀態(active,disabled)

圖片

<img src="download.png" class="img-rounded">
<img src="download.png" class="img-circle">
<img src="download.png" class="img-thumbnail">

三個分別爲:圓角風格,變成圓形,縮略圖(準確說是個邊框吧)

圖標(glyphicon )

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span> User
</button>

以上代碼使用button標籤構建一個按鈕,按鈕中文字爲User,文字前有一個圖標:用span加class構成的圖標

同時可以配合其他樣式構造更好看的圖標(如改變大小,顏色,)