本文翻译自Bootstrap tutorial，英语功底棒棒的同学建议直接阅读原文，因本人水平过于丑陋，文中如有问题，请当做没看见。
简介
本教程介绍如何使用Bootstrap3来创建交互性网页模版。图1展示了本教程的成果，包括了交互性的导航，条幅，正文布局和页脚的设计。
图1.学习交互性设计
开始
开始本教程之前，你需要以下类库，跟随下面的步骤来完成。
1. 下载Bootstrap 3和JQuery2.1.4。
2. 下载完文件后，创建bootstrap3tutorial文件夹
3. 在创建的文件夹里面创建includes文件夹，再在此文件夹中创建bootstrap和jquery文件夹。
4. 将下载的Bootstrap 3的内容解压到bootstrap文件夹中，同时将下载的JQuery2.1.4文件放入到query文件夹中。
5. 然后在includes文件夹中，创建空白的styles.css文件。
6. 最后在bootsstrap3tutorial文件夹中创建空白的index.html文件。
完成上面的步骤后，你的文件夹结构应该和图2相同。
图2 文件夹结构
创建基本HTML文档
在创建你的Bootstrap模版前，你应该在index.html中添加必要的引用标签，如下所示：
（译者注：简书默认编辑器竟然不支持代码插入，所以我可耻的在原网站截屏代码了。）
（译者注2:这里你引入的文件要和你下载的文件一致，比如本文给出的JQuery的版本是2.1.4， 你在上图的倒数第4行代码就要改成<script src="includes/jquery/jquery-2.1.4.min.js"></script>）
注意这里JavaScript文件放到了页面的底部，而不是放在<head>标签中，这样做的目的是可以减少页面加载等待时间，浏览器显示内容是从上向下的，先显示内容和css文件，最后在加载JS大文件，可以给用户更好的体验。
在<head>标签中，添加了如下两个<meta>标签。
第一个的作用时指定编码，防止乱码。第二个作用是，能使页面更好的兼容移动设备。更多内容可以参考这里。
Bootstrap header和导航
Bootstrap提供了丰富的CSS集合用来创建导航栏，同时它还提供了使导航栏能在移动设备上自动切换页面布局的功能。更多内容你可以参考Bootstrap关于导航栏设计的文档。
下面展示的就是建立交互导航栏的代码，添加下面的代码index.html文件的<body>标签中。
header和nav是HTML5标签。上面的代码中，带有"navbar-toggle" class按钮标签的功能是处理页面在移动设备展示的效果，这个按钮可以使用户选择是否打开导航菜单，其中'data-toggle="collapse" 和 data-target=".navbar-collapse" ' 属性提供了该功能。显示效果如图3所示：
图3. pc和移动设备显示效果比较
The division element with the container class which wraps all the header content is re-sized using media queries based on the viewport size. 这种方式可以使header内容显示在页面合适的位置。容器的宽度根据浏览器的尺寸将被设置到1200px，992px或者768px这3种之一。
添加banner
使用container类可以方便的添加banner，添加如下代码刚才添加的<header>代码下，在<body>标签中。
使用Bootstrap网格（grid）系统创建内容块
Bootstrap提供了12格的网格系统方便开发者设计页面布局。更多内容请参考Bootstrap网格系统文档。
添加如下代码在刚才的banner代码后面：
container类可以使内容与其中的其他内容保持在同一行区域内。以上代码使用"col-md-9和col-md-3" class创建了左右两块区域。Bootstrap的12格网格系统保证了他们能在页面中自动适配合适的位置。
"md"代表了中型尺寸，更多的内容参考这里，包括"xs"(最小), "sm"(小), "lg"(大)等尺寸的使用教程。
"nav nav-pills nav-stacked" class提供了创建梯状式（stacked）的展示导航的形式。
当在移动设备展示时，左边区域的内容将移动到右边区域内容的下面，如图4所示：
图4. 自适应页面
创建页脚
使用Bootstrap网格系统可以轻松的创建分成3列的页脚，在index.html中添加如下代码：
该代码实现方式与上面的正文内容类似，都使用了Bootstrap的12格网格系统。
个性化
虽然Bootstrap提供的CSS已经能满足大部分需求了，但你可以创建自己的css文件进行个性化设计。
添加如下CSS代码到你的style.css文件，它实现了RevillWeb的主题。
等等，下面还有。。
使用该CSS，你将得到如图5 de xiao guo :
pic.5
总结
本教程展示了使用Bootstrap可以简单的创建良好的交互性界面，熟悉Bootstrap最好的方式是通读Bootstrap文档并且上手实战。希望你能通过本篇文档对你创建自己的页面有所帮助。
更多Bootstrap模版可以看这里，Bootstrap Responsive Theme。
（译者注：在原文没有找到源代码，所以你可以在这里找到index.html，style.css源码，其中bootstrap等引用换成了cdn服务。）
来首优美动听的音乐提起你的精气神吧，《夏洛特烦恼》的咱们屯里人（粤语版）
网友评论