|
|
|
步骤 2 : 导入js 导入css 步骤 3 : 套用class 步骤 4 : 本地测试
因为bootstrap用到了html5的特性，为了正常使用，需要在最开头加上
<!DOCTYPE html> <!DOCTYPE html>
<!DOCTYPE html>
接着导入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>
<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>
接着就是出现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>
<!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>
首先在右侧下载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>
<!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>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2020-08-04
上面的包是不是跟老师用的不一样
1 个答案
LuzfeI 跳转到问题位置 答案时间：2020-08-04 噢 刚刚发现了问题，就是要先放bootstrap.min.css
再放jquery.min.js
再放bootstrap.min.js就一样了 这怎么跟老师说的不一样？
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-05-20
直接在Idea里面新建一个bootstrap项目就自动生成所有的jar了更方便哦
2019-12-18
bootstrap.min.css报错:syntax error
2019-08-12
bootstrap jar导包问题
2019-05-06
这么简单的嘛，不过我们这用的是bootstrap帮我们封装好的把??
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 12 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
|||||||||||||
