建站教程：利用Bootstrap进行快速Web开发

发布时间：2016-10-16 09:10:35 所属栏目：策划来源：伯乐在线

导读：副标题#e# 了解如何使用 Bootstrap 快速开发网站和 Web 应用程序（包括移动友好型应用程序）。Bootstrap 以 LESS 项目为基础，由 Twitter 的内部工程师开发，它为 Web 应用程序 UI 提供了一致的框架。浏览器开发人员最后将其支持全都聚集在标准上，比如 HT

清单 2. 用于 Bootstrap (listing2.html) 的示例 HTML 文件

<!doctype html>
<html lang="en-US">
  <head>
    <title>Responsive Bootstrap page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
  </head>
  <body>
    <div>
      <h1>Hello world!</h1>
      <div>
 
        <div id="banner">
          <!-- Photo by Jake Sutton
          http://www.flickr.com/photos/44124405407@N01/510899838 -->
          <img src="img/sky-slim.jpg" alt="Web开发 网站策划 Bootstrap教程 bootstrap模板">
        </div>  
      </div>
      <div>
        <div id="main-content">
          <p>Humpts dumptus in muro sedet
          </p>
          <p>Veni vidi vici
          </p>
          <p>Alea iacta est
          </p>
          <hr>
        </div>
        <div>
          <div>One</div>
          <div>
            The quick brown fox jumps...
          </div>
          <div>
            <div>Two</div>
            <div>
              Over the lazy dog...
            </div>
          </div>  
          <div>
            <div>Three</div>
            <div>
              To get to the other side
            </div>
          </div>
        </div>  
      </div>
      <div>
        <div id="footer">
          &copy; Nobody! This document is placed in the public domain.
        </div>  
      </div>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

在清单 2 中，Bootstrap 删除了我需要在较旧的响应式设计代码中手动完成的任务。因为页面使用了 Bootstrap 的网格系统，所以我不再需要使用专门的 CSS 来操作或调整盒子大小。仔细安排可视空间的 CSS 也不需要专门的 CSS，因为 Bootstrap 网格在各个块之间设置了很好的默认值。此外，我不需要任何 CSS 来进行媒体查询（media query）并在设计参数中设置响应，因为 Bootstrap 的响应特性会负责完成这些任务。

您可以在清单 2 中看到 div 标记的嵌套。嵌套的 div 使用了 Bootstrap 网格类。具有 container 类的 div 是整个固定网格布局的包装程序。具有 row 类的每个 div 在网格中定义了盒子的一行。具有 span4 类的 div 定义了一个横跨 4 个盒子的块。具有 span12 类的 div 定义横跨 12 个盒子的块 — 页面的整个宽度。Bootstrap 有一个 spanN 类，可横跨从 1 到 12 的任意数量 N 的盒子。

图 2 显示了所生成的页面在移动浏览器中的外观（运行 Android 4.1.1 的 Samsung Galaxy S3 上的 Google Chrome）：

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

4/6

首页

尾页