20201029冯佳丽-2

学习日志

7、轮播图

    <!-- 轮播图 -->
    <!-- 
        .carousel:创建一个轮播
        .carousel-indicators:为轮播添加一个指示符,就是轮播图底下的一个个小点,轮播的过程可以显示目前是第几张图。
        .carousel-caption:添加一个字幕标题
        .carousel-fade:到轮播中,以淡入淡出过渡而不是幻灯片为幻灯片动画
        .carousel-inner:添加要切换的图片
        .carousel-item:指定每个图片的内容
        .carousel-control-prev:添加左侧的按钮,点击会返回上一张。
        .carousel-control-next:添加右侧按钮,点击会切换到下一张。
        .carousel-control-prev-icon :与 .carousel-control-prev 一起使用,设置左侧的按钮
        .carousel-control-next-icon:与 .carousel-control-next 一起使用,设置右侧的按钮
        .slide:切换图片的过渡和动画效果,如果你不需要这样的效果,可以删除这个类。
     -->
     <!-- 案例 -->
     <!-- 注: data-ride="carousel"实现轮播的效果且带字幕的-且带淡出淡入效果的-->
     <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
          <!-- 指示符 -->
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
        </ol>
         <!-- 轮播图片 -->
        <div class="carousel-inner">
            <!-- 添加data-interval=""到.carousel-item可以更改自动循环至下一个项目之间的延迟时间。 -->
          <div class="carousel-item active" data-interval="10000">
            <img src="img/1.jpg" class="d-block w-100" alt="...">
            <!-- 添加字幕 -->
            <!-- carousel-caption类添加一个字幕标题 -->
            <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="img/4.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>Second slide label</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              </div>
          </div>
          <div class="carousel-item">
            <img src="img/3.jpg" class="d-block w-100" 
            alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>Third slide label</h5>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
              </div>
          </div>
          <div class="carousel-item">
            <img src="img/6.jpg" class="d-block w-100" 
            alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>four slide label</h5>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
              </div>
          </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>
        </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>

8、折叠

      <!-- 案例1:简单的折叠 -->
      <!-- 1、.collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。控制内容的隐藏与显示 
         2、需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 属性。 data-target="#id" 属性是对应折叠的内容 (<div id="demo">)
    -->
      <div class="container">
        <h2>简单的折叠</h2>
        <p>点击按钮内容会再显示与隐藏之间切换。</p>
        <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">简单的折叠</button>
        <div id="demo" class="collapse">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit,
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>

此处为重点(手风琴实例)

      <!-- 案例2、手风琴实例 (重点)-->
      <div class="container">
        <h2>手风琴实例</h2>
        <p><strong>注意:</strong> 使用 <strong>data-parent</strong> 属性来确保所有的折叠元素在指定的父元素下,这样就能实现在一个折叠选项显示时其他选项就隐藏。</p>
        <div id="accordion">
          <div class="card">
            <div class="card-header">
              <a class="card-link" data-toggle="collapse" href="#collapseOne">
                选项一
              </a>
            </div>
            <!-- 这里添加show是为了初始化可见 -->
            <div id="collapseOne" class="collapse show" data-parent="#accordion">
              <div class="card-body">
                #1 内容:菜鸟教程 -- 学的不仅是技术,更是梦想!!!
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header">
              <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
              选项二
            </a>
            </div>
            <div id="collapseTwo" class="collapse" data-parent="#accordion">
              <div class="card-body">
                #2 内容:菜鸟教程 -- 学的不仅是技术,更是梦想!!!
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header">
              <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
                选项三
              </a>
            </div>
            <div id="collapseThree" class="collapse" data-parent="#accordion">
              <div class="card-body">
                #3 内容:菜鸟教程 -- 学的不仅是技术,更是梦想!!!
              </div>
            </div>
          </div>
          <div class="card">
              <div class="card-header">
                  <a class="collapsed card-link" data-toggle="collapse" href="#collapseFour">
                      选项四
                  </a>
              </div>
              <div id="collapseFour" class="collapse" data-parent="#accordion">
                <div class="card-body">
                    #3 内容:菜鸟教程 -- 学的不仅是技术,更是梦想!!!
                  </div>
              </div>
          </div>
        </div>
    <!-- 案例3、多个目标 -->
    <p>
        <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">切换第一个元素</a>
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">切换第二个元素</button>
        <!-- 切换两个元素:通过 data-target=".multi-collapse" 管理class值,在div部分可以定义相同的class值,将两者结合起来。管理一个元素时,通过不同的id值将两者结合起来,原理相同。-->
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">切换两个元素</button>
      </p>
      <div class="row">
        <div class="col">
          <div class="collapse multi-collapse" id="multiCollapseExample1">
            <div class="card card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
            </div>
          </div>
        </div>
        <div class="col">
          <div class="collapse multi-collapse" id="multiCollapseExample2">
            <div class="card card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
            </div>
          </div>
        </div>
      </div>

9、下拉菜单

      <!-- 下拉菜单 -->
      <!-- 重点:class="dropdown-toggle" data-toggle="dropdown" -->
      <!-- 案例1
          注:1、.dropdown 类用来指定一个下拉菜单。
              2、使用一个按钮或链接来打开下拉菜单, 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。
              3、<div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单,然后在下拉菜单的选项中添加 .dropdown-item 类。
       -->
      <div class="btn-group dropright">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
          Dropdown button
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>

10、巨幕

      <!-- 巨幕 -->
      <!-- 案例1、通过class="jumbotron"定义 -->
      <div class="jumbotron text-center">
        <h1 class="display-4">Hello, world!</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
      </div>
 <!-- 案例2 巨幕的基本格式-->
      <div class="jumbotron">
          <h1 class="display-4">标题</h1>
          <p class="lead">副标题</p>
          <hr class="my-4">
          <p>内容</p>
      </div>

11、列表组(重点)

案例1、基础列表组
       <!-- 列表组 -->
      <!-- list-group和list-group-item结合使用 -->
     <div class="container">
        <h2>基础列表组</h2>
        <ul class="list-group">
          <li class="list-group-item">First item</li>
          <li class="list-group-item">Second item</li>
          <li class="list-group-item">Third item</li>
        </ul>
      </div>
案例2、激活状态的列表组
    <div class="container">
        <h2>激活状态的列表项</h2>
        <ul class="list-group">
          <li class="list-group-item active">Active item</li>
          <li class="list-group-item">Second item</li>
          <li class="list-group-item">Third item</li>
        </ul>
      </div>
案例3、禁用状态的列表组
      <div class="container">
        <h2>禁用的列表项</h2>
        <ul class="list-group">
          <li class="list-group-item disabled">Disabled item</li>
          <li class="list-group-item">Second item</li>
          <li class="list-group-item">Third item</li>
        </ul>
      </div>
案例4、链接列表项
      <!-- 注:既添加了a标签,又添加了.list-group-item-action类,组成好看的样式 -->
      <div class="container">
        <h2>链接列表项</h2>
        <div class="list-group">
          <a href="#" class="list-group-item list-group-item-action">First item</a>
          <a href="#" class="list-group-item list-group-item-action">Second item</a>
          <a href="#" class="list-group-item list-group-item-action">Third item</a>
        </div>
案例5、多种颜色列表项,列表的颜色
        <div class="container">
            <h2>多种颜色列表项</h2>
            <ul class="list-group">
              <li class="list-group-item list-group-item-success">成功列表项</li>
              <li class="list-group-item list-group-item-secondary">次要列表项</li>
              <li class="list-group-item list-group-item-info">信息列表项</li>
              <li class="list-group-item list-group-item-warning">警告列表项</li>
              <li class="list-group-item list-group-item-danger">危险列表项</li>
              <li class="list-group-item list-group-item-primary">主要列表项</li>
              <li class="list-group-item list-group-item-dark">深灰色列表项</li>
              <li class="list-group-item list-group-item-light">浅色列表项</li>
            </ul>
          </div>
          <!-- 案例6、链接的多种颜色列表项 -->
          <div class="container">
            <h2>多种颜色列表项</h2>
            <div class="list-group">
              <a href="#" class="list-group-item list-group-item-action">激活列表项</a>
              <a href="#" class="list-group-item list-group-item-success list-group-item-action">成功列表项</a>
              <a href="#" class="list-group-item list-group-item-secondary">次要列表项</a>
              <a href="#" class="list-group-item list-group-item-info">信息列表项</a>
              <a href="#" class="list-group-item list-group-item-warning">警告列表项</a>
              <a href="#" class="list-group-item list-group-item-danger">危险列表项</a>
              <a href="#" class="list-group-item list-group-item-primary">主要列表项</a>
              <a href="#" class="list-group-item list-group-item-dark">深灰色列表项</a>
              <a href="#" class="list-group-item list-group-item-light">浅色列表项</a>
            </div>
          </div>
案例6 不同屏幕大小进行不同的响应
          <div class="container">
            <!-- 添加.list-group-horizontal以将所有断点的列表组项目的布局从垂直更改为水平 -->
            <ul class="list-group list-group-horizontal ">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Morbi leo risus</li>
              </ul>
<br>
              <ul class="list-group list-group-horizontal-sm ">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Morbi leo risus</li>
              </ul>
              <br>
              <ul class="list-group list-group-horizontal-md ">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Morbi leo risus</li>
              </ul>
              <br>
              <ul class="list-group list-group-horizontal-xl">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Morbi leo risus</li>
              </ul>
          </div>
案例7、带徽章
         <div class="container">
              <h2 class="text-center mt-4">带徽章</h2>
            <ul class="list-group">
                <li class="list-group-item d-flex justify-content-between align-items-center">
                  Cras justo odio
                  <span class="badge badge-primary badge-pill">14</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                  Dapibus ac facilisis in
                  <span class="badge badge-primary badge-pill">2</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                  Morbi leo risus
                  <span class="badge badge-primary badge-pill">1</span>
                </li>
              </ul>
          </div>
案例8、自定义内容–链表组(重点)
        <div class="container">
            <h2 class="text-center mt-4">(重点)案例8、自定义内容--链表组</h2>
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action active">
                  <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">List group item heading</h5>
                    <small>3 days ago</small>
                  </div>
                  <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                  <small>Donec id elit non mi porta.</small>
                </a>
                <a href="#" class="list-group-item list-group-item-action">
                  <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">List group item heading</h5>
                    <small class="text-muted">3 days ago</small>
                  </div>
                  <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                  <small class="text-muted">Donec id elit non mi porta.</small>
                </a>
                <a href="#" class="list-group-item list-group-item-action">
                  <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">List group item heading</h5>
                    <small class="text-muted">3 days ago</small>
                  </div>
                  <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                  <small class="text-muted">Donec id elit non mi porta.</small>
                </a>
              </div>
          </div>
案例9、 图文并茂
          <!-- 注:
            1、首先利用了栅格布局,左边4列(列表组),右边8列的模式(正文内容)
            2、在列表组中通过data-toggle="list"和href="#list-home"值把tab-content中的用id="list-home"相互连接起来,这三个值缺一不可。      
        -->
          <div class="container">
              <h2 class="text-center mt-4">左边导航,右边文章</h2>
              <div class="row">
                <div class="col-4">
                  <div class="list-group" id="list-tab" role="tablist">
                    <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
                    <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
                    <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
                    <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
                  </div>
                </div>
                <div class="col-8">
                  <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</div>
                    <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
                    <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
                    <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
                  </div>
                </div>
              </div>
          </div>    

12、媒体对象

     <!-- 媒体对象 -->
      <!-- 案例1、class="media"创建媒体区域  class="media-body"创建媒体区主区域-->

      <div class="container mt-3">
        <h2>多媒体对象</h2>
        <p>使用 .media 和 .media-body 类创建多媒体对象:</p>
        <div class="media border p-3">
          <img src="https://static.runoob.com/images/mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
          <div class="media-body">
            <h4>菜鸟教程</h4>
            <p>学的不仅是技术,更是梦想!!!</p>      
          </div>
        </div>
      </div>
    </div>
    <!-- 案例2  嵌套 -->
    <div class="container mt-3">
        <div class="media border p-3">
          <img src="https://static.runoob.com/images/mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
          <div class="media-body">
            <h4>菜鸟教程</h4>
            <p>学的不仅是技术,更是梦想!!!</p>   
            <div class="media p-3">
                <img src="https://static.runoob.com/images/mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
                <div class="media-body">
                  <h4>菜鸟教程</h4>
                  <p>学的不仅是技术,更是梦想!!!</p>      
                </div>
              </div>   
          </div>
        </div>
      </div>
      <!-- 案例3、图片显示在右边 -->
      <div class="container mt-3">
        <h2>图片显示在右边</h2>
        <p>如果你想将头像图片显示在右侧,可以在 .media-body 容器后添加图片:</p>
        <div class="media border p-3">
          <div class="media-body">
            <h4>菜鸟教程</h4>
            <p>学的不仅是技术,更是梦想!!!</p>      
          </div>
          <img src="https://static.runoob.com/images/mobile-icon.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
        </div>
      </div>
      <!-- 案例4、定位多媒体图片位置 -->
      <!-- 注:align-self-*:align-self-start、align-self-center、align-self-end 设置图片的位置-->
      <div class="container mt-3">
        <h2>多媒体对象</h2>
        <p>我们可以使用 align-self-* 相关类来设置多媒体对象的图片显示位置:</p><br>
        <!-- 头部 -->
        <div class="media">
          <img src="https://static.runoob.com/images/mobile-icon.png" class="align-self-start mr-3" style="width:60px">
          <div class="media-body">
            <h4>头部 -- 菜鸟教程</h4>
            <p>学的不仅是技术,更是梦想!!
            <p>学的不仅是技术,更是梦想!!
            <p>学的不仅是技术,更是梦想!!
          </div>
        </div>
      
        <!-- 居中 -->
        <div class="media mt-3">
          <img src="https://static.runoob.com/images/mobile-icon.png" class="align-self-center mr-3" style="width:60px">
          <div class="media-body">
            <h4>居中 -- 菜鸟教程</h4>
            <p>学的不仅是技术,更是梦想!!
            <p>学的不仅是技术,更是梦想!!
            <p>学的不仅是技术,更是梦想!!
          </div>
         </div>
      
        <!-- 底部 -->
        <div class="media mt-3">
          <img src="https://static.runoob.com/images/mobile-icon.png" class="align-self-end mr-3" style="width:60px">
          <div class="media-body">
            <h4>底部 -- 菜鸟教程</h4>
            <p>学的不仅是技术,更是梦想!!
            <p>学的不仅是技术,更是梦想!!
            <p>学的不仅是技术,更是梦想!!
          </div>
        </div>
      </div>
      <!-- 案例4、媒体清单 -->
      <div class="container mt-3">
        <!-- .list-unstyled清楚所有的样式 -->
        <ul class="list-unstyled">
            <li class="media ">
                <img class="mr-3" style="width: 100px;" src="img/1.jpg" alt="">
                <div class="media-body">
                    <h5 class="mt-1 ml-3">今天的风景真美呀!</h5>
                    <p>哈哈哈哈哈哈哈哈哈哈哈哈</p>
                </div>
            </li>
            <li class="media ">
              <img class="mr-3" style="width: 100px;" src="img/1.jpg" alt="">
              <div class="media-body">
                  <h5 class="mt-1 ml-3">今天的风景真美呀!</h5>
                  <p>哈哈哈哈哈哈哈哈哈哈哈哈</p>
              </div>
          </li>
          <li class="media ">
              <img class="mr-3" style="width: 100px;" src="img/1.jpg" alt="">
              <div class="media-body">
                  <h5 class="mt-1 ml-3">今天的风景真美呀!</h5>
                  <p>哈哈哈哈哈哈哈哈哈哈哈哈</p>
              </div>
          </li>
        </ul>
      </div>

13、模态框

      <!-- 模态框 -->
      <!-- 案例1 基本模态框形态-->
      <div class="container">
        <h2>模态框实例</h2>
        <!-- 按钮:用于打开模态框 -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
          打开模态框
        </button>
         
        <!-- 模态框 -->
        <!-- 注:创建一个.modal类 -->
        <div class="modal fade" id="myModal">
            <!-- 设置内容,实现水平居中,不可缺失,如果缺失,内容就宽度占满整个屏幕且无法关闭 -->
            <!-- 注意: modol-dialog-centered和modal-dialog-scrollable要这种方式添加 不能直接改变-->
            <!-- <div class="modal-dialog modal-dialog-scrollable"> -->
          <div class="modal-dialog modal-dialog-scrollable">
              <!-- 设置模态框的内容区域 div.modal-content,没有它就是模态框的原始样式,一层黑色的面纱,但是也能操作,用户体验很差-->
            <div class="modal-content">
              <!-- 模态框头部 -->
              <div class="modal-header">
                <h4 class="modal-title">模态框头部</h4>
                <!--触发事件: data-dismiss="modal"表示关闭整个模态框 -->
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>
         
              <!-- 模态框主体 -->
              <div class="modal-body">
                  <pre>




















                    模态框内容..
                  </pre>
                
              </div>
         
              <!-- 模态框底部 -->
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-info" data-dismiss="modal">知道了</button>
              </div>
         
            </div>
          </div>
        </div>

14、导航

     <!-- 导航 -->
      <!-- 
          通过创建.nav和.nav-item结合使用,和列表组的方式使用有点类似。
          注: 导航居中:
               <ul class="nav justify-content-center">
               导航右对齐:
               <ul class="nav justify-content-end">
               垂直导航:
               <ul class="nav flex-column">
               垂直居中导航:
                <ul class="nav flex-column align-items-center">
               胶囊导航:
               <ul class="nav nav-pills">
               设置导航项齐行等宽显示:
               <ul class="nav nav-pills nav-justified">
               <ul class="nav nav-tabs nav-justified">..</ul>
       -->
      <!-- 案例1  简单的水平导航-->
      <div class="container ">
        <h2>导航</h2>
        <p>简单的水平导航:</p>
        <ul class="nav nav-pills nav-justified">
          <li class="nav-item">
            <a class="nav-link active" 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>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
      <!-- 案例2 选项卡-->
      <!-- 使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。 -->
      <ul class="nav nav-tabs nav-justified">
        <li class="nav-item">
          <a class="nav-link" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">Link</a>
        </li>
        <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>
      <!--(重点:综合应用) 案例3、胶囊导航带下拉菜单 -->
      <div class="container">
        <h2>胶囊导航带下拉菜单</h2>
        <!-- <ul class="nav nav-tabs"> -->
        <ul class="nav nav-pills">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Link 1</a>
              <a class="dropdown-item" href="#">Link 2</a>
              <a class="dropdown-item" href="#">Link 3</a>
            </div>
          </li>
          <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>
      <!-- (重点)案例4、动态导航栏切换 -->
      <!-- 注:
             1、在a标签中先定义属性data-toggle="tab",还有href="#XXX"值与后面的id值形成联系
             2、然后通过选项卡内容class="tab-content"定义内容的区域
             3、然后在每个选项对应的内容的上添加 .tab-pane 类。

             注:如果去掉tab-pane就会出现占位的情况
    -->
      <div class="container">
        <h2>选项卡切换</h2>
        <br>
        <!-- Nav tabs -->
        <ul class="nav nav-pills">
        <!-- <ul class="nav nav-tabs" role="tablist"> -->
          <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
          </li>
        </ul> 
        <!-- Tab panes -->
        <div class="tab-content">
          <div id="home" class="container tab-pane active"><br>
            <h3>HOME</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
          <div id="menu1" class="container tab-pane fade"><br>
            <h3>Menu 1</h3>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
          <div id="menu2" class="container tab-pane fade"><br>
            <h3>Menu 2</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
          </div>
        </div>
      </div>
      
      <!-- (重点)案例5、 -->
      <!-- 左导航,右内容 -->
      <div class="row">
        <div class="col-3">
            <div class="nav flex-column nav-pills" role="tablist" id="v-pills-tab"> 
                <a class="nav-link active" href="#f1" data-toggle="pill" role="tab" >哈1</a>
                <a class="nav-link" href="#f2" data-toggle="pill" role="tab">哈2</a>
                <a class="nav-link" href="#f3" data-toggle="pill" role="tab">哈3</a>
                <a class="nav-link" href="#f4" data-toggle="pill" role="tab">哈4</a>
            </div>
        </div>
        <div class="col-9">
            <div class="tab-content">
                <div class="tab-pane fade show active" id="f1" role="tabpanel" >heheihei1</div>
                <div class="tab-pane fade " id="f2" role="tabpanel">heheihei2</div>
                <div class="tab-pane fade" id="f3" role="tabpanel">heheihei3</div>
                <div class="tab-pane fade" id="f4" role="tabpanel">heheihei4</div>
            </div>
       </div>
      </div>

15、导航栏

     <!-- 导航栏 -->
      <!-- 
          1、创建一个导航栏及其不同设备的响应大小<nav class="navbar navbar-expand-sm bg-light">
          2、通过.navbar-nav和.nav-item结合创创建
          3、可以使用以下类来创建不同颜色导航栏:.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)。
          提示: 对于暗色背景需要设置文本颜色为浅色的,对于浅色背景需要设置文本颜色为深色的。
          4、白色字:.navbar-dark类 
          5、设置高亮:
          <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
              <a class="navbar-brand" href="#">Logo</a>
                 ...
          </nav>
          注:
          如果使用图片,可以使用 .navbar-brand 类来设置图片自适应导航栏。
          <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
                <a class="navbar-brand" href="#">
                    <img src="bird.jpg" alt="Logo" style="width:40px;">
                </a>
                ...
          </nav>
       -->
       <!-- 案例1 水平导航栏-->
       <!-- 小屏上面会变成垂直导航栏 通过.bg-light类 -->
      <nav class="navbar navbar-expand-sm bg-light bg-dark navbar-dark">
        <a class="navbar-brand" href="#">Logo</a>
        <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>
      <br>
      <div class="container-fluid">
        <h3>简单的导航栏实例</h3>
        <p>导航栏一般放在页面的顶部。</p>
        <p>我们可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠)。</p>
      </div>
      <!-- (重点)案例2、折叠导航栏-->
      <!-- 在按钮上添加 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>
        <!-- class="navbar-toggler"设置了一块区域与事件 -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <!-- 导航栏的图标.navbar-toggler-icon -->
          <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>
      <br>
      
      <div class="container">
        <h3>折叠导航栏</h3>
        <p>通常,小屏幕上我们都会折叠导航栏,通过点击来显示导航选项。</p>
        <p>提示: 如果你删除 .navbar-expand-md 类,导航链接会一直隐藏,且切换按钮会一直显示。</p>
      </div>
      
      <!-- 案例3、 导航栏使用下拉菜单-->
      <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <!-- Brand -->
        <a class="navbar-brand" href="#">Logo</a>
      
        <!-- Links -->
        <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>
      
          <!-- Dropdown -->
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
              Dropdown link
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Link 1</a>
              <a class="dropdown-item" href="#">Link 2</a>
              <a class="dropdown-item" href="#">Link 3</a>
            </div>
          </li>
        </ul>
      </nav>
      <br>
        
      <div class="container">
        <h3>导航栏使用下拉菜单</h3>
        <p>导航栏上可以设置下拉菜单。</p>
      </div>
      
      <!-- 案例4、固定导航栏 fixed-top或者fixed-bottom-->
      <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
        <a class="navbar-brand" href="#">Logo</a>
        <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>
        </ul>
      </nav>
      
      <div class="container-fluid" style="margin-top:80px">
        <h3>固定导航栏</h3>
        <p>导航栏可以固定在头部或者底部。</p>
        <h1>滚动页面查看效果。</h1>
      </div>
      <!-- 案例5、向上弹出导航栏 -->
      <div class="fixed-top">
        <div class="collapse" id="navbarToggleExternalContent">
          <div class="bg-dark p-4">
            <h5 class="text-white h4">Collapsed content</h5>
            <span class="text-muted">Toggleable via the navbar brand.</span>
          </div>
        </div>
        <nav class="navbar navbar-dark bg-dark">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </nav>
      </div>
      </div>

16、分页

     <!-- 分页 -->
      <!-- 
          1、要创建一个基本的分页可以在 ul 元素上添加 .pagination 类。然后在 li 元素上添加 .page-item 类: 
          2、.pagination-lg 类设置大字体的分页
          pagination-sm 类设置小字体的分页条目
          <ul class="pagination pagination-lg">
              。。。。
          </ul>
          <ul class="pagination pagination-sm">
              。。。。
          </ul>
    -->
      <!-- 案例1、分页 -->
      <div class="container">
        <h2>分页</h2>                 
        <ul class="pagination pagination-sm">
          <li class="page-item"><a class="page-link" href="#">Previous</a></li>
          <li class="page-item"><a class="page-link" href="#">1</a></li>
          <li class="page-item active"><a class="page-link" href="#">2</a></li>
          <li class="page-item disabled"><a class="page-link" href="#">3</a></li>
          <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>
      </div>
      <!-- 案例2、使用图标 -->
      <div class="container">
        <nav aria-label="Page navigation example">
            <ul class="pagination">
              <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
      </div>

学习感受

今天学习节奏很紧凑,内容很多,感觉很多东西都格式都是固定死的,要记住属性,看到了要认识它知道它怎么用。

评论

this is is footer