Bootstrap4--Jumbotron(超大屏幕）、信息提示框、按钮及分页相关知识点汇总

一、Jumbotron(超大屏幕）

1、在 <div> 元素 中添加 .jumbotron 类来创建 jumbotron
2、创建一个没有圆角的全屏幕，可以在 .jumbotron-fluid 类里头的 div添加 .container 或 .container-fluid 类来实现。例如：

<div class="jumbotron jumbotron-fluid">
  <div class="container">

.container和.container-fluid的区别：
1)container类出现内边距和外边距，.container-fluid类没有。
2)container类左右内边距一直是15px，屏幕小于等于767px的时候没有margin值，屏幕大于767px开始有左右margin值，屏幕宽度为768px和1000px的时候，margin值相对最小，分别是9px和15px，其他时候margin值随着屏幕的增大而增大。.container-fluid类宽度不管屏幕宽度大小，一直是100%。

二、信息提示框

1、可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现 。有.alert-success成功, .alert-info信息, .alert-warning警告, .alert-danger错误, .alert-primary首选, .alert-secondary次要的, .alert-light浅灰色 或 .alert-dark深灰色 类来实现
2、提示框添加链接可以这样操作：提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接。
3、关闭提示框：在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。例如：

<div class="alert alert-info alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>信息!</strong> 请注意这个信息。
</div>

结果：
注意：&times; (×) 是 HTML 实体字符，来表示关闭操作，而不是字母 “x”。

4、提示框动画：.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果。

<div class="alert alert-info alert-dismissible fade show">
内容 </div>

三、按钮及按钮组

（1）、按钮
1、不同样式：

同时按钮类可用于<a>,<button>或<input>元素上：

<div class="container">
  <h2>按钮元素</h2>
  <a href="#" class="btn btn-info" role="button">链接按钮</a>
  <button type="button" class="btn btn-info">按钮</button>
  <input type="button" class="btn btn-info" value="输入框按钮">
  <input type="submit" class="btn btn-info" value="提交按钮"> 
</div>

运行结果：
2、按钮设置边框：

<button type="button" class="btn btn-outline-primary">主要按钮</button>

“多了个outline”
3、不同大小的按钮：

<button type="button" class="btn btn-primary btn-lg">大号按钮</button>
  <button type="button" class="btn btn-primary">默认按钮</button>
  <button type="button" class="btn btn-primary btn-sm">小号按钮</button>

4、块级按钮：添加.btn-block 类
5、激活和禁用按钮
按钮可用：添加.active类
按钮不可点击：添加disable属性
链接禁止点击：添加.disabled类
6、加载按钮（不同样式）：

<div class="container">
<button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
  </button>

  <button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button>
  
  <button class="btn btn-primary" disabled>/*按钮不可点击*/
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button>
  
  <button class="btn btn-primary" disabled>/*按钮不可点击*/
    <span class="spinner-grow spinner-grow-sm"></span>
    Loading..
  </button>
</div>

加载效果：用.spinner-border-sm 或 .spinner-grow-sm 类创建加载效果的大小。
结果：
（2）、按钮组

• 创建：.btn-group 类用于创建按钮组。
• 大小：.btn-group-lg|sm 类设置按钮组的大小。
• 样式：
  （one）、垂直按钮组：添加.btn-group-vertical类
  （two）、内嵌按钮组及下拉菜单：
  例：（按钮组中的其中一个加下拉菜单）

<div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Sony
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Tablet</a>
        <a class="dropdown-item" href="#">Smartphone</a>/*链接*/
      </div>
    </div>

（three）、拆分按钮下拉菜单：与下拉菜单标识分开，是两个按钮

<div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
      <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>

(four)、垂直按钮组及下拉菜单：参考按钮组中第一个示例代码。

四、分页

1、分页效果创建：要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类，<li> 元素的 <a> 标签上添加 .page-link 类。
2、当前页页码状态显示：用 .active 类来高亮显示。
3、不可点击的分页链接：用.disabled 类。
4、分页显示大小：大字体分页条目用.pagination-lg 类，小字体分页条目用.pagination-sm 类。
5、面包屑导航：补充（面包屑导航是为了告诉来访者他们目前在网站中所处的位置及如何返回。
是一种“历史记录”的应用方式，目的是帮助你追溯来路，因而是一种线性的导航方式。
我们经常看到的“主分类>一级分类>二级分类>三级分类>………>最终内容页面”这样的方式。
一般正常的来讲目录结构由3层结构组成。分别是首页>栏目页>内容页。）
.breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航
5、分页对齐方式：用工具类来设置分页的对齐方式。pagination左边对齐，pagination justify-content-end右边对齐，pagination justify-content-center中间对齐。