Bootstrap-介绍
这是Bootstrap框架教程的简介。
什么是Bootstrap？
Bootstrap是用于开发响应式的最流行的HTML，CSS和JS框架之一。
什么是响应式？
响应式是适合任何屏幕尺寸的。
获取Bootstrap
要下载最新版本的Bootstrap框架，请单击此处访问其官方。
您还可以检查其GitHub存储库以获取最新代码。
前提条件
为了遵循本教程，我们将需要以下软件。
文本编辑器编写我们的代码。
(例如：SublimeText，Atom，Brackets等)我们还可以使用NetBeans，Eclipse或者WebStorm等IDE。
Web浏览器，例如Chrome，Safari，Firefox，Edge等，以检查结果。
从官网下载的Bootstrap文件。
jQuery使用v1.11或者更高版本
先决条件
为了理解有关Bootstrap的本教程，假定您熟悉以下内容。
- HTML
- CSS
- JavaScript
- jQuery
项目结构
在本教程中，我们将使用以下项目结构。
我们的项目称为bootstrap-project。
bootstrap-project | +-- css | +-- js | +-- plugins | | | +-- bootstrap | +-- index.html
在上面的结构中，我们有一个css，它将包含我们所有的样式表文件。
我们有一个js文件夹，将保存javascript文件。
我们有一个plugins文件夹，其中包含bootstrap文件。
在项目文件夹中，我们有一个index.html文件，其中包含基本的基本Bootstrap模板。
引导模板
打开index.html文件并编写以下代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Template</title> <link href="plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn&apost work if you view the page via file://--> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello World</h1> <!-- javascript --> <script src="js/jquery.min.js"></script> <script src="plugins/bootstrap/js/bootstrap.min.js"></script> </body> </html>
在上面的代码中，我们将DOCTYPE设置为html并将页面语言设置为英语。
在" head"中，我们包含了" bootstrap.min.css"文件，该文件是Bootstrap的样式表文件。
在主体内，在结束标记</body>之前，我们包含了jquery文件，然后包含bootstrap.min.js文件。
在Bootstrap javascript文件之前包含jQuery文件非常重要，因为后者取决于jquery。
现在，我们在浏览器中打开index.html页面，查看结果。
