今天完成的事情：

1.完成css任务8首页页面

2.用bootstrap制作导航条

3.用bootstrap栅格系统对CSS8首页页面进行布局

明天计划的事情：

1.继续css任务8

2.继续使用bootstrap完成任务8

遇到的问题：

暂无

收获：

1.用bootstrap制作导航条

    1）创造一个简单的水平导航栏

         在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类

        <ul class="nav">

               <li class="nav-item">

                        <a class="nav-link" href="#">link<a>

               </li>

               <li class="nav-item">

                        <a class="nav-link" href="#">link<a>

               </li>             

              <li class="nav-item">

                        <a class="nav-link" href="#">link<a>

               </li>

         </ul>

        结果

     .justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐。<ul class="nav   justify-content-end">

     .flex-column 类用于创建垂直导航。<ul class="nav flex-column">

2.导航条

   在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。

  第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”

  第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”

   1）.navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)

        <nav class="navbar navbar-expand-sm bg-light">

              <ul class="navbar-nav">

                  <li class="nav-item">

                        <a class="nav-link" href="#">Link 1</a>

                   </li>

                   <li class="nav-item">

                          <a class="nav-link" href="#">Link 2</a>

                   </li>

                   <li class="nav-item">

                           <a class="nav-link" href="#">Link 3</a>

                   </li>

              </ul>

      </nav>

   2）通过删除 .navbar-expand-xl|lg|md|sm 类来创建垂直导航栏

    3）可以使用以下类来创建不同颜色导航条：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark和 .bg-light。

    4）激活和禁用状态: 可以在 <a> 元素上添加 .active 类来高亮显示选中的选项。 .disabled 类用于设置该链接是不可点击的。

3.折叠导航条

     通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。

     要创建折叠导航栏，可以在按钮上添加 class="navbar-toggler", data-toggle="collapse" 与 data-target="#thetarget" 类。然后在设置了 class="collapse navbar-collapse" 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id:

<nav class="navbar navbar-expand-md bg-dark navbar-dark">

  <a class="navbar-brand" href="#">Navbar</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="collapsibleNavbar">

    <ul class="navbar-nav">

      <li class="nav-item">

        <a class="nav-link" href="#">Link</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Link</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Link</a>

      </li>    

    </ul>

  </div>  

</nav>