快捷導(dǎo)航

Bootstrap常用組件學(xué)習(xí)(整理)

更新時(shí)間：2017年03月24日 09:36:30 投稿：mrr

這篇文章是小編日常收集整理的有關(guān)bootstrap?常用組件包括Bootstrap?面板（Panels），Bootstrap?多媒體對(duì)象（Media?Object）知識(shí)，非常不錯(cuò)，需要的朋友參考下吧

一、Bootstrap 面板（Panels）

本章將講解 Bootstrap 面板（Panels）。面板組件用于把 DOM 組件到一個(gè)盒子中。創(chuàng)建一個(gè)基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可，如下面的實(shí)例所示：

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

1.面板標(biāo)題

我們可以通過(guò)以下兩種方式來(lái)添加面板標(biāo)題：

使用 .panel-heading class 可以很簡(jiǎn)單地向面板添加標(biāo)題容器。

使用帶有 .panel-title class 的 <h1>-<h6> 來(lái)添加預(yù)定義樣式的標(biāo)題。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"> 
 <title>Bootstrap 實(shí)例 - 面板標(biāo)題</title>
 <link rel="stylesheet"  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <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 的面板標(biāo)題
 </div>
 <div class="panel-body">
  面板內(nèi)容
 </div>
</div>
<div class="panel panel-default">
 <div class="panel-heading">
  <h3 class="panel-title">
   帶有 title 的面板標(biāo)題
  </h3>
 </div>
 <div class="panel-body">
  面板內(nèi)容
 </div>
</div>
</body>
</html>

2.面板腳注

我們可以在面板中添加腳注，只需要把按鈕或者副文本放在帶有 class .panel-footer 的 <div> 中即可。下面的實(shí)例演示了這點(diǎn)：

實(shí)例

<div class="panel panel-default">
 <div class="panel-body">
  這是一個(gè)基本的面板
 </div>
 <div class="panel-footer">面板腳注</div>
</div>

3.帶語(yǔ)境色彩的面板

使用語(yǔ)境狀態(tài)類(lèi) panel-primary、panel-success、panel-info、panel-warning、panel-danger，來(lái)設(shè)置帶語(yǔ)境色彩的面板，實(shí)例如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"> 
 <title>Bootstrap 實(shí)例 - 帶語(yǔ)境色彩的面板</title>
 <link rel="stylesheet"  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <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">面板標(biāo)題</h3>
 </div>
 <div class="panel-body">
  這是一個(gè)基本的面板
 </div>
</div>
<div class="panel panel-success">
 <div class="panel-heading">
  <h3 class="panel-title">面板標(biāo)題</h3>
 </div>
 <div class="panel-body">
  這是一個(gè)基本的面板
 </div>
</div>
<div class="panel panel-info">
 <div class="panel-heading">
  <h3 class="panel-title">面板標(biāo)題</h3>
 </div>
 <div class="panel-body">
  這是一個(gè)基本的面板
 </div>
</div>
<div class="panel panel-warning">
 <div class="panel-heading">
  <h3 class="panel-title">面板標(biāo)題</h3>
 </div>
 <div class="panel-body">
  這是一個(gè)基本的面板
 </div>
</div>
<div class="panel panel-danger">
 <div class="panel-heading">
  <h3 class="panel-title">面板標(biāo)題</h3>
 </div>
 <div class="panel-body">
  這是一個(gè)基本的面板
 </div>
</div>
</body>
</html>

4.帶表格的面板

為了在面板中創(chuàng)建一個(gè)無(wú)邊框的表格，我們可以在面板中使用 class .table。假設(shè)有個(gè) <div> 包含 .panel-body，我們可以向表格的頂部添加額外的邊框用來(lái)分隔。如果沒(méi)有包含 .panel-body 的 <div>，則組件會(huì)無(wú)中斷地從面板頭部移動(dòng)到表格。

下面的實(shí)例演示了這點(diǎn)：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"> 
 <title>Bootstrap 實(shí)例 - 帶表格的面板</title>
 <link rel="stylesheet"  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
 <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">面板標(biāo)題</h3>
 </div>
 <div class="panel-body">
  這是一個(gè)基本的面板
 </div>
 <table class="table">
  <th>產(chǎn)品</th><th>價(jià)格 </th>
  <tr><td>產(chǎn)品 A</td><td>200</td></tr>
  <tr><td>產(chǎn)品 B</td><td>400</td></tr>
 </table>
</div>
<div class="panel panel-default">
 <div class="panel-heading">面板標(biāo)題</div>
 <table class="table">
  <th>產(chǎn)品</th><th>價(jià)格 </th>
  <tr><td>產(chǎn)品 A</td><td>200</td></tr>
  <tr><td>產(chǎn)品 B</td><td>400</td></tr>
 </table>
</div>
</body>
</html>

我們可以看到，第一個(gè)表格和第二個(gè)表格，有一些不同，第一個(gè)含有.panel-body樣式，所以，可以分隔表格和頭內(nèi)容。

二、Bootstrap 多媒體對(duì)象（Media Object）

本章我們將講解 Bootstrap 中的多媒體對(duì)象（Media Object）。這些抽象的對(duì)象樣式用于創(chuàng)建各種類(lèi)型的組件（比如：博客評(píng)論），我們可以在組件中使用圖文混排，圖像可以左對(duì)齊或者右對(duì)齊。媒體對(duì)象可以用更少的代碼來(lái)實(shí)現(xiàn)媒體對(duì)象與文字的混排。

媒體對(duì)象輕量標(biāo)記、易于擴(kuò)展的特性是通過(guò)向簡(jiǎn)單的標(biāo)記應(yīng)用 class 來(lái)實(shí)現(xiàn)的。你可以在 HTML 標(biāo)簽中添加以下兩種形式來(lái)設(shè)置媒體對(duì)象：

.media：該 class 允許將媒體對(duì)象里的多媒體（圖像、視頻、音頻）浮動(dòng)到內(nèi)容區(qū)塊的左邊或者右邊。

.media-list：如果你需要一個(gè)列表，各項(xiàng)內(nèi)容是無(wú)序列表的一部分，可以使用該 class。可用于評(píng)論列表與文章列表。

以上所述是小編給大家介紹的Bootstrap常用組件學(xué)習(xí)(整理)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！