Bootstrap 教程第一课：简单的 Bootstrap 主页

来源：互联网发布：python破解rar 编辑：程序博客网时间：2024/04/29 12:42

写在前面：
Bootstrap是目前最流行的前端框架，我从简单的实例开始，写一份文字版的Bootstrap教程，希望能对大家有所帮助。

准备工作：
1、下载Bootstrap框架核心文件。
2、下载jQuery文件。
3、下载HTML5兼容IE的JS插件。
（各位可以从网上找到Bootstrap和jQuery以及HTML5 JS的官方下载地址，也可以直接点击下面的下载链接下载，我已经将jQuery文件放在了js目录里了。）
点击下载Bootstrap核心文件

HTML结构：
1、Bootstrap框架的文档必须声明为HTML5文件类型，所以你的每一个页面都必须按照下面的格式进行设置：

<!DOCTYPE html><html lang="zh-cn">......</html>

2、添加HTML文档meta标记，需要两条标记：

<!-- 声明IE8浏览器使用它支持的最高模式渲染页面 -->    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <!-- name="viewport" 针对移动端浏览器声明，通过 width=device-width 告诉浏览器页面的宽度应等于设备的宽度，initial-scale=1 页面将是原本尺寸展示 -->    <meta name="viewport" content="width=device-width,initial-scale=1">

3、引入所需要的核心文件，包括Bootstrap的CSS文件，jQuery插件，Bootstrap的JS核心文件，以及HTML5.JS文件。

<!-- Bootstrap 核心 CSS 文件 -->    <link rel="stylesheet" href="css/bootstrap.css">    <!--[if lt IE 9]>    <script src="js/html5shiv.min.js"></script>    <![endif]-->

<!-- jQuery文件，必须在bootstrap.min.js之前引入 --><script src="js/jQuery.min.js"></script><!-- Bootstrap 核心 javascript文件--><script src="js/bootstrap.min.js"></script>

那么现在，你的HTML文档，应该是这个样子的：

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <!-- 声明IE8浏览器使用它支持的最高模式渲染页面 -->    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <!-- name="viewport" 针对移动端浏览器声明，通过 width=device-width 告诉浏览器页面的宽度应等于设备的宽度，initial-scale=1 页面将是原本尺寸展示 -->    <meta name="viewport" content="width=device-width,initial-scale=1">    <title>Bootstrap 第一课：简单的Bootstrap主页</title>    <!-- Bootstrap 核心 CSS 文件 -->    <link rel="stylesheet" href="css/bootstrap.css">    <!--[if lt IE 9]>    <script src="js/html5shiv.min.js"></script>    <![endif]--></head><body><!-- jQuery文件，必须在bootstrap.min.js之前引入 --><script src="js/jQuery.min.js"></script><!-- Bootstrap 核心 javascript文件--><script src="js/bootstrap.min.js"></script></body></html>

正式开始：
现在就可以在body之间写上你的网页结构代码了，添加上Bootstrap相应的CSS类样式，就可以完成一个最简单的Bootstrap主页了。
首先，写好HTML结构代码：

<div>        <h1>这是一个简单的Bootstrap主页</h1>        <p>这是一个简单的Bootstrap主页，制作这个主页，可以分为三个步骤：</p>            <p>一、使用HTML5基本文档类型，并写好网站声明。    </p>        <p>二、引入必须的Bootstrap核心文件。</p>        <p>三、将页面代码放入container类容器中。</p></div>

在这个普通的结构代码的DIV上，添加CSS类.container，我们就可以看到页面的变化。上面的HTML结构和内容代码将变成如下：

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <!-- 声明IE8浏览器使用它支持的最高模式渲染页面 -->    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <!-- name="viewport" 针对移动端浏览器声明，通过 width=device-width 告诉浏览器页面的宽度应等于设备的宽度，initial-scale=1 页面将是原本尺寸展示 -->    <meta name="viewport" content="width=device-width,initial-scale=1">    <title>Bootstrap 第一课：简单的Bootstrap主页</title>    <!-- Bootstrap 核心 CSS 文件 -->    <link rel="stylesheet" href="css/bootstrap.css">    <!--[if lt IE 9]>    <script src="js/html5shiv.min.js"></script>    <![endif]--></head><body><div class="container">        <h1>这是一个简单的Bootstrap主页</h1>        <p>这是一个简单的Bootstrap主页，制作这个主页，可以分为三个步骤：</p>            <p>一、使用HTML5基本文档类型，并写好网站声明。    </p>        <p>二、引入必须的Bootstrap核心文件。</p>        <p>三、将页面代码放入container类容器中。</p></div><!-- jQuery文件，必须在bootstrap.min.js之前引入 --><script src="js/jQuery.min.js"></script><!-- Bootstrap 核心 javascript文件--><script src="js/bootstrap.min.js"></script></body></html>

现在在浏览器中打开这个页面浏览，拖动浏览器窗口的大小，可以看到页面随着浏览器的大小变化，而出现相应的适应变化，这个简单的Bootstrap主页，到这里就写完了。

(模拟手机端显示)

（模拟平板电脑显示）

（模拟桌面设备显示）

可以看到，在不同分辨率下，页面边距是自动变化和适应的，这就是Bootstrap的强大之处。

0 0