Bootstrap基础教程
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.6 案例：第一个Bootstrap实例

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

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

      <! DOCTYPE html>
      <html>
      <head>
        <title>Bootstrap实例</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css">

      </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>第一列</h3>
          <p>Bootstrap的HTML是基于HTML5的最新前沿技术！</p>
          <p>灵活高效，简洁流畅！</p>
          </div>
          <div class="col-sm-4">
          <h3>第二列</h3>
          <p>Bootstrap的CSS是使用Less创建的CSS，是新一代的动态CSS! </p>

        <p>对用户来说，阅读更轻松！</p>
      </div>
      <div class="col-sm-4">
        <h3>第三列</h3>
        <p> Bootstrap的JavaScript是使用jQuery的CSS，是优秀的JavaScript! </p>
        <p>是用一个代码库，将常用的函数放进去，按需取用！</p>
      </div>
    </div>
    </div>
    </body>
    </html>

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

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

如果没有正确引入bootstrap.min.css文件，则运行的效果如图1-4所示。

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

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

上一章目录下一章