使用booterstrap改造响应式布局导航栏

闲暇之余想要学习下booterstrap，正好在一个设计网站看到了一些有响应式布局的设计图。已经将纯css写过一遍首页，现在着手使用booterstrap进行改造。首先了解下修改booterstrap导航需要用到哪些类，样式后期再改。需要达到的效果如下所示：

纯css的HTML如下：

<nav id="top-nav">
            <p class="nav-btn">
                <span></span>
                <span></span>
                <span></span>
            </p>

        </nav>
        <header id="header">
            <p class="layout">
                <h1 class="logo"><a href="#"><span>GIRL’s</span> DRESS</h1></a>
                <nav class="nav-list">
                    <a href="#" class="active">首页</a>
                    <a href="#">品牌理念</a>
                    <a href="#">女士时尚</a>
                    <a href="#">时尚资讯</a>
                    <a href="#">联系我们</a>
                </nav>
            </p>
        </header>

改造之后：

<nav class="navbar navbar-default navbar-fixed-top">
            <p class="container">

                <p class="navbar-header">
                    <!--小屏幕导航按钮和logo-->
                    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="index.html" class="navbar-brand"><span>GIRL’s</span> DRESS</a>

                </p>
                <p class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#" class="active">首页</a>
                        </li>
                        <li>
                            <a href="#">品牌理念</a>
                        </li>
                        <li>
                            <a href="#">女士时尚</a>
                        </li>
                        <li>
                            <a href="#">时尚资讯</a>
                        </li>
                        <li>
                            <a href="#">联系我们</a>
                        </li>
                    </ul>
                </p>
        </nav>

在改造导航栏之前，先要知道一个概念：booterstrap的collapse插件。

可以通过两种方式来添加collapse插件

- 通过data属性，向元素添加data-toggle=“collapse”以及data-target。要确保要进行折叠的元素上已经加有collapse类，并且data-target属性接受一个css选择器和id选择器。如果想要一开始是展开的，则需要在要折叠的元素上增加一个class为in;

- 通过js来激活collapse方法

改造步骤：

1. 使用nav标签作为导航，增加navbar、navbar-default、navbar-fixed-top类。navbar-fixed-top的作用是将导航栏固定在页面顶部;

2. 创建一个容器，视宽度情况选用class为container还是container-fluid;container是固定宽高，而container-fluid是宽度为窗口的100%;

3. 定义一个p,带有navbar-header类,内含。navbar-brand类,作为网页的logo;

4. 想要做到响应式效果，就得booterstrapcollapse插件。就像上述代码，将导航信息列表包含在带有navbar-collapse、collapse类的p中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 创建所谓的汉堡按钮。这些会切换为 .nav-collapse

中的元素。

感悟：

1. booterstrap是基于jquery的响应式布局，目前我觉得比较方便的是它不需要写好几套布局来适应不同的屏幕，所带的一些类比较快捷。

2. 在对booterstrap进行样式覆盖时，可以在Chrome的开发工具下选中要覆盖样式的元素，先在浏览器上暂时性修改其样式。