BootStrap4 入门教程学习摘要笔记

抓更够

于 2019-08-25 09:04:21 发布

阅读量1.4k

点赞数 2

分类专栏：学习笔记文章标签： BootStrap4 入门笔记前端

本文链接：https://blog.csdn.net/weixin_43451006/article/details/100046253

版权

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

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

BootStrap4 简介

Bootstrap4 是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集，与之前的版本相比，拥有更强大的功能。

利用提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。

自定义选项

可以在 _variables.scss 文件找到这些变量并自定义这些变量。
自定义的变量

弹性盒Flexbox

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

页面创建

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    //width=device-width 表示宽度是设备屏幕的宽度。
    //initial-scale=1 表示初始的缩放比例。
	//shrink-to-fit=no 自动适应手机屏幕的宽度。
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
</html>

容器类

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

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