Bootstrap4总结(1)

于 2021-08-24 18:27:11 发布
阅读量1k 收藏 6
点赞数
分类专栏： Bootstrap4 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wildkingxue/article/details/119893190
版权

一.Bootstrap简介

1.什么是Bootstrap

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。

2.Bootstrap的来源

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 

3.Bootstrap优点

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

4.Bootstrap的发展历程

目前使用较广的是版本2、3和4。

其中：

2的最新版本的是2.3.2，

3的最新版本是3.4.1，

4的最新版本是4.4.1 

在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版。

5.Bootstrap主要变化包括

  • 从 Less 迁移到 Sass

  • 改进网格系统

  • 缺省弹性框支持

  • Dropped wells, thumbnails, and panels for cards

  • 合并所有 HTML resets 到一个新的模块中：Reboot

  • 全新自定义选项

  • 不再支持 IE8

  • 重写所有的 JavaScript 插件

  • 改进工具提示和 popovers 的自动定位

  • 改进文档

  • 其他大量改进

6. Bootstrap包含内容

  • 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。

  • CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。

  • 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。

  • JavaScript 插件：Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。

  • 定制：您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。

7. Bootstrap支持的组件和插件

Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站，其中包括以下组件：

下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象......

Bootstrap自带了13个jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括：

模式对话框、标签页、滚动条、弹出框......

二.Bootstrap4 安装使用

我们可以通过以下两种方式来安装 Bootstrap4。

1.使用 Bootstrap 4 CDN。

CDN的全称是Content Delivery Network，即内容分发网络。

国内推荐使用 Staticfile CDN 的格式：

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

还可以使用以下的 CDN 服务：

国内推荐使用 : https://www.staticfile.org/

国际推荐使用：https://cdnjs.com/

2.从官网 getbootstrap.com 下载 Bootstrap 4。

你可以去官网 https://getbootstrap.com/ 下载 Bootstrap4 资源库。

此外你还可以通过包的管理工具 npm、 gem、 composer 等来安装。

三.创建一个 Bootstrap 4 页面

1.添加 HTML5 doctype

Bootstrap 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明。

HTML5 doctype 在文档头部声明，并设置对应编码:

<!DOCTYPE html> 
<html> 
<head>
 <meta charset="utf-8">
 </head> 
</html>

2.移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

​
<!DOCTYPE html> 
<html> 
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 </head> 
</html>

​

width=device-width 表示宽度是设备屏幕的宽度。

initial-scale=1 表示初始的缩放比例。

shrink-to-fit=no 自动适应手机屏幕的宽度。

3.容器类

Bootstrap 4 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类：

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, 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>
		<!-- 用于弹窗、提示、下拉菜单，包含了 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>HTML标题</title>
	</head>
	<body>
		<div class="container">
		  <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>
		</div>
		<div class="container-fluid">
		  <h1>h1 HTML标题</h1>
		  <h2>h2 HTML标题</h2>
		  <h3>h3 HTML标题</h3>
		  <h4>h4 HTML标题</h4>
		  <h5>h5 HTML标题</h5>
		  <h6>h6 HTML标题</h6>
		</div>
	</body>
</html>

 四.Bootstrap4 网格

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。

 Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。

1.网格类

Bootstrap 4 网格系统有:

.col针对所有设备
.col-sm平板 - 屏幕宽度等于或大于 576px
.col-md桌面显示器 - 屏幕宽度等于或大于 768px
.col-lg大桌面显示器 - 屏幕宽度等于或大于 992px
.col-xl超大桌面显示器 - 屏幕宽度等于或大于 1200px

2.网格系统规则

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 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。

下表总结了 Bootstrap 网格系统如何在不同设备上工作的：

 3.Bootstrap 4 网格的基本结构

 Bootstrap 4 网格的基本结构:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, 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>
		<!-- 用于弹窗、提示、下拉菜单，包含了 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 class="container-fluid text-center">
		<div class="row">
			<div class="col-1 bg-warning">1</div><div class="col-1 bg-danger">1</div><div class="col-1 bg-dark">1</div><div class="col-1 bg-info">1</div>
			<div class="col-1 bg-secondary">1</div><div class="col-1 bg-danger">1</div><div class="col-1 bg-success">1</div><div class="col-1 bg-light">1</div>
			<div class="col-1 bg-secondary">1</div><div class="col-1 bg-white">1</div><div class="col-1 bg-secondary">1</div><div class="col-1 bg-primary">1</div>
		</div>
		<div class="row">
			<div class="col-4 bg-warning">4</div><div class="col-4 bg-transparent">4</div><div class="col-4 bg-primary">4</div>
		</div>
		<div class="row">
			<div class="col-4 bg-warning">4</div><div class="col-8 bg-danger">8</div>
		</div>
		<div class="row">
			<div class="col-6 bg-warning">6</div><div class="col-6 bg-info">6</div>
		</div>
		<div class="row">
			<div class="col-12 bg-warning">12</div>
		</div>
	</body>
</html>

 五.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)

1.Display 标题类

Bootstrap 还提供了四个 Display 类来控制标题的样式: .

display-1, .display-2, .display-3, .display-4。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, 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>
		<!-- 用于弹窗、提示、下拉菜单，包含了 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">
			<p class="display-1">你好！</p>
			<p class="display-2">你好！</p>
			<p class="display-3">你好！</p>
			<p class="display-4">你好！</p>
		</div>
		<div class="container-fluid">
			<p class="display-1">你好！</p>
			<p class="display-2">你好！</p>
			<p class="display-3">你好！</p>
			<p class="display-4">你好！</p>
		</div>
	</body>
</html>

2. 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设定单词首字母大写

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, 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>
		<!-- 用于弹窗、提示、下拉菜单，包含了 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>
		<div class="container">
			<p class="font-weight-normal">hello 你好！</p>
			<p class="font-weight-bold">hello 你好！</p>
			<p class="font-weight-light">hello 你好！</p>
			<p class="font-italic">hello 你好！</p>
			<p class="lead">hello 你好！</p>
			<p class="small">hello 你好！</p>
			<p class="text-left">hello 你好！</p>
			<p class="text-right">hello 你好！</p>
			<p class="text-center">hello 你好！</p>
			<p class="text-lowercase">hello 你好！</p>
			<p class="text-uppercase">hello 你好！</p>
			<p class="text-capitalize">hello 你好！</p>
		</div>
	</body>
</html>

 3.<abbr>

Bootstrap 4 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框.

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, 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>
		<!-- 用于弹窗、提示、下拉菜单，包含了 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>我<abbr title="因爱生恨"><mark>恨</mark></abbr>你</p>
	</body>
</html>

 当你鼠标放到<abbr>文本下他会显示出litle属性输出的值。

六.Bootstrap4  颜色

Bootstrap 4 提供了一些有代表意义的颜色类：字体颜色类和背景颜色类。

1.字体颜色类：

.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, 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>
		<!-- 用于弹窗、提示、下拉菜单，包含了 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 class="container-fluid">
		<a href="#" class="text-muted">柔和的链接。</a><br>
		<a href="#" class="text-primary">主要链接。</a><br>
		<a href="#" class="text-success">成功链接。</a><br>
		<a href="#" class="text-info">信息文本链接。</a><br>
		<a href="#" class="text-warning">警告链接。</a><br>
		<a href="#" class="text-danger">危险链接。</a><br>
		<a href="#" class="text-light">浅灰色链接。</a><br>
		<a href="#" class="text-secondary">副标题链接。</a><br>
		<a href="#" class="text-dark">深灰色链接。</a>
	</body>
</html>

 

 颜色可以再链接上使用。

2.背景颜色类：

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, 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>
		<!-- 用于弹窗、提示、下拉菜单，包含了 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 class="container-fluid">
		<p class="bg-danger">测试背景颜色</p>
		<p class="bg-muted">测试背景颜色</p>
		<p class="bg-primary">测试背景颜色</p>
		<p class="bg-success">测试背景颜色</p>
		<p class="bg-info">测试背景颜色</p>
		<p class="bg-warning">测试背景颜色</p>
		<p class="bg-light">测试背景颜色</p>
		<p class="bg-secondary">测试背景颜色</p>
		<p class="bg-dark">测试背景颜色</p>
	</body>
</html>

 

 注意背景颜色不会设置文本的颜色，在一些实例中你需要与 .text-* 类一起使用。

 3.背影颜色和字体颜色结合使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, 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>
		<!-- 用于弹窗、提示、下拉菜单，包含了 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>
		<div class="container-fluid">
			<p class="font-weight-normal text-muted bg-danger">hello 你好！</p>
			<p class="font-weight-bold text-primary bg-muted">hello 你好！</p>
			<p class="font-weight-light text-success bg-primary">hello 你好！</p>
			<p class="font-italic text-info bg-success">hello 你好！</p>
			<p class="lead text-warning bg-info">hello 你好！</p>
			<p class="small text-danger bg-warning">hello 你好！</p>
			<p class="text-left text-secondary bg-danger">hello 你好！</p>
			<p class="text-right text-white bg-secondary">hello 你好！</p>
			<p class="text-center text-muted bg-light">hello 你好！</p>
			<p class="text-lowercase text-warning  bg-white">hello 你好！</p>
			<p class="text-uppercase text-muted bg-dark">hello 你好！</p>
			<p class="text-capitalize text-light bg-danger">hello 你好！</p>
		</div>
	</body>
</html>

 七.Bootstrap4 表格

表格的使用方法：

类名作用
.table 设置基础表格的样式
.table-striped在 <tbody> 内的行上看到条纹
.table-bordered

为表格添加边框

.table-hover为表格的每一行添加鼠标悬停效果（灰色背景）
bg-*为表格的行或者单元格设置颜色

 结合实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, 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>
		<!-- 用于弹窗、提示、下拉菜单，包含了 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>
		<table class="container-fluid text-center table-striped table-bordered">
			<tr>
				<td colspan="7">XX公司人员信息统计表</td>
			</tr>
			<tr>
				<td class="bg-info">序号</td>
				<td>姓名</td>
				<td>性别</td>
				<td>名族</td>
				<td>身份证号后四位</td>
				<td>年龄</td>
				<td>备注</td>
			</tr>
			<tr>
				<td class="bg-info">1</td>
				<td>张三</td>
				<td>男</td>
				<td>汉族</td>
				<td align="center">6269</td>
				<td>40</td>
				<td></td>
			</tr>
			<tr>
				<td class="bg-info">2</td>
				<td>李四</td>
				<td>女</td>
				<td>汉族</td>
				<td align="center">0003</td>
				<td>49</td>
				<td></td>
			</tr>
			<tr>
				<td class="bg-info">3</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

 八.Bootstrap4 图像形状

类名用法
.rounded显示圆角效果
.rounded-circle椭圆形图片
.img-thumbnail图片缩略图(图片有边框):
.float-right图片右对齐
.float-left图片左对齐

1.圆形与椭圆形

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, 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>
		<!-- 用于弹窗、提示、下拉菜单，包含了 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 class="container">
		<img style="border:3px solid #6F42C1;" src="img/avatar.png" class="rounded">
		<img style="border:3px solid #6F42C1;" src="img/avatar2.png" class="rounded-circle">
		<img style="border:3px solid #6F42C1;" src="img/avatar3.png" class="img-thumbnail ">
	</body>
</html>

2. 左右对齐方式

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, 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>
		<!-- 用于弹窗、提示、下拉菜单，包含了 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 class="container">
		<img style="border:3px solid #6F42C1;" src="img/avatar5.png" class="img-thumbnail float-right">
		<img style="border:3px solid #6F42C1;" src="img/avatar4.png" class="rounded-circle img-thumbnail">
		<img style="border:3px solid #6F42C1;" src="img/avatar.png" class="rounded float-left">
	</body>
</html>

 自己做会看出效果，你会发现中间写的代码他的图片没动，但是前后两个颠倒了。

3.响应式图片

图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。

我们可以通过在 <img> 标签中添加 .img-fluid 类来设置响应式图片。

.img-fluid 类设置了 max-width: 100%;  height: auto; 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, 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>
		<!-- 用于弹窗、提示、下拉菜单，包含了 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 class="container">
		<img style="border:3px solid #6F42C1;" src="img/2048374.jpg" class="rounded img-fluid">
	</body>
</html>

 出来的图片会随着你页面的大小而改动。

九.Bootstrap4 信息提示框

提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现

1.提示框链接

提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接

综合实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, 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>
		<!-- 用于弹窗、提示、下拉菜单，包含了 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 class="container-fluid">
		<p>提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现:</p>
		  <div class="alert alert-success">
		    <strong>成功!</strong> 指定操作成功提示信息。
		  </div>
		  <div class="alert alert-info">
		    <strong>信息!</strong> 请注意这个信息。
		  </div>
		  <div class="alert alert-warning">
		    <strong>警告!</strong> 设置警告信息。
		  </div>
		  <div class="alert alert-danger">
		    <strong>错误!</strong> 失败的操作
		  </div>
		  <div class="alert alert-primary">
		    <strong>首选!</strong> 这是一个重要的操作信息。
		  </div>
		  <div class="alert alert-secondary">
		    <strong>次要的!</strong> 显示一些不重要的信息。
		  </div>
		  <div class="alert alert-dark">
		    <strong>深灰色!</strong> 深灰色提示框。
		  </div>
		  <div class="alert alert-light">
		    <strong>浅灰色!</strong>浅灰色提示框。
		  </div>

	</body>
</html>

2.关闭提示框

我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, 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>
		<!-- 用于弹窗、提示、下拉菜单，包含了 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 class="container">
		<div class="alert alert-success alert-dismissible fade show">
			<button type="button" class="close" data-dismiss="alert">&times;</button>
			<p>关闭提示框</p>
		</div>
	</body>
</html>

3.提示框动画

.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果

因涉及到时间在此看不效果

WildKingxue
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值