使用Bootstrap快速进行Web开发

最新推荐文章于 2023-04-05 16:36:46 发布

cuxiong8996

最新推荐文章于 2023-04-05 16:36:46 发布

阅读量482

点赞数

文章标签： html python css java javascript ViewUI

原文链接：https://www.ibm.com/developerworks/opensource/library/wa-bootstrap/index.html

版权

当简单不是

万维网的概念很简单。标准的传输协议（HTTP）从服务器到客户端获取信息，而标准的声明性语言（HTML）表示内容，以便浏览器可以直观地呈现它。但是，实际上，Web的成功注定了这种简单性，并且Web开发并不像它应该的那么容易。浏览器之间的功能竞争导致标准的复杂化和浏览器行为的变化。然后需要非凡的技能和经验，以确保页面在不同的浏览器和不同的平台上看起来和工作类似。（也带来了更为良性的并发症，例如对视觉障碍者的可访问性以及对语言和脚本的全球支持。）Web开发人员和设计人员现在正在更好地管理这些问题，但是处理跨浏览器HTML的基本问题仍然存在。

浏览器开发人员最终将对HTML5，层叠样式表2级（CSS2）和CSS3等标准的支持融合在一起。这些标准减少了自Web诞生以来困扰开发人员和设计人员的浏览器行为的不合理变化。为了解决仍然存在的问题并适应旧版浏览器，一些开发人员已经制作了网页框架。这样的工具使仅凡人就能开发出对大多数用户有效的网站。

最受欢迎的现代网页框架之一来自意外来源。 Twitter的开发人员厌倦了他们用于网页开发的许多不同组件的争夺。他们创建了一个单一的框架，该框架提供页面设计的最常见元素，同时还提供了合理的灵活性。他们以Bootstrap（一个开源项目）的形式与世界分享了此工具包。

Bootstrap基于LESS项目，该项目增强了CSS语言。 Bootstrap还包括用于排版，表单，按钮，表格，网格，导航，警报等的基本CSS元素。 Bootstrap的主要目的是帮助Web开发人员加速其项目。它是GitHub软件存储库中最受欢迎的项目。个人，小型团队甚至大型组织都在使用Bootstrap。

本文向您展示如何使用Bootstrap启动网站和应用程序，包括适合移动设备的网站和应用程序。本文反映了开发人员的观点，而不是设计师的观点。要从本文和Bootstrap中受益，您需要HTML和CSS的使用知识。我在“ 使用LESS在CSS中做更多事 ”中介绍了LESS项目的基础知识，可以帮助您理解本文的主要代码示例。

入门

下载已编译的Bootstrap软件包（请参阅参考资料）。我在本文中使用版本2.3.2。该下载包含Bootstrap核心CSS，以及有用的图像和JavaScript。正如我在本文中概述的那样，您为网页提供了HTML。（请参阅下载以获取本文的示例代码。）Bootstrap文档的确包含示例HTML，以说明框架支持的许多设计选项。但是，Bootstrap文档页面（尽管它们本身体现了Bootstrap的灵活性）并未充分说明所发挥的基本设计原理。

响应式网页设计

查看网页的设备范围从小型手机到比通常的台式计算机更大的显示器。在响应式设计中，您从一开始就在网页中构建了灵活性，因此可以在所有设备中查看它们。响应式设计的核心是CSS3 媒体查询，这是一种根据用户显示的性质（尤其是用户的显示大小）调用CSS规则的标准方法。

对于典型开发人员发起的项目类型，我建议从启用响应功能的固定布局开始。固定的布局更易于组织，响应式功能支持良好的习惯，即从一开始就考虑您的网站在移动设备上的工作方式。如果您的项目确实要投入生产，并且您正在与设计师合作，那么设计师应该能够将您的文件修改为其他更合适的模型。

BootstrapHTML

清单1是一个有用的框架HTML文件，用于使用具有固定布局和响应功能的Bootstrap：

清单1. Bootstrap项目的基本框架HTML文件（listing1.html）

<!doctype html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <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>
    <h1>Hello world!</h1>
    <div class="container">
    ... <!-- The main HTML will go here -->
    </div>
    <script src="//code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

缩小版

在Bootstrap下载中，请注意，每个CSS和JavaScript文件都有两个版本（例如bootstrap.js和bootstrap.min.js）。第一种形式是常规文件，第二种形式是压缩或“最小化”。像我在本文中所做的那样，请使用最小化版本，以实现最有效的页面加载。

Listing1.html开头的DOCTYPE声明将其标记为HTML5文件。 head元素内的meta标签可控制移动小屏幕布局。（为方便起见，我将其称为meta/viewport标记。）默认情况下，大多数移动设备会按比例缩小网页的大小，以使其适合屏幕显示，就像在桌面浏览器窗口中一样。这就是为什么许多网站上的文本和图像在手机浏览器中看起来很小的原因。 meta/viewport声明的initial-scale=1.0部分禁用了此行为，告诉设备保留页面的原始比例。该声明表明Web设计人员（在这种情况下为Bootstrap）已经完成了为较小的屏幕实现响应式设计的工作，因此不需要默认的蛮力方法。

在清单1的head标签的后面，有指向Bootstrap CSS的链接。在文件末尾，jQuery和Bootstrap实用工具JavaScript加载。这些脚本最后运行以获得最佳性能。

设置代码

当您使用Bootstrap（或任何一组Web支持文件）时，可以选择多种设置HTML和其他代码的方法。我建议您为自己的项目创建一个文件夹，然后将完整的文件夹结构完整的Bootstrap文件复制到项目文件夹中。将您自己HTML文件放在顶层，并将您自己CSS，JavaScript和图像文件放在相应的Bootstrap子文件夹（分别命名为css，js和img）中。整体结构如下所示：

.
|—— index.html
|—— [Also any other site HTML]
|—— css
|   |—— bootstrap.min.css
|   |—— bootstrap-responsive.min.css
|   |—— [Also nonminimized Bootstrap files plus site-specific CSS]
|—— js
|   |—— bootstrap.min.js
|   |—— [Also nonminimized Bootstrap files plus site-specific JavaScript]
|—— img
    |—— [The PNGs that come with Bootstrap plus site-specific images]

CSS设备适配

meta/viewport标记是用于使页面适应设备的可见浏览器空间的当前约定。万维网联盟（W3C）正在以一种新CSS规则的形式准备一种替换机制（请参阅参考资料）。清单1中 meta/viewport声明的等效CSS为：

@viewport {
  width: extend-to-zoom 100%;
  zoom: 1.0;
}

现在，您可以将此代码包含在CSS中，并将meta/viewport标签保留在HTML中。广泛支持CSS表单时，您可以删除meta/viewport声明。

网格系统

清单1中的主容器div表示使用Bootstrap的固定布局。您放入此容器HTML集成到Bootstrap的网格系统中。

如果考虑到您所看到的大多数网页，就会意识到它们被分为一系列块。页面顶部的块可能带有徽标。导航可能在左侧或右侧的块中，并且内容索引也适合其中。也许还有另一个块包含页脚。主要内容本身可以分为面板或块。过去，Web设计人员通过使用CSS框模型来手动设置所有这些块。

网格系统是一种将框排列（例如我刚刚描述的框排列）抽象为行和列的方法。 Bootstrap为此类网格提供了CSS的核心。通过使用特殊类嵌套div元素，可以将内容放置在任何布局的盒子中。

图1显示了一个有用的模板，该模板最初由Aaron K. White开发，用于可视化Bootstrap的网格系统并计划如何排列内容（请参阅参考资料）。我对其进行了修改，只是为了使本文中的文本更易于阅读。

图1. Aaron K. White的Bootstrap网格系统模板

Bootstrap网格系统每行最多包含12个块，块之间具有装订线以提供间距。您可以有不限数量的行，每个行都可以任意设置高度。每个块宽70像素，装订线宽30像素。 Bootstrap还为页面正文设置了30像素的左边界。网格系统的设计旨在照顾您的基本安排和间距，因此，理想情况下，您只关心放入网格中的内容。

填写HTML模板

在“ 使用LESS在CSS中做更多事”中，我使用了一个响应式设计示例（基于developerWorks博客Bob Bob Leah的示例）来演示LESS工具如何增强CSS语法。 Bootstrap是简化该代码中许多问题的好工具。清单2是该文章中HTML（代码下载中的response.html），被重写（如listing2.html）以在Bootstrap的固定布局网格系统中工作，并补充了Bootstrap的响应功能：

清单2. Bootstrap的示例HTML文件（listing2.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 class="container">
      <h1>Hello world!</h1>
      <div class="row">

        <div id="banner" class="span12">
          <!-- Photo by Jake Sutton
          http://www.flickr.com/photos/44124405407@N01/510899838 -->
          <img src="img/sky-slim.jpg">
        </div>  
      </div>
      <div class="row">
        <div id="main-content" class="span8">
          <p>Humpts dumptus in muro sedet
          </p>
          <p>Veni vidi vici
          </p>
          <p>Alea iacta est
          </p>
          <hr>
        </div>
        <div class="span4">
          <div class="widget-title">One</div>
          <div class="widget-text">
            The quick brown fox jumps...
          </div>
          <div class="widget-content">
            <div class="widget-title">Two</div>
            <div class="widget-text">
              Over the lazy dog...
            </div>
          </div>  
          <div class="widget-content">
            <div class="widget-title">Three</div>
            <div class="widget-text">
              To get to the other side
            </div>
          </div>
        </div>  
      </div>
      <div class="row">
        <div id="footer" class="span12">
          &copy; Nobody! This document is placed in the public domain.
        </div>  
      </div>
    </div>
    <script src="//code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

在清单2中，Bootstrap消除了我必须在较早的响应式设计代码中手动完成的工作。我不再需要专用CSS来处理和缩放框的大小，因为该页面使用了Bootstrap的网格系统。不需要CSS来仔细安排视觉间距，因为Bootstrap网格在块之间设置了良好的默认值。而且，我不需要任何CSS来进行媒体查询并在设计参数中设置响应，因为Bootstrap的响应功能可以完成这些任务。

您可以在清单2中看到div标签的嵌套。嵌套的div使用Bootstrap网格类。具有container类的div是整个固定网格布局的包装。每个具有row类的div在网格中定义一行框。具有span4类的div定义了一个跨4个框的块。带有span12类的div定义了一个跨12个框的块-页面的整个宽度。 Bootstrap具有span N类，用于跨越1到12之间的N个盒子。

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

图2.清单2中的浏览器输出

特定于站点CSS

图2中显示的页面的主要元素排列正确。但是该页面缺少样式元素，以使其更具吸引力，因此我为此添加一些CSS（示例代码中的 main.css）。 Bootstrap CSS本身是用LESS编写的，通常，我强烈建议使用LESS而不是普通CSS。但是对于这个简单的示例，清单3中的普通CSS就足够了：

清单3.用于向示例HTML（main.css）添加基本设计CSS

.widget-content {
  margin: 10px;
  padding: 1px;
  background-color: #DDDDDD;
}    

.widget-title {
  font-weight: bold;
  padding: 10px;
  background-color: #EEEEEE;
}    

.widget-text {
  padding: 10px;
  background-color: #FCFCFC;
}    


#footer {
  text-align: center;
  font-size: small;
}

当然，清单2中HTML现在需要为清单3中特定于站点CSS添加一个链接。在示例代码中，包含指向main.css的链接的更新后HTML位于main.html文件中。图3显示了生成的页面，该页面使main.css更具呈现性：

图3. main.html的浏览器输出

结语

对于我和其他许多在代码和数据上而不是视觉和其他感官设计上具有优势的人来说，Bootstrap是一个有价值的工具。我可以专注于Web项目的基本代码和数据，并将其简化为基本形状，然后与设计师合作来完善页面。 Bootstrap可帮助解决一些特别棘手的问题，例如移动设备的设计和其他小屏幕设置。它还带有按钮，导航样式和其他可重用工具的库。最重要的是，Bootstrap包含许多代码，以减少Web浏览器和平台之间的许多烦人的变化。

如此众多的项目使用Bootstrap，现在许多人可以立即识别基于Bootstrap的站点。这种认识有时会给人一种原始感。优秀的设计师不仅可以赋予Bootstrap生成的网站自己独特的特征，还可以确保该网站的基本元素和响应元素都针对其内容和用途进行了专门化设计。但是很少有考虑到这些考虑的项目起步。 Bootstrap对于快速将想法转变为Web项目特别有用。

翻译自: https://www.ibm.com/developerworks/opensource/library/wa-bootstrap/index.html