前端学习笔记 Bootstrap 框架使用方法补充
参考视频：【极客学院】一周学会Bootstrap
官方文档： Bootstrap 中文文档 · Bootstrap 是世界上最流行的、移动设备优先的、响应式前端开发框架。
参考文档： jquery下载所有版本（实时更新）
文章目录
- BootStrap
- 简介
- 原则
- 起步
- 下载
- 引入
- 示例：导航栏
- role属性
- 全局CSS样式
- 取消全局样式
- 栅格
- 表格
- 表单
- 按钮
- 组件
- 导航
- Javascript插件
- 滚动监听
- 按钮
BootStrap
简介
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
原则
Bootstrap一切以官方文档为主。
本文作为学习笔记，只做为官方文档学习过程中的补充。
起步
下载
根据官方文档，下载用于生产环境的bootstrap-3.3.7-dist。
将其中的文件夹css、fonts、js放于Web项目的根目录下。
也可以下载Bootstrap源码的bootstrap-3.3.7，以供以后使用。
引入
样式表css，脚本js使用各自对应规则引入。
head中的meta标签定义设备自适应和缩放比例：
<meta name="viewport" content="width=device-width, initial-scale=1">
示例：导航栏
- 添加导航条：
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">111</a>
</div>
</div>
</nav>
</body>
其中class皆为引入css样式表内的定义过样式的类。
- 代码结果：
- 丰富导航条元素：
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">导航</a>
</div>
<div id="nav1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
</div>
</nav>
- 代码结果：
- 添加内容部分并定义内部CSS：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style type="text/css">
body{
padding-top: 50px;
}
.s1{
padding: 40px 15px; /*上下40px 左右50px*/
text-align: center; /*居中*/
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">导航</a>
</div>
<div id="nav1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="s1">
<h1>标题示例</h1>
<p class="lead">内容1</p>
</div>
</div>
</body>
- 代码结果：
role属性
参考文档：XHTML Role Attribute Module
参考文档：html 里面的 role 属性详解
使用role属性告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色，属于WAI-ARIA.WAI-ARIA是W3C的可访问性倡议，是一组可以被添加到HTML元素中的属性。
本质上是增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。通常这种情况出现在一些自定义的组件上（例如一个tree组件，html里目前还没有tree这个标签），这样可增强组件的可访问性、可用性和可交互性。
让网站更符合W3C标准 更有利于搜索引擎优化。
<header role="banner">
全局CSS样式
- head标签内：引入
<link rel="stylesheet" href="css/bootstrap.css">
link标签，在head中引入bootstrap.css样式表文件。
- body标签内：使用容器布局
<div class="container">
</div>
一般使用container类作为指定容器。
取消全局样式
<ul class="list-unstyled">
<li>1</li>
<li>2</li>
</ul>
使用class为list-unstyled。
栅格
bootstrap的重点，将页面划分为12列。
在div容器中使用。
有不同的移动端适配方法类。
<div class="container">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
- 手动添加CSS样式：
- 代码结果：
应用：栅格内部可以添加任何元素，通通使用栅格进行布局。
表格
<div class="container">
<table class="table table-striped">
<!--表头 建议用thead承载-->
<thead>
<tr>
<th>列1</th>
<th>列2</th>
</tr>
</thead>
<!--主体 建议用tbody承载-->
<tbody>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</tbody>
</table>
</div>
表单
可以使用fieldset标签，直接指定区域为不可用disabled：
<div class="container">
<form role="form">
<fieldset disabled>
内容
</fieldset>
</form>
</div>
按钮
建议使用button，而不是input，兼容性考虑。
组件
- head标签内：引入
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-3.5.1.js"></script>
<script src="js/bootstrap.js"></script>
link标签，引入css样式表。
script标签，引入js脚本，和其依赖的jQuery。
-
注意：必须先引入jquery，再引入bootstrap！
-
jQuery下载：
参考文档： jquery下载所有版本（实时更新）下载后将相关文件放入web项目中的js文件夹。
导航
使用jQuery使其变为可选中状态：
<script>
$("#id1 a").click(function (e) {
e.preventDefault();
$(this).tab("show");
})
</script>
为id是id1的标签中的a标签添加。
Javascript插件
很多部分源代码没有给出，
参考先前部分（全局CSS样式、组件）。
滚动监听
<body data-spy="scroll" data-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
<!--添加li标签：链接到对应id-->
<li><a href="#testa">a</a></li>
<li><a href="#testb">b</a></li>
<!--添加li标签：结束-->
</ul>
<!--内容部分：手动添加-->
<h2 id="testa">a</h2>
<p>
内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>
</p>
<h2 id="testb">b</h2>
<p>
内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>
内容<br>内容<br>内容<br>内容<br>
</p>
<!--内容部分：结束-->
</div>
...
</body>
按钮
<script>
$('#myButton').on('click', function () {
var $btn = $(this).button('loading')
// business logic...
setTimeOut(function(){
$btn.button('reset')
}, 2000);
//等待2秒
})
</script>