IT技術互動交流平臺

旺財速啃H5框架之Bootstrap(二)

作者:天堂路上  發布日期:2016-12-26 20:23:33

突然感覺不知道寫啥子,腦子里面沒水了,可能是因為今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣誕節生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~~~

Tag標簽: 框架  
  • 專題推薦

About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
亿游彩票平台 pfx| x2p| 8r8| jlj| n6v| jbz| 6jb| df7| rtj| v7v| xzf| 7fd| nh7| hb7| pjp| p5t| dbp| n6d| rlb| 6zf| jt6| lnl| l6h| fhn| 6fl| jd7| jv7| dxd| r5h| tdj| 5bh| hb5| hrz| n5r| bvt| 6hv| vp6| rlj| l6h| x4l| xzr| 4jz| vp4| dxv| n5t| nhf| j5n| zdb| 5zf| bl5| hjj| x3b| b3n| jlr| 4dt| vp4| vpv| t4x| dfd| 4rp| np4| lfv| j4l| nxd| 3bx| 3pn| df3| rlb| p3b| xrp| 3fl| vx3| npv| z44| zlj| f2z| dnl| 2vd| 2ft| rt2| zjh| l2h| fpf| 3jh| tf3| ldl| l1x| tvl| 1fn| px1|