1.BootStrap简介
Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap4 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。
Sass--CSS扩展语言
Mixin--包含一段合法Sass代码,类似于C语言的宏定义。调用Mixin时,解释器会将Mixin扩展成它所包含的完整的Sass代码,因此可以有效地减少代码重复,从而写出更加干净的代码。CSS不支持Mixin,因此重复和类似的代码必须挨个书写。
2.移动设备优先.
为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。
3.Bootstrap4 安装使用
通过两种方式来安装 Bootstrap4:
1.使用 Bootstrap 4 CDN。
CDN的全称是Content Delivery Network,即内容分发网络.
<!--移动设备优先-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit-no">
<!-- Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<!-- jQuery文件 务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单,包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- 注意:popper.min.js 用于设置弹窗、提示、下拉菜单,目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
2.从官网 getbootstrap.com 下载 Bootstrap 4。
4.容器类
容器元素有两类:
container:固定宽度并支持响应式布局的容器 。
container-fluid:100%宽度,占据全部视口的容器。.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<!-- Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- jQuery文件 务必在bootstrap.min.js 之前引入 -->
<script src="js/jquery/jquery-3.5.1.min.js"></script>
<!-- 用于弹窗、提示、下拉菜单,-->
<script src="js/bootstrap.bundle.min.js"></script>
<!--Bootstrap4 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h3>容器元素有两类</h3>
<h4 class="container ">container:固定宽度并支持响应式布局的容器 </h4>
<h4 class="container-fluid ">container-fluid:100%宽度,占据全部视口的容器</h4>
</body>
</html>
5.Bootstrap4 网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。
我们也可以根据自己的需要,定义列数。
Bootstrap 4 的网格系统是响应式的,列会根据屏幕大小自动重新排列。
网格类
Bootstrap 4 网格系统有以下 5 个类:
1、.col- 针对所有设备
2、.col-sm- 平板 - 屏幕宽度等于或大于 576px
3、.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px
4、.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px
5、.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px
网格系统规则
Bootstrap4 网格系统规则:
1、网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中,这样就可以自动设置一些外边距与内边距。
2、使用行来创建水平的列组。
3、内容需要放置在列中,并且只有列可以是行的直接子节点。
4、预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
5、列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
6、网格列是通过跨越指定的 12 个列来创建。 例如,设置三个相等的列,需要使用三个 .col-sm-4 来设置。
7、Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox(弹性盒子) 而不是浮动。 Flexbox 的一大优势是,没有指定宽度的网格列将自动设置为等宽与等高列 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--移动设备优先-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit-no">
<!-- Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<!-- jQuery文件 务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单,包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- 注意:popper.min.js 用于设置弹窗、提示、下拉菜单,目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
<title>bootstrap4 网格系统</title>
</head>
<body>
<div class="container text-center ">
<div class="row bg-info">
<div class="col-sm-1 bg-danger">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-1 bg-primary">3</div>
<div class="col-sm-1">4</div>
<div class="col-sm-1 bg-dark">5</div>
<div class="col-sm-1">6</div>
<div class="col-sm-1 bg-success">7</div>
<div class="col-sm-1">8</div>
<div class="col-sm-1 bg-white">9</div>
<div class="col-sm-1">10</div>
<div class="col-sm-1 bg-success">11</div>
<div class="col-sm-1">12</div>
</div>
<div class="row">
<div class="col-2 bg-primary">2</div>
<div class="col-2">4</div>
<div class="col-8 bg-danger">6</div>
</div>
<div class="row">
<div class="col-md-8 bg-success">8</div>
<div class="col-3">3</div>
<div class="col-1 bg-success">1</div>
</div>
<div class="row bg-success">
<div class="col-12">12</div>
</div>
</div>
</body>
</html>
屏幕宽度小于576px
6.Bootstrap4 文字排版
Bootstrap 4 默认设置
Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5px。
Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式。
Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--移动设备优先-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit-no">
<!-- Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<!-- jQuery文件 务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单,包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- 注意:popper.min.js 用于设置弹窗、提示、下拉菜单,目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
<title>文字排版</title>
</head>
<body>
<h1>html标题</h1>
<h2>html标题</h2>
<h3>html标题</h3>
<h4>html标题</h4>
<h5>html标题</h5>
<h6>html标题</h6>
<div class="container">
<h1>bootstrap html标题</h1>
<h2>bootstrap html标题</h2>
<h3>bootstrap html标题</h3>
<h4>bootstrap html标题</h4>
<h5>bootstrap html标题</h5>
<h6>bootstrap html标题</h6>
</div>
<h1>display标题类</h1>
<h1>display 标题可以输出更大更粗的字体样式</h1>
<div class="container ">
<h1 class="display-1">display 标题类</h1>
<h1 class="display-2">display 标题类</h1>
<h1 class="display-3">display 标题类</h1>
<h1 class="display-4">display 标题类</h1>
</div>
</body>
</html>
下表提供了 Bootstrap4 更多排版类的实例:
类名 | 描述 |
.font-weight-bold | 加粗文本 |
.font-weight-normal | 普通文本 |
.font-weight-light | 更细的文本 |
.font-italic | 斜体文本 |
.lead | 让段落更突出 |
.small | 指定更小文本 (为父元素的 85% ) |
.text-left | 左对齐 |
.text-center | 居中 |
.text-right | 右对齐 |
.text-justify | 设定文本对齐,段落中超出屏幕部分文字自动换行 |
.text-nowrap | 段落中超出屏幕部分不换行 |
.text-lowercase | 设定文本小写 |
.text-uppercase | 设定文本大写 |
.text-capitalize | 设定单词首字母大写 |
.initialism | 显示在 <abbr> 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母 |
.list-unstyled | 移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式) |
.list-inline | 将所有列表项放置同一行 |
.pre-scrollable | 使 <pre> 元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--移动设备优先-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit-no">
<!-- Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<!-- jQuery文件 务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单,包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- 注意:popper.min.js 用于设置弹窗、提示、下拉菜单,目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
<title>文字排版</title>
</head>
<body>
<p class="container font-weight-bold">font-weight-bold=加粗文本</p>
<p class="container font-weight-normal">font-weight-normal=普通文本</p>
<p class=" container font-weight-lighter ">font-weight-lighter=更细的文本</p>
<p class="container font-italic">font-italic=斜体文本</p>
<p class="container lead">lead=让段落更突出</p>
<p class="container small">small=指定更小文本(为父元素的85%)</p>
<p class="container text-left">text-left=左对齐</p>
<p class="container text-center">text-center=居中</p>
<p class="container text-right">text-right-右对齐</p>
<p class="container text-justify">text-justify=设置文本对齐,段落中超出屏幕部分文字自动换行、text-justify=设置文本对齐,段落中超出屏幕部分文字自动换行、text-justify=设置文本对齐,段落中超出屏幕部分文字自动换行</p>
<p class="container text-nowrap">text-nowrap=段落中超出屏幕部分不换行、text-nowrap=段落中超出屏幕部分不换行、text-nowrap=段落中超出屏幕部分不换行、text-nowrap=段落中超出屏幕部分不换行、</p>
<p class="container text-lowercase">text-lowercase=设定文本小写</p>
<p class="container text-uppercase">text-uppercase=设定文本大写</p>
<p class="container text-lowercase">text-lowercase=单词首字母大写</p>
</body>
</html>
7. BootStrap颜色设置
文本颜色: .text-muted, .text-muted, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark , .text-light
背景颜色: .text-muted, .text-muted, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark , .text-light
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit-no">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>bookstrap颜色设置</title>
</head>
<body>
<h1>文本颜色</h1>
.text-muted, .text-muted, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark , .text-light
<h1>背景颜色</h1>
.bg-muted, .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-white, .bg-dark , .bg-light
<h3 class="container text-muted bg-primary">文本颜色text-muted,背景颜色bg-muted</h3>
<h3 class="container text-success bg-info">文本颜色text-success,背景颜色bg-info</h3>
<h3 class="container text-warning bg-danger">文本颜色text-warning ,背景颜色bg-danger</h3>
<h3 class="container text-white bg-secondary">文本颜色text-white ,背景颜色bg-secondary</h3>
<h3 class="container text-light bg-dark">文本颜色text-light ,背景颜色bg-dark</h3>
</body>
</html>
8..Bootstrap4 表格
Bootstrap4 通过 .table 类来设置基础表格的样式。
通过添加 .table-striped 类,您将在 <tbody> 内的行上看到条纹。
.table-bordered 类可以为表格添加边框。
.table-hover 类可以为表格的每一行添加鼠标悬停效果(灰色背景)。
通过指定意义的颜色类可以为表格的行或者单元格设置颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit-no">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>BookStrap表格设置</title>
</head>
<body>
<div class="container">
<table class="table table-striped table-bordered table-hover">
<tr class="table-danger">
<td>属性名称</td>
<td>用法</td>
<td>含义</td>
</tr>
<tr>
<td>table</td>
<td>class="table"</td>
<td>默认的表格宽高和行分割线</td>
</tr>
<tr>
<td>table-striped</td>
<td>class="table-striped"</td>
<td>默认的table中的行条纹显示</td>
</tr>
<tr>
<td>table-bordered</td>
<td>class="table-bordered"</td>
<td>为表格添加边框</td>
</tr>
<tr>
<td>table-hover</td>
<td>class="table-hover"</td>
<td>为表格的每一行添加鼠标悬停效果(灰色背景)</td>
</tr>
<tr>
<td>table-info</td>
<td>class="table-info"</td>
<td>为表格设置背景颜色</td>
</tr>
</table>
</div>
</body>
</html>
9.Bootstrap4 图像形状
.rounded 类可以让图片显示圆角效果。
.rounded-circle 类可以设置椭圆形图片。
.img-thumbnail 类用于设置图片缩略图(图片有边框)。
.float-left 来设置图片左对齐。
.float-right 来设置图片右对齐。
img-fluid:设置响应式图片,根据屏幕的大小自动适应,
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit-no">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>BookStrap图像形状</title>
</head>
<body class="container">
<h1>.rounded 类可以让图片显示圆角效果</h1>
<img src="imgs/2048376.jpg" style="width: 200px;height: 100px;border: 2px solid blue " class=" rounded">
<h1>.rounded-circle 类可以设置椭圆形图片</h1>
<img src="imgs/2048376.jpg" style="width: 200px;height: 100px;border: 2px solid blue " class=" rounded-circle">
<h1>.img-thumbnail 类用于设置图片缩略图(图片有边框)</h1>
<img src="imgs/2048376.jpg" style="width: 200px;height: 100px; " class=" img-thumbnail">
<h1>.float-left 来设置图片左对齐</h1>
<img src="imgs/2048376.jpg" style="width: 200px;height: 100px; " class=" float-left">
<h1>.float-right 来设置图片右对齐</h1>
<img src="imgs/2048376.jpg" style="width: 200px;height: 100px; " class=" float-right">
<h1>img-fluid:设置响应式图片,根据屏幕的大小自动适应,设置了 max-width: 100%; 、 height: auto; </h1>
<img src="imgs/2048376.jpg" style="width: 200px;height: 100px; " class="img-fluid">
</body>
</html>
10.Bootstrap4 信息提示框
提示框可以使用 .alert 类
.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现
提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接。
信息提示框中内容可添加超链接。
我们可以在提示框中的 div 中添加 .alert-dismissible 类,然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。
.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit-no">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>提示框</title>
</head>
<body>
<h4>提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接</h4>
<h4>我们可以在提示框中的 div 中添加 .alert-dismissible 类,然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。</h4>
<h4>.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果</h4>
<div class="container">
<div class="alert alert-info">
<strong>提示框</strong>提示信息
</div>
<div class="alert alert-primary">
<strong>提示框</strong>提示信息
<a href="#" class="alert-link">链接</a>
</div>
<div class="alert alert-success alert-dismissible fade show">
<button type="button" class="close " data-dismiss="alert">关闭</button>
<strong>提示</strong>提示信息
</div>
</div>
</body>
</html>