带你快速打造属于自己的Bootstrap站点-木庄网络博客

本文摘自PHP中文网，作者不言，侵删。

本篇文章给大家带来的内容是关于带你快速打造属于自己的Bootstrap站点，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

特别声明：此篇文章由白牙根据Leon Revill的英文文章原名《Twitter Bootstrap Tutorial ?C 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文件而不需要下载任何的文件。

1	`<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的高度并将其背景颜色设置为白色，你所看到的效果会是这样：

微信截图_20190125110126.png

标题和导航

现在我们已经有一个地方可以添加额外的HTML代码，我们可以添加标题文本然后再创建站点的主要导航条。

加入如下的文本或者你选择的文字到container类的div标签当中。

1	`<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>