Bootstrap布局组件（下篇）

---

前言

这是对Bootstrap内容总结的最后一篇。内容包括：分页、模态框、轮播、面包屑导航。

---

一、分页

1.使用原因：

在网页开发的过程中，如果内容显示的过多，一般就会做分页处理。

2.创建分页：

• 在<ul>元素上添加 .pagination类
• 在<li>元素上添加 .page-item类
• 当前页页码状态用 .active类来高亮显示
• 不可点击的分页链接：.disabled类设置
• 设置分页条目的大小：.pagination-lg(大字体)、.pagination-sm(小字体)

3.代码显示：

<ul class="pagination pagination-lg">
  <li class="page-item disabled"><a class="page-link" href="#">前一页</a></li>
  <li class="page-item active"><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="#">下一页</a></li>
</ul>

二、模态框（Modal）

1.定义

模态框是 覆盖 在父窗体的子窗体，它的目的是显示一个单独的源的内容，可以不离开父窗体的情况下进行魔种互动。子窗体提供信息交互。

2.创建模态框

注意：
1.在写模态框之前，需要在父窗体需要模态框的位置写一个按钮，通过它触发进而打开模态框，进行下一步的操作。
2.尺寸类（.modal-sm、.modal-lg）放在<div>元素的.modal-dialog类后

3.代码显示：(参考Bootstrap4菜鸟教程)

<!-- 按钮：用于打开模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框按钮
</button>
 
<!-- 模态框 -->
<div class="modal fade" id="Appmodal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
 
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">模态框头部</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
 
      <!-- 模态框主体 -->
      <div class="modal-body">
        模态框内容..
      </div>
 
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
 
    </div>
  </div>
</div>

三、轮播

1.效果

它就相当于一个循环的幻灯片；一般在制作网页时，放在顶部，作为预览。

2.使用的类

注：如果要给轮播图片进行描述可采取的方法：在<div class = "carousel-item">内 加<div class = "carousel-caption">

四、面包屑导航

1.概述：

它是基于网站层次信息的显示方式。通俗的讲它表示当前页在导航层次结构内的位置，起辅助作用。

2.代码显示：

//方法一：可以使用无序列表<ol><li>,使用类时和方法二完全相同
//方法二
<nav class="breadcrumb">
  <a class="breadcrumb-item" href="#">Home</a>
  <a class="breadcrumb-item" href="#">Library</a>
  <a class="breadcrumb-item" href="#">Data</a>
  <span class="breadcrumb-item active">Bootstrap</span>
</nav>