5分钟打造bootstrap网页

最新推荐文章于 2024-02-18 17:39:39 发布

ouyida3

最新推荐文章于 2024-02-18 17:39:39 发布

阅读量2.3k

点赞数 1

分类专栏：前端 Bootstrap

本文链接：https://blog.csdn.net/ouyida3/article/details/43865303

版权

前端同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

Bootstrap

6 篇文章 0 订阅

订阅专栏

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

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

<!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='nav-collapse' style="height: auto;">-->
			<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当然是不行的，太老了，我特意用它也看看是什么效果。