如何用 bootstrap 创建一个网站
发布网友
发布时间：2022-04-25 08:41
共1个回答
热心网友
时间：2022-04-19 22:14
基本的HTML模板
我们需要以一个基本的HTML模板，这样我们能够把所需要的bootstrap文件包含进来。下面就是我们* 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使页面的背景呈亮灰色，因为这样我们能够轻易地在我们的设计中看见不同的列，使它更加容易理解。
引入* bootstrap文件
为了使用* bootstrap我们仅仅需要把一个文件引入到我们的模板当中来，引入文件有很多种方法，如果你想了解这些方法请查阅相关文档。
基于本教程的出发点，我们将会通过CDN来引入bootstrap-combined.min.css文件而不需要下载任何的文件。
<link href="http://netdna.bootstrapcdn.com/*-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
它能够使所有的* bootstrap CSS在我们的模板中生效。
Twitter Bootstrap的容器
bootstrap的container类是非常有用的，它能在页面中创建一个居中的区域，然后我们能够把其他位置的内容放到里面。container类等价于创建了一个具有静态宽度并且magin值为auto的一个居中的div框。* bootstrap的 container类的优点在于它是响应式的，它会以当前屏幕的宽度为基础计算出最佳的宽度予以实用。
在body标签中，使用container类创建一个div。它会作为页面主要的放置其他代码的外层包裹。
如果调整这个DIV的高度并将其背景颜色设置为白色，你所看到的效果会是这样：
标题和导航
现在我们已经有一个地方可以添加额外的HTML代码，我们可以添加标题文本然后再创建站点的主要导航条。
加入如下的文本或者你选择的文字到container类的div标签当中。
<h1>TWITTER BOOTSTRAP TUTORIAL</h1>
现在并没有多少新的东西，这仅仅是一个标题，让我们转移到更有趣的方面，* 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类将会应用一个很酷的黑色风格，这是一个* bootstrap的常见搭配。我建议在这个样式的基础上进行拓展从而创造你的独一无二的导航。但在这个教程中我们仍然会使用基础的bootstrap样式。
在类为navbar的DIV当中，我们添加另一个类为nav-collapse的DIV并为其添加行内样式height:auto；这是告诉bootstrap当这个页面在小于970px宽度的浏览器窗口当中时，它会提供一个压缩的切换视图。
如果保存了index.html文件然后在浏览器中打开，当调整浏览器窗口的宽度时你就能够看到这个变化。
另外，可以添加nav类到一个HTML无序列表元素中以便从bootstrap CSS文件中应用更多的样式，也可以添加一个active类到“HOME”列表项中。
