Bootstrap4——学习总结

关于bootstrap的学习

Bootstrap 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明。
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Bootstrap 4 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类：

.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
当使用时直接定义class就行

1. bootstrap4网格系统

bootstrap提供了一套响应式的流式网格系统
那么什么叫响应式？
就是来解决一个网页会因为“屏幕的不同而出现变形”的问题

Bootstrap 4 网格系统有以下 5 个类:

• .col- 针对所有设备 .col-sm- 平板 - 屏幕宽度等于或大于 576px
• .col-md- 桌面显示器 - 屏幕宽度等于或大于768px)
• .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
• .col-xl- 超大桌面显示器 -屏幕宽度等于或大于 1200px)
• 

2.颜色

Bootstrap 4 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light:

 <p class="text-muted">柔和的文本。</p>
  <p class="text-primary">重要的文本。</p>
  <p class="text-success">执行成功的文本。</p>
  <p class="text-info">代表一些提示信息的文本。</p>
  <p class="text-warning">警告文本。</p>
  <p class="text-danger">危险操作文本。</p>
  <p class="text-secondary">副标题。</p>
  <p class="text-dark">深灰色文字。</p>
  <p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
  <p class="text-white">白色文本（白色背景上看不清楚）。</p>

相对应的颜色

若需要背景颜色：对应的书写
提供背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light

3.图像形状

1. 圆角图片：.rounded
2. 椭圆图片：.rounded-circle
3. 缩略图：.img-thumbnail
4. 图片对齐方式：.float-right:右对齐，.float-left:左对齐。
5. 图片居中：.mx-auto和d-block
   响应式图片
   

4.按钮

按钮可用于 <a>, <button>, 或 <input> 元素上:
通过添加 .btn-block 类可以设置块级按钮：
按钮可设置为激活或者禁止点击的状态。
.active 类可以设置按钮是可用的， disabled 属性可以设置按钮是不可点击的。 注意 <a> 元素不支持 disabled 属性，你可以通过添加 .disabled 类来禁止链接的点击。
Bootstrap 4 中允许我们将按钮放在同一行上。
可以在 <div> 元素上添加 .btn-group 类来创建按钮组。
我们可以使用 .btn-group-lg|sm 类来设置按钮组的大小。
可以使用 .btn-group-vertical 类来创建垂直的按钮组：

5.徽章

和按钮相似：只不过把btn改为badge
使用 .badge-pill 类来设置药丸形状徽章:
徽章还可以和按钮一起用，把徽章嵌入进按钮里

6.进度条

创建一个基本的进度条的步骤如下：

• 添加一个带有 .progress 类的 <div>。
• 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空<div>。
• 添加一个带有百分比表示的宽度的 style 属性，例如 style=“width:70%” 表示进度条在 70% 的位置。
  进度条的颜色是上面学的颜色中的背景颜色
• 可以使用 .progress-bar-striped 类来设置条纹进度条：
• 可以使用 .progress-bar-animated类可以为进度条添加动画：

7.加载

• 要创建加载中效果可以使用 .spinner-border 类:
• 可以使用文本颜色类设置不同的颜色：
• 使用 .spinner-grow类来设置闪烁的加载效果:
• 使用.spinner-border-sm 或 .spinner-grow-sm 类来创建加载效果的大小:

更可以和按钮结合
设计一个正在加载的按钮

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

8.分页

要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类，<li> 元素的 <a> 标签上添加 .page-link 类:
当前页可以使用 .active 类来高亮显示：

<li class="page-item active"><a class="page-link" href="#">2</a></li>

.disabled 类可以设置分页链接不可点击:

<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>

可以将分页条目设置为不同的大小。

.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目:
.breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航：

对齐时用justify-content

• 默认状态下为左对齐
• justify-content-center 居中
• justify-content-end 右对齐

9.列组表

要创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类:

 <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>

效果如下：

通过添加：
.active 类来设置激活状态的列表项：
.disabled 类用于设置禁用的列表项:
要创建一个链接的列表项，可以将 <ul> 替换为 <div> ， <a> 替换 <li>。
使用 .list-group-flush 类来删除列表的边框和圆角
可以将 .list-group-horizontal 类添加到 .list-group 类后面来创建水平列表组：

<ul class="list-group list-group-horizontal">

同样可以后面跟上success，secondary，info，warning，danger，dark，light等词来显示不同的颜色。

10.卡片

我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片

头部：card-header
内容：card-body
底部：card-footer
可以在头部元素上使用 .card-title 类来设置卡片的标题 。
.card-text 类用于设置卡片正文的内容。
.card-link 类用于给链接设置颜色。
可以给 <img> 添加 .card-img-top（图片在文字上方） 或 .card-img-bottom（图片在文字下方）
可以使用 .card-img-overlay 类:把图片设置为背景。

11.下拉菜单

.dropdown 类用来指定一个下拉菜单。

我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 属性。

元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类。

我们也可以在 <a> 标签中使用：
.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线：
.dropdown-header 类用于在下拉菜单中添加标题：
和之前的一样 active显示高亮 disabled禁用
让下拉菜单右对齐，可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类。

1. 希望下拉菜单向右弹出，可以在 div 元素上添加 “dropright” 类:
2. 希望下拉菜单向上弹出，可以在 div 元素上添加 “dropup” 类:
3. 希望下拉菜单向左弹出，可以在 div 元素上添加 “dropleft” 类:
4. .dropdown-item-text 类可以设置下拉菜单中的文本项：

12.折叠

.collapse 类用于指定一个折叠元素 (实例中的

); 点击按钮后会在隐藏与显示之间切换。

控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 属性。 data-target="#id" 属性是对应折叠的内容 (<div id="demo">)。

注意: <a> 元素上你可以使用 href 属性来代替 data-target 属性:
可以添加 .show 类让内容默认显示
使用 data-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。

13.导航栏

想创建一个简单的水平导航栏，可以在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类:
.justify-content-center 类设置导航居中显示，
.justify-content-end 类设置导航右对齐。
.flex-column 类用于创建垂直导航：

<ul class="nav flex-column">

• .nav-tabs 类可以将导航转化为选项卡
• .nav-pills 类可以将导航项设置成胶囊形状。
• .nav-justified 类可以设置导航项齐行等宽显示

使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。

导航栏上的选项可以使用 <ul> 元素并添加 class=“navbar-nav” 类。 然后在 <li> 元素上添加 .nav-item 类， <a> 元素上使用 .nav-link 类:

高亮显示logo

14.表单

1.堆叠表单
2.内联表单
一.堆叠表单
对input，textarea，select。使用.form-control类
要注意的是制作的表单宽度都是100%
二.内联表单
需要在<form>元素上添加form-inline
两者的区别在于：
顾名思义
堆叠就是不在一行显示
内敛就是在一行显示
注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。

15.轮播

轮播是一个循环的幻灯片

<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 
</div>

指示符就是指图片底部的小圆点或是小横线
要注意的是active不能落下

16.模态框

模态框（Modal）是覆盖在父窗体上的子窗体

<!-- 按钮：用于打开模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>
 
<!-- 模态框 -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <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>

可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。

尺寸类放在 <div>元素的 .modal-dialog 类后 :

17.滚动监听

向您想要监听的元素（通常是 body）添加 data-spy=“scroll” 。

然后添加 data-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。

注意可滚动项元素上的 id （<div id="section1">） 必须匹配导航栏上的链接选项

（<a href="#section1">)。

可选项data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。 默认为 10 px。

设置相对定位: 使用 data-spy=“scroll” 的元素需要将其 CSS position 属性设置为 “relative” 才能起作用。

18.flex布局

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类:
.flex-row 可以设置弹性子元素水平显示，这是默认的。
.flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反。
.flex-column 类用于设置弹性子元素垂直方向显示, .flex-column-reverse 用于翻转子元素：
.justify-content-* 类用于修改弹性子元素的排列方式，

• *号允许的值有：start (默认), end, center, between 或 around:
• .flex-fill 类强制设置各个弹性子元素的宽度是一样的:
• .order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高( .order-1 排在 .order-2 之前) :
• 弹性容器中包裹子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。设置 flex 容器是单行或者多行。
• …

19.多媒体对象

创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果:

<div class="media border p-3">
  <img src="mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
  <div class="media-body">

要嵌套多媒体对象，可以把新的 .media 容器放到 .media-body 容器中:

<div class="media border p-3">
  <img src="mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
  <div class="media-body">
    <p></p>
    <div class="media p-3">
      <img src="mobile-icon.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
      <div class="media-body">
        <p></p>
      </div>
    </div>  
  </div>
</div>

这样得出的效果是图片位于左边：

 <div class="media-body">
    <h4>菜鸟教程</h4>
    <p>学的不仅是技术，更是梦想！！！</p>
  </div>
  <img src="mobile-icon.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">

可以使用 align-self-* 相关类来设置多媒体对象的图片显示位置：
top：头部
center;居中
end：底部