bootstrap4 之简要记录

在构建博客项目时,首先就想到了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 类,然后添加外边距,内边距等效果:

百度已收录
分享