如何使用bootstrap

最新推荐文章于 2025-02-17 10:48:01 发布

原创最新推荐文章于 2025-02-17 10:48:01 发布 · 511 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #html5 #jquery

前端专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用Bootstrap构建响应式网站，包括设置文档类型、导入必要的JS和CSS文件、使用预定义的类实现按钮样式等基本步骤。

步骤一：<!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>

步骤四：本地测试