BootStrap系列教材（二）- 入门

下载区
文件名	文件大小
bootstrap.rar	288k
解压rar如果失败，请用5.21版本或者更高版本的winrar 点击下载 winrar5.21

工具版本兼容问题

使用Bootstrap 很简单，按照如下步骤进行即可。

纠

步骤 1 : <!DOCTYPE html>
步骤 2 : 导入js 导入css
步骤 3 : 套用class
步骤 4 : 本地测试

步骤 1 :

<!DOCTYPE html>

edit 顶折

纠问

因为bootstrap用到了html5的特性，为了正常使用，需要在最开头加上

<!DOCTYPE html>

1	`<!DOCTYPE html>`

步骤 2 :

导入js 导入css

edit 顶折

纠问

接着导入js和css
Bootstrap需要JQuery才能正常工作，所以需要导入jquery.min.js
接着是 Bootstrap的css，里面定义了各种样式
最后是 Bootstrap的js，用于产生交互效果，比如关闭警告框
注：顺序不要搞错了，否则有一些效果会出不来。
首先是JQuery
然后是Bootstrap css
最后是Bootstrap js

。

<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

步骤 3 :

套用class

edit 顶折

纠问

接着就是出现BootStrap的效果，使用是非常简单的，只需要套用 bootstrap css中定义的class即可。
如按钮，增加class btn btn-success 就能有bootstrap的效果了
简单的吓死人

运行效果

<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<button class="btn btn-success">按钮</button>

步骤 4 :

本地测试

edit 顶折

纠问

首先在右侧下载bootstrap.rar
解压后和html放在同一个目录下
js和css的引用也如图所示

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
<button class="btn btn-success">按钮</button>