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

最新推荐文章于 2024-07-20 15:49:14 发布

冰阔落

最新推荐文章于 2024-07-20 15:49:14 发布

阅读量4.5k

点赞数

文章标签： bootstrap html 前端框架

Bootstrap 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

写在前面：
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主页，到这里就写完了。