欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

學習使用Bootstrap頁面排版樣式

 更新時間:2017年05月11日 09:43:37   作者:Cynthia_ying  
這篇文章主要教大家學習使用Bootstrap頁面排版樣式,具有一定的參考價值,感興趣的小伙伴們可以參考一下

Bootstrap之頁面排版樣式

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

1. Bootstrap 特點

Bootstrap 非常流行,得益于它非常實用的功能和特點。主要核心功能特點如下:

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

(3). 提供的全面的組件,Bootstrap 提供了實用性很強的組件,包括:導(dǎo)航、標簽、工具條、按鈕等一系列組件,方便開發(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 設(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>

引用文本

//默認樣式引用,增加了做邊線,設(shè)定了字體大小和內(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>

//設(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>表示標記變量,<samp>表示程序輸出,只不過沒有重新復(fù)寫 CSS。

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • js實現(xiàn)精確到秒的倒計時效果

    js實現(xiàn)精確到秒的倒計時效果

    這篇文章主要為大家詳細介紹了js實現(xiàn)精確到秒的倒計時效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-05-05
  • js閉包的6種應(yīng)用場景總結(jié)

    js閉包的6種應(yīng)用場景總結(jié)

    如果一個函數(shù)訪問了此函數(shù)的父級及父級以上的作用域變量,那么這個函數(shù)就是一個閉包,本文將給大家分享js閉包的6種應(yīng)用場景,文中有詳細的代碼示例,需要的朋友可以參考下
    2023-09-09
  • layer.confirm取消按鈕綁定事件的方法

    layer.confirm取消按鈕綁定事件的方法

    今天小編就為大家分享一篇layer.confirm取消按鈕綁定事件的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • JS繼承用法實例分析

    JS繼承用法實例分析

    這篇文章主要介紹了JS繼承用法,實例分析了拷貝繼承、類繼承及原型繼承等的使用技巧,需要的朋友可以參考下
    2015-02-02
  • js對字符串和數(shù)字進行加法運算的一些情況

    js對字符串和數(shù)字進行加法運算的一些情況

    這篇文章主要介紹了js對字符串和數(shù)字進行加法運算的一些情況,需要的朋友可以參考下
    2023-02-02
  • js 獲取(接收)地址欄參數(shù)值的方法

    js 獲取(接收)地址欄參數(shù)值的方法

    當?shù)刂窓诤袇?shù),我們可以再目標頁面通過window.location.search來獲取我們需要的參數(shù)及其值,接下來為大家介紹下詳細獲取方法,感興趣的朋友可以參考下哈
    2013-04-04
  • javascript高級編程之函數(shù)表達式 遞歸和閉包函數(shù)

    javascript高級編程之函數(shù)表達式 遞歸和閉包函數(shù)

    這篇文章主要介紹了javascript高級編程之函數(shù)表達式 遞歸和閉包函數(shù)的相關(guān)資料,需要的朋友可以參考下
    2015-11-11
  • smartcrop.js智能圖片裁剪庫

    smartcrop.js智能圖片裁剪庫

    為了測試這個智能識別插件,我試了很多壁紙圖片,都能智能裁剪出圖片的主體部分,轉(zhuǎn)而嘗試了一下chrome和Firefox以及IE,發(fā)現(xiàn)IE只有10以上的版本才支持,chrome和Firefox支持,手機瀏覽器不支持,這到底是啥黑科技??今天我們就來詳細看看
    2015-10-10
  • Table隔行變色的JavaScript代碼

    Table隔行變色的JavaScript代碼

    用js實現(xiàn)的table隔行變色,鼠標放上去有變色顯示,需要的朋友可以參考下。
    2011-01-01
  • 微信小程序?qū)崿F(xiàn)bindtap等事件傳參

    微信小程序?qū)崿F(xiàn)bindtap等事件傳參

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)bindtap等事件傳參,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-04-04

最新評論