Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 入门bootstrap非常简单,官网都有详细的介绍,后续查看一下api。不用刻意去背去记,需要的就去api查找就好。
一、下载bootstrap包
网址: bootsrap官网
中文官网
在打开的download页面中,选择下载红框部分的文件就可以使用了,该文件上为 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。蓝框部分包含bootstrap的源码。我们这里只下载红框部分的文件
下载了文件解压之后,就会发现包含以下类型的文件夹:
文件夹里面有对应的文件,分别有非压缩版本和压缩版本:
我们在这里使用非压缩版本,以便后续查看。
二、配置和使用
1、首先我们创建一个项目。把我们需要用的bootstrap文件放入对应的目录节点,如下所示:
其中的jQuery文件时另外下载的。
2、在index.html引入文件。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>bootstrap</title> <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap-theme.css"> </head> <body> <script src="js/jquery-3.1.1.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html>注意:
1)、要加上 <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">这两句。
第一句针对在ie下,让IE提供最新的渲染方式
第二句让移动端适配尺寸。
2)、jquery-3.1.1.min.js文件一定要在文件bootstrap.js引用前引用。