2019-02-16

bootstrap边学边做记（二）：导航条制作

bootstrap边学边做记（二）

如何制作一个固定导航栏？

bootstrap : nav

1.start

bootstrap提供了丰富的组件，在这里查找nav，如下图所示：

2.找到模板，粘贴到你的项目上，ctrl+s，然后浏览器运行
代码：

1.Code template (before modification)

中：1.代码模板（修改前）

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

运行结果:
在这里插入图片描述

Code template(modified)

中：代码模板（修改后）

3.然后进行一些小修改：
代码：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./CSS/bootstrap.css" >

    <title>导航栏制作</title>
  </head>
  <body>
      <!-- 粘性顶部 -->
    <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">公司名字</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">
              <!-- active保持高亮主题 -->
            <li class="nav-item active">
              <a class="nav-link" href="#">Home 
                  <!-- 屏幕阅读器 -->
                  <span class="sr-only">(current)</span>
            </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <!-- 下拉菜单 -->
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
     
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="./JS/jquery.js" ></script>
    <script src="./JS/popper.js" ></script>
    <script src="./JS/bootstrap.min.js" ></script>
  </body>
</html>

运行结果:
在这里插入图片描述

.navbar-brand 适用于您的公司，产品或项目名称。下图是有无.navbar-brand区别

1.无.navbar-brand
在这里插入图片描述

2.有.navbar-brand
在这里插入图片描述

nav :CSS

源码里的CSS代码片段：
在这里插入图片描述

因为这里是在.navbar-dark里，所以他会变成黑色

.navbar-nav 用于全高度和轻量级导航（包括对下拉菜单的支持）。

没有.navbar-nav 效果:
在这里插入图片描述
有.navbar-nav 效果

CSS代码片段：

因为这里是在.navbar-dark里，所以他会变成黑色

add icon

中文翻译：4.如何添加图标

添加图像.navbar-brand可能总是需要自定义样式或实用程序来正确调整大小。
在这里插入图片描述
建议不要给我搞这样的图(下图)，如果有这样的图怎么办，切吧
一顿ps操作后，现在好看多了,（顺便宣传下我们学校）
PS操作的图片

Code explanation

中文翻译:代码解释

1
2
3

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

data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。
href 或 data-target 属性添加到父组件，它的值是子组件的 id。
data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。
aria-* ：这属性是跟盲人阅读器有关

.navbar-toggler用于我们的折叠插件和其他导航切换行为。
效果：当他小于一定宽度时候就会显示出来
.collapse.navbar-collapse 用于通过父断点对导航栏内容进行分组和隐藏。
.collapse.navbar-collapse样式