學(xué)習(xí)使用Bootstrap頁面排版樣式
Bootstrap之頁面排版樣式
Bootstrap 是由 Twitter 公司(全球最大的微博)的兩名技術(shù)工程師研發(fā)的一個(gè)基于HTML、CSS、JavaScript 的開源框架。該框架代碼簡潔、視覺優(yōu)美，可用于快速、簡單地構(gòu)建基于 PC 及移動(dòng)端設(shè)備的 Web 頁面需求。
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)簽、工具條、按鈕等一系列組件，方便開發(fā)者調(diào)用。
(4). 內(nèi)置 jQuery 插件，Bootstrap 提供了很多實(shí)用性的 jquery 插件，這些插件方便開發(fā)者實(shí)現(xiàn) Web 中各種常規(guī)特效。
(5). 支持 HTML5、CSS3，HTML5 語義化標(biāo)簽和 CSS3 屬性，都得到很好的支持。
(6). 支持 LESS 動(dòng)態(tài)樣式，LESS 使用變量、嵌套、操作混合編碼，編寫更快、更靈活的 CSS，它和 Bootstrap 能很好的配合開發(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的排版樣式
頁面主體
Bootstrap 將全局 font-size 設(shè)置為 14px，line-height 行高設(shè)置為 1.428(即
20px)；<p>段落元素被設(shè)置等于 1/2 行高(即 10px)；顏色被設(shè)置為#333。
設(shè)置文本對齊
<p class="text-left">Bootstrap 框架</p> //居左 <p class="text-center">Bootstrap 框架</p> //居中 <p class="text-right">Bootstrap 框架</p> //居右 <p class="text-justify">Bootstrap 框架</p> //兩端對齊，支持度不佳 <p class="text-nowrap">Bootstrap 框架</p> //不換行
設(shè)置英文文本大小寫
<p class="text-lowercase">Bootstrap 框架</p> //小寫 <p class="text-uppercase">Bootstrap 框架</p> //大寫 <p class="text-capitalize">Bootstrap 框架</p> //首字母大寫
縮略語
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ì)好的頁面排版的樣式供開發(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>表示程序輸出，只不過沒有重新復(fù)寫 CSS。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
深入理解JavaScript中async/await的錯(cuò)誤處理方式
在現(xiàn)代JavaScript開發(fā)中,異步編程是不可或缺的一部分,async和await是一種強(qiáng)大的異步編程工具,它們使得編寫和維護(hù)異步代碼更加容易和清晰,然而,異步操作仍然可能會(huì)出現(xiàn)錯(cuò)誤,本文將深入探討async和await的錯(cuò)誤處理方式,提供詳細(xì)的代碼示例和解釋2023-09-09
JavaScript設(shè)計(jì)模式之外觀模式實(shí)例
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之外觀模式實(shí)例,本文用一些代碼實(shí)例來講解JavaScript中的外觀模式,需要的朋友可以參考下2014-10-10
解決layui table表單提示數(shù)據(jù)接口請求異常的問題
今天小編就為大家分享一篇解決layui table表單提示數(shù)據(jù)接口請求異常的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)注冊界面表單校驗(yàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
本文通過代碼示例給大家展示了如何讓javascript只執(zhí)行一次，如何實(shí)現(xiàn)這種功能呢？通過下面這段就可以輕松搞定了。2016-07-07
讓FireFox支持innerText的實(shí)現(xiàn)代碼
DHTML非標(biāo)準(zhǔn)屬性innerText在FireFox中的使用2009-12-12
Proxy是es2015 標(biāo)準(zhǔn)規(guī)范加入的語法，很可能你只是聽說過，但并沒有用過，畢竟考慮到兼容的問題，不能輕易地使用Proxy特性。但現(xiàn)在隨著各個(gè)瀏覽器的更新迭代，Proxy的支持度也越來越高：而且使用Proxy進(jìn)行代理和劫持，也漸漸成為了趨勢。2021-05-05
javascript點(diǎn)擊才出現(xiàn)驗(yàn)證碼
用javascript[js]實(shí)現(xiàn)的必須經(jīng)過點(diǎn)擊才能出現(xiàn)嚴(yán)重碼效果代碼2008-04-04
通過event對象的fromElement屬性解決熱區(qū)設(shè)置主實(shí)體的一個(gè)bug
后臺(tái)的熱區(qū)管理中，如果鼠標(biāo)移到熱區(qū)上，會(huì)顯示一個(gè)提示框，提示框里“設(shè)為主實(shí)體”、“刪除”和“合并”等超鏈接，點(diǎn)擊這些超鏈接可以進(jìn)行各種操作。2008-12-12
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)炫酷的煙花效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09