bootstrap框架搭建页面

2015-09-23 16:04作者：yezheng

本文介绍用bootstrap框架搭建的页面，有需要的朋友来看吧

源代码如下：

<!DOCTYPE html>

<head>

<title>现代浏览器博物馆</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

body {

padding-top: 50px;

padding-bottom: 40px;

color: #5a5a5a;

}

/* 轮播广告 */

.carousel {

height: 500px;

margin-bottom: 60px;

}

.carousel .item {

height: 500px;

background-color: #000;

}

.carousel .item img {

width: 100%;

}

.carousel-caption {

z-index: 10;

}

.carousel-caption p {

margin-bottom: 20px;

font-size: 20px;

line-height: 1.8;

}

/* 简介 */

.summary {

padding-right: 15px;

padding-left: 15px;

}

.summary .col-md-4 {

margin-bottom: 20px;

text-align: center;

}

/* 特性 */

.feature-divider {

margin: 40px 0;

}

.feature {

padding: 30px 0;

}

.feature-heading {

font-size: 50px;

color: #2a6496;

}

.feature-heading .text-muted {

font-size: 28px;

}

/* 响应式布局 */

@media (max-width: 768px) {

.summary {

padding-right: 3px;

padding-left: 3px;

}

.carousel {

height: 300px;

margin-bottom: 30px;

}

.carousel .item {

height: 300px;

}

.carousel img {

min-height: 300px;

}

.carousel-caption p {

font-size: 16px;

line-height: 1.4;

}

.feature-heading {

font-size: 34px;

}

.feature-heading .text-muted {

font-size: 22px;

}

@media (min-width: 992px) {

.feature-heading {

margin-top: 120px;

}

</style>

</head>

<body>

</button>

<a class="navbar-brand" href="#">现代浏览器博物馆</a>

</div>

<li><a href="#feature-tab" data-tab="tab-chrome">Chrome</a></li>

<li><a href="#feature-tab" data-tab="tab-firefox">Firefox</a></li>

<li><a href="#feature-tab" data-tab="tab-safari">Safari</a></li>

<li><a href="#feature-tab" data-tab="tab-opera">Opera</a></li>

</ul>

</li>

</ul>

</div>

</ol>

<h1>Chrome</h1>

<p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>

<p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/"

role="button" target="_blank">点我下载</a></p>

</div>

<h1>Firefox</h1>

<p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>

<p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank"

role="button">点我下载</a></p>

</div>

<h1>Safari</h1>

<p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>

<p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" target="_blank"

role="button">点我下载</a></p>

</div>

<h1>Opera</h1>

<p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>

<p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" target="_blank"

role="button">点我下载</a></p>

</div>

<p>Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。</p>

<p><a class="btn btn-lg btn-primary" href="http://ie.microsoft.com/" target="_blank"

role="button">点我下载</a></p>

</div>

<a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span

class="glyphicon glyphicon-chevron-left"></span></a>

<a class="right carousel-control" href="#ad-carousel" data-slide="next"><span

class="glyphicon glyphicon-chevron-right"></span></a>

</div>

<h2>Chrome</h2>

<p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>

</div>

<h2>Firefox</h2>

<p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>

</div>

<h2>Safari</h2>

<p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>

</div>

<li class="active"><a href="#tab-chrome" role="tab" data-toggle="tab">Chrome</a></li>

<li><a href="#tab-firefox" role="tab" data-toggle="tab">Firefox</a></li>

<li><a href="#tab-safari" role="tab" data-toggle="tab">Safari</a></li>

<li><a href="#tab-opera" role="tab" data-toggle="tab">Opera</a></li>

</ul>

<h2 class="feature-heading">Google Chrome <span

class="text-muted">使用最广的浏览器</span></h2>

<p class="lead">Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。

该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</p>

</div>

<img class="feature-image img-responsive" src="images/chrome-logo.jpg"

alt="Chrome">

</div>

<img class="feature-image img-responsive" src="images/firefox-logo.jpg"

alt="Firefox">

</div>

<h2 class="feature-heading">Mozilla Firefox <span class="text-muted">美丽的狐狸</span>

</h2>

<p class="lead">Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，

使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。</p>

</div>

<h2 class="feature-heading">Safari <span class="text-muted">Mac用户首选</span></h2>

<p class="lead">Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。

Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后的默认浏览器，也是iPhone与IPAD和iPod touch的指定浏览器。</p>

</div>

<img class="feature-image img-responsive" src="images/safari-logo.jpg"

alt="Safari">

</div>

<img class="feature-image img-responsive" src="images/opera-logo.jpg"

alt="Opera">

</div>

<h2 class="feature-heading">Opera <span class="text-muted">小众但易用</span>

</h2>

<p class="lead">Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。

是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。.</p>

</div>

<p class="lead">Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet

Explorer(7，8，9，10版本)，

简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</p>

</div>

<img class="feature-image img-responsive" src="images/ie-logo.jpg"

alt="IE">

</div>

<div class="modal fade" id="about-modal" tabindex="-1" role="dialog" aria-labelledby="modal-label"

aria-hidden="true">

<button type="button" class="close" data-dismiss="modal"><span

aria-hidden="true">×</span><span class="sr-only">关闭</span></button>

</div>

<p>慕课网隶属于北京慕课科技中心(有限合伙)，是一家从事互联网免费教学的网络教育公司。秉承“开拓、创新、公平、分享”的精神，

将互联网特性全面的应用在教育领域，致力于为教育机构及求学者打造一站式互动在线教育品牌。</p>

</div>

</div>

</footer>

</div>

$(function () {

$('#ad-carousel').carousel();

$('#menu-nav .navbar-collapse a').click(function (e) {

var href = $(this).attr('href');

var tabId = $(this).attr('data-tab');

if ('#' !== href) {

e.preventDefault();

$(document).scrollTop($(href).offset().top - 70);

if (tabId) {

$('#feature-tab a[href=#' + tabId + ']').tab('show');

}

});

</script>

</body>

</html>