bootstrap 學習之（二）------ 排版

阿新 • • 發佈：2019-02-07

1.標題

Bootstrap 中定義了所有的 HTML 標題（h1 到 h6）的樣式。

2.內聯子標題

如果需要向任何標題新增一個內聯子標題，只需要簡單地在元素兩旁新增 ，或者新增 .small class，這樣子您就能得到一個字號更小的顏色更淺的文字

3.引導主體副本

為了給段落新增強調文字，則可以新增 class="lead"，這將得到更大更粗、行高更高的文字

4.強調

HTML 的預設強調標籤 （設定文字為父文字大小的 85%）、（設定文字為更粗的文字）、（設定文字為斜體）。

5.縮寫

HTML 元素提供了用於縮寫的標記，比如 WWW 或 HTTP。Bootstrap 定義 <abbr> 元素的樣式為顯示在文字底部的一條虛線邊框，當滑鼠懸停在上面時會顯示完整的文字（只要您為 <abbr> title 屬性添加了文字）。為了得到一個更小字型的文字，請新增 .initialism 到 <abbr>。

6.地址（Address）

使用 <address> 標籤，您可以在網頁上顯示聯絡資訊。由於 <address> 預設為 display:block;，您需要使用標籤來為封閉的地址文字新增換行。

7.引用（Blockquote）

您可以在任意的 HTML 文字旁使用預設的 <blockquote>。其他選項包括，新增一個 標籤來標識引用的來源，使用 class .pull-right 向右對齊引用

8.列表

Bootstrap 支援有序列表、無序列表和定義列表。

有序列表：有序列表是指以數字或其他有序字元開頭的列表。

無序列表：無序列表是指沒有特定順序的列表，是以傳統風格的著重號開頭的列表。如果您不想顯示這些著重號，您可以使用 class.list-unstyled 來移除樣式。您也可以通過使用 class .list-inline 把所有的列表項放在同一行中。

定義列表：在這種型別的列表中，每個列表項可以包含 <dt> 和 <dd> 元素。<dt> 代表 定義術語，就像字典，這是被定義的屬於（或短語）。接著，<dd> 是 <dt> 的描述。您可以使用 class dl-horizontal 把 <dl> 行中的屬於與描述並排顯示。

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
    <title>BootstrapTest</title>
   <!-- 新 Bootstrap 核心 CSS 檔案 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <!-- jQuery檔案。務必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
        <h1>我是標題1 h1. <small>我是副標題1 h1</small></h1>
        <h2>我是標題2 h2. <small>我是副標題2 h2</small></h2>
        <h3>我是標題3 h3. <small>我是副標題3 h3</small></h3>
        <h4>我是標題4 h4. <small>我是副標題4 h4</small></h4>
        <h5>我是標題5 h5. <small>我是副標題5 h5</small></h5>
        <h6>我是標題6 h6. <small>我是副標題6 h6</small></h6>
        
       <h2>引導主體副本</h2>
        <p class="lead">為了給段落新增強調文字，則可以新增 class="lead"，這將得到更大更粗、行高更高的文字</p>
        
        
        <small>本行內容是在標籤內</small><br>
        <strong>本行內容是在標籤內</strong><br>
        <em>本行內容是在標籤內，並呈現為斜體</em><br>
        <p class="text-left">向左對齊文字class="text-left"</p>
        <p class="text-center">居中對齊文字class="text-center"</p>
        <p class="text-right">向右對齊文字class="text-right"</p>
        <p class="text-muted">本行內容是減弱的class="text-muted"</p>
        <p class="text-primary">本行內容帶有一個 primary class</p>
        <p class="text-success">本行內容帶有一個 success class</p>
        <p class="text-info">本行內容帶有一個 info class</p>
        <p class="text-warning">本行內容帶有一個 warning class</p>
        <p class="text-danger">本行內容帶有一個 danger class</p>
        
        <a href="http://www.baidu.com"><abbr title="http://www.baidu.com">百度</abbr></a><br>
        <a href="http://www.baidu.com"><abbr title="http://www.baidu.com" class="initialism">百度</abbr></a><br>
   <div class="row"> 
        <div class="col-md-6">          
            <address>
              <strong>Some Company, Inc.</strong><br>
              007 street<br>
              Some City, State XXXXX<br>
              <abbr title="Phone">P:</abbr> (123) 456-7890
            </address>
            <address>
              <strong>Full Name</strong><br>
              <a href="mailto:#">[email protected]</a>
            </address>
        </div>
        <div class="col-md-6">    
            <blockquote class="pull-right">
              您可以在任意的 HTML 文字旁使用預設的 blockquote。其他選項包括，新增一個 small標籤來標識引用的來源，使用 class .pull-right 向右對齊引用
              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
            </blockquote>
        </div>
    </div> 
 </div>
</body>
</html></span>

效果圖：

bootstrap 學習之（二）------ 排版

3.引導主體副本

8.列表

bootstrap 學習之（二）------ 排版

bootstrap 學習筆記（2）---- 排版

MongoDB學習之（二）java連接

裝置樹學習之（二）點燈

網路遊戲《叢林戰爭》開發與學習之（二）：粘包分包現象以及服務端解析資料

Bootstrap學習筆記（二） table表格&表單

Android驅動（一）硬體訪問服務學習之（二）Android通過硬體訪問服務訪問硬體

jQuery+Ajax+Bootstrap學習乾貨（二）

設計模式學習筆記（二）設計基本原則之【單一職責原則】

Unity3D之Mecanim動畫系統學習筆記（二）：模型導入

構建之法學習回顧（二）

塔防遊戲學習日記（二）之朝敵人發射子彈

JVM學習筆記（二）--方法調用之靜態分配和動態分配

java之servlet學習基礎（二）

Meteor學習路程（二）之模板的例子

【領卓教育】Linux學習入門（二）------系統命令之打補丁

機器學習實踐（二）—sklearn之資料集

嵌入式核心及驅動開發之學習筆記（二）實現應用控制驅動

IO流學習筆記（二）之BufferedWriter與BufferedReader及例項Demo

Servlet學習筆記（二）之Servlet路徑對映配置、Servlet介面、ServletConfig、ServletContext

bootstrap 學習之（二）------ 排版

3.引導主體副本

8.列表

相關推薦