以前在HTML裡，按鍵通常只有在做表單送出時才會用到，
但用 Bootstrap 的過程中，按鍵反而成為美化網頁的好方法。

有關美工的設計或怎麼美化，
自己的要求實在很低，
只要能有功能就很高興了…
但現在是內外、表裡都需要有要求的時代，
對我來說是個頭大的事；
而 Bootstrap 裡設計好的一些元件，
只要用來組合一下不同屬性，
就有看來還不錯的外觀。

從上圖的演進過程中，
一般的連結最常是用1的最陽春作法，
但用了Bootstrap後會發現，
在 2 裡，A 標籤只要加上 btn 的class，
就會變成像按鍵的元件，
但原本還是 A 的連結標籤。
按鍵沒顏色是比較單調，
加上色彩後就較生動些，
在 Bootstrap 裡對於不同的情況有一致的顏色來對應，
像第 3 裡像綠色代表成功、紅色代表危險或重要的意思。
而這顏色系統，
也運用到其他元件的顏色屬性上，
用此一致的命名指到該顏色。

按鍵有顏色後，可再加上相關的圖示，
很明顯地，第 4 這一列，有圖有文有色彩，
看起來就比前面幾行更為悅目些，
其實都只是同樣的按鍵或連結。

  %body
    .container
      .page-header
        %h3 有關元件的美化
      .row
        %span.label.label-success 1
        %a{:href => "#"} 首頁
        %a{:href => "#"} 聯絡
        %a{:href => "#"} 登入
        %a{:href => "#"} 搜尋
      %hr
      .row
        %span.label.label-info 2
        %a.btn.btn-default{:href => "#"} 首頁
        %a.btn.btn-default{:href => "#"} 聯絡
        %a.btn.btn-default{
:href => "#"} 登入
        %a.btn.btn-default{:href => "#"} 搜尋
      %hr
      .row
        %span.label.label-warning 3
        %button.btn.btn-default default
        %button.btn.btn-primary primary
        %button.btn.btn-info info
        %button.btn.btn-success success
        %button.btn.btn-warning warning
        %button.btn.btn-danger danger
        %button.btn.btn-inverse inverse
      %hr
      .row
        %span.label.label-danger 4
        %a.btn.btn-primary{:href => "#"}
          %span.glyphicon.glyphicon-home
          首頁
        %a.btn.btn-success{:href => "#"}
          %span.glyphicon.glyphicon-phone-alt
          聯絡
        %a.btn.btn-warning{:href => "#"}
          %span.glyphicon.glyphicon-user
          登入
        %a.btn.btn-danger{:href => "#"}
          %span.glyphicon.glyphicon-search
          搜尋

其中的圖示，需要參考：
Glyphicons 這一節的說明，

這些是開放可用的字型圖示，
如果要更多的小圖示，
就需要找其他的字型圖，
或者用購買的方式擴充。

如果怕大家都用這同樣的顏色系統，
會造成你的作品不夠出色而要換色的話，
可利用類似：
Bootstrap ThemeRoller 的工具網站，
透過自己的設定來產生 Bootstrap 不同色調的風格。

透過 Bootstrap 元件的組合運用，
就能幫你的元件快速美化，
只要依著此組合的邏輯，
就能省掉了很多的嘗試錯誤的過程。
而達到快寫HTML及美化。

系列文章列表