任务总结：学习了bootstrap的栅格布局系统，组件：折叠导航栏，轮播图。学习了media媒体查询的使用方法。

轮播图的使用方法：

轮播不带幻灯片尺寸标准化处理，因此你可能需要使用其它通用样式可自定义样式来调整其大小使之适当匹配。虽然轮播组件支持上一个/下一个控制和指令，但它们不是必备元素，可根据你的需要添加或自定义（展现不同的效果）。
通过 .carousel 命名样式引入轮播组件，同时为此控件设置唯的ID-尤其是当你在同一页面使用多个轮播效果时这是必须的。

<div id=“carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
通过 .carousel 命名样式引入轮播组件，该data-ride=“carousel” 属性用于将轮播标记为从页面加载开始的动画，它不能与同一转盘的（冗余和不必要）显式JavaScript初始化结合使用。
  <ol class=“carousel-indicators”>   为什么用ol？  Carousel-indicators：圆圈部分样式，都是绝对定位，每个li设置为行内块元素，用text-indent：-999来隐藏字体 
    <li data-target=“#carouselExampleIndicators" data-slide-to="0" class="active"></li> 
将 .active 样式添加到其中一个幻灯片（一般第一张），否则轮播效果将无法正c常运行（展现）。初始状态元素
使用数据属性可以轻松控制转盘的位置。data-slide接受关键字， prev或者 next改变相对于其当前位置的滑动位置。或者，使用data-slide-to将原始幻灯片索引传递到data-slide-to="2"，将幻灯片位置转换到以0开始的特定索引。
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> 
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> 
  </ol> 
ol、li的作用就是图片中间的姿态指示器，也就是小小的横线。
  <div class=“carousel-inner”> 轮播组件内部 
    <div class=“carousel-item active"> /*每个图片的初始css属性*/ 
      <img class="d-block w-100" src="..." alt="First slide"> 
    </div> 
    <div class="carousel-item"> 
      <img class="d-block w-100" src="..." alt="Second slide"> 
    </div> 
    <div class="carousel-item"> 
      <img class="d-block w-100" src="..." alt="Third slide"> 
    </div> 
  </div> 
图片组

  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
    <span class=“carousel-control-prev-icon" aria-hidden="true"></span>  图标按钮 
    <span class=“sr-only">Previous</span> sr-only全称是 screen reader only，意为：（仅供）屏幕阅读器，这个 class 主要用于增强 accessbility（可访问性 
  </a> 
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
    <span class="carousel-control-next-icon" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
  </a> 
上面是带控制器的 
</div>

———————-———————-———————-———————-———————-———————-———————-———————-———————-

bootstrap中的nav导航栏代码中重要的点：

class=“navbar-toggler” （用于折叠插件，控制三个斑马线的，
data-toggle=“collapse” （通过父断点进行分组和隐藏
data-target=“#navbarTogglerDemo02" （使用id 和 data-target 搭配扩展内容
aria-controls=“navbarTogglerDemo02”   （暂时不知道有什么用处。
aria-expanded=“false”  （aria-expanded表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的。
导航栏一般放在页面的顶部。我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。
md的临界点是<768  lg<992  xl<1200  sm<675  . 
导航栏上的选项可以使用 <ul> 元素并添加 class="navbar-nav" 类。 然后在 <li> 元素上添加 .nav-item 类， <a>元素上使用 .nav-link 类:
在按钮上添加 class="navbar-toggle", data-toggle="collapse" 与 data-target="#thetarget" 类。然后在设置了 class="collapse navbar-collapse" 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id:
<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="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"aria-label="Toggle navigation">   
    <span class=“navbar-toggler-icon”></span>   //按钮 
  </button>p 
  <div class=“collapse navbar-collapse" id="navbarTogglerDemo02">  //导航栏 id对应button 
    <ul class=“navbar-nav mr-auto mt-2 mt-lg-0”>   navbar-nav  //提供完整的高和轻便的导航（包括对下拉菜单的支持） 
      <li class="nav-item active">  
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
      </li>n 
      <li class="nav-item"> 
        <a class="nav-link" href="#">Link</a> 
      </li> 
      <li class="nav-item"> 
        <a class="nav-link disabled" href="#">Disabled</a> 
      </li> 
    </ul> 
  </div> 
</nav>