Bootstrap——组件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yaocong1993/article/details/82959957

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