IT技術互動交流平jiao)/h4>

云顶集团官网

作者︰天(tian)堂路(lu)上  發布日期︰2020-02-20 03:49:33

突然感(gan)覺不知道寫啥(sha)子,腦(nao)子里(li)面沒水了,可能是(shi)因為今晚要出去浪,哈哈~~~提(ti)前提(ti)醒(xing)大家平安夜要回家哦,聖誕(dan)節生(sheng)00000000000這麼多蛋(dan)。。。。繼續

上一篇(pian)的(de)已經把bootstrap了解個(ge)大概了,接下來(lai)我們就開始學習一下它里(li)面的(de)東西。

瀏覽器支持

舊的(de)瀏覽器可能無法很(hen)好(hao)的(de)支持

Bootstrap 支持 Internet Explorer 8 及更高版本的(de) IE 瀏覽器

CSS源碼研究(jiu)

我們不是(shi)在head里(li)面引入了下面這些文(wen)件麼

<!-- 新 Bootstrap 核心(xin) CSS 文(wen)件 --> <link rel='stylesheet' href='http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css'> <!-- 可選的(de)Bootstrap主題文(wen)件(一hua)悴揮靡耄--> <link rel='stylesheet' href='http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css'> <!-- jQuery文(wen)件。務必在bootstrap.min.js 之前引入 --> <script src='http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js'></script> <!-- 最新的(de) Bootstrap 核心(xin) JavaScript 文(wen)件 --> <script src='http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js'></script>

OK,看(kan)核心(xin)的(de),這里(li)從(cong)bootstrap.min.css開始,這是(shi)壓縮了shuo)de),看(kan)的(de)話(hua)最好(hao)看(kan)沒有(you)壓縮的(de)版本︰http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.css

我講(jiang)的(de)就是(shi)按(an)照(zhao)非壓縮版本的(de)CSS來(lai)走的(de)

266行之前基本上都(du)是(shi)標簽(qian)格式化、初始化的(de)一些東西,為了讓某些同學更好(hao)理(li)解,我把一些特(te)殊的(de)大體(ti)提(ti)一下。

第一個(ge)

input[type='number']

CSS屬性選擇器,可能對于初學者來(lai)說(shuo),或沒寫過的(de)小盆友就不熟悉了,這個(ge)屬性就是(shi)對<input type=”number”/>標簽(qian)進行xing)戒秩荊  shi) 這個(ge),我想你就知道其它的(de)nao)趺慈?戳/p>

第二個(ge)

display: block; 

這個(ge)你可能會(hui)說(shuo)︰“這個(ge)我知道,轉換元(yuan)素特(te)性呀~~~”,哈哈,沒錯,但(dan)你知道具體(ti)轉了會(hui)怎(zen)麼樣,或為什麼要轉,與之對應(ying)的(de)又是(shi)什麼呢?

好(hao),我大體(ti)說(shuo)一下(會(hui)的(de)朋友就不用看(kan)了),在HTML里(li)面有(you)”塊(kuai)元(yuan)素”與”行xin)讜yuan)素”之說(shuo),它們各自的(de)默認主要特(te)性︰

塊(kuai)元(yuan)素︰獨佔一行,能設置寬(kuan)、高度,默認寬(kuan)度是(shi)父容器的(de)100%

行xin)讜yuan)素︰不獨佔一行,不能設置寬(kuan)、高度

知道這個(ge)後,那麼給元(yuan)素加(jia)一個(ge)display: block; 就是(shi)把元(yuan)素轉換成塊(kuai)元(yuan)素,讓元(yuan)素可以(yi)設置寬(kuan)、高度。OK,現在知道這個(ge)的(de)用法了吧

第三(san)個(ge)

color: #000 !important;

這個(ge)嘛,前面部分肯定知道,後面!important是(shi)什麼鬼???  優(you)化級,也就是(shi)說(shuo),當它作用到某一個(ge)元(yuan)素上時,只要是(shi)支持它的(de)瀏覽器都(du)會(hui)優(you)先為color:#000;,而不管後面有(you)相同的(de)屬性被覆蓋(gai)(當然覆蓋(gai)的(de)屬性值沒有(you)加(jia)!important的(de)情況)。

第四個(ge)

@font-face

267行,這個(ge)屬性是(shi)CSS3里(li)面的(de),主要功能就是(shi)把自定義的(de)web字體(ti)嵌入到你的(de)網頁中,這樣就不怕(pa)你的(de)網頁不顯示一些別個(ge)電腦(nao)上沒有(you)的(de)字體(ti)了。用別個(ge)的(de)話(hua)說(shuo),這叫字體(ti)圖標,字體(ti)圖標很(hen)多系統都(du)jia)校 皇shi)bootstrap才有(you)的(de)哦,好(hao)處就是(shi)能把圖標像(xiang)字體(ti)一樣使(shi)用,像(xiang)什麼改變(bian)顏色(se),設置大體(ti)什麼的(de)。好(hao)吧,那該(gai)怎(zen)麼cong)媚兀/p>

哈哈,其實不用管,已經弄(long)好(hao)了shuo)de)~~~看(kan)下面

@font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') …}

看(kan),CSS引入了幾個(ge)文(wen)件,在上級目錄的(de)fonts文(wen)件里(li)面,自己(ji)打(da)開去看(kan)看(kan),不就是(shi)這幾個(ge)麼,當然你不用去管它了,知道怎(zen)麼回事就OK

更多字體(ti)圖標,看(kan)這個(ge)︰http://noob.d8jd.com/noob/5/117.html

例如(ru)︰

<span class='glyphicon glyphicon-refresh'></span>

一個(ge)刷新的(de)字體(ti)圖標就出來(lai)了

273行到885行全是(shi)關于字體(ti)相關的(de)css屬性

第五個(ge)

@media

這個(ge)就做自適應(ying)就顯得重(zhong)要了,先看(kan)它是(shi)什麼鬼。

字體(ti)上就是(shi)媒(mei)jiao)ti)的(de)意思,其實原理(li)就是(shi)規定不同媒(mei)jiao)ti)(設備)應(ying)用不同的(de)樣式而已

 

@media (min-width: 768px){ //>=768的(de)設備 }@media (min-width: 992px){ //>=992的(de)設備 }@media (min-width: 1200){ //>=1200的(de)設備 }注意下順序,如(ru)果你把@media (min-width: 768px)寫在了下面那麼很(hen)悲劇,@media (min-width: 1200){ //>=1200的(de)設備 }@media (min-width: 992px){ //>=992的(de)設備 }@media (min-width: 768px){ //>=768的(de)設備 }因為如(ru)果是(shi)1440,由于1440>768那麼你的(de)1200就會(hui)失(shi)效。所以(yi)我們用min-width時,小的(de)放上面大的(de)nao)諳旅媯  li)如(ru)果是(shi)用max-width那麼就是(shi)大的(de)nao)諫廈媯 〉de)nao)諳旅media (max-width: 1199){ //<=1199的(de)設備 }@media (max-width: 991px){ //<=991的(de)設備 }@media (max-width: 767px){ //<=768的(de)設備 }

再次(ci)聲明(ming)︰如(ru)果是(shi)min-width設置的(de),小的(de)nao)諫廈媯 蟺de)nao)諳旅媯ax-width設置的(de),大的(de)nao)諫廈媯 〉de)nao)諳旅/p>

知道了這個(ge),那麼ci)頤竅朧shi)不是(shi)可以(yi)混合使(shi)用了呢。指定某個(ge)區間(jian),看(kan)下面︰

@media screen and (min-width: 960px) and (max-width: 1199px) { …}@media screen and (min-width: 768px) and (max-width: 959px) {…}….

意思我就不說(shuo)了,相信你能看(kan)懂

其它的(de)好(hao)像(xiang)沒什麼了,後面在講(jiang)實例的(de)時候我們再回頭(tou)去分析與之對應(ying)的(de)

~~~過節了,真(zhen)心(xin)想耍,今天(tian)over~~~

Tag標簽(qian)︰框架  
  • 云顶集团官网

About IT165 - 廣(guang)告服務 - 隱私聲明(ming) - 版權申明(ming) - 免責條款 - 網站(zhan)地圖 - 網友投稿 - 聯系方式
本站(zhan)內(na)容來(lai)自于互聯網,僅供用于網絡技術學習,學習中請(qing)遵(zun)循相關法律法規
云顶集团官网 | 下一页