学习笔记|BootStrap4 入门教程学习摘要笔记入门|笔记|前端|BootStrap4

以下为个人认为有必要记录的笔记不喜勿喷

BootStrap4 简介
自定义选项
弹性盒Flexbox
页面创建
- 容器类
网格系统
- 网格类
排版
颜色设置
- 文字颜色
- 背景颜色
表格设置
图片设置
- 图片形状
- 图片对齐
- 响应式图片
超大屏幕
信息提示框
按钮
- 按钮组
徽章（Badges）
进度条
分页
- 面包屑导航
列表组
卡片
下拉菜单
折叠板
导航
- 导航栏
- 折叠导航栏
表单
轮播
模态框
提示框
弹出框
滚动监听(Scrollspy)
多媒体对象
实用工具
- 边框
- 浮动
- 居中对齐
- 宽高度
写在后面

BootStrap4 简介 Bootstrap4 是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集，与之前的版本相比，拥有更强大的功能。
利用提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。
自定义选项可以在 _variables.scss 文件找到这些变量并自定义这些变量。

文章图片

弹性盒Flexbox

在父元素里面内容的简单的垂直对齐。
通过使用媒体查询，可以简单的根据设备和屏幕分辨率来对内容重新排序。
只用 CSS 在网格系统中实现等高列的布局。

页面创建

//width=device-width 表示宽度是设备屏幕的宽度。 //initial-scale=1 表示初始的缩放比例。 //shrink-to-fit=no 自动适应手机屏幕的宽度。

容器类

container 类用于固定宽度并支持响应式布局的容器。（两边有留白）
container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

网格系统拥有一个强大的移动优先的网格系统，使用该系统可以用来创建各种形状和尺寸的布局，基于12列。
网格类 Bootstrap 4 网格系统有以下 5 个类：

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

网格系统规则如下：

文章图片

排版 Bootstrap4 默认设置

默认的 font-size 为 16px, line-height 为 1.5。
默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。
所有的元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

【学习笔记|BootStrap4 入门教程学习摘要笔记】display、abbr、mark、small、blockquote、dl、dt、dd、code、kbd、pre、
颜色设置文字颜色 .text-muted：柔和
.text-primary：主要
.text-success：绿色
.text-info：淡蓝色
.text-warning：黄色
.text-danger：红色
.text-secondary：和柔和好像
.text-white：白色
.text-dark：深灰
.text-light：浅灰
背景颜色 .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light（颜色和文字颜色对应）
注意背景颜色不会设置文本的颜色，在一些实例中你需要与 .text- 类一起使用*
表格设置感觉和原先的BootStrap没什么区别…
.table,.table-stripe,.table-bordered,.table-hover,.table-dark,.table-primary,.table-success,.table-warning,.table-danger,.table-info,.table-active,.table-secondary,.table-light,.table-dark,.thead-dark,.thead-light,table-sm,.table-responsive-*。
图片设置图片形状 img-rounded：让图片显示圆角效果
img-circle：设置椭圆形图片
img-thumbnail：用于设置图片缩略图(图片有边框)
图片对齐使用 .float-right 类来设置图片右对齐
使用 .float-left 类设置图片左对齐
响应式图片在

文章图片
第一张图片描述标题
描述文字!

文章图片
第二张图片描述标题
描述文字!

文章图片
第三张图片描述标题
描述文字!

模态框模态框（Modal）是覆盖在父窗体上的子窗体。通常，使用模态框的目的是用来显示来自一个单独的源的内容，而且可以在不离开父窗体的情况下有一些互动。

模态框实例模态框头部模态框内容..

提示框提示框是一个小小的弹窗，只有当鼠标移动到元素上时才会显示，鼠标移出后消失。

通过向元素添加 data-toggle=“tooltip” 来来创建提示框，title 属性的内容为提示框显示的内容。
可以使用 data-placement 属性来设定提示框显示的方向: 上top, 下bottom, 左left 或右right:

注意: 提示框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。

弹出框通过向元素添加 data-toggle=“popover” 来来创建弹出框。

title 属性的内容为弹出框的标题。
data-content 属性显示了弹出框的文本内容。
默认情况下弹出框显示在元素右侧。可以使用 data-placement 属性来设定弹出框显示的方向: 上：top, 下：bottom, 左：left 或右：right。
默认情况下，弹出框在再次点击指定元素后就会关闭，可以使用 data-trigger=“focus” 属性来设置在鼠标点击元素外部区域来关闭弹出框。
想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-trigger 属性，并设置值为 “hover”。

注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法。

滚动监听(Scrollspy) 会根据滚动的位置，自动更新导航条的目标。
滚动监听的创建：