Bootstrap中文网:http://www.bootcss.com/
Bootstrap编码规范:http://codeguide.bootcss.com/
Bootstrap中文文档:https://v3.bootcss.com/
查看各种样式的class和用法看这里就行啦~~
一边学,一边用,一边抄,一边记……慢慢就熟悉啦~~(视频里面老师说的 :P)
3.1 引入Bootstrap
(1) 在Bootstrap中文网下载 Bootstrap 3(https://v3.bootcss.com/)
(2) 在webapp文件夹中创建 static 文件夹,用来保存静态文件。
(3) 将解压缩后的 bootstrap*3.3.7-dist 文件夹复制到static文件夹中。
<!-- Bootstrap -->
<link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
3.2 引入jQuery
由于 Bootstrap 依赖 jQuery,所以要引入 jQuery。
3.2.1 引入本地jQuery.js
(1) 在 static 文件夹中建立 js 文件夹,
(2) 在 jQuey 网站中下载 jQuery-3.2.1.min.js
(3) 复制到 js 文件夹中
(4) 在网页的 < head > 标签中加上下面的代码
<script src="js/jquery.min.js"></script>
3.2.2 也可以直接在网页中写jQuery的引用。
像这样:
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
3.3 一个简单的例子
今后在创建网页文件时,使用下面的方法使用 Bootstrap。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<!-- Bootstrap -->
<link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>Bootstrap is ready !!</title>
</head>
<body>
<h1>h1. 你好,世界!</h1>
<button class="btn btn-success">Hello</button>
</body>
</html>
注意:
jQuery.min.js 的引入一定要在 bootstrap.min.js 之前,这样能保证不出错。