學習使用Bootstrap頁面排版樣式
Bootstrap之頁面排版樣式
Bootstrap 是由 Twitter 公司(全球最大的微博)的兩名技術工程師研發(fā)的一個基于HTML、CSS、JavaScript 的開源框架。該框架代碼簡潔、視覺優(yōu)美，可用于快速、簡單地構建基于 PC 及移動端設備的 Web 頁面需求。
1. Bootstrap 特點
Bootstrap 非常流行，得益于它非常實用的功能和特點。主要核心功能特點如下：
(1). 跨設備、跨瀏覽器，可以兼容所有現(xiàn)代瀏覽器，包括比較詬病的 IE7、8。
(3). 提供的全面的組件，Bootstrap 提供了實用性很強的組件，包括：導航、標簽、工具條、按鈕等一系列組件，方便開發(fā)者調(diào)用。
(4). 內(nèi)置 jQuery 插件，Bootstrap 提供了很多實用性的 jquery 插件，這些插件方便開發(fā)者實現(xiàn) Web 中各種常規(guī)特效。
(5). 支持 HTML5、CSS3，HTML5 語義化標簽和 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 設置為 14px，line-height 行高設置為 1.428(即
20px)；<p>段落元素被設置等于 1/2 行高(即 10px)；顏色被設置為#333。
設置文本對齊
<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> //不換行
設置英文文本大小寫
<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>
地址文本
//設置地址，去掉了傾斜，設置了行高，底部 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>
引用文本
//默認樣式引用，增加了做邊線，設定了字體大小和內(nèi)外邊距 <blockquote>Bootstrap 框架</blockquote> //反向 <blockquote class="blockquote-reverse ">Bootstrap 框架</blockquote>
列表排版
//移出默認樣式 <ul class="list-unstyled"> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li> </ul> //設置成內(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ī)設計好的頁面排版的樣式供開發(fā)者使用。</dd> </dl>
代碼
<code><section></code> //內(nèi)聯(lián)代碼 press <kbd>ctrl + ,</kbd> //用戶輸入 <pre><p>Please input...</p></pre> //代碼塊
此外，Bootstrap 還列舉了<var>表示標記變量，<samp>表示程序輸出，只不過沒有重新復寫 CSS。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
深入理解JavaScript中async/await的錯誤處理方式
在現(xiàn)代JavaScript開發(fā)中,異步編程是不可或缺的一部分,async和await是一種強大的異步編程工具,它們使得編寫和維護異步代碼更加容易和清晰,然而,異步操作仍然可能會出現(xiàn)錯誤,本文將深入探討async和await的錯誤處理方式,提供詳細的代碼示例和解釋2023-09-09
這篇文章主要介紹了JavaScript設計模式之外觀模式實例,本文用一些代碼實例來講解JavaScript中的外觀模式,需要的朋友可以參考下2014-10-10
解決layui table表單提示數(shù)據(jù)接口請求異常的問題
今天小編就為大家分享一篇解決layui table表單提示數(shù)據(jù)接口請求異常的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了JS實現(xiàn)注冊界面表單校驗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
本文通過代碼示例給大家展示了如何讓javascript只執(zhí)行一次，如何實現(xiàn)這種功能呢？通過下面這段就可以輕松搞定了。2016-07-07
讓FireFox支持innerText的實現(xiàn)代碼
DHTML非標準屬性innerText在FireFox中的使用2009-12-12
Proxy是es2015 標準規(guī)范加入的語法，很可能你只是聽說過，但并沒有用過，畢竟考慮到兼容的問題，不能輕易地使用Proxy特性。但現(xiàn)在隨著各個瀏覽器的更新迭代，Proxy的支持度也越來越高：而且使用Proxy進行代理和劫持，也漸漸成為了趨勢。2021-05-05
用javascript[js]實現(xiàn)的必須經(jīng)過點擊才能出現(xiàn)嚴重碼效果代碼2008-04-04
通過event對象的fromElement屬性解決熱區(qū)設置主實體的一個bug
后臺的熱區(qū)管理中，如果鼠標移到熱區(qū)上，會顯示一個提示框，提示框里“設為主實體”、“刪除”和“合并”等超鏈接，點擊這些超鏈接可以進行各種操作。2008-12-12
這篇文章主要為大家詳細介紹了js實現(xiàn)炫酷的煙花效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09