2.制作响应式导航条

Posted 2020-10-03

制作响应式导航条

一、设置主结构元素

　　下面开始准备页面内容。打开Project Template 1中的index.html文件，里面目前只有一下基本的内容

　　我们会添加如下内容完成主结构元素

1. 包含Logo和导航的页头区；
2. 包含页面内容的内容区；
3. 包含版权和社交媒体链接的页脚区；　　

<header role="banner">
    <nav role="navigation">
    </nav>
</header>

<main role="main">
    <h3>主体内容</h3>
</main>

<footer role="contentinfo">
    <p><small>Copyright ? HuBei University</small></p>
</footer>

　　以上就是页面的基本结构和内容了。

二、导航条

　　咱们并没有借用Bootstrap预编译的CSS文件，而且也没有自己写LESS并编译自己的CSS。在此之前，我们得先把Bootstrap特有的元素设置好，那就是导航条（后面再去添加更多细节）。为此，从Bootstrap文档中拿到导航条的代码，做如下调整：

1. 添加navbar-static-top类，因为我们希望导航条能够定位在窗口顶部，但能够随页面滚动而滚动；　
2. 把项目名称链接到index.html
3. 把原来得父div标签改成了语义化的HTML5 nav标签

<header role="banner">
    <nav role="navigation" class="navbar navbar-static-top navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html">我的项目导航</a>
            </div>
            <ul class="nav navbar-nav">
                    <li class="active"><a href="index.html">条目1</a></li>
                    <li><a href="#">条目2</a></li>
                    <li><a href="#">条目3</a></li>
            </ul>
        </div>
    </nav>
</header>

　　　　

　　内容有了，现在我们需要自己的样式表。先来编译并链接Bootstrap默认的样式表。

三、编译和链接默认的Bootstrap CSS

　　我们虽然可以直接把Bootstrap默认的bootstrap.css文件拿来用，但不如借此机会学习一下编译LESS文件。为我们将来的设计打下基础。

　　3.1 编译Bootstrap CSS

　　Windows用户，下载安装这个编译器

http://winless.org/

　　Mac用户，可以选择下载：

Crunch应用：http://crunchapp.net/

　　将less/bootstrap.less编译成bootstrap.css并存放到新建文件下CSS下，并且拷贝一份重命名为main.css

　　3.2 导入到我们的index.html文件中去

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">

　　3.3 验证效果，编译CSS完成，完成基本的导航条

四、完成响应式导航条　　

　　4.1 搜索到<div class="navbar-header">，在这个元素中，添加一个navbar-toggle按钮，用于展开和收起响应式导航条。

<div class="navbar-header">
    <button type="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 class="navbar-brand" href="index.html">我的项目导航</a>
</div>

　　4.2 接下来把导航项包装在一个收起的div中，即用带有适当的Bootstrap类的div把<ul class="nav navbar-nav">包装起来：

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">条目1</a></li>
        <li><a href="#">条目2</a></li>
        <li><a href="#">条目3</a></li>
    </ul>
</div>

　　4.3 手机端和电脑端的效果图