highlight: a11y-light theme: condensed-night-purple
简介
Bootstrap 是用于构建响应式、移动设备优先的网站。
官方文档：v5.bootcss.com/
使用
导入Bootstrap的css文件bootstrap.css
导入Bootstrap的js文件bootstrap.js
导入jquery的js文件: jquery.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 使用X-UA-Compatible来设置IE浏览器的兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
viewport表示视口
width=device-width指示视口的宽度用为设备屏幕的宽度
initial-scale=1.0指示web页面的缩放比例为1（就表示不缩放）
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap</title>
<!-- 载入bootstrap的css -->
<link href="./lib/bootstrap.min.css" rel="stylesheet"/>
<!-- 若使用bootstrap的js插件，则必须先导入jquery(因为bootstrap是依赖于jquery的) -->
<script src="./lib/jquery.js"></script>
<!-- 载入bootstrap的js：包括所有的bootstrap的js插件或者可以根据需要使用的js插件的调用 -->
<script src="./lib/bootstrap.min.js"></script>
</head>
<body>
<h1>hello bootstrap</h1>
</body>
</html>
注意： 要使用bootstrap的js插件必须先导入jquery，bootstrap依赖于jquery
顺序：jQuery — Popper — JavaScript插件
集成包的添加顺序：先jQuery后bootstrap的JavaScript集成包的顺序依次添加
- Autoprefixer ：自动添加特定于浏览器厂商的CSS属性前缀
- Browserslist ：对浏览器地板本进行管理
Javascript
-
每个插件都可以被单独引入（使用对应每个 Bootstrap 插件的
js/dist/*.js文件） -
也可以通过
bootstrap.js或压缩版的bootstrap.min.js文件一次性引入所有插件（选一个即可，不要同时使用） -
如果使用打包程序（Webpack、Rollup 等），你可以使用支持 UMD 格式的
/js/dist/*.js文件 -
jQuery 必须在其他插件 之前 被引入
插件的data属性API：
- 仅在单个HTML元素上使用一个插件的data属性（eg:不能通过同一按钮触发工具提示和模态框）
- 禁用data属性代码
$(document).off('.data-api')
禁用特定插件:将插件名作为命名空间并将data-api作为后缀
$(document).off('.alert.data-api')
事件
所有不定时命名的事件都提供preventDefault()功能，赋予了你在工作开始之前将其停止的能力。若事件处理函数的返回值是false，将自动调用preventDefault（）
代码如下：
$('#myModal').on('show.bs.modal', function (event) {
if (!data) {
return event.preventDefault() // 停止即将展示的模态框（modal）
}
})
编程式 API
可接受三种参数形式：
- 对象类型的参数
- 字符串类型参数（将被当作是某个方法的名称）
- 没有参数（以默认行为启动插件）
$('#myModal').modal() // 以默认值启动插件
$('#myModal').modal({ keyboard: false }) // 启动插件时将 keyboard 设置为 false
$('#myModal').modal('show') // 启动插件并立即调用 show 方法
- 每个插件都通过
Constructor属性对外开放其原始的构造函数：$.fn.popover.Constructor - 如果你想获取某个插件的特定实例，请直接从其对应的元素中获取它：
$('[rel="popover"]').data('popover')
异步编程和transitions
所有编程形式的 API 方法都是 异步的，并在 transition 开始之后、结束之前返回到调用者
为了在 transition 完成后执行某个动作，你可以监听相应的事件
$('#myCollapse').on('shown.bs.collapse', function (event) {
// 可折叠区域被展开时，此处的动作将被执行一次
})
对正在transitioning状态的组件调用的任何方法都将被忽略
通过修改插件的Constructor.Default对象来更改插件的默认设置，代码如下：
// 将模态框（modal）插件的 `keyboard` 的默认值修改为 false
$.fn.modal.Constructor.Default.keyboard = false
避免冲突
当Bootstrap插件与其他UI框架一起使用时为避免发生命名空间的冲突可以调用.noConflict函数
var bootstrapButton = $.fn.button.noConflict() // 重置 $.fn.button 为先前的值
$.fn.bootstrapBtn = bootstrapButton // 为 $().bootstrapBtn 赋予 Bootstrap 的功能
util.js文件
Bootstrap 的所有Javascript文件都依赖util.js文件，必须将此文件与其他Javascript 文件放在一起使用
构建工具
安装工具
Bootstrap 的构建系统由 npm 脚本 组成的。 其自带的 package.json 文件提供了便捷的途径来编译代码、运行测试等。
下载Bootstrap源码并安装Node，步骤如下：
- 下载并安装Node.js，其自带了我们用于管理依赖项的工具
- 下载 Bootstrap 的源码或克隆 Bootstrap的源码仓库到本地。
- 进入源码的根目录
/bootstrap并运行npm intall以安装package.json文件中列出的所有依赖项到本地
npm 脚本
Bootstrap 自带的package.json文件提供以下的命名
webpack
安装
利用 npm 安装 bootstrap 并将其作为 Node.js 模块使用
导入
通常在index.js或app.js 文件中添加以下代码进行导入
import 'bootstrap';
按需分别导入独立的插件
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
Bootstrap 依赖 jQuery 和 Popper， 这两个依赖项在 peerDependencies 属性中已经明确指定。这意味着你必须确保使用 npm install --save jquery popper.js 命令将这两个依赖项添加到 你的 package.json 文件中
常用样式
排版
1.标题：
-
定义标题都是使用标签
<h1>到<h6>，相对于html来说bootstrap覆盖了其默认的样式，使用其在所有的浏览器下显示的效果一样 -
bootstrap定义了h1-h6六个类名，可以为非标题元素设置对应的标题样式。同时后面还可以紧跟着一行小的副标题（或者类名为small的div块）
<body>
<div class="h1">标题1<small>副标题</small></div>
<h2>标题2<span class="small">副标题</span></h2>
<h3>标题3</h3>
</body>
2.段落
- 该段落和html的段落都是用p标签表示，只不过可以用lead类在为段落增大字号，以及加粗文本，而且对行高和margin也做了一定的处理
- 在该段落中也可以用small类行内块或small标签来减小字号，也可以用html中的文本格式标签
3.用颜色进行强调
<body>
<div class="text-muted">提示效果</div>
<div class="text-primary">主要效果</div>
<div class="text-success">成功效果</div>
<div class="text-info">信息效果</div>
<div class="text-warning">警告效果</div>
<div class="text-danger">危险效果</div>
</body>
效果如下：
4.对齐效果
<body>
<p class="text-left">我是左对齐</p>
<p class="text-right">我是右对齐</p>
<p class="text-center">我是居中对齐</p>
<p class="text-justify">我是两端对齐</p>
</body>
效果如下：
列表
1.去点列表
定义： 前面没有符号的列表
<ul class="list-unstyled">
<li>列表1</li>
<li>列表2</li>
</ul>
2.内联列表
定义： 把垂直列表换成水平列表，而且去掉项目符号，保持水平显示（制作水平导航时常用）其主要用list-inline类来表示
<ul class="list-inline">
<li class="list-inline-item">哈尔的移动城堡</li>
<li class="list-inline-item">你想活出怎样的人生/li>
<li class="list-inline-item">你的名字</li>
</ul>
3.定义列表
定义： 可以使用dl-horizontal来制作水平定义列表，当标题宽度超过160px时会显示三个省略号
<dl class="dl-horizontal">
<dt>html超文本标记语言，多出来的</dt>
<dd>html为超文本标记语言，是一种标识性语言</dd>
<dt>css为层叠样式表</dt>
<dd>css为层叠样式表，为前端三剑客之一</dd>
</dl>
插件
导航插件
前言：根据导航块的类名不同可以显示多种导航栏（通常与列表一起使用）
基础样式： nav
导航栏的分类（加在ul内）
- 标签型：nav-tabs
- 胶囊型：nav-pills
- 垂直型：nav-stacked
- 自适应：nav-justified
- 面包屑：breadcrumb（其不和nav基础样式一起使用，可以单独直接使用）
导航栏中的导航状态（加在li内）
- 选中状态：active状态
- 禁用状态：disable
面包屑导航
定义：用于指示当前页面在导航层级中的位置，并通过 CSS 为各导航条目之间自动添加分隔符
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">首页</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">首页</a></li>
<li class="breadcrumb-item active" aria-current="page">正经内容</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">首页</a></li>
<li class="breadcrumb-item"><a href="#">正经内容</a></li>
<li class="breadcrumb-item active" aria-current="page">尾巴</li>
</ol>
</nav>
页码导航
<ul class="pagination pagination-lg">
<!-- 左双箭头 -->
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="active"><a href="#">3</a></li>
<!-- 右双箭头 -->
<li><a href="#">»</a></li>
</ul>
下拉菜单
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
Button
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">一只猪</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">两只猪</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">三只猪</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">四只猪</a>
</li>
</ul>
</div>
注意: 在使用下拉菜单时，必须三个文件（bootstrap的css文件、jquery的js文件、bootstrap的js文件）都引入
闪烁加载
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>闪烁的加载效果</h2>
<p>使用 .spinner-grow 类来设置闪烁的加载效果:</p>
<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>
</div>
</body>
</html>
提示框
<div class="container">
<h2>提示框添加链接</h2>
<p>提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接：</p>
<div class="alert alert-success">
<strong>成功!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
</div>
<div class="alert alert-info">
<strong>信息!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
</div>
<div class="alert alert-warning">
<strong>警告!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
</div>
<div class="alert alert-danger">
<strong>错误!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
</div>
鼠标悬停状态表格
代码：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>鼠标悬停状态表格</h2>
<p>.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）：</p>
<table class="table table-hover">
<thead>
<tr>
<th>正在热映</th>
<th>即将上线</th>
<th>待映</th>
</tr>
</thead>
<tbody>
<tr>
<td>末路狂花钱</td>
<td>维和防暴</td>
<td>哈尔的移动城堡</td>
</tr>
<tr>
<td>半糖初恋</td>
<td>你就在我身边</td>
<td>一路向南</td>
</tr>
<tr>
<td>穿过月亮的旅行</td>
<td>...</td>
<td>....</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
