Bootstrap 3.2.0 源碼試讀 2014/08/09

第一部分 normalize.css

104至110行

code,    /* 編輯代碼 */
kbd,    /* 鍵盤輸入的文本 */
pre,
samp {    /* 範例,sample的簡寫 */
  font-family: monospace, monospace;    /* 這個地方應該是寫錯了，第二字體應該是serif */
  font-size: 1em;
}

設置字體的大小爲1em，字體爲monospace。

111至119行

button,
input,
optgroup,    /* 選項組，配合select使用。有個label屬性用來顯示組描述 */
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}

設置外邊距是0，字體與顏色都繼續自父容器。

120至122行

button {
  overflow: visible;
}

按鈕上顯示的文本即便溢出也照常顯示。

123至126行

button,
select {
  text-transform: none;
}

按鈕與列表的文本的大小寫爲標準方式。

text-transform 屬性控制文本的大小寫，可選的值有5個。

一、none與inherit

二、capitalize，每一個單詞的第一個字母大寫

三、uppercase，全是大寫

四、lowercase，全是小寫

127至133行

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

設置按鈕的顯示樣式就是按鈕（聽着有點繞），鼠標放上去的時候顯示的是個表示能夠點擊的樣式。

appearance的值有6個，用來控制標籤顯示的樣式。

一、normal，瀏覽器的默認值

二、icon，像個圖標

三、window，像個窗口

四、button，像個按鈕

五、menu，像個菜單

六、filed，像個輸入框

cursor的值有挺多，若是你採用瀏覽器的默認值就設爲auto。

經常使用的有下面幾個

一、pointer，放連接上顯示的那種，有多是手形，有多是箭頭

二、crosshair，十字

三、wait，等待，沙漏的樣子

四、help，問號

五、move，十字箭頭

六、text，像能夠輸入文本的樣子

134至137行

button[disabled],
html input[disabled] {
  cursor: default;
}

按鈕及輸入框的禁用狀態，鼠標的樣式是箭頭。

138至142行

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

就是告訴瀏覽器，當按鈕、輸入框得到焦點的時候，不要顯示個虛框，搞的文字很差好在中間呆着。

143至145行

input {
  line-height: normal;
}

input的行高爲默認值，也就是字體的1到1.2倍。

146至152行

input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

單選框、複選框的寬度不包含邊框，同時內添充爲0.

153至156行

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

數據輸入框的上下調整按鈕的高度爲自動調整。

157至166行

input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

搜索框的寬度不包括內添充也不包括邊框，默認的樣式爲一個文本框。

不顯示搜索框的取消按鈕及搜索修飾的顯示樣式爲不顯示。

待續 ...