突然感覺不知道寫啥子，腦子裡面沒水了，可能是因為今晚要出去浪，哈哈~~~提前提醒大家平安夜要回家哦，聖誕節生00000000000這麼多蛋。。。。繼續 上一篇的已經把bootstrap瞭解個大概了，接下來我們就開始學習一下它裡面的東西。 瀏覽器支持 舊的瀏覽器可能無法很好的支持 Bootstrap ...
突然感覺不知道寫啥子，腦子裡面沒水了，可能是因為今晚要出去浪，哈哈~~~提前提醒大家平安夜要回家哦，聖誕節生00000000000這麼多蛋。。。。繼續
上一篇的已經把bootstrap瞭解個大概了，接下來我們就開始學習一下它裡面的東西。
瀏覽器支持
舊的瀏覽器可能無法很好的支持
Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 瀏覽器
CSS源碼研究
我們不是在head裡面引入了下麵這些文件麽
<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- 可選的Bootstrap主題文件（一般不用引入） --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"> <!-- jQuery文件。務必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
OK，看核心的，這裡從bootstrap.min.css開始，這是壓縮了的，看的話最好看沒有壓縮的版本：http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.css
我講的就是按照非壓縮版本的CSS來走的
266行之前基本上都是標簽格式化、初始化的一些東西，為了讓某些同學更好理解，我把一些特殊的大體提一下。
第一個
input[type="number"]
CSS屬性選擇器，可能對於初學者來說，或沒寫過的小盆友就不熟悉了，這個屬性就是對<input type=”number”/>標簽進行樣式渲染，知識 這個，我想你就知道其它的怎麼去寫了
第二個
display: block;
這個你可能會說：“這個我知道，轉換元素特性呀~~~”，哈哈，沒錯，但你知道具體轉了會怎麼樣，或為什麼要轉，與之對應的又是什麼呢？
好，我大體說一下（會的朋友就不用看了），在HTML裡面有”塊元素”與”行內元素”之說，它們各自的預設主要特性：
塊元素：獨占一行，能設置寬、高度，預設寬度是父容器的100%
行內元素：不獨占一行，不能設置寬、高度
知道這個後，那麼給元素加一個display: block; 就是把元素轉換成塊元素，讓元素可以設置寬、高度。OK，現在知道這個的用法了吧
第三個
color: #000 !important;
這個嘛，前面部分肯定知道，後面！important是什麼鬼？？？ 優化級，也就是說，當它作用到某一個元素上時，只要是支持它的瀏覽器都會優先為color:#000;，而不管後面有相同的屬性被覆蓋（當然覆蓋的屬性值沒有加！important的情況）。
第四個
@font-face
267行，這個屬性是CSS3裡面的，主要功能就是把自定義的web字體嵌入到你的網頁中，這樣就不怕你的網頁不顯示一些別個電腦上沒有的字體了。用別個的話說，這叫字體圖標，字體圖標很多系統都有，不是bootstrap才有的哦，好處就是能把圖標像字體一樣使用，像什麼改變顏色，設置大體什麼的。好吧，那該怎麼用呢？
哈哈，其實不用管，已經弄好了的~~~看下麵
@font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') … }
看，CSS引入了幾個文件，在上級目錄的fonts文件裡面，自己打開去看看，不就是這幾個麽，當然你不用去管它了，知道怎麼回事就OK
更多字體圖標，看這個：http://noob.d8jd.com/noob/5/117.html
例如：
<span class="glyphicon glyphicon-refresh"></span>
一個刷新的字體圖標就出來了
273行到885行全是關於字體相關的css屬性
第五個
@media
這個就做自適應就顯得重要了，先看它是什麼鬼。
字體上就是媒體的意思，其實原理就是規定不同媒體（設備）應用不同的樣式而已
@media (min-width: 768px){ //>=768的設備 } @media (min-width: 992px){ //>=992的設備 } @media (min-width: 1200){ //>=1200的設備 } 註意下順序，如果你把@media (min-width: 768px)寫在了下麵那麼很悲劇， @media (min-width: 1200){ //>=1200的設備 } @media (min-width: 992px){ //>=992的設備 } @media (min-width: 768px){ //>=768的設備 } 因為如果是1440,由於1440>768那麼你的1200就會失效。 所以我們用min-width時，小的放上面大的在下麵，同理如果是用max-width那麼就是大的在上面，小的在下麵 @media (max-width: 1199){ //<=1199的設備 } @media (max-width: 991px){ //<=991的設備 } @media (max-width: 767px){ //<=768的設備 }
再次聲明：如果是min-width設置的，小的在上面，大的在下麵，max-width設置的，大的在上面，小的在下麵
知道了這個，那麼我們想是不是可以混合使用了呢。指定某個區間，看下麵：
@media screen and (min-width: 960px) and (max-width: 1199px) { … } @media screen and (min-width: 768px) and (max-width: 959px) { … } ….
意思我就不說了，相信你能看懂
其它的好像沒什麼了，後面在講實例的時候我們再回頭去分析與之對應的
~~~過節了，真心想耍，今天over~~~
