肉渣教程

学习 Bootstrap

上一节 下一节

Bootstrap是美国社交网站推特(Twitter)开源出来的前端库。学习前端,必学Bootstrap库。当代以及未来,大部分网站都会基于此库进行前端开发。


学习之前

学习Bootstrap之前,请先学习HTML基础教程CSS基础教程JavaScript教程。至少要做到对HTML/CSS/JS有个大体的掌握。

引入Bootstrap库

平时,为了方便,可以直接引用托管在专否cdn上的Bootstrap库。需要注意的是:因为Bootstrap的所有JavaScript插件都是基于jQuery库的,所以jQuery库必须提前引入,放在bootstrap.min.js前面。

<!-- Bootstrap 核心CSS文件 -->
<link rel="stylesheet" href="https://cdn.zhuanfou.com/bootstrap-3.3.7-dist/css/bootstrap.min.css">

<!-- Bootstrap 所有JS插件都依赖于jQuery,因此jQuery必须放在前面 -->
<script src="https://cdn.zhuanfou.com/jquery-3.3.1.min.js"></script>

<!-- Bootstrap 核心JS文件 -->
<script src="https://cdn.zhuanfou.com/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

下载Bootstrap库

从GitHub上下载3.3.7版本的Bootstrap库,解压后,把所有文件放在网站的服务器上,以待引用。(放到服务器时要保持文件之间的相对路径,也就是直接把解压后的那三个文件夹放在服务器的同一处

一个基本的模板

如下所示,是一个使用Bootstrap的基本模板。(下载该模板


本教程力求精简,对Bootstrap的介绍并不全面,更多可了解Bootstrap官方网站


学习 Bootstrap

上一节 下一节