在构建博客项目时，首先就想到了bootstrap，但是之前我一直是使用的bootstrap3.3.7版本，我知道4.x早在17年就已经出来了，但那会儿我还没有生病，在公司里面还没有过多的去接触这个版本，一直都是在使用3.3.7这个版本，今天我通过npm安装的时候就自动安装了这个版本，本来我这网站就运行在高版本浏览器上，也不用去考虑什么兼容问题，哈哈，现在倒是给了一个机会，好好学习下，网上搜索了一下，3.x与4.x的区别，也就是3版本是兼容到ie8的，4.x都已经放弃了ie8跟ios6，还有布局方面也做了调整，整体来说4版本的min整体会比3的min缩小了近40%，4.x用sass编写，npm安装下来就有scss，3.x有sass版本也有less版本，当然都会有dist下面的css，无论是你用sass还是用less，都可以通过@import的方式引入css文件来引用，使用sass亦可以通过bt下面的scss来单独引用，这也是非常的方便，可以单独引用某个部分，这也是使用sass的好处，比如我只想使用bt中的格栅布局样式，那我只需要引用bt 下scss的bootstrap-grid.scss文件
我们也可以很方便的来进行主题更换，我们可以在_variables.scss 文件中查看到对应的颜色以及一些常用的常量，可以根据这些来自定义一个文件样式来覆盖他们，来达到自定义主题的目的。
目前使用的版本是4.1.3 下面一一来讲解其样式文件
.jumbotron 字面意思，创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息
.jumbotron-fluid 将不包含左右padding及圆角，其他都一样
- .container 类用于固定宽度并支持响应式布局的容器。(有个最大宽度)
- .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。（宽度就喂固定100%）
网格系统
Bootstrap 4 网格系统有以下 5 个类:
- .col- 针对所有设备
- .col-sm- 平板 - 屏幕宽度等于或大于 576px
- .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
- .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
- .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
注意：
- 网格每一行需要放在设置了
.container(固定宽度) 或.container-fluid(全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。 - 使用行来创建水平的列组。
- 内容需要放置在列中，并且只有列可以是行的直接子节点。
使用col-*-*来分配各自占比，使用col来自动分配大小 使用offset-*-*来设置偏移量
文字排版
Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。
<h1>h1 Bootstrap 标题 (2.5rem = 40px)</h1> <h2>h2 Bootstrap 标题 (2rem = 32px)</h2> <h3>h3 Bootstrap 标题 (1.75rem = 28px)</h3> <h4>h4 Bootstrap 标题 (1.5rem = 24px)</h4> <h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5> <h6>h6 Bootstrap 标题 (1rem = 16px)</h6>
通过设置display-1到display-4来设置更大的标题 display每增加一，字号增加1rem
在 Bootstrap 4 中 HTML <small> 元素用于创建字号更小的颜色更浅的文本，在原字号下缩小到80%
Bootstrap 4 定义 <mark> 为黄色背景及有一定的内边距，
.blockquote:字体变大了，添加了下外边距
blockquote-footer 尾部引用，像是注明标题一样，
Bootstrap 4 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light:
表格中也是有这些颜色分类的.thead-dark 跟.thead-light 表示给表头颜色，table-sm 小表格.table-responsive响应式，其中也有宽度大小之分，xs、sm等
图片类
.rounded 给img图片添加圆角，与V3一样.rounded-circle 椭圆 .img-thumbnail 缩略图字面意思，.img-fluid 流式，根据屏幕的大小自动适应， float-x对齐方式
与之颜色对应的如alert弹框，背景bg 字体text，角标badge，按钮btn等都有一致的颜色
.badge-pill来设置角标圆角
.progress 设置进度条（.progress-bar-striped设置条纹.progress-bar-animated设置动画）
- 添加一个带有 .progress 类的 <div>。
- 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
- 添加一个带有百分比表示的宽度的 style 属性，例如 style="width:70%" 表示进度条在 70% 的位置。
分页
Bootstrap 4 可以很简单的实现分页效果。
要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类
active表示高亮当前页码，disable不可用 lg/sm 表示大小
列表组
要创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类:active表示活动状态，disabled禁用状态
list-group-item-color 颜色表示
简单的卡片
我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片.card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式
标题、文本和链接
我们可以在头部元素上使用 .card-title 类来设置卡片的标题 。 .card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色
图片卡片
我们可以给 <img> 添加 .card-img-top（图片在文字上方） 或 .card-img-bottom（图片在文字下方 来设置图片卡片，如果图片要设置为背景，可以使用 .card-img-overlay 类:
边框
border-0 可以去掉边框，top-0去掉上边框 border-color 颜色 rounded-x圆角处理-circle为圆
clearfix 清除浮动
（.float-*-left|right - * 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小
使用 .mx-auto 类来设置居中对齐
元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw-100) 来设置宽度
元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh-100) 来设置高度
弹性盒子(flexbox)
水平方向
.flex-row 可以设置弹性子元素水平显示，这是默认的。
使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反
垂直方向
.flex-column 类用于设置弹性子元素垂直方向显示, .flex-column-reverse 用于翻转子元素：
.justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或 around
等宽
.flex-fill 类强制设置各个弹性子元素的宽度是一样的:
扩展
.flex-grow-1 用于设置子元素使用剩下的空间。以下实例中前面两个子元素只设置了它们所需要的空间，最后一个获取剩余空间。 :
排序
.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高( .order-1 排在 .order-2 之前) :
外边距
.mr-auto 类可以设置子元素右外边距为 auto，即 margin-right: auto!important;，.ml-auto 类可以设置子元素左外边距为 auto，即 margin-left: auto!important;:
包裹
弹性容器中包裹子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。设置 flex 容器是单行或者多行。
内容对齐
我们可以使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。
这些类在只有一行的弹性子元素中是无效的。
子元素对齐
如果要设置单行的子元素对齐可以使用 .align-items-* 类来控制，包含的值有：.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, 和 .align-items-stretch (默认)。
tips:
通过m-x,mr-x,p-x等可以方便的来设置外边距与内边距
要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果:
PHP Warning: curl_exec() has been disabled for security reasons in /home/ftp/f/free49568/wwwroot/wp-content/themes/Variant/functions.php on line 490 百度已收录
bootstrap4 之简要记录：等您坐沙发呢！