16-前端核心技术-Bootstrap框架
第16章-前端核心技术-Bootstrap框架
学习目标
- 掌握Bootstrap导航元素
重点 - 掌握Bootstrap下拉菜单
重点 - 掌握Bootstrap提示工具
- 掌握Bootstrap弹出框提示
- 掌握Bootstrap轮播图效果
重点 - 掌握Bootstrap模态框
重点 - 掌握Bootstrap分页插件
- 掌握Bootstrap文件上传插件
- 掌握Bootstrap网格排版
- 掌握Bootstrap表格列表属性
重点 - 掌握Bootstrap图文排版
- 掌握Bootstrap辅助属性
- 掌握Bootstrap标签属性
- 掌握Bootstrap表格样式
- 掌握Bootstrap字体图标
重点
Bootstrap 概述
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的一个用于快速开发 Web 应用程序和网站的前端框架。
官网：https://v4.bootcss.com/
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- width ：控制设备的宽度。为了在不同屏幕分辨率的设备浏览，设置为 device-width。
- initial-scale=1.0 : 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
- user-scalable=no : 可以禁用其缩放（zooming）功能。
- maximum-scale=1.0 : 与user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，能让网站看上去更像原生应用的感觉。这种方式我们并不推荐所有网站使用，还是要看您自己的情况而定！
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
支持的浏览器
Bootstrap4 支持所有主流浏览器和平台的 最新、稳定版本。在 Windows 上，支持 Internet Explorer 10-11 / Microsoft Edge 浏览器。
对于其它使用了最新版本的 WebKit、Blink 或 Gecko 内核的浏览器，或者直接或间接调用了平台的 web view API，都不是明确被支持的。但是，Bootstrap4 应该（大多数情况下）在这些浏览器中是能够正常显示和运行的。
| 移动设备 | Chrome | Firefox | Safari | Android Browser & WebView | Microsoft Edge |
|---|---|---|---|---|---|
| Android | 支持 | 支持 | N/A | Android v5.0+ supported | 支持 |
| iOS | 支持 | 支持 | 支持 | N/A | 支持 |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | 支持 |
| PC设备 | Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari |
|---|---|---|---|---|---|---|
| Mac | 支持 | 支持 | N/A | 支持 | 支持 | 支持 |
| Windows | 支持 | 支持 | 支持, IE10+ | 支持 | 支持 | 不支持 |
Bootstrap 安装
bootstrap依赖于Jquery框架，如果没有jquery框架bootstrap的js将无法正常运行，所以需要先下载引入Jquery。下载地址：https://jquery.com/download/
下载jquery后再下载bootstrap的源码，并且引入到项目中才能正常使用，下载地址：https://v4.bootcss.com/docs/getting-started/download/
下载完成后，将如下文件复制到项目即可。
下载完成后，再需要使用bootstrap的页面中引入即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery + Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="font/bootstrap-icons.css" />
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"jquery/jquery-3.6.0.min.js"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/bootstrap.min.js"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
</html>
Bootstrap 基础
边距
包括内外边距：
m- 对于设置的类marginp- 对于设置的类padding
其中*边*是以下之一：
t- 对于设置margin-top或padding-topb- 对于设置margin-bottom或padding-bottoml- 对于设置margin-left或padding-leftr- 对于设置margin-right或padding-rightx- 对于同时设置*-left和的类*-righty- 对于同时设置*-top和的类*-bottom- 空白 - 对于在元素的所有 4 边设置 a
margin或 的类padding
其中*size*是以下之一：
0- 对于消除margin或padding通过将其设置为的类01-（默认情况下）对于将margin或设置padding为$spacer * .252-（默认情况下）对于将margin或设置padding为$spacer * .53-（默认情况下）对于将margin或设置padding为$spacer4-（默认情况下）对于将margin或设置padding为$spacer * 1.55-（默认情况下）对于将margin或设置padding为$spacer * 3auto- 对于设置margin为自动的类
如：
1
2
3
4
<div class="row m-3">
<div class="col px-5 p-2 border"><div class="p-3 border bg-light">Custom column padding</div></div>
<div class="col px-5 p-2 border"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>
效果展示
文字颜色
1
2
3
4
5
6
7
8
9
10
11
12
13
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
效果展示
背景颜色
1
2
3
4
5
6
7
8
9
10
<div class="p-2 m-2 bg-primary text-white">.bg-primary</div>
<div class="p-2 m-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-2 m-2 bg-success text-white">.bg-success</div>
<div class="p-2 m-2 bg-danger text-white">.bg-danger</div>
<div class="p-2 m-2 bg-warning text-dark">.bg-warning</div>
<div class="p-2 m-2 bg-info text-white">.bg-info</div>
<div class="p-2 m-2 bg-light text-dark">.bg-light</div>
<div class="p-2 m-2 bg-dark text-white">.bg-dark</div>
<div class="p-2 m-2 bg-white text-dark">.bg-white</div>
<div class="p-2 m-2 bg-transparent text-dark">.bg-transparent</div>
效果展示
显示隐藏
| Screen Size | Class |
|---|---|
| Hidden on all | .d-none |
| Hidden only on xs | .d-none .d-sm-block |
| Hidden only on sm | .d-sm-none .d-md-block |
| Hidden only on md | .d-md-none .d-lg-block |
| Hidden only on lg | .d-lg-none .d-xl-block |
| Hidden only on xl | .d-xl-none |
| Visible on all | .d-block |
| Visible only on xs | .d-block .d-sm-none |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block |
如：
1
2
<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
其他
| 类 | 描述 |
|---|---|
| .pull-left | 元素浮动到左边 |
| .pull-right | 元素浮动到右边 |
| .center-block | 设置元素为 display:block 并居中显示 |
| .clearfix | 清除浮动 |
| .show | 强制元素显示 |
| .hidden | 强制元素隐藏 |
| .sr-only | 除了屏幕阅读器外，其他设备上隐藏元素 |
| .sr-only-focusable | 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户) |
| .text-hide | 将页面元素所包含的文本内容替换为背景图 |
| .close | 显示关闭按钮 |
| .caret | 显示下拉式功能 |
Bootstrap 布局
Bootstrap有三个不同的容器
.container, 带有最大宽度max-width的响应式模块，每种尺寸最大宽度不同.container-fluid, 带有宽度width: 100%的响应式模块.container-type, 带有宽度width: 100%的响应式模块，每种尺寸最大宽度不同
| 类型 | 特小 <576px | 小 ≥576px | 中等 ≥768px | 大 ≥992px | 超大 ≥1200px |
|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px |
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
根据不同的尺寸可以将整个页面分为几种不同的类型
| 内容 | 特小 <576px | 小 ≥576px | 中等 ≥768px | 大 ≥992px | 超大 ≥1200px |
|---|---|---|---|---|---|
| 最大宽度 | None (auto) | 540px | 720px | 960px | 1140px |
| class属性前缀 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| 总列数 | 12 | 12 | 12 | 12 | 12 |
| 每列间距 | 30px | 30px | 30px | 30px | 30px |
| 可嵌套 | Yes | Yes | Yes | Yes | Yes |
| 列有序 | Yes | Yes | Yes | Yes | Yes |
如：
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
效果展示
Bootstrap 按钮
Bootstrap 内置了几种预定义的按钮样式，每种样式都有自己的语义目的
| 类 | 描述 |
|---|---|
.btn |
为按钮添加基本样式 |
.btn-default |
默认/标准按钮 |
.btn-primary |
原始按钮样式（未被操作） |
.btn-success |
表示成功的动作 |
.btn-info |
该样式可用于要弹出信息的按钮 |
.btn-warning |
表示需要谨慎操作的按钮 |
.btn-danger |
表示一个危险动作的按钮操作 |
.btn-link |
让按钮看起来像个链接 (仍然保留按钮行为) |
.btn-lg |
制作一个大按钮 |
.btn-sm |
制作一个小按钮 |
.btn-xs |
制作一个超小按钮 |
.btn-block |
块级按钮(拉伸至父元素100%的宽度) |
.active |
按钮被点击 |
.disabled |
禁用按钮 |
.text-nowrap |
按钮文字不换行 |
.btn-outline-[type] |
带轮廓线的按钮，如：btn-outline-primary |
如：
1
2
3
4
5
6
7
8
9
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
效果展示
1
2
3
4
5
6
7
8
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
效果展示
按钮组
按钮组可以管理一组按钮的特性，通过.btn-group定义按钮组。通过.btn-toolbar定义工具类，工具类中使用按钮组是很好的搭配组合。同时可以使用mr-[1-5]、ml-[1-5]、mt-[1-5]、mb-[1-5]等添加外边距
如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="btn-toolbar">
<div class="btn-group mr-2">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group mr-2">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">8</button>
</div>
</div>
Bootstrap 导航
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。
面包屑导航（Breadcrumb）
使用 .breadcrumb 定义面包屑导航
1
2
3
4
5
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
效果展示
基础导航栏
最简单的导航栏直接使用 .nav 即可，同时可以对a标签使用.active表示被选中，使用 .disabled 表示被禁用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
效果展示
菜单对齐
菜单对齐方式有三种
- 居中
.justify-content-center - 右对齐
.justify-content-end - 左对齐
.justify-content-start
如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
效果展示
垂直菜单
垂直菜单使用 .flex-column 或者 .flex-[type]-column 在指定窗口大小时垂直显示
如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
效果展示
菜单铺满
使用 .nav-fill 让菜单铺满宽度或者高度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="nav nav-tabs nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
效果展示
标签页导航（nav-tabs）
.nav-tabs 类依赖 .nav 基类，一般同时添加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
效果展示
面包屑导航 （nav-pills）
.nav-pills 类依赖 .nav 基类，一般同时添加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
效果展示
Bootstrap 折叠
在Bootstrap 中折叠效果很简单就能实现。
- 在触发点击的元素上添加
data-toggle="collapse"和data-target="#collapseExample"。如果是a标签，第二个可以替换成href="#collapseExample" - 在被折叠的元素上添加
class="collapse"和id="collapseExample" - 在被折叠的元素上添加
hide或者show控制元素默认显示隐藏
如：
1
2
3
4
5
6
7
8
9
10
11
12
13
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">超链接按钮</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">
普通按钮
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
被控制显示隐藏的元素，通过id属性来绑定
</div>
</div>
多个同时折叠，或者切换多个分别折叠
- 在触发点击的元素上添加
data-toggle="collapse"和data-target="#collapseExample"。如果是a标签，第二个可以替换成href="#collapseExample" - 在需要同时别折叠的元素上添加
collapse multi-collapse，并且添加id属性 data-target对应的所有被折叠的元素都会被折叠，或者切换
案例01：折叠
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1">折叠第一个</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" >折叠第二个</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse">切换折叠第一个和第二个元素</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
被折叠的第一个
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
被折叠的第二个
</div>
</div>
</div>
</div>
函数和事件
.collapse(options)
自定义选项参数
1
2
3
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
切换显示隐藏
.collapse('show')
显示
.collapse('hide')
隐藏
.collapse('dispose')
销毁折叠效果
事件
| Event Type | Description |
|---|---|
| show.bs.collapse | 调用 show 方法的瞬间 |
| shown.bs.collapse | 当显示可见的时候. |
| hide.bs.collapse | 调用 hide 方法的瞬间 |
| hidden.bs.collapse | 当隐藏后的时候. |
如：
1
2
3
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})
Bootstrap 下拉菜单
下拉菜单需要额外的插件Popper，所有需要将普通bootstrap.min.js换成bootstrap.bundle.min.js
1
2
<!-- <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> -->
<script src="js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>
下拉菜单也只需要添加几个属性即可使用
- 在父类上添加
dropdown、dropup、dropright、dropleftclass属性 - 在触发点击的元素上添加
class="dropdown-toggle"和data-toggle="dropdown" - 在触发点击的元素中添加子元素下拉菜单，并在下拉菜单上添加
class="dropdown-menu"
如：
1
2
3
4
5
6
7
8
9
10
<div class="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">下拉菜单</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action22</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Bootstrap 导航栏
Bootstrap 导航栏包括一下几个部分
.navbar-brand上标.navbar-nav导航栏.navbar-toggler切换菜单的按钮.form-inline导航栏中的内联表单.navbar-text菜单中的菜单文字.collapse.navbar-collapse响应式可以隐藏的部分
导航栏可以使用.navbar-toggler、.navbar-collapse和.navbar-expand{-sm|-md|-lg|-xl}类来确定其内容何时折叠在按钮后面。
对于永不折叠的导航栏，请在导航栏上添加.navbar-expand类。对于总是折叠的导航栏，不要添加任何.navbar-expand类。
案例02：导航栏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"collapse navbar-collapse"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"navbarSupportedContent"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"navbar-nav mr-auto"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav-item active"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav-link"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>主页<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"sr-only"</span>></span>(current)<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav-item"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav-link"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>菜单<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav-item dropdown"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav-link dropdown-toggle"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">data-toggle</span>=<span class="hljs-value">"dropdown"</span>></span>下拉菜单<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown-menu"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown-item"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>子菜单1<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown-item"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>子菜单2<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown-divider"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dropdown-item"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span>></span>子菜单3<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav-item"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"nav-link disabled"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">tabindex</span>=<span class="hljs-value">"-1"</span> <span class="hljs-attribute">aria-disabled</span>=<span class="hljs-value">"true"</span>></span>禁用菜单<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-title">form</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-inline my-2 my-lg-0"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-control mr-sm-2"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"search"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"搜索"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"btn btn-outline-success my-2 my-sm-0"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"submit"</span>></span>搜索<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
<span class="hljs-tag"></<span class="hljs-title">form</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</nav>
Bootstrap 轮播图
轮播图包括
carousel轮播图整体carousel-indicators轮播图导航器carousel-inner轮播图内容整体carousel-item轮播图内容模块carousel-caption轮播图内容标题carousel-control-prev左切换按钮carousel-control-next右切换按钮
案例03：轮播图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<!-- <img src="..." alt="..." height="400" width="100%"> -->
<div style="height: 400px;background-color: rgba(0,0,0,0.5);"></div>
<div class="carousel-caption d-none d-md-block">
<h5>轮播图标题</h5>
<p>轮播图内容</p>
</div>
</div>
<div class="carousel-item">
<!-- <img src="..." alt="..." height="400" width="100%"> -->
<div style="height: 400px;background-color: rgba(0,0,0,0.5);"></div>
<div class="carousel-caption d-none d-md-block">
<h5>轮播图标题</h5>
<p>轮播图内容</p>
</div>
</div>
<div class="carousel-item">
<!-- <img src="..." alt="..." height="400" width="100%"> -->
<div style="height: 400px;background-color: rgba(0,0,0,0.5);"></div>
<div class="carousel-caption d-none d-md-block">
<h5>轮播图标题</h5>
<p>轮播图内容</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions"
data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
效果展示
Bootstrap 表格
| 类 | 描述 |
|---|---|
.table |
为任意 <table> 添加基本样式 (只有横向分隔线) |
.table-striped |
在<tbody>内添加斑马线形式的条纹 ( IE8 不支持) |
.table-bordered |
为所有表格的单元格添加边框 |
.table-borderless |
为所有表格的单元格去除边框 |
.table-hover |
在 <tbody> 内的任一行启用鼠标悬停状态 |
.table-condensed |
让表格更加紧凑 |
.table-sm |
小表格 |
.table-dark |
黑色主题 |
.thead-light |
灰白主题 |
如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="font/bootstrap-icons.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"jquery/jquery-3.6.0.min.js"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/bootstrap.min.js"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"table table-striped table-bordered table-hover table-condensed"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>Header<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>Header<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>Header<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"><<span class="hljs-title">th</span>></span>Header<span class="hljs-tag"></<span class="hljs-title">th</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>Data<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>Data<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>Data<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>Data<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>Data<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>Data<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>Data<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>Data<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>Data<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>Data<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>Data<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>Data<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>Data<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>Data<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>Data<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"><<span class="hljs-title">td</span>></span>Data<span class="hljs-tag"></<span class="hljs-title">td</span>></span>
<span class="hljs-tag"></<span class="hljs-title">tr</span>></span>
<span class="hljs-tag"></<span class="hljs-title">table</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
</html>
效果展示
<tr>, <th> 和 <td> 类
用于表格的行或者单元格：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 添加到行上 -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
<!-- 添加到单元格上 -->
<tr>
<td class="table-active">...</td>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
</tr>
效果展示
响应式表格
通过给表格添加.table-responsive{-sm|-md|-lg|-xl}，可以让表格响应的变化
如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
<div class="table-responsive-md">
<table class="table">
...
</table>
</div>
<div class="table-responsive-lg">
<table class="table">
...
</table>
</div>
<div class="table-responsive-xl">
<table class="table">
...
</table>
</div>
Bootstrap分页
自带分页样式
| Class | 描述 |
|---|---|
| .pagination | 添加该 class 来在页面上显示分页。 |
| .disabled, .active | 您可以自定义链接，通过使用 .disabled 来定义不可点击的链接，通过使用 .active 来指示当前的页面。 |
| .pagination-lg, .pagination-sm | 使用这些 class 来获取不同大小的项。 |
如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
效果展示
Bootstrap 列表组
列表可以罗列内容，配合badge一起使用很方便
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">default
<span class="badge badge-primary badge-pill">14</span>
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">primary
<span class="badge badge-secondary badge-pill">14</span>
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">secondary
<span class="badge badge-success badge-pill">14</span>
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">success
<span class="badge badge-danger badge-pill">14</span>
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">danger
<span class="badge badge-warning badge-pill">14</span>
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">warning
<span class="badge badge-info badge-pill">14</span>
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">info
<span class="badge badge-light badge-pill">14</span>
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">light
<span class="badge badge-dark badge-pill">14</span>
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">dark
<span class="badge badge-primary badge-pill">14</span>
</a>
</div>
效果展示
Bootstrap 模态框
模态框就是弹出窗口，可以作为提示，使用方法
- 在按钮上添加
data-toggle="modal"和data-target="#staticBackdrop"绑定哪一个模态框，并可打开模态框 - 在模态框中按钮上添加
data-dismiss="modal"绑定哪一个模态框，并可关闭模态框 - 在模态框上添加
class="modal fade"和id="staticBackdrop"
案例04：模态框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
打开模态框
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">标题</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
内容
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">确定</button>
</div>
</div>
</div>
</div>
模态框大小
| Size | Class | Modal max-width |
|---|---|---|
| Small | .modal-sm |
300px |
| Default | None | 500px |
| Large | .modal-lg |
800px |
| Extra large | .modal-xl |
1140px |
模态框选项
| Name | Type | Default | Description |
|---|---|---|---|
| backdrop | boolean | 'static' |
true | 包括一个模态背景元素。或者，为点击时不关闭模态的背景指定静态。 |
| keyboard | boolean | true | 按下Esc键时关闭模态 |
| focus | boolean | true | 初始化时将焦点放在模态上。 |
| show | boolean | true | 显示初始化时的模态。 |
模态框函数
| Options: .modal(options) | 把内容作为模态框激活。接受一个可选的选项对象。 | $(‘#identifier’).modal({keyboard: false}) |
|---|---|---|
| .modal(‘toggle’) | 手动切换模态框。 | $(‘#identifier’).modal(‘toggle’) |
| .modal(‘show’) | 手动打开模态框。 | $(‘#identifier’).modal(‘show’) |
| .modal(‘hide’) | 手动隐藏模态框。 | $(‘#identifier’).modal(‘hide’) |
| .modal(options) | 自定义选项 | $(‘#myModal’).modal({ keyboard: false }) |
事件
| 事件 | 描述 | 实例 |
|---|---|---|
| show.bs.modal | 在调用 show 方法后触发。 | $(‘#identifier’).on(‘show.bs.modal’, function () { // 执行一些动作…}) |
| shown.bs.modal | 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。 | $(‘#identifier’).on(‘shown.bs.modal’, function () { // 执行一些动作…}) |
| hide.bs.modal | 当调用 hide 实例方法时触发。 | $(‘#identifier’).on(‘hide.bs.modal’, function () { // 执行一些动作…}) |
| hidden.bs.modal | 当模态框完全对用户隐藏时触发。 | $(‘#identifier’).on(‘hidden.bs.modal’, function () { // 执行一些动作…}) |
Bootstrap 字体图标
字体图标需要额外下载，下载地址：https://icons.bootcss.com/
点击右上方下载按钮下载
将font文件夹拷贝到项目中
案例05：参考图标
使用方法
<i class="bi bi-alarm"></i>
Font Awesome4
下载地址：http://fontawesome.dashgame.com/
引入图标
<link rel="stylesheet" type="text/css" href="FontAwesome4/css/font-awesome.min.css"/>
基本图标
可以将Font Awesome图标使用在几乎任何地方，只需要使用CSS前缀 fa ，再加上图标名称。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用<i> ，因为它更简洁。 但实际上使用 <span>才能更加语义化。
<i class="fa fa-camera-retro"></i>
如果修改了图标容器的字体大小，图标大小会随之改变。同样的变化也会发生在颜色、阴影等其它任何CSS支持的效果上。
图标大小
使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 类 来放大图标
1
2
3
4
5
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
如果图标的底部和顶部被截断了，需要增加行高来解决此问题。
可旋转
这些图标在.fa-spin类的作用下表现优异。
-
使用
.fa-spin类来使任意图标旋转动画 -
还可以使用
.fa-pulse来使其进行8角形旋转动画 - 使用
.fa-rotate-*和.fa-flip-*类可以对图标进行任意旋转和翻转。
如：
1
2
3
4
5
6
<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
作业
实现后台管理框架
- 实现bootstarp自适应布局案例。地址：http://www.youzhan.org/
</article>
浙公网安备 33010602011771号