Bootstrap的安装和使用

最新推荐文章于 2025-07-01 22:31:04 发布

转载最新推荐文章于 2025-07-01 22:31:04 发布 · 7.8k 阅读

12 篇文章

订阅专栏

本文介绍了Bootstrap框架的安装与基本使用方法，包括如何下载预编译版本并集成到WAMP环境中，通过一个实例展示了如何创建垂直胶囊式导航菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap是前端开发中比较受欢迎的框架，简洁且灵活。它基于HTML、CSS和JavaScript，HTML定义页面元素，CSS定义页面布局，而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件，用起来简单，粗暴。

具体Bootstrap的学习教程可参考菜鸟教程

Bootstrap安装

②下载Bootstrap

Bootstrap下载

Download Bootstrap：下载预编译和压缩版Bootstrap（不含文档和源码）。

Download code：Bootstrap源码，如官网介绍，需要编译Less文件和一些安装。

刚接触Bootstrap的话建议下载第一个，下载下来直接用。

开发环境：WAMP（windows下的Apache + MySQL + PHP）

编辑器：sublime

Step 1: 将下载下来的压缩包解压，将里面的css,fonts和js文件夹放到你的工程目录中。在工程根目录中新建了一个”index.html”，用来测试Bootstrap。

Bootstrap

Step 2: 编辑”index.html”，使用Bootstrap封装的功能部件。这里以“菜鸟教程”上的教程例子“垂直的胶囊式导航菜单”为例。即用Bootstrap在我们网页上实现一个垂直的胶囊式导航菜单。

导航菜单

Step 3: 在浏览器中打开我们编写好的”index.html”查看。

这就是用Bootstrap实现一个垂直的胶囊式导航菜单全过程。总结就是，性感，简单，粗暴。

Step 4: 如果不想通过CDN引入Bootstrap，可以将代码中的路径都改一下：

<!-- CDN引入 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js">
</script>

<!-- 本地调用 -->
<script src="./js/bootstrap.min.js">
</script>

总结

Bootstrap功能确实挺强大的，用起来方便简洁。关于更多的Bootstrap使用例子以及详细教程可以到菜鸟教程进行享受学习的快乐。