使用bootstrap进行页面设计第一步

来源：互联网发布：电影特效知乎编辑：程序博客网时间：2024/06/01 07:13

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引用前引用。

1 0