IT技術互(hu)動交(jiao)流平台

甘肃快三官网

作(zuo)者︰天堂路上(shang)  發布日期︰2020-03-31 09:51:33

突然(ran)感覺(jue)不(bu)知道寫啥子,腦子里面沒水了,可(ke)能是因為(wei)今(jin)晚要出去(qu)浪,哈(ha)哈(ha)~~~提前(qian)提醒大(da)家平安夜要回家哦(ou),聖誕(dan)節生00000000000這麼多(duo)蛋。。。。繼(ji)續

上(shang)一篇的已經把bootstrap了解個大(da)概了,接下來ci)頤薔涂 shi)學習一下它里面的東西(xi)。

瀏覽器支(zhi)持(chi)

舊的瀏覽器可(ke)能無法(fa)很好的支(zhi)持(chi)

Bootstrap 支(zhi)持(chi) Internet Explorer 8 及an)gao)版本的 IE 瀏覽器

CSS源碼研究(jiu)

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

<!-- 新 Bootstrap 核(he)心 CSS 文(wen)件 --> <link rel='stylesheet' href='http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css'> <!-- 可(ke)選(xuan)的Bootstrap主題文(wen)件(一般不(bu)用引(yin)入) --> <link rel='stylesheet' href='http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css'> <!-- jQuery文(wen)件。務必在bootstrap.min.js 之前(qian)引(yin)入 --> <script src='http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js'></script> <!-- 最新的 Bootstrap 核(he)心 JavaScript 文(wen)件 --> <script src='http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js'></script>

OK,看核(he)心的,這里從bootstrap.min.css開始(shi),這是壓縮(suo)了的,看的話最好看沒有壓縮(suo)的版本︰http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.css

我講的就是qian)湊輾茄顧suo)版本的CSS來走(zou)的

266行之前(qian)基本上(shang)都是標簽(qian)格式(shi)jiao)  chu)始(shi)化的一些東西(xi),為(wei)了讓某些同學更好理解,我把一些特殊的大(da)體提一下。

第一個

input[type='number']

CSS屬性選(xuan)擇器,可(ke)能對于初(chu)學者來說,或(huo)沒寫過的小盆(pen)友(you)就不(bu)熟悉了,這個屬性就是對<input type=”number”/>標簽(qian)進行樣式(shi)渲(xuan)染,知識 這個,我想你就知道其它的怎(zen)麼去(qu)寫了

第二(er)個

display: block; 

這個你可(ke)能會說︰“這個我知道,轉換元素特性呀~~~”,哈(ha)哈(ha),沒錯,但你知道具(ju)體轉了會怎(zen)麼樣,或(huo)為(wei)什麼要轉,與之對應的又是什麼呢(ne)?

好,我大(da)體說一下(會的朋友(you)就不(bu)用看了),在HTML里面有”塊元素”與”行內元素”之說,它們各(ge)自的默認(ren)主要特性︰

塊元素︰獨佔一行,能設置寬、高(gao)度,默認(ren)寬度是父容器的100%

行內元素︰不(bu)獨佔一行,不(bu)能設置寬、高(gao)度

知道這個後,那麼給元素加一個display: block; 就是qian)言 刈 懷煽樵 兀 迷 乜ke)以設置寬、高(gao)度。OK,現在知道這個的用法(fa)了吧(ba)

第三個

color: #000 !important;

這個嘛,前(qian)面部(bu)分肯定知道,後面!important是什麼鬼???  優化級(ji),也(ye)就是說,當(dang)它作(zuo)用到某一個元素上(shang)時,只要是支(zhi)持(chi)它的瀏覽器都會優先為(wei)color:#000;,而(er)不(bu)管後面有相同的屬性被覆蓋(當(dang)然(ran)覆蓋的屬性值沒有加!important的情況(kuang))。

第四個

@font-face

267行,這個屬性是CSS3里面的,主要功能就是qian)炎遠ㄒ宓eb字體嵌入到你的網頁chi)校 庋筒bu)怕你的網頁不(bu)顯示一些別個電腦上(shang)沒有的字體了。用別個的話說,這叫(jiao)字體圖標,字體圖標很多(duo)系統都有,不(bu)是bootstrap才有的哦(ou),好處就是能把圖標像字體一樣使用,像什麼改變(bian)顏色,設置大(da)體什麼的。好吧(ba),那該怎(zen)麼用呢(ne)?

哈(ha)哈(ha),其實不(bu)用管,已經弄好了的~~~看下面

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

看,CSS引(yin)入了幾個文(wen)件,在上(shang)級(ji)目錄的fonts文(wen)件里面,自己打開去(qu)看看,不(bu)就是這幾個麼,當(dang)然(ran)你不(bu)用去(qu)管它了,知道怎(zen)麼回事就OK

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

例如(ru)︰

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

一個刷新的字體圖標就出來了

273行到885行全是關于字體相關的css屬性

第五個

@media

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

字體上(shang)就是媒體的意(yi)思,其實原理就是規定不(bu)同媒體(設備)應用不(bu)同的樣式(shi)而(er)已

 

@media (min-width: 768px){ //>=768的設備 }@media (min-width: 992px){ //>=992的設備 }@media (min-width: 1200){ //>=1200的設備 }注意(yi)下順序(xu),如(ru)果你把@media (min-width: 768px)寫在了下面那麼很悲劇,@media (min-width: 1200){ //>=1200的設備 }@media (min-width: 992px){ //>=992的設備 }@media (min-width: 768px){ //>=768的設備 }因為(wei)如(ru)果是1440,由于1440>768那麼你的1200就會失效(xiao)。所以我們用min-width時,小的放上(shang)面大(da)的在下面,同理如(ru)果是用max-width那麼就是大(da)的在上(shang)面,小的在下面@media (max-width: 1199){ //<=1199的設備 }@media (max-width: 991px){ //<=991的設備 }@media (max-width: 767px){ //<=768的設備 }

再次(ci)聲明︰如(ru)果是min-width設置的,小的在上(shang)面,大(da)的在下面,max-width設置的,大(da)的在上(shang)面,小的在下面

知道了這個,那麼ci)頤竅朧遣bu)是可(ke)以混合使用了呢(ne)。指定某個區間,看下面︰

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

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

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

~~~過節了,真心想耍,今(jin)天over~~~

Tag標簽(qian)︰框架  
  • 甘肃快三官网

About IT165 - 廣(guang)告(gao)服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友(you)投稿 - 江苏福彩网官网聯系方(fang)式(shi)
本站內容來自于互(hu)聯網,僅供用于網絡技術學習,學習中(zhong)請(qing)遵循相關法(fa)律法(fa)規
甘肃快三官网 | 下一页