Bootstrap 简介
方针
Bootstrap是最盛行的前端结构，现在现已发布了它的第三个版别（v3.0.0）。本教程将带您开端学习 Bootstrap 3。
您还将看到怎么运用自界说异乎寻常的结构的框特征，比方运用网格创立布局，经过 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？
下载并了解文件结构
您能够从 或 上下载 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 的项目。可是咱们仅仅触摸了表层，后边的章节将会进行更具体的解说。
