Bootstrap 简介

方针

Bootstrap是最盛行的前端结构,现在现已发布了它的第三个版别(v3.0.0)。本教程将带您开端学习 Bootstrap 3。

您还将看到怎么运用自界说异乎寻常的结构的框特征,比方运用网格创立布局,经过 nav 创立导航,运用 carousal 创立下拉框,增加交际插件和 Google Map 等第三方插件。

screenshot of the demo


什么是 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?


下载并了解文件结构

您能够从 或 上下载 Bootstrap Version 3.0.0。咱们运用的是榜首个,您也能够运用第二个。

此外,咱们供给下载的代码包括了一个经过榜首个链接下载的 bootstrap 代码文件夹。这儿边也包括了用来定制 Bootstrap 的原始的 css 的 custom.css。

解压缩后,您会发现,在根文件夹 bootstrap-3.0.0 内有一些文件和文件夹。

首要的 CSS 文件 - bootstrap.css 以及它的简化版 bootstrap-min.css,坐落根文件夹 bootstrap-3.0.0 下 的 'dist' 文件夹中的 'css' 文件夹中。

在 'dist' 内,有一个 'js' 文件夹,包括了首要的 JavaScript 文件 bootstrap.js 以及它的简化版。

在根文件内,有一个独自的 'js' 文件夹,包括了不同文件中的不同的 JavaScript 插件。

在根文件内的 'assets' 内,会找到另一个 'js' 文件夹。这儿放置着 HTML5 shim 的 html5shiv.js,用于取得 IE8 支撑。还有一个 respond.min.js 文件,用于支撑 IE8 中的多媒体查询。该文件夹还包括了 Bootstrap 的 js 插件依靠的 jquery.js。

在相同的文件夹内,有一个 'ico' 文件夹,包括了 favicon 图标和各种移动设备图标。

在同一途径中的 'css' 文件夹,包括了文档的 css 文件。

'_includes' 和 '_layouts' 文件夹包括了一些默许的布局结构文件,这些或许对快速原型规划很有用。

根文件夹内的 'less' 文件夹包括了一些 .less 文件。假如您要根据 LESS 进行开发,这些文件将会很有用。

在根文件夹内,有一些文件。一些是用于根底原型规划的 HTML 文件,一些是用于根据 Bower 编译的 bower.json、browserstack.json。除此之外,还有 composer.json 和一个 YAML 文件 _config.yml。

除了从给定的链接进行下载,您还能够运用下面的指令编译一切的 CSS、JS 文件 -

$ bower install bootstrap

您能够仿制 Bootstrap 的 Git 陈述

git clone git://github.com/twbs/bootstrap.git

本教程中,咱们仅仅下载了 Zip 文件,并不对它进行运用。

一旦您学习了本教程,咱们鼓舞您经过 bower 装置结构来了解它是怎么作业的。

NetDNA 支撑编译和简化版的 Bootstrap CSS、Js 和其他主题 css。您能够经过以下句子对它们进行引证

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

经过 Bootstrap v3.0.0 进行开发

根本的 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、用于平板manbet的 sm、用于笔记本manbet和更小的桌面屏幕的 md,用于大的桌面屏幕的 lg。这是榜首种办法。y 的值能够是任何正整数,但网格中列的总数有必要不超越 12 个。在咱们的项目中,为简略起见咱们现已运用了 lg,但已然咱们现已这样做了,您或许拿一个手机或平板manbet观看项目站点,以进行比较。

在后边的教程中,咱们将有一个 Bootstrap 网格体系的完好教程,来评论它诱人的呼应特性。

在这个实例中,咱们想让榜首行的三个列宽度持平,所以咱们对一切的列运用 'col-lg-4'。在第二行中,咱们想让六个列宽度持平,所以咱们对一切的列运用 'col-lg-2'。

下面是包括两个行的网格的符号,榜首行有三列,第二行有六列。

<div class="row barone">
<div class="col-lg-2">
<p><img src="http://www.codeforacause.net/w3cschool/wp-content/uploads/2013/10/php.png"></p>
</div>
<div class="col-lg-2">
<p><img src="http://www.codeforacause.net/w3cschool/wp-content/uploads/2013/10/mysql-logo.jpg"></p>
</div>
<div class="col-lg-2">
<p><img src="http://www.codeforacause.net/w3cschool/wp-content/uploads/2013/10/javascript-logo.png"></p>
</div>
<div class="col-lg-2">
<p><img src="http://www.codeforacause.net/w3cschool/wp-content/uploads/2013/10/java.jpg"></p>
</div>
<div class="col-lg-2">
<p><img src="http://www.codeforacause.net/w3cschool/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 的项目。可是咱们仅仅触摸了表层,后边的章节将会进行更具体的解说。