1.Bootstrap简介
Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap4 目前是 Bootstrap 的最新版本,是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。
Sass--CSS扩展语言
Mixin--包含一段合法Sass代码,类似于C语言的宏定义。调用Mixin时,解释器会将Mixin扩展成它所包含的完整的Sass代码,因此可以有效地减少代码重复,从而写出更加干净的代码。CSS不支持Mixin,因此重复和类似的代码必须挨个书写。
2.安装使用
国内推荐使用 Staticfile CDN 上的库:
<!-- 新 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>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
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>
3.创建bootstrap 4 第一个网页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap4的使用</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
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>
</head>
<body>
</body>
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.容器类
Bootstrap 4 需要一个容器元素来包裹网站的内容。
我们可以使用以下两个容器类:
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
<div class=container>
<h1>哈喽</h1>
<h1>container</h1>
</div>
<div class=container-fluid>
<h1>哈喽</h1>
<h1>container-fluid</h1>
</div>
4.Bootstrap4 网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。
Bootstrap 4 网格系统有以下 5 个类:
1、.col- 针对所有设备
2、.col-sm- 平板 - 屏幕宽度等于或大于 576px
3、.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px
4、.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px
5、.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px
第一个例子:创建一行(<div class="row">)。然后, 添加需要的列( .col-*-* 类中设置)。 第一个星号 (*) 表示响应的设备: sm, md, lg 或 xl, 第二个星号 (*) 表示一个数字, 同一行的数字相加为 12。
第二个例子: 不在每个 col 上添加数字,让 bootstrap 自动处理布局,同一行的每个列宽度相等: 两个 "col" ,每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度,四个 "col"每个就为 25% 的宽度,以此类推。同样,你可以使用 .col-sm|md|lg|xl 来设置列的响应规则。
<div class="row">
<div class="col-md-2" style="background-color:lavender;" >占2格</div>
<div class="col-md-2" >占2格</div>
<div class="col-md-2" >占2格</div>
<div class="col-md-2" >占2格</div>
<div class="col-md-2" >占2格</div>
</div>
<div class="row">
<div class="col md 5" style="background-color:lavender;">4</div>
<div class="col md 4" >3</div>
<div class="col md 3" style="background-color:lavender;">2</div>
</div>
<div class="row">
<div class="col-md-2" style="background-color:lavender;">4</div>
<div class="col-md-2" >3</div>
<div class="col-md-2" style="background-color:lavender;">2</div>
<div class="col-md-2" >4</div>
<div class="col-md-2" style="background-color:lavender;">4</div>
<div class="col-md-2" >4</div>
</div>
偏移:
偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl,表示屏幕设备类型,第二个星号( * )可以是 1 到 11 的数字。
为了在大屏幕显示器上使用偏移,请使用 .offset-md-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11。
<div class="row">
<div class="col-md-3 bg-warning " >
<h1>无偏移</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 bg-warning offset-md-2">
<h1>向右偏移2格</h1>
</div>
</div>
5.Bootstrap4 文字排版
Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。
默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。
此外,所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。
<h1> - <h6>
Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式。
<div class="container">
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</div>
Display 标题类
Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。
<div class="container">
<h1>display标题</h1>
<h1>display可以输出更大更粗的字体</h1>
<h1 display-1>display1</h1>
<h1 display-2>display2</h1>
<h1 display-3>display3</h1>
<h1 display-4>display4</h1>
</div>
6.
<small>
在 Bootstrap 4 中 HTML <small> 元素用于创建字号更小的颜色更浅的文本
<div class="container">
<h1>正常标题 <small>副标题</small> </h1>
<h1>正常标题</h1>
</div>
<mark>
Bootstrap 4 定义 <mark> 为黄色背景及有一定的内边距:
<abbr>
Bootstrap 4 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框.
<blockquote>
对于引用的内容可以在 <blockquote> 上添加 .blockquote 类 .
<dl>
Bootstrap 4 定义 HTML <dl> 元素的样式
<code>
Bootstrap 4 定义 HTML <code> 元素的样式
<kbd>
Bootstrap 4 定义 HTML <kbd> 元素的样式
<pre>
Bootstrap 4 定义 HTML <pre> 元素的样式
6.Bootstrap4 颜色
Bootstrap 4 提供了一些有代表意义的颜色类:
.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light
<div class="container">
<h2>代表指定意义的文本颜色</h2>
<p class="text-muted">柔和的文本。</p>
<p class="text-primary">重要的文本。</p>
<p class="text-success">执行成功的文本。</p>
<p class="text-info">代表一些提示信息的文本。</p>
<p class="text-warning">警告文本。</p>
<p class="text-danger">危险操作文本。</p>
<p class="text-secondary">副标题。</p>
<p class="text-dark">深灰色文字。</p>
<p class="text-light">浅灰色文本(白色背景上看不清楚)。</p>
<p class="text-white">白色文本(白色背景上看不清楚)。</p>
背景颜色
提供背景颜色的类有:
.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。
注意背景颜色不会设置文本的颜色,在一些实例中你需要与 .text-* 类一起使用。
7.Bootstrap4 表格
通过添加 .table-striped 类,您将在 <tbody> 内的行上看到条纹.
条纹表格:通过添加 .table-striped 类,来设置条纹表格
table-bordered 类可以为表格添加边框
带边框表格:table-bordered 类可以为表格添加边框
table-hover 类可以为表格的每一行添加鼠标悬停效果(灰色背景)
鼠标悬停状态表格:table-hover 类可以为表格的每一行添加鼠标悬停效果(灰色背景)
通过指定意义的颜色类可以为表格的行或者单元格设置颜色
指定意义的颜色类:通过指定意义的颜色类可以为表格的行或者单元格设置颜色
8.Bootstrap4 图像形状
rounded 类可以让图片显示圆角效果
圆角图片:rounded 类可以让图片显示圆角效果
rounded-circle 类可以设置椭圆形图片
椭圆图片:rounded-circle 类可以设置椭圆形图片
img-thumbnail 类用于设置图片缩略图(图片有边框)
缩略图:img-thumbnail 类用于设置图片缩略图(图片有边框)
使用 .float-right 类来设置图片右对齐,使用 .float-left 类设置图片左对齐
图片对齐方式:使用 .float-right 类来设置图片右对齐,使用 .float-left 类设置图片左对齐
响应式图片
图像有各种各样的尺寸,我们需要根据屏幕的大小自动适应。
我们可以通过在 <img> 标签中添加 .img-fluid 类来设置响应式图片。
响应式图片:img-fluid 类可以设置响应式图片,重置浏览器大小查看效果
9Bootstrap4 信息提示框
提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现
提示框:提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现
提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接
关闭提示框
我们可以在提示框中的 div 中添加 .alert-dismissible 类,然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。
提示框动画
.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果
10Bootstrap4 按钮
按钮类可用于 <a>, <button>, 或 <input> 元素上
<div class="container">
<h2>按钮元素</h2>
<a href="#" class="btn btn-info" role="button">链接按钮</a>
<button type="button" class="btn btn-info">按钮</button>
<input type="button" class="btn btn-info" value="输入框按钮">
<input type="submit" class="btn btn-info" value="提交按钮">
</div>
不同大小的按钮
<button type="button" class="btn btn-primary btn-lg">大号按钮</button>
<button type="button" class="btn btn-primary">默认按钮</button>
<button type="button" class="btn btn-primary btn-sm">小号按钮</button>
通过添加 .btn-block 类可以设置块级按钮
<div class="container">
<h2>块级按钮</h2>
<button type="button" class="btn btn-primary btn-block">按钮 1</button>
<button type="button" class="btn btn-default btn-block">按钮 2</button>
<h2>大的块级按钮</h2>
<button type="button" class="btn btn-primary btn-lg btn-block">按钮 1</button>
<button type="button" class="btn btn-default btn-lg btn-block">按钮 2</button>
<h2>小的块级按钮</h2>
<button type="button" class="btn btn-primary btn-sm btn-block">按钮 1</button>
<button type="button" class="btn btn-default btn-sm btn-block">按钮 2</button>
</div>
激活和禁用的按钮
按钮可设置为激活或者禁止点击的状态。
.active 类可以设置按钮是可用的, disabled 属性可以设置按钮是不可点击的。 注意 <a> 元素不支持 disabled 属性,你可以通过添加 .disabled 类来禁止链接的点击。
<div class="container">
11.Bootstrap4 按钮组
Bootstrap 4 中允许我们将按钮放在同一行上。
可以在 <div> 元素上添加 .btn-group 类来创建按钮组。
按钮组大小:我们可以使用 .btn-group-lg|sm|xs 类来设置按钮组的大小。
默认按钮:
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
小按钮:
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary">Apple</button>
</div>
可以使用 .btn-group-vertical 类来创建垂直的按钮组
内嵌按钮组及下拉菜单
内嵌按钮组:按钮组设置下拉菜单
垂直按钮组及下拉菜单