Bootstrap學習（二）——Bootstrap 佈局元件

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

Bootstrap 佈局元件

Bootstrap 字型圖示(Glyphicons)

什麼是字型圖示？

字型圖示是在 Web 專案中使用的圖示字型。

獲取字型圖示

Bootstrap 3.x 版本，在 fonts 資料夾內可以找到字型圖示，它包含了下列這些檔案：

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

字型圖示列表

用法

如需使用圖示，只需要簡單地使用下面的程式碼即可。請在圖示和文字之間保留適當的空間。

<span class="glyphicon glyphicon-search"></span>

Bootstrap 下拉選單（Dropdowns）

如需使用下列選單，只需要在 class .dropdown 內加上下拉選單即可

<div class="dropdown">
   <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
      data-toggle="dropdown">
      主題
      <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">Java</a>
      </li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">資料探勘</a>
      </li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">
            資料通訊/網路
         </a>
      </li>
      <li role="presentation" class="divider"></li>
      <li role="presentation">
         <a role="menuitem" tabindex="-1" href="#">分離的連結</a>
      </li>
   </ul>
</div>

按鈕上拉選單

選單也可以往上拉伸的，只需要簡單地向父 .btn-group 容器新增 .dropup 即可

選項

對齊

通過向 .dropdown-menu 新增 class .pull-right 來向右對齊下拉選單

標題

使用 class dropdown-header 向下拉選單的標籤區域新增標題

<li role="presentation" class="dropdown-header">下拉選單標題</li>

Bootstrap 按鈕組

按鈕組允許多個按鈕被堆疊在同一行上

<div class="btn-group">
  <button type="button" class="btn btn-default">按鈕 1</button>
  <button type="button" class="btn btn-default">按鈕 2</button>
  <button type="button" class="btn btn-default">按鈕 3</button>
</div>

.btn-group-vertical : 該 class 讓一組按鈕垂直堆疊顯示，而不是水平堆疊顯示。

.btn-toolbar:該 class 有助於把幾組 <div class=”btn-group”> 結合到一個 <div class=”btn-toolbar”> 中，一般獲得更復雜的元件。

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
  <button type="button" class="btn btn-default">按鈕 1</button>
  <button type="button" class="btn btn-default">按鈕 2</button>
  <button type="button" class="btn btn-default">按鈕 3</button>
 </div>
  <div class="btn-group">
  <button type="button" class="btn btn-default">按鈕 4</button>
  <button type="button" class="btn btn-default">按鈕 5</button>
  <button type="button" class="btn btn-default">按鈕 6</button>
  </div>
</div>

.btn-group-lg, .btn-group-sm, .btn-group-xs:這些 class 可應用到整個按鈕組的大小調整，而不需要對每個按鈕進行大小調整。

巢狀

在一個按鈕組內巢狀另一個按鈕組，即，在一個 .btn-group 內巢狀另一個 .btn-group

<div class="btn-group">
  <button type="button" class="btn btn-default">按鈕 1</button>
  <button type="button" class="btn btn-default">按鈕 2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" 
      data-toggle="dropdown">
      下列
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">下拉鍊接 1</a></li>
      <li><a href="#">下拉鍊接 2</a></li>
    </ul>
  </div>
</div>

Bootstrap 輸入框組

通過向輸入域新增字首和字尾的內容，可以向用戶輸入新增公共的元素

向 .form-control 新增字首或字尾元素的步驟如下：

把字首或字尾元素放在一個帶有 class .input-group 的 <div> 中。
接著，在相同的 <div> 內，在 class 為 .input-group-addon 的 <span> 內放置額外的內容。

把該 <span> 放置在 <input> 元素的前面或者後面。

<div class="input-group">
     <span class="input-group-addon">$</span>
     <input type="text" class="form-control">
     <span class="input-group-addon">.00</span>
</div>

輸入框組的大小

通過向 .input-group 新增相對錶單大小的 class（比如 .input-group-lg、input-group-sm、input-group-xs）來改變輸入框組的大小

複選框和單選外掛

<div class="input-group">
    <span class="input-group-addon">
        <input type="checkbox">
    </span>
    <input type="text" class="form-control">
</div>

按鈕外掛

可以把按鈕作為輸入框組的字首或者字尾元素，使用 class .input-group-btn 來包裹按鈕

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">
            Go!
        </button>
    </span>
    <input type="text" class="form-control">
</div>

帶有下拉選單的按鈕

在輸入框組中新增帶有下拉選單的按鈕，只需要簡單地在一個 .input-group-btn class 中包裹按鈕和下拉選單即可

<div class="input-group">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default 
            dropdown-toggle" data-toggle="dropdown">
            下拉選單 
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">功能</a></li>
            <li><a href="#">另一個功能</a></li>
            <li><a href="#">其他</a></li>
            <li class="divider"></li>
            <li><a href="#">分離的連結</a></li>
        </ul>
    </div><!-- /btn-group -->
    <input type="text" class="form-control">
</div>

Bootstrap 導航元素

表格導航或標籤

建立一個標籤式的導航選單：

以一個帶有 class .nav 的無序列表開始。

新增 class .nav-tabs。

<p>標籤式的導航選單</p>
<ul class="nav nav-tabs">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul>

膠囊式的導航選單

基本的膠囊式導航選單

如果需要把標籤改成膠囊的樣式，只需要使用 class .nav-pills 代替 .nav-tabs 即可

<p>基本的膠囊式導航選單</p>
<ul class="nav nav-pills">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul>

這裡寫圖片描述

垂直的膠囊式導航選單
在使用 class .nav、.nav-pills 的同時使用 class .nav-stacked，讓膠囊垂直堆疊

<p>垂直的膠囊式導航選單</p>
<ul class="nav nav-pills nav-stacked">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul>

<img 3>

兩端對齊的導航

在螢幕寬度大於 768px 時，通過在分別使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同時使用 class .nav-justified，讓標籤式或膠囊式導航選單與父元素等寬

<p>兩端對齊的導航元素</p>
<ul class="nav nav-pills nav-justified">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul><br><br><br>

<ul class="nav nav-tabs nav-justified">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul>

<img 4>

禁用連結

對每個 .nav class，如果添加了 .disabled class，則會建立一個灰色的連結，同時禁用了該連結的 :hover 狀態

下拉選單

導航選單與下拉選單使用相似的語法。預設情況下，列表項的錨與一些資料屬性協同合作來觸發帶有 .dropdown-menu class 的無序列表

帶有下拉選單的標籤

向標籤新增下拉選單的步驟如下：

以一個帶有 class .nav 的無序列表開始。
新增 class .nav-tabs。

新增帶有 .dropdown-menu class 的無序列表。

<p>帶有下拉選單的標籤</p>
<ul class="nav nav-tabs">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
         Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
         <li><a href="#">Swing</a></li>
         <li><a href="#">jMeter</a></li>
         <li><a href="#">EJB</a></li>
         <li class="divider"></li>
         <li><a href="#">分離的連結</a></li>
      </ul>
   </li>
   <li><a href="#">PHP</a></li>
</ul>

<img 5>

帶有下拉選單的膠囊
步驟與建立帶有下拉選單的標籤相同，只是需要把 .nav-tabs class 改為 .nav-pills

Bootstrap 導航欄

預設的導航欄

建立一個預設的導航欄的步驟如下：

向 <nav> 標籤新增 class .navbar、.navbar-default。
向上面的元素新增 role=”navigation”，有助於增加可訪問性。
向 <div> 元素新增一個標題 class .navbar-header，內部包含了帶有 class navbar-brand 的 <a> 元素。這會讓文字看起來更大一號。

為了嚮導航欄新增連結，只需要簡單地新增帶有 class .nav、.navbar-nav 的無序列表即可。

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java 
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">分離的連結</a></li>
               <li class="divider"></li>
               <li><a href="#">另一個分離的連結</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

<img 6>

響應式的導航欄

為了給導航欄新增響應式特性，摺疊的內容必須包裹在帶有 classes .collapse、.navbar-collapse 的 <div> 中。摺疊起來的導航欄實際上是一個帶有 class .navbar-toggle 及兩個 data- 元素的按鈕。第一個是 data-toggle，用於告訴 JavaScript 需要對按鈕做什麼，第二個是 data-target，指示要切換到哪一個元素。三個帶有 class .icon-bar 的 <span> 建立所謂的漢堡按鈕。這些會切換為 .nav-collapse <div> 中的元素。為了實現以上這些功能，您必須包含 Bootstrap 摺疊（Collapse）外掛。

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
         data-target="#example-navbar-collapse">
         <span class="sr-only">切換導航</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">分離的連結</a></li>
               <li class="divider"></li>
               <li><a href="#">另一個分離的連結</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

<img 7>

導航欄中的表單

使用 .navbar-form class,這確保了表單適當的垂直對齊和在較窄的視口中摺疊的行為

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <form class="navbar-form navbar-left" role="search">
         <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
         </div>
         <button type="submit" class="btn btn-default">提交</button>
      </form>    
   </div>
</nav>

<img 8>

導航欄中的按鈕

使用 class .navbar-btn 向不在 <form> 中的 <button> 元素新增按鈕，按鈕在導航欄上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <form class="navbar-form navbar-left" role="search">
         <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
         </div>
         <button type="submit" class="btn btn-default">提交按鈕</button>
      </form>    
      <button type="button" class="btn btn-default navbar-btn">
         導航欄按鈕
      </button>
   </div>
</nav>

<img 9>

導航欄中的文字

如果需要在導航中包含文字字串，請使用 class .navbar-text。這通常與 <p> 標籤一起使用，確保適當的前導和顏色

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <p class="navbar-text">Signed in as Thomas</p>
   </div>
</nav>

非導航連結

使用 class navbar-link 來為預設的和倒轉的導航欄選項新增適當的顏色

<p class="navbar-text navbar-right"> 
    <a href="#" class="navbar-link">Runoob</a> 登入
</p>

元件對齊方式

使用實用工具 class .navbar-left 或 .navbar-right 向左或向右對齊導航欄中的導航連結、表單、按鈕或文字這些元件

導航欄的位置

Bootstrap 導航欄可以動態定位。預設情況下，它是塊級元素，它是基於在 HTML 中放置的位置定位的。通過一些幫助器類，可以把它放置在頁面的頂部或者底部，或者可以讓它成為隨著頁面一起滾動的靜態導航欄。

固定到頂部：向 .navbar class 新增 class .navbar-fixed-top

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
   ...
</nav>

固定到底部：向 .navbar class 新增 class .navbar-fixed-bottom

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
   ...
</nav>

靜態的頂部（隨著頁面一起滾動的導航欄）：新增 .navbar-static-top class
```
<nav class="navbar navbar-default navbar-static-top" role="navigation">
   ...
</nav>
```
倒置的導航欄（帶有黑色背景白色文字的倒置的導航欄）：向 .navbar class 新增 .navbar-inverse class
```
<nav class="navbar navbar-inverse" role="navigation">
   ...
</nav>
```

Bootstrap 麵包屑導航（Breadcrumbs）

麵包屑導航（Breadcrumbs）是一種基於網站層次資訊的顯示方式。以部落格為例，麵包屑導航可以顯示釋出日期、類別或標籤。它們表示當前頁面在導航層次結構內的位置。

Bootstrap 中的麵包屑導航（Breadcrumbs）是一個簡單的帶有 .breadcrumb class 的無序列表。分隔符會通過 CSS（bootstrap.min.css）中下面所示的 class 自動被新增：

.breadcrumb > li + li:before {
    color: #CCCCCC;
    content: "/ ";
    padding: 0 5px;
}

eg:

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">2013</a></li>
  <li class="active">十一月</li>
</ol>

Bootstrap 分頁

分頁（Pagination）

下表列出了 Bootstrap 提供的處理分頁的 class。

預設的分頁

<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

翻頁（Pager）

建立一個簡單的分頁連結為使用者提供導航，可通過翻頁來實現。與分頁連結一樣，翻頁也是無序列表。預設情況下，連結是居中顯示。

<!-- 預設的翻頁 -->
<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

<!-- 對齊的連結 -->
<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

Bootstrap 標籤

class .label 標籤可用於計數、提示或頁面上其他的標記顯示。使用修飾的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 來改變標籤的外觀

<span class="label label-default">預設標籤</span>
<span class="label label-primary">主要標籤</span>
<span class="label label-success">成功標籤</span>
<span class="label label-info">資訊標籤</span>
<span class="label label-warning">警告標籤</span>
<span class="label label-danger">危險標籤</span>

Bootstrap 徽章（Badges）

徽章與標籤相似，主要的區別在於徽章的邊角更加圓滑。
徽章（Badges）主要用於突出顯示新的或未讀的項。如需使用徽章，只需要把 <span class=”badge”> 新增到連結、Bootstrap 導航等這些元素上即可

<h4>列表導航中的啟用狀態</h4>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
   <li class="active">
      <a href="#">
         <span class="badge pull-right">42</span>
         首頁
      </a>
   </li>
   <li><a href="#">簡介</a></li>
   <li>
      <a href="#">
         <span class="badge pull-right">3</span>
         訊息
      </a>
   </li>
</ul>

Bootstrap 超大螢幕（Jumbotron）

該元件可以增加標題的大小，併為登陸頁面內容新增更多的外邊距（margin）。使用超大螢幕（Jumbotron）的步驟如下：

建立一個帶有 class .jumbotron. 的容器 <div>。

除了更大的 <h1>，字型粗細 font-weight 被減為 200px。

<div class="container">
   <div class="jumbotron">
      <h1>歡迎登陸頁面！</h1>
      <p>這是一個超大螢幕（Jumbotron）的例項。</p>
      <p><a class="btn btn-primary btn-lg" role="button">
         學習更多</a>
      </p>
   </div>
</div>

頁面標題（Page Header）會在網頁標題四周新增適當的間距,如需使用頁面標題（Page Header），把標題放置在帶有 class .page-header 的 <div> 中

<div class="page-header">
   <h1>頁面標題例項
      <small>子標題</small>
   </h1>
</div>

Bootstrap 縮圖

使用 Bootstrap 建立縮圖的步驟如下：

在影象周圍新增帶有 class .thumbnail 的 <a> 標籤。
這會新增四個畫素的內邊距（padding）和一個灰色的邊框。

當滑鼠懸停在影象上時，會動畫顯示出影象的輪廓。

<a href="#" class="thumbnail">
    <img src="/wp-content/uploads/2014/06/kittens.jpg" 
    alt="通用的佔位符縮圖">
</a>

新增自定義的內容

把帶有 class .thumbnail 的 <a> 標籤改為 <div>。
在該 <div> 內，您可以新增任何您想要新增的東西。由於這是一個 <div>，我們可以使用預設的基於 span 的命名規則來調整大小。

如果您想要給多個影象進行分組，請把它們放置在一個無序列表中，且每個列表項向左浮動。

<div class="thumbnail">
     <img src="/wp-content/uploads/2014/06/kittens.jpg" 
     alt="通用的佔位符縮圖">
     <div class="caption">
        <h3>縮圖標籤</h3>
        <p>一些示例文字。一些示例文字。</p>
        <p>
           <a href="#" class="btn btn-primary" role="button">
              按鈕
           </a> 
           <a href="#" class="btn btn-default" role="button">
              按鈕
           </a>
        </p>
     </div>
</div>

Bootstrap 警告（Alerts）

建立一個 <div>，並向其新增一個 .alert class 和四個上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，來新增一個基本的警告框

可取消的警告（Dismissal Alerts）

建立一個可取消的警告（Dismissal Alert）步驟如下：

通過建立一個 <div>，並向其新增一個 .alert class 和四個上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，來新增一個基本的警告框。
同時向上面的 <div> class 新增可選的 .alert-dismissable。

新增一個關閉按鈕。

<div class="alert alert-success alert-dismissable">
   <button type="button" class="close" data-dismiss="alert" 
      aria-hidden="true">
      &times;
   </button>
   成功！很好地完成了提交。
</div>

警告（Alerts）中的連結

在警告（Alerts）中建立連結的步驟如下：

通過建立一個 <div>，並向其新增一個 .alert class 和四個上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，來新增一個基本的警告框。
使用 .alert-link 實體類來快速提供帶有匹配顏色的連結。

Bootstrap 進度條

預設的進度條

建立一個基本的進度條的步驟如下：
新增一個帶有 class .progress 的 <div>。
接著，在上面的 <div> 內，新增一個帶有 class .progress-bar 的空的 <div>。

新增一個帶有百分比表示的寬度的 style 屬性，例如 style=”60%”; 表示進度條在 60% 的位置。

<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="60" 
      aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
      <span class="sr-only">40% 完成</span>
   </div>
</div>

條紋的進度條

建立一個條紋的進度條的步驟如下：

新增一個帶有 class .progress 和 .progress-striped 的 <div>。
接著，在上面的 <div> 內，新增一個帶有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
新增一個帶有百分比表示的寬度的 style 屬性，例如 style=”60%”; 表示進度條在 60% 的位置。

動畫的進度條

建立一個動畫的進度條的步驟如下：

新增一個帶有 class .progress 和 .progress-striped 的 <div>。同時新增 class .active。
接著，在上面的 <div> 內，新增一個帶有 class .progress-bar 的空的 <div>。
新增一個帶有百分比表示的寬度的 style 屬性，例如 style=”60%”; 表示進度條在 60% 的位置。

堆疊的進度條

<div class="progress">
   <div class="progress-bar progress-bar-success" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
      style="width: 40%;">
      <span class="sr-only">40% 完成</span>
   </div>
   <div class="progress-bar progress-bar-info" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"     
      style="width: 30%;">
      <span class="sr-only">30% 完成（資訊）</span>
   </div>
   <div class="progress-bar progress-bar-warning" role="progressbar" 
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"  
      style="width: 20%;">
      <span class="sr-only">20% 完成（警告）</span>
   </div>
</div>

Bootstrap 多媒體物件（Media Object）

在 HTML 標籤中新增以下兩種形式來設定媒體物件：

.media：該 class 允許將媒體物件裡的多媒體（影象、視訊、音訊）浮動到內容區塊的左邊或者右邊。

.media-list：如果你需要一個列表，各項內容是無序列表的一部分，可以使用該 class。可用於評論列表與文章列表。

<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 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>