學(xué)習(xí)使用Bootstrap頁面排版樣式

發(fā)布時間：2020-09-11 00:52:28 來源：腳本之家閱讀：128 作者：Cynthia_ying 欄目：web開發(fā)

Bootstrap之頁面排版樣式

Bootstrap 是由 Twitter 公司(全球最大的微博)的兩名技術(shù)工程師研發(fā)的一個基于HTML、CSS、JavaScript 的開源框架。該框架代碼簡潔、視覺優(yōu)美，可用于快速、簡單地構(gòu)建基于 PC 及移動端設(shè)備的 Web 頁面需求。

1. Bootstrap 特點(diǎn)

Bootstrap 非常流行，得益于它非常實用的功能和特點(diǎn)。主要核心功能特點(diǎn)如下：

(1). 跨設(shè)備、跨瀏覽器，可以兼容所有現(xiàn)代瀏覽器，包括比較詬病的 IE7、8。

(3). 提供的全面的組件，Bootstrap 提供了實用性很強(qiáng)的組件，包括：導(dǎo)航、標(biāo)簽、工具條、按鈕等一系列組件，方便開發(fā)者調(diào)用。

(4). 內(nèi)置 jQuery 插件，Bootstrap 提供了很多實用性的 jquery 插件，這些插件方便開發(fā)者實現(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>&lt;section&gt;</code>   //內(nèi)聯(lián)代碼
press <kbd>ctrl + ,</kbd>     //用戶輸入
<pre>&lt;p&gt;Please input...&lt;/p&gt;</pre> //代碼塊

此外，Bootstrap 還列舉了<var>表示標(biāo)記變量，<samp>表示程序輸出，只不過沒有重新復(fù)寫 CSS。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

學(xué)習(xí)使用Bootstrap頁面排版樣式

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽