booterStrap体验-首页改造-响应式导航栏（1）

最新推荐文章于 2023-12-18 23:41:14 发布

原创最新推荐文章于 2023-12-18 23:41:14 发布 · 771 阅读

0 ·

CC 4.0 BY-SA版权

booterstrap 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何利用Bootstrap框架中的组件和插件改造现有的纯CSS导航栏，使其具备响应式布局特性。主要内容包括理解Bootstrap的导航栏组件、collapse插件的使用方法，以及具体的改造步骤。

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

大屏下导航
这里写图片描述

纯css的HTML如下：

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

        </nav>
        <header id="header">
            <div 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>
            </div>
        </header>

改造之后：

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

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

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

中的元素。

        感悟：
        1. booterstrap是基于jquery的响应式布局，目前我觉得比较方便的是它不需要写好几套布局来适应不同的屏幕，所带的一些类比较快捷。
        2. 在对booterstrap进行样式覆盖时，可以在Chrome的开发工具下选中要覆盖样式的元素，先在浏览器上暂时性修改其样式。