1、導航條

對於.navbar-defined是在.navbar-default的基礎上自定義的導航條樣式。將.navbar-default的程式碼拷貝到自己的.css檔案中，通過Ctrl+D選中下一個或Ctrl+Shift+L選中全部navbar-default修改為navbar-defined，再按照需要修改CSS程式碼。

<!-- 導航條、自定義導航條樣式、靜止在頂部 -->
<nav class="navbar navbar-defined navbar-static-top"> 
    <div class="container">
        <div class="navbar-header">
            <!-- 漢堡選單 -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">切換導航</span> <!-- 用於螢幕閱讀器 -->
                <span class="icon-bar"></span> <!-- 三個橫槓 -->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand"> <!-- 品牌圖示：字型圖示或圖片 -->
                <i class="icon-icon"></i>
                <i class="icon-logo"></i>
                <img alt="Brand" src="...">
            </a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!-- 漢堡選單的內容 -->
            <ul class="nav navbar-nav"> <!-- 導航 -->
                <li class="active"><a href="#">推薦</a></li>
                <li><a href="#">排行榜</a></li>
                <li><a href="#">歌單</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right hidden-sm"> <!-- 導航、向右浮動、隱藏 -->
                <li><a href="#">個人中心</a></li>
            </ul>
        </div>              
    </div>
</nav>
 

2、媒體物件

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>
 

3、面板

<div class="panel panel-default">
    <div class="panel-heading">Panel heading without title</div>
    <div class="panel-body">
        Panel content
    </div>
</div>

自定義使用如下程式碼。

.panel-default {
    border-color: #ddd;
}
.panel-default > .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #ddd;
}
.panel-default > .panel-heading .badge {
    color: #f5f5f5;
    background-color: #333;
}
/* 未使用footer時可刪除 */
.panel-default > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #ddd;
}