5分钟打造bootstrap网页

来源：互联网发布：mac暗影格斗2无限钻石编辑：程序博客网时间：2024/05/17 08:46

如果你够快，其实不需要5分钟，也需1分钟就够了。

首先，创建一个空白的index.html文件，拷贝以下代码：

[html] view plaincopy

<!DOCTYPE html>
<head>
<title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>
<link
href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css"
rel="stylesheet">
<style type='text/css'>
body {
background-color: #CCC;
}
#content {
background-color: #FFF;
border-radius: 5px;
}
#content .main {
padding: 20px;
}
#content .sidebar {
padding: 10px;
}
#content p {
line-height: 30px;
}
</style>
</head>
<body>
<div class='container'>
<h1>TWITTER BOOTSTRAP TUTORIAL</h1>
<div class='navbar navbar-inverse'>
<div class='navbar-inner 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>
<div id='content' class='row-fluid'>
<div class='span9 main'>
<h2>Main Content Section</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>
</div>
<div class='span3 sidebar'>
<h2>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>
</div>
</div>
</div>
</body>
</html>

然后分别用Google Chrome浏览器（我的版本是40.0.2214.94 m）、firefox（35.0.1）、360（7.1.1.529）、ie8（8.0.0.6001）打开，除了ie8，其他三个浏览器基本都是当前最新版了（360当前最新是7.1.1.556），如下图。可以看出了，除了ie8，其他3个浏览器都没啥问题，样式很漂亮，当你放大或缩小时会自动响应大小。IE8当然是不行的，太老了，我特意用它也看看是什么效果。

将firefox缩小，如下图：

几点注意事项：

1、这里只用了bootstrap的bootstrap-combined.min.css，只是非常简单的一个例子；

2、bootstrap-combined.min.css的引入，这里是用了cdn，当然，你也可以下载整个bootstrap到本地然后引入；

3、bootstrap-combined.min.css的引入必须在你页面自定义的<style type='text/css'>前面，如果放在后面样式会被覆盖；

4、cdn引入的时候，前面必须是http://netdna.这样有http的。我从原地址直接查看源代码，只有//netdna（不知是否浏览器问题），没有了http我本地试了是不行的；

5、TAB标题“HOME”的样式应该是class='navbar-inner nav-collapse'，然后有篇中文翻译文章却写成class='nav-collapse'，是错误的；

6、现在最新是3.3.2版本，这个例子还用的是2.3版本，请注意。

该网页的原地址：http://www.revillwebdesign.com/demos/bootstraptutorial/#

源代码网址：https://github.com/RevillWeb/bootstrap-tutorial

搭建该网页的说明原文地址：http://www.revillweb.com/tutorials/bootstrap-tutorial/

参考的中文翻译的地址：http://www.w3cplus.com/css/twitter-bootstrap-tutorial.html

0 0