旺財速啃H5框架之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~~~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM