bootstrap

栅格系统

Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应

不同的屏幕)，支持Sass mixins自由调用，并结合自己预定义的CSS、Js类，用来创建各种形状和尺

寸的布局。

导航栏(navbar)

导航栏是一个将商标、导航以及别的元素简单放置到一个简洁导航页头的容器代码组合，它很容易扩

展，而且在折叠板插件的帮助下，它可以轻松与其它内容整合。

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#"><img src="images/logo.png" alt="" width="50px"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">穿搭</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">热门</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">品牌</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">关注</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link disabled">发现</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">搜索 &nbsp;<i class="fa fa-search"></i></button>
            </form>
        </div>
    </nav>

 颜色

通过颜色传达意义、表达不同的模块，这有一系列的定义方法，包括支持链接、悬停、选中等状态相关 的的样式集。

<p class="text-primary">.text-primary</p> 
 <p class="text-secondary">.text-secondary</p> 
 <p class="text-success">.text-success</p> 
 <p class="text-danger">.text-danger</p> 
<p class="text-warning">.text-warning</p> 
<p class="text-info">.text-info</p> 
<p class="text-light bg-dark">.text-light</p> 
<p class="text-dark">.text-dark</p> 
<p class="text-body">.text-body</p>
 <p class="text-muted">.text-muted</p> 
<p class="text-white bg-dark">.text-white</p> 
 <p class="text-black-50">.text-black-50</p> 
<p class="text-white-50 bg-dark">.text-white-50</p>

 媒体对象

Bootstrap的媒体对象的文档和示例，媒体对象是一些抽象元素，是用来建立一些略显复杂繁琐同时又

高度重复使用的组件（比如说博客评论、推文模块等）之基础。它支持左对齐内容、右对齐内容、内容

对齐选项、嵌套等。