带你疾速打造属于本身的Bootstrap站点【html5教程】

本篇文章给人人带来的内容是关于带你疾速打造属于本身的Bootstrap站点，有肯定的参考价值，有须要的朋侪可以参考一下，愿望对你有所协助。

迥殊声明：此篇文章由白牙依据Leon Revill的英文文章原名《Twitter Bootstrap Tutorial – Up and running with Twitter Bootstrap in 20 Minutes》举行翻译，全部译文带有我们本身的明白与头脑，假如译得不好或不对的处所还请偕行朋侪指导。如需转载此译文，需说明英文出处：http://www.revillwebdesign.com/twitter-bootstrap-tutorial以及作者相干信息

——作者：Leon Revill

——译者：白牙

这篇教程旨在让你在20分钟内学会运用twitter bootstrap竖立一个站点。看完这个教程后你应当可以运用bootstrap来竖立一个基本的相应式规划的页面，相识栅格体系，而且可以运用bootstrap导航、导航条和相识相应式设想的基本。这些全部都是运用twitter bootstrap所须要具有的学问。（引荐教程：bootstrap视频教程）

起首我们须要说的是twitter bootstrap是异常优异的一个前端开源框架，它为一切的组键都供应了细致的用例，让你可以轻易地经由过程复制黏贴而附加到你的设想中。

基本的HTML模板

我们须要以一个基本的HTML模板，如许我们可以把所须要的bootstrap文件包括进来。下面就是我们twitter bootstrap项目的开首，复制这些代码到一个文件中并将其命名为index.html。

<!DOCTYPE html>
  <head>
    <title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>
    <style type='text/css'>
      body {
        background-color: #CCC;
      }
    </style>
  </head>
  <body>

  </body>
</html>

这段代码中我们已增加了一些CSS使页面的背景呈亮灰色，由于如许我们可以轻易地在我们的设想中看见差别的列，使它越发轻易明白。

引入twitter bootstrap文件

为了运用twitter bootstrap我们仅仅须要把一个文件引入到我们的模板当中来，引入文件有许多种要领，假如你想相识这些要领请查阅相干文档。

基于本教程的起点，我们将会经由过程CDN来引入bootstrap-combined.min.css文件而不须要下载任何的文件。

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">

它可以使一切的twitter bootstrap CSS在我们的模板中见效。

Twitter Bootstrap的容器

bootstrap的container类是异常有效的，它能在页面中竖立一个居中的地区，然后我们可以把其他位置的内容放到内里。container类等价于竖立了一个具有静态宽度而且magin值为auto的一个居中的div框。twitter bootstrap的 container类的长处在于它是相应式的，它会以当前屏幕的宽度为基本盘算出最好的宽度予以有用。

在body标签中，运用container类竖立一个div。它会作为页面重要的安排其他代码的外层包裹。

假如你调解这个DIV的高度并将其背景色彩设置为白色，你所看到的结果会是如许：

题目和导航

如今我们已有一个处所可以增加分外的HTML代码，我们可以增加题目文本然后再竖立站点的重要导航条。

到场以下的文本或许你挑选的笔墨到container类的div标签当中。

<h1>TWITTER BOOTSTRAP TUTORIAL</h1>

如今并没有若干新的东西，这仅仅是一个题目，让我们转移到更风趣的方面，twitter bootstrap导航。

Bootstrap 有一个nav类让我们可以竖立林林总总的导航元素，你可以在h1标签以后到场以下的代码。

<div class='navbar navbar-inverse'>
  <div class='nav-collapse' style="height: auto;">
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page One</a></li>
      <li><a href="#">Page Two</a></li>
    </ul>
  </div>
  </div>

navbar相干的类具有导航条一切的款式，增加navbar-inverse类将会运用一个很酷的黑色作风，这是一个twitter bootstrap的罕见搭配。我发起在这个款式的基本上举行拓展从而制造你的举世无双的导航。但在这个教程中我们仍然会运用基本的bootstrap款式。

在类为navbar的DIV当中，我们增加另一个类为nav-collapse的DIV并为其增加行内款式height:auto；这是通知bootstrap当这个页面在小于970px宽度的浏览器窗口当中时，它会供应一个紧缩的切换视图。

假如你保留了index.html文件然后在浏览器中翻开，当你调解浏览器窗口的宽度时你就可以看到这个变化，如图所示。

大于979px

小于979px

别的，我们可以增加nav类到一个HTML无序列表元素中以便从bootstrap CSS文件中运用更多的款式，也可以增加一个active类到“HOME”列表项中。

主内容和侧边栏

我们已完成了站点的主导航，如今我们须要增加重要内容区和一个侧边栏来支撑更多的链接或导航途径。请把下面的代码增加到导航条以后。

<div id='content' class='row-fluid'>
  <div class='span9 main'>
    <h2>Main Content Section</h2>
  </div>
  <div class='span3 sidebar'>
    <h2>Sidebar</h2>
  </div>
  </div>

这正是我们须要弄懂的bootstrap的栅格体系，固然，bootstrap的官方文档中涵盖了更多的细节，但我们将会以基本最先,让你更好地明白它。

栅格体系利用了12列的规划，这意味着一个页面可以被分割成12个雷同的列。下面这张从bootstrap官方文档中拿到的图片给出了一个很好的展现。

在我们方才黏贴在导航条下面的代码中你可以看到名为span9和span3的类。它们会把页面分割成左侧9列宽度和右侧3列宽度的两部分，构成我们的内容地区和侧边栏。运用栅格体系的个中一个优点就是它会依据视窗宽度动态盘算出列的宽度，因而你不须要写任何的媒体查询也能使你的站点事情在任何的屏幕分辨率下。

你可以经由过程转变span的数目和调解浏览器的大小来视察它们的结果。你会注意到当内容区小于724px的时刻，这些列会垂直地堆放。

如今我们在主内容地区把以下文本或许任何其他的文本放在在h2标签以后，这只是为了把页面拉长一点。

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> 
<p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

如今站点会像以下显现：

侧边栏导航

你可以在这里看到一切的Twitter bootstrap为我们供应的导航元素。

我们将要运用垂直选项卡来竖立一个分外的导航区。复制和黏贴下面的代码到sidebar的h2标签以后。

<ul class="nav nav-tabs nav-stacked">
  <li><a href='#'>Another Link 1</a></li>
  <li><a href='#'>Another Link 2</a></li>
  <li><a href='#'>Another Link 3</a></li>
</ul>

这是一个简朴的展现！上面的代码照字面明白仅仅是一个具有类为nav-tabs和nav-stacked的无序列表，但它却为我们制造了一个导航面板。

看看末了的结果，一个基于twitter bootstrap的相应式设想的页面完成了。