學(xué)習(xí)使用Bootstrap頁面排版樣式
Bootstrap之頁面排版樣式
Bootstrap 是由 Twitter 公司(全球最大的微博)的兩名技術(shù)工程師研發(fā)的一個基于HTML、CSS、JavaScript 的開源框架。該框架代碼簡潔、視覺優(yōu)美，可用于快速、簡單地構(gòu)建基于 PC 及移動端設(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 動態(tài)樣式，LESS 使用變量、嵌套、操作混合編碼，編寫更快、更靈活的 CSS，它和 Bootstrap 能很好的配合開發(fā)。
2. 引入Boostrap
//第一個 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è)計好的頁面排版的樣式供開發(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)文章
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)精確到秒的倒計時效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
如果一個函數(shù)訪問了此函數(shù)的父級及父級以上的作用域變量,那么這個函數(shù)就是一個閉包,本文將給大家分享js閉包的6種應(yīng)用場景,文中有詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
今天小編就為大家分享一篇layer.confirm取消按鈕綁定事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了JS繼承用法,實(shí)例分析了拷貝繼承、類繼承及原型繼承等的使用技巧,需要的朋友可以參考下2015-02-02
js對字符串和數(shù)字進(jìn)行加法運(yùn)算的一些情況
這篇文章主要介紹了js對字符串和數(shù)字進(jìn)行加法運(yùn)算的一些情況,需要的朋友可以參考下2023-02-02
當(dāng)?shù)刂窓诤袇?shù)，我們可以再目標(biāo)頁面通過window.location.search來獲取我們需要的參數(shù)及其值，接下來為大家介紹下詳細(xì)獲取方法，感興趣的朋友可以參考下哈2013-04-04
javascript高級編程之函數(shù)表達(dá)式 遞歸和閉包函數(shù)
這篇文章主要介紹了javascript高級編程之函數(shù)表達(dá)式 遞歸和閉包函數(shù)的相關(guān)資料,需要的朋友可以參考下2015-11-11
為了測試這個智能識別插件，我試了很多壁紙圖片，都能智能裁剪出圖片的主體部分，轉(zhuǎn)而嘗試了一下chrome和Firefox以及IE，發(fā)現(xiàn)IE只有10以上的版本才支持，chrome和Firefox支持，手機(jī)瀏覽器不支持，這到底是啥黑科技？？今天我們就來詳細(xì)看看2015-10-10
用js實(shí)現(xiàn)的table隔行變色，鼠標(biāo)放上去有變色顯示，需要的朋友可以參考下。2011-01-01
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)bindtap等事件傳參，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04