Bootstrap的安装和使用
Bootstrap简介
Bootstrap是前端开发中比较受欢迎的框架,简洁且灵活。它基于HTML、CSS和JavaScript,HTML定义页面元素,CSS定义页面布局,而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件,用起来简单,粗暴。
具体Bootstrap的学习教程可参考菜鸟教程
安装Bootstrap
①登录Bootstrap官网
②下载Bootstrap
Download Bootstrap:下载预编译和压缩版Bootstrap(不含文档和源码)。
Download code:Bootstrap源码,如官网介绍,需要编译Less文件 和一些安装。
刚接触Bootstrap的话建议下载第一个,下载下来直接用。
使用Bootstrap进行前端开发
开发环境:WAMP(windows下的Apache + MySQL + PHP)
编辑器:sublime
Step 1: 将下载下来的压缩包解压,将里面的css,fonts和js文件夹放到你的工程目录中。在工程根目录中新建了一个”index.html”,用来测试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>
- 1
- 2
- 3
<!-- 本地调用 -->
<script src="./js/bootstrap.min.js">
</script>
- 1
- 2
- 3
总结
Bootstrap功能确实挺强大的,用起来方便简洁。关于更多的Bootstrap使用例子以及详细教程可以到菜鸟教程进行享受学习的快乐。