Bootstrap基础教程最新章节_赵丙秀著

1.6 案例：Bootstrap实例

本书所使用的编辑器为HBuilderX，浏览器为Chrome。

在HBuilder中新建一个Web项目，将下载的Bootstrap框架中的bootstrap.min.css文件复制到 CSS目录下。

案例视频1

【实例1-1】 （文件index.html）

<!DOCTYPE html>
<html>
  <head>
      <meta charset=＂utf-8＂/>
        <meta name=＂viewport＂ content=＂width=device-width,initial-scale=1, shrink-to-fit=no＂>
      <link rel=＂stylesheet＂ href=＂css/bootstrap.min.css＂/>
      <title>Bootstrap实例</title>
  </head>
  <body>
      <div class=＂container＂>
        <div class=＂jumbotron＂>
          <h1>一个Bootstrap实例</h1>
          <p>Bootstrap包含了HTML、CSS和 JavaScript三大主要部分！</p>
        </div>
        <div class=＂row＂>
          <div class=＂col-sm-4＂>
            <h3>第1列</h3>
            <p>Bootstrap的HTML是基于HTML5的前沿技术！</p>
            <p>灵活高效，简洁流畅！</p>
          </div>
          <div class=＂col-sm-4＂>
            <h3>第2列</h3>
            <p>Bootstrap的CSS是使用Less创建的CSS，是新一代的动态CSS!</p>
            <p>对用户来说，阅读更轻松！</p>
          </div>
          <div class=＂col-sm-4＂>
            <h3>第3列</h3>
            <p>Bootstrap的JavaScript是使用jQuery的CSS，是优秀的JavaScript!</p>
            <p>是用一个代码库，将常用的函数存储进去，按需取用！</p>
          </div>
        </div>
      </div>
  </body>
</html>>

以上代码在Chrome浏览器中的运行效果如图1-3所示。

图1-3 在 Chrome浏览器中的运行效果（使用 Bootstrap）

假设【实例1-1】中没有正确引入bootstrap.min.css文件，则其运行效果如图1-4所示。

图1-4 运行效果（未使用 Bootstrap）

在上述例子中，因为没有使用 Bootstrap框架中的 JS插件的内容，所以没有包含 jquery.js或jquery.min.js文件，以及bootstrap.js或者bootstrap.min.js文件。

在Chrome浏览器中，按 F12键打开“开发者工具”。单击“Toggle device toolbar”图标，打开设备选择工具栏，可以在工具栏中选择设备浏览页面。图1-5所示为在 iPad设备中浏览页面。在后面的章节中，读者可以自行进行此操作，以便查看不同设备上的显示效果。

图1-5 在iPad中浏览页面