學(xué)習(xí)使用Bootstrap頁(yè)面排版樣式
Bootstrap之頁(yè)面排版樣式
Bootstrap 是由 Twitter 公司(全球最大的微博)的兩名技術(shù)工程師研發(fā)的一個(gè)基于HTML、CSS、JavaScript 的開(kāi)源框架。該框架代碼簡(jiǎn)潔、視覺(jué)優(yōu)美,可用于快速、簡(jiǎn)單地構(gòu)建基于 PC 及移動(dòng)端設(shè)備的 Web 頁(yè)面需求。
1. Bootstrap 特點(diǎn)
Bootstrap 非常流行,得益于它非常實(shí)用的功能和特點(diǎn)。主要核心功能特點(diǎn)如下:
(1). 跨設(shè)備、跨瀏覽器,可以兼容所有現(xiàn)代瀏覽器,包括比較詬病的 IE7、8。
(3). 提供的全面的組件,Bootstrap 提供了實(shí)用性很強(qiáng)的組件,包括:導(dǎo)航、標(biāo)簽、工具條、按鈕等一系列組件,方便開(kāi)發(fā)者調(diào)用。
(4). 內(nèi)置 jQuery 插件,Bootstrap 提供了很多實(shí)用性的 jquery 插件,這些插件方便開(kāi)發(fā)者實(shí)現(xiàn) Web 中各種常規(guī)特效。
(5). 支持 HTML5、CSS3,HTML5 語(yǔ)義化標(biāo)簽和 CSS3 屬性,都得到很好的支持。
(6). 支持 LESS 動(dòng)態(tài)樣式,LESS 使用變量、嵌套、操作混合編碼,編寫(xiě)更快、更靈活的 CSS,它和 Bootstrap 能很好的配合開(kāi)發(fā)。
2. 引入Boostrap
//第一個(gè) Bootstrap <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Bootstrap</title> <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > </head> <body> <button class="btn btn-info">Bootstrap</button> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
3. Boostrap的排版樣式
頁(yè)面主體
Bootstrap 將全局 font-size 設(shè)置為 14px,line-height 行高設(shè)置為 1.428(即
20px);<p>段落元素被設(shè)置等于 1/2 行高(即 10px);顏色被設(shè)置為#333。
設(shè)置文本對(duì)齊
<p class="text-left">Bootstrap 框架</p> //居左 <p class="text-center">Bootstrap 框架</p> //居中 <p class="text-right">Bootstrap 框架</p> //居右 <p class="text-justify">Bootstrap 框架</p> //兩端對(duì)齊,支持度不佳 <p class="text-nowrap">Bootstrap 框架</p> //不換行
設(shè)置英文文本大小寫(xiě)
<p class="text-lowercase">Bootstrap 框架</p> //小寫(xiě) <p class="text-uppercase">Bootstrap 框架</p> //大寫(xiě) <p class="text-capitalize">Bootstrap 框架</p> //首字母大寫(xiě)
縮略語(yǔ)
Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>
地址文本
//設(shè)置地址,去掉了傾斜,設(shè)置了行高,底部 20px <address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address>
引用文本
//默認(rèn)樣式引用,增加了做邊線,設(shè)定了字體大小和內(nèi)外邊距 <blockquote>Bootstrap 框架</blockquote> //反向 <blockquote class="blockquote-reverse ">Bootstrap 框架</blockquote>
列表排版
//移出默認(rèn)樣式 <ul class="list-unstyled"> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li> </ul> //設(shè)置成內(nèi)聯(lián) <ul class="list-inline"> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li> </ul> //水平排列描述列表 <dl class="dl-horizontal"> <dt>Bootstrap</dt> <dd>Bootstrap 提供了一些常規(guī)設(shè)計(jì)好的頁(yè)面排版的樣式供開(kāi)發(fā)者使用。</dd> </dl>
代碼
<code><section></code> //內(nèi)聯(lián)代碼 press <kbd>ctrl + ,</kbd> //用戶輸入 <pre><p>Please input...</p></pre> //代碼塊
此外,Bootstrap 還列舉了<var>表示標(biāo)記變量,<samp>表示程序輸出,只不過(guò)沒(méi)有重新復(fù)寫(xiě) CSS。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)精確到秒的倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)精確到秒的倒計(jì)時(shí)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05js閉包的6種應(yīng)用場(chǎng)景總結(jié)
如果一個(gè)函數(shù)訪問(wèn)了此函數(shù)的父級(jí)及父級(jí)以上的作用域變量,那么這個(gè)函數(shù)就是一個(gè)閉包,本文將給大家分享js閉包的6種應(yīng)用場(chǎng)景,文中有詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09js對(duì)字符串和數(shù)字進(jìn)行加法運(yùn)算的一些情況
這篇文章主要介紹了js對(duì)字符串和數(shù)字進(jìn)行加法運(yùn)算的一些情況,需要的朋友可以參考下2023-02-02javascript高級(jí)編程之函數(shù)表達(dá)式 遞歸和閉包函數(shù)
這篇文章主要介紹了javascript高級(jí)編程之函數(shù)表達(dá)式 遞歸和閉包函數(shù)的相關(guān)資料,需要的朋友可以參考下2015-11-11