Bootstrap經常使用組件學習

時間 2019-12-10

原文原文鏈接

1、Bootstrap 面板（Panels）

本章將講解 Bootstrap 面板（Panels）。面板組件用於把 DOM 組件插入到一個盒子中。建立一個基本的面板，只須要向 <div> 元素添加 class .panel 和 class .panel-default 便可，以下面的實例所示：css

<div class="panel panel-default">
    <div class="panel-body">
        這是一個基本的面板
    </div>
</div>

1.面板標題

咱們能夠經過如下兩種方式來添加面板標題：
使用 .panel-heading class 能夠很簡單地向面板添加標題容器。
使用帶有 .panel-title class 的 <h1>-<h6> 來添加預約義樣式的標題。html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 實例 - 面板標題</title>
    <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel panel-default">
    <div class="panel-heading">
        不帶 title 的面板標題
    </div>
    <div class="panel-body">
        面板內容
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            帶有 title 的面板標題
        </h3>
    </div>
    <div class="panel-body">
        面板內容
    </div>
</div>

</body>
</html>

2.面板腳註

咱們能夠在面板中添加腳註，只須要把按鈕或者副文本放在帶有 class .panel-footer 的 <div> 中便可。下面的實例演示了這點：
實例jquery

<div class="panel panel-default">
    <div class="panel-body">
        這是一個基本的面板
    </div>
    <div class="panel-footer">面板腳註</div>
</div>

3.帶語境色彩的面板

使用語境狀態類 panel-primary、panel-success、panel-info、panel-warning、panel-danger，來設置帶語境色彩的面板，實例以下：bootstrap

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 實例 - 帶語境色彩的面板</title>
    <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">面板標題</h3>
    </div>
    <div class="panel-body">
        這是一個基本的面板
    </div>
</div>
<div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title">面板標題</h3>
    </div>
    <div class="panel-body">
        這是一個基本的面板
    </div>
</div>
<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">面板標題</h3>
    </div>
    <div class="panel-body">
        這是一個基本的面板
    </div>
</div>
<div class="panel panel-warning">
    <div class="panel-heading">
        <h3 class="panel-title">面板標題</h3>
    </div>
    <div class="panel-body">
        這是一個基本的面板
    </div>
</div>
<div class="panel panel-danger">
    <div class="panel-heading">
        <h3 class="panel-title">面板標題</h3>
    </div>
    <div class="panel-body">
        這是一個基本的面板
    </div>
</div>

</body>
</html>

4.帶表格的面板

爲了在面板中建立一個無邊框的表格，咱們能夠在面板中使用 class .table。假設有個 <div> 包含 .panel-body，咱們能夠向表格的頂部添加額外的邊框用來分隔。若是沒有包含 .panel-body 的 <div>，則組件會無中斷地從面板頭部移動到表格。
下面的實例演示了這點：佈局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 實例 - 帶表格的面板</title>
    <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">面板標題</h3>
    </div>
    <div class="panel-body">
        這是一個基本的面板
    </div>
    <table class="table">
        <th>產品</th><th>價格 </th>
        <tr><td>產品 A</td><td>200</td></tr>
        <tr><td>產品 B</td><td>400</td></tr>
    </table>
</div>
<div class="panel panel-default">
    <div class="panel-heading">面板標題</div>
    <table class="table">
        <th>產品</th><th>價格 </th>
        <tr><td>產品 A</td><td>200</td></tr>
        <tr><td>產品 B</td><td>400</td></tr>
    </table>
</div>

</body>
</html>

咱們能夠看到，第一個表格和第二個表格，有一些不一樣，第一個含有.panel-body樣式，因此，能夠分隔表格和頭內容。spa

2、Bootstrap 多媒體對象（Media Object）

本章咱們將講解 Bootstrap 中的多媒體對象（Media Object）。這些抽象的對象樣式用於建立各類類型的組件（好比：博客評論），咱們能夠在組件中使用圖文混排，圖像能夠左對齊或者右對齊。媒體對象能夠用更少的代碼來實現媒體對象與文字的混排。
媒體對象輕量標記、易於擴展的特性是經過向簡單的標記應用 class 來實現的。你能夠在 HTML 標籤中添加如下兩種形式來設置媒體對象：code

.media：該 class 容許將媒體對象裏的多媒體（圖像、視頻、音頻）浮動到內容區塊的左邊或者右邊。cdn
.media-list：若是你須要一個列表，各項內容是無序列表的一部分，可使用該 class。可用於評論列表與文章列表。視頻

讓咱們來看看下面這個有關默認的媒體對象 .media 的實例：htm

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 實例 - 默認的媒體對象</title>
    <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="媒體對象">
    </a>
    <div class="media-body">
        <h4 class="media-heading">鄭智</h4>
        中國對和韓國隊的比賽，中國對必勝！??  [2017-03-23]
    </div>
</div>
<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="媒體對象">
    </a>
    <div class="media-body">
        <h4 class="media-heading">裏皮</h4>
        你們都得給我努力拿下韓國！
        <div class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="媒體對象">
            </a>
            <div class="media-body">
                <h4 class="media-heading">于大寶</h4>
                沒問題，皮爺！
            </div>
        </div>
    </div>
</div>
<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" alt="媒體對象">
    </a>
    <div class="media-body">
        <h4 class="media-heading">郜飛機</h4>
        儘可能不打灰機。
    </div>
</div>

</body>
</html>

這個是否是一個很熟悉的的評論佈局列表呢？用媒體對象處理佈局仍是很簡單的哈~

Bootstrap相關優質項目推薦： http://www.bootcss.com/