Bootstrap 2 简介 - Bootstrap 2 基础教程

Bootstrap 是最流行的前端框架

本教程我们将学习开始学习 Bootstrap 2

我们会学习到如何使用自定义与众不同的框架的框特征，比如使用网格创建布局，通过 nav 创建导航，使用 carousal 创建下拉框，添加社交插件和 Google Map 等第三方插件

什么是 Bootstrap

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架

在现代 Web 开发中，有几个几乎所有的 Web 项目中都需要的组件

Bootstrap 为您提供了所有这些基本的模块

Grid
Typography
Tables
Forms
Buttons
Responsiveness

此外，还有大量其他有用的前端组件，比如

Dropdowns
Navigation
Modals
Typehead
Pagination
Carousal
Breadcrumb
Tab
Thumbnails
Headers

等等

有了这些，你可以搭建一个 Web 项目，并让它运行地更快速更轻松

此外，由于整个框架是基于模块的，我们可以通过自己的 CSS 位，甚至是项目开始后的一个大整改，来进行自定义

它是基于几种最佳实践，我们认为这是一个很好的开始学习现代 Web 开发的时机，一旦掌握了 HTML 和 JavaScript/jQuery 的基本知识，我们就可以在 Web 开发中运用这些知识

虽然，也有批评，所有通过 Bootstrap 构建的项目看起来相同，我们可以不需要知道太多的 HTML + CSS 知识就可以构建一个网站

但是，我们需要明白，Bootstrap 是一个通用的框架，就像任何其他通用的东西，我们需要定制才能让它具有独特性。当我们要定制时，就需要深入研究，没有良好的 HTML + CSS 基础是不可行的

当然除了 Bootstrap，还有很多其他好的前端框架，使用哪种框架是开发人员的选择，但 Bootstrap 绝对是值得尝试的

通过 Bootstrap v2.3.2 进行开发

基本的 HTML

以下是将用于我们项目的基本的 HTML 结构

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap V3 template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="bootstrap-3.0.0/assets/js/html5shiv.js"></script>
      <script src="bootstrap-3.0.0/assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
  </body>
</html>

请注意，模板中添加的 html5shiv.js 和 respond.min.js 是用于获得 IE8 支持。在 Bootstrap 版本 3 中已经添加了这些文件。

我们在 Web 服务器的根文件夹内的 twitter-bootstrap 文件夹内，已经放置了 bootstrap-3.0.0 文件夹。我们创建的所有 HTML 文件将会放置在 twitter-bootstrap 内。之所以说明这点，是为了简化我们的开发过程。

定制

我们将 定制与众不同的 CSS 框样式 。所以，在不破坏原始的 CSS 文件的基础上（位于 bootstrap-3.0.0 的 dist 文件夹内），在相同的文件夹下，我们将创建一个独立的 CSS 文件，名为 custom.css。然后我们在 HTML 文件中，紧接在原始的 CSS 文件后面，引用这个 CSS 文件。这样，我们就能覆盖我们想要改变的默认的样式，但是，如果 Bootstrap 升级，原始的 CSS 文件也会在不破坏我们的定制的基础上随之更新。我们建议您在开发过程中也按照这种方法。

创建导航

如需创建导航，请在 HTML 文件中，紧跟着 body 的开始标签之后，添加下面的代码。

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <ul class="nav navbar-nav">
  <li><a href="new.html" class="navbar-brand">
<img src="logo.png"></a></li>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="price.html">Price</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li class="socials"><g:plusone annotation="inline" width="150"></g:plusone></li>
          <li class="socials"><div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div></li>
          <li class="socials"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
       </ul>
      </li>
  </ul>
</nav>

对于导航，Bootstrap 在容器层级中使用 'navbar' class。所以，它会分配给持有整个导航的 nav 元素。

我们已经使用了 'navbar-inverse' class 来改变导航栏的默认颜色，使用深色代替之前默认的浅色。'navbar-fixed-top' class 确保了当我们向下滚动 HTML 页面时，导航栏固定在顶部位置。

在 Bootstrap V3.0.0 中，当创建导航的时候使用 role="navigation" 是新增的 。Bootstrap 推荐这么使用，以便于导航栏 易于访问 。

在这一点上，我们在 custom.css 文件中向 body 增加了 'padding-top: 80px;'。您添加到 body 中作为顶部填充的像素可能会有所不同，但除非你这样做，导航栏之后的内容的顶端部分，将会被隐藏。

在容器 nav 内，我们有一个 class 为 'nav' 和 'navbar-nav' 的无序列表。在这个无序列表内，每个列表项都包含导航中的一个链接。

'navbar-brand' class 用于呈现品牌名称。我们已经使用了一个图像。由于图像的高度大于导航栏基线高度，在这里我们做一些自定义。把 '.navbar-nav>li>a' 的 'line-height' 属性从原来默认的 20px 增加到 50px，改变字体大小为 16px。

最右边的链接，我们已经增加了下拉框。对于添加到相关 li 中的 'dropdown' class，紧跟其后，添加一个带有 'dropdown-toggle' 和 'caret' 两个 class 的锚。这个锚实际上包含了我们项目中的锚文本 social。这个 li 则包含了一个无序列表，嵌套在列表中的每个列表项都包含了显示在下列框中的链接。

在下拉框中我们已经添加了 social 插件。第一个 li 包含了 Google Plus 标记，第二个 li 包含了 Facebook 标记，第三个 li 包含了显示 Twitter 按钮的标记和一些 js 脚本。

此外，您必须在 body 的开始标签后，添加下面的标记和脚本，以使 Facebook 按钮工作

<div id="fb-root"></div>

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

为了让 Twitter 按钮工作，我们在 body 的结束标签前，增加下面的脚本

(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();

我们使用下面的样式来添加一些额外的样式到 'socials' class 的 social 按钮。

.socials {
padding: 10px;
}

这样就完成了我们的导航。

通过 carousal 创建幻灯片

为了在项目的首页的导航栏下，创建一个幻灯片，我们将使用下面的标记

<div id="carousel-example-generic" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="computer.jpg" alt="...">
      <div class="carousel-caption">
        <h1>Large Desktops are everywhere</h1>
        <p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
      </div>
    </div>
    <div class="item">
      <img src="mobile.jpg" alt="...">
      <div class="carousel-caption">
        <h1>Mobiles are outnumbering desktops</h1>
        <p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
      </div>
    </div>
<div class="item">
      <img src="cloud1.jpg" alt="...">
      <div class="carousel-caption">
        <h1>Enterprises are adopting Cloud computing fast</h1>
        <p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div>
</div>

在 Carousal 中有四个部分。主容器使用一个带有 'carousel slide' class 的 div 标签定义。

然后是一个带有 'carousel-indicators' class 的有序列表。ol 中的每个列表项代表一个幻灯。当页面加载时，默认加载的幻灯带有 'active' class。当渲染时，您会在标题下面的小圆圈看到它们。

然后，每个幻灯（图像）被放置在一个带有 'item' class 的 div 标签中。每个项被嵌套在一个带有 'carousel-caption' class 的 div 中。carousel-caption 包含一些与图像一起显示为标题的标记。段落中包含一个 h1 和一个按钮，您也可以包含其他自己的标记。

最后一部分是用于控制下一个幻灯/上一个幻灯片。这是使用 'left' 和 'carousel-control' class 定义上一个，使用 'right' 和 'carousel-control' class 定义下一个。

'icon-prev' 和 'icon-next' class 用于下一个和上一个图标。

我们已经 在默认的 carousal 中做了一些定制 。我们希望字幕，指标和下一个/上一个图标被渲染成在默认位置之上的几个像素。

为了做到这点，我们在 custom.css 文件中添加下面的样式

.carousel-inner .item .carousel-caption {
position:absolute;
top: 200px
}
.carousel-indicators {
position: absolute;
top: 400px;
}
.navbar {
margin-bottom:0;
}
.navbar-nav>li>a {
line-height: 50px;
font-size: 16px
}

我们还定制了 h1，给它添加了一个 30 像素的底部边距。

h1 {
  margin-bottom: 30px
  }

响应图像

您可能已经注意到，在幻灯片中的每个图像，我们已经使用了 'img-responsive' class。这是一个 Bootstrap v3.0.0 中的新功能。 通过在 img 标签中使用 'img-responsive' class，Bootstrap 让图像响应 。

创建网格

在幻灯片下面，我们使用网格放置内容。通过一个带有 'container' class 的 div 开始一个网格。请注意，我们将要开发一个反应灵敏的网站，而不是之前版本的 Bootstrap，在这里，容器有一个单一的 class，默认是 responsive。

容器 div 嵌套了若干个带有 'row' class 的 div（第一行中有三个，第二行中有六个），用来创建 Bootstrap 网格的行。

每个行都有一个带有 'col-x-y' class 的 div，用来创建列。x 的值可以是：用于移动设备的 xs、用于平板电脑的 sm、用于笔记本电脑和更小的桌面屏幕的 md，用于大的桌面屏幕的 lg。这是第一种方法。y 的值可以是任何正整数，但网格中列的总数必须不超过 12 个。在我们的项目中，为简单起见我们已经使用了 lg，但既然我们已经这样做了，您可能拿一个手机或平板电脑观看项目站点，以进行比较。

在后面的教程中，我们将有一个 Bootstrap 网格系统的完整教程，来探讨它迷人的响应特性。

在这个实例中，我们想让第一行的三个列宽度相等，所以我们对所有的列使用 'col-lg-4'。在第二行中，我们想让六个列宽度相等，所以我们对所有的列使用 'col-lg-2'。

下面是包含两个行的网格的标记，第一行有三列，第二行有六列。

<div class="row barone">
<div class="col-lg-2">
<p><img src="http://www.twle.cn/wp-content/uploads/2013/10/php.png"></p>
</div>
<div class="col-lg-2">
<p><img src="http://www.twle.cn/wp-content/uploads/2013/10/mysql-logo.jpg"></p>
</div>
<div class="col-lg-2">
<p><img src="http://www.twle.cn/wp-content/uploads/2013/10/javascript-logo.png"></p>
</div>
<div class="col-lg-2">
<p><img src="http://www.twle.cn/wp-content/uploads/2013/10/java.jpg"></p>
</div>
<div class="col-lg-2">
<p><img src="http://www.twle.cn/wp-content/uploads/2013/10/postgresql.png"></p>
</div>
</div>

我们通过一个 hr 和一个带有下列标记的页脚结束网格

<hr>
<p>Copyright@2013-14 by ToDo App.</p>

使用表

在我们项目的 price.html 页面中，我们使用了表格来呈现一个价格表，标记如下所示

<table class="table table-bordered">
          <thead>
            <tr>
              <th>Features</th>
              <th>Individual</th>
              <th>Small Team</th>
              <th>Medium Team</th>
              <th>Enterprise</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><h3>No. Of users</h3></td>
              <td><span class="badge">One</span></td>
              <td><span class="badge">Five</span></td>
              <td><span class="badge">Fifteen</span></td>
              <td><span class="badge">Unlimited</span></td>
           </tr>
            <tr>
              <td><h3>Pro training</h3></td>
              <td><span class="badge">No</span></td>
              <td><span class="badge">Yes</span></td>
              <td><span class="badge">Yes</span></td>
              <td><span class="badge">Yes</span></td>
           </tr>
            <tr>
              <td><h3>Forum Support</h3></td>
              <td><span class="badge">Yes</span></td>
              <td><span class="badge">Yes</span></td>
              <td><span class="badge">Yes</span></td>
              <td><span class="badge">Yes</span></td>
           </tr>
    <tr>
              <td><h3>In person support</h3></td>
              <td><span class="badge">No</span></td>
              <td><span class="badge">No</span></td>
              <td><span class="badge">Yes</span></td>
              <td><span class="badge">Yes</span></td>
           </tr>
       <tr>
              <td><h3>Weekly webinars</h3></td>
              <td><span class="badge">No</span></td>
              <td><span class="badge">No</span></td>
              <td><span class="badge">Yes</span></td>
              <td><span class="badge">Yes</span></td>
           </tr>
     <tr>
              <td><h3>Price</h3></td>
              <td><button type="button" class="btn btn-warning btn-lg">$9/Month</button></td>
              <td><button type="button" class="btn btn-warning btn-lg">$19/Month</button></td>
              <td><button type="button" class="btn btn-warning btn-lg">$49/Month</button></td>
              <td><button type="button" class="btn btn-warning btn-lg">$99/Month</button></td>
           </tr>
        <tr>
              <td></td>
              <td><button type="button" class="btn btn-success btn-lg">Buy now</button></td>
              <td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
              <td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
              <td><button type="button" class="btn btn-success btn-lg"">Buy now</button></td>
           </tr>
          </tbody>
        </table>

使用 Bootstrap 原始 CSS 文件中的 'table' 和 'table-bordered' 两个 class。但是我们已经通过在 customize.css 文件中添加下面的 CSS 进行一些自定义来让表格看起来不一样

th {
background-color: #428bca;
color: #ec8007;
z-index: 10;
text-shadow: 1px 1px 1px #fff;
font-size: 24px;
}

使用徽章

我们使用 'badge' class 来在表格中显示一些文本。我们有带有下面 CSS 的自定义的 badge class

.badge {
background-color: #428bca;
color: #fff;
font-size: 22px;
}

对于该页面和 contact.html 页面，我们在 customize.css 中添加了另一个 CSS 规则

.container > h1 {
text-align: center;
}

这让 h1 居中对齐。

使用表单

在 contact.html 文件中，我们创建了三个列，在第一列中，我们嵌入一个表单。表单使用默认样式。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="email" class="col-lg-2 control-label">Email</label>
    <div class="col-lg-10">
      <input type="email" class="form-control" id="email" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="name" class="col-lg-2 control-label">Name</label>
    <div class="col-lg-10">
      <input type="text" class="form-control" id="name" placeholder="Name">
    </div>
  </div>
   <div class="form-group">
    <label for="country" class="col-lg-2 control-label">Country</label>
    <div class="col-lg-10">
      <select>
      <option>USA</option>
      <option>India</option>
      <option>UK</option>
      <option>Autralia</option>
      </select>
    </div>
  </div>
<div class="form-group">
    <label for="desc" class="col-lg-2 control-label">Message</label>
    <div class="col-lg-10">
      <textarea rows="5" cols="50"></textarea>
    </div>
  </div>

  <div class="form-group">
    <div class="col-lg-offset-2 col-lg-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

'form-horizontal' class 让表单保持水平对齐。 请注意，为了易于访问，添加 role="form"。这是版本 3.0.0 中的新特性。

为了定位每个表单控件，Bootstrap 3.0.0 使用了一个新的 'form-group' class。

在该页面中，网格的第二列，我们只是简单地放置了一些文本。

添加 Google 地图

在 contact.html 页面中，网格的第三列，我们添加了 Google Map（谷歌地图）。为了做到这一点，我们使用了下面的标记

<div id="map_canvas"></div>
  </div>

下面的 js 添加到 HTML 文件头部的页眉内

function initialize() {
        var map_canvas = document.getElementById('map_canvas');
        var map_options = {
          center: new google.maps.LatLng(23.244066, 87.861276),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(map_canvas, map_options)
      }
      google.maps.event.addDomListener(window, 'load', initialize);

在之前说的 js 之前，您必须添加下面的脚本标记

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

为了让地图正确呈现，您必须在 custom.css 中添加下面的样式

#map_canvas {
        width: 400px;
        height: 400px;
}

这就是如何创建一个简单的基于 Bootstrap V3.0.0 的项目。但是我们只是接触了表层，后面的章节将会进行更详细的讲解。