如何使用bootstrap

最新推荐文章于 2024-04-30 15:44:23 发布

王京伟

最新推荐文章于 2024-04-30 15:44:23 发布

阅读量457

点赞数 1

分类专栏：前端文章标签： bootstrap html5 jquery

本文链接：https://blog.csdn.net/greatexpectations/article/details/107245392

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

步骤一：<!DOCTYPE html>

##以为bootstrap使用了HTML5的新特性，因此需要在开头加上
<!DOCTYPE html>

步骤二：导入js、css
注：顺序不要搞错了，否则有一些效果会出不来。
首先是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>

步骤三：套用class

接着就是出现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>

步骤四：本地测试