基于Bootstrap的网页设计实例
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1">
<title>首页菜单</title>
<linkhref="css/bootstrap.min.css"rel="externalnofollow"rel="stylesheet">
<styletype="text/css">
body{
padding-top:50px;
padding-bottom:50px;
}
.carousel{/*滚动图片样式*/
height:500px;
background-color:#000;
margin-bottom:60px;
}
.carousel.item{
height:500px;
background-color:#000;
}
.carouselimg{
width:100%;
}
.carousel-captionp{
margin-bottom:20px;
font-size:20px;
line-height:1.8;
}
#summary-container.col-md-4{
text-align:center;/*居中对齐*/
}
hr.divder{
margin:40px0;
}
.feature{
padding:30px0;
}
.feature-heading{
font-size:50px;
color:#2a6496;
margin-top:120px;
}
.feature-heading.text-muted{
font-size:28px;
color:#999;
}
</style>
</head>
<body>
<navclass="navbarnavbar-defaultnavbar-fixed-topnavbar-inverse"role="navigation">
<divclass="containe">
<divclass="navbar-header">
<buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#demo-navbar">
<spanclass="sr-only">Togglenavigation</span><!--Togglenavigation不能缺少-->
<spanclass="icon-bar"></span>
<spanclass="icon-bar"></span>
<spanclass="icon-bar"></span>
</button>
<aclass="navbar-brand"href="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">现代浏览器博物馆</a>
</div>
<!--导航栏-->
<divclass="collapsenavbar-collapse"id="demo-navbar">
<ulclass="navnavbar-nav">
<liclass="active"><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">综述</a></li>
<li><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">简述</a></li>
<liclass="dropdown">
<ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"class="dropdown-toggle"data-toggle="dropdown">特点<spanclass="caret"></span></a>
<ulclass="dropdown-menu"role="menu">
<li><ahref="#tab-chrome"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">Chrome</a></li>
<li><ahref="#tab-firefox"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">Firefox</a></li>
<li><ahref="#tab-safari"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">Safari</a></li>
<!--<liclass="divider"></li>//divider:分隔符-->
<li><ahref="#tab-opera"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">Opera</a></li>
<li><ahref="#tab-ie"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">IE9</a></li>
</ul>
</li>
<li><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"data-toggle="modal"data-target="#about">关于</a></li>
<li>
</ul>
</div>
</div>
</nav>
<divid="carousel-example-generic"class="carouselslide"data-ride="carousel">
<olclass="carousel-indicators">
<lidata-target="#carousel-example-generic"data-slide-to="0"class="active"></li>
<lidata-target="#carousel-example-generic"data-slide-to="1"></li>
<lidata-target="#carousel-example-generic"data-slide-to="2"></li>
<lidata-target="#carousel-example-generic"data-slide-to="3"></li>
<lidata-target="#carousel-example-generic"data-slide-to="4"></li>
</ol>
<divclass="carousel-inner"role="listbox">
<divclass="itemactive">
<imgsrc="images/chrome-big.jpg"alt="1slide">
<divclass="carousel-caption">
<h1>Chrome</h1>
<p>GoogleChrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器</p>
<p><aclass="btnbtn-lgbtn-primary"href="http://www.google.cn/intl/zh-CN/chrome/browser/"role="button"target="_blank">点击下载</a></p>
</div>
</div>
<divclass="item">
<imgsrc="images/firefox-big.jpg"alt="2slide">
<divclass="carousel-caption">
<h1>Firefox</h1>
<p>MozillaFirefox,中文名通常称为“火狐”或者“火狐浏览器”，是一个开源的网页浏览器</p>
<p><aclass="btnbtn-lgbtn-primary"href="http://www.firefox.com.cn/download/"role="button"target="_blank">点击下载</a></p>
</div>
</div>
<divclass="item">
<imgsrc="images/safari-big.jpg"alt="3slide">
<divclass="carousel-caption">
<h1>Safari</h1>
<p>Safari,是苹果计算机的最新操作系统MasOSX中的浏览器</p>
<p><aclass="btnbtn-lgbtn-primary"href="http://www.apple.com/cn/safari/"role="button"target="_blank">点击下载</a></p>
</div>
</div>
<divclass="item">
<imgsrc="images/opera-big.jpg"alt="4slide">
<divclass="carousel-caption">
<h1>Opera</h1>
<p>Opera浏览器,是一款挪威OperaSoftwareASA公司制作的支持多页面标签式的网络浏览器</p>
<p><aclass="btnbtn-lgbtn-primary"href="http://www.opera.com/zh-cn"role="button"target="_blank">点击下载</a></p>
</div>
</div>
<divclass="item">
<imgsrc="images/ie-logo.jpg"alt="5slide">
<divclass="carousel-caption">
<h1>IE</h1>
<p>InternetExplorer,简称IE，是微软公司推出的一款网页浏览器</p>
<p><aclass="btnbtn-lgbtn-primary"href="http://www.microsoft.com/zh-cn/download/"role="button"target="_blank">点击下载</a></p>
</div>
</div>
</div>
<aclass="leftcarousel-control"href="#carousel-example-generic"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"role="button"data-slide="prev">
<spanclass="glyphiconglyphicon-chevron-left"></span>
<spanclass="sr-only">上一页</span>
</a>
<aclass="rightcarousel-control"href="#carousel-example-generic"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"role="button"data-slide="next">
<spanclass="glyphiconglyphicon-chevron-right"></span>
<spanclass="sr-only">下一页</span>
</a>
</div>
<divclass="container"id="summary-container">
<divclass="row">
<divclass="col-md-4">
<imgclass="img-circle"src="images/chrome-logo-small.jpg"alt="chrome">
<h2>Chrome</h2>
<p>GoogleChrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器</p>
<p><aclass="btnbtn-default"href="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"role="button">点击下载</a></p>
</div>
<divclass="col-md-4">
<imgclass="img-circle"src="images/firefox-logo-small.jpg"alt="chrome">
<h2>Firefox</h2>
<p>MozillaFirefox,中文名通常称为“火狐”或者“火狐浏览器”，是一个开源的网页浏览器</p>
<p><aclass="btnbtn-default"href="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"role="button">点击下载</a></p>
</div>
<divclass="col-md-4">
<imgclass="img-circle"src="images/safari-logo-small.jpg"alt="chrome">
<h2>Safari</h2>
<p>Safari,是苹果计算机的最新操作系统MasOSX中的浏览器</p>
<p><aclass="btnbtn-default"href="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"role="button">点击下载</a></p>
</div>
</div>
<hrclass="divder">
<ulclass="navnav-tabs"role="tablist"id="tab-list">
<liclass="active"><ahref="#tab-chrome"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"role="tab"data-toggle="tab">Chrome</a></li>
<li><ahref="#tab-firefox"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"role="tab"data-toggle="tab">Firefox</a></li>
<li><ahref="#tab-safari"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"role="tab"data-toggle="tab">Safari</a></li>
<li><ahref="#tab-opera"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"role="tab"data-toggle="tab">Opera</a></li>
<li><ahref="#tab-ie"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"role="tab"data-toggle="tab">IE</a></li>
</ul>
<divclass="tab-content">
<divclass="tab-paneactive"id="tab-chrome">
<divclass="rowfeature">
<divclass="col-md-7">
<h2class="feature-heading">GoogleChrome<spanclass="text-muted">使用最广泛的浏览器</span></h2>
<pclass="lead">GoogleChrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。
该浏览器是基于其他开源软件撰写，包括Webkit,目标是提升稳定性，速度和安全性，并创造出简单且有效率的使用这界面
</p>
</div>
<divclass="col-md-5">
<imgclass="feature-imageimg-responsive"src="images/chrome-logo.jpg">
</div>
</div>
</div>
<divclass="tab-pane"id="tab-firefox">
<divclass="rowfeature">
<divclass="col-md-7">
<h2class="feature-heading">MozillaFirefox<spanclass="text-muted">燃烧的狐狸</span></h2>
<pclass="lead">MozillaFirefox,中文名称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，使用Gecko引擎(非ie内核)，支持多种操作系统如window、Mac和linux。</p>
</div>
<divclass="col-md-5">
<imgclass="feature-imageimg-responsive"src="images/firefox-logo.jpg">
</div>
</div>
</div>
<divclass="tab-pane"id="tab-safari">
<divclass="rowfeature">
<divclass="col-md-7">
<h2class="feature-heading">Safari<spanclass="text-muted">Mac用户首先</span></h2>
<pclass="lead">Safari，是苹果计算机的最新操作系统MacOSX中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。Safari在2003年1月7日首度发行测试版，并成为MacOSXv10.3与之后的默认浏览器，也是iPhone与TPAD和iPodtouch的指定浏览器。</p>
</div>
<divclass="col-md-5">
<imgclass="feature-imageimg-responsive"src="images/safari-logo.jpg">
</div>
</div>
</div>
<divclass="tab-pane"id="tab-opera">
<divclass="rowfeature">
<divclass="col-md-5">
<imgclass="feature-imageimg-responsive"src="images/opera-logo.jpg">
</div>
<divclass="col-md-7">
<h2class="feature-heading">Opera<spanclass="text-muted">小众但易用</span></h2>
<pclass="lead">Opera浏览器，是一款挪威OperaSoftwareASA公司制作的支持多也页面标签式浏览的网络浏览器。是跨平台浏览器可以在windowns，Mac和Linux三个操作系统平台上运行。</p>
</div>
</div>
</div>
<divclass="tab-pane"id="tab-ie">
<divclass="rowfeature">
<divclass="col-md-5">
<imgclass="feature-imageimg-responsive"src="images/ie-logo.jpg">
</div>
<divclass="col-md-7">
<h2class="feature-heading">IE<spanclass="text-muted">老招牌</span></h2>
<pclass="lead">InternetExplorer,原称MicrosoftInternetExplorer(7,8,9,10版本)，简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(内核)为Trident</p>
</div>
</div>
</div>
</div>
<hrclass="divider">
<footer>
<pclass="pull-right"><ahref="#top"rel="externalnofollow"rel="externalnofollow">回到顶部</a></p>
<divid="time"></div>
</footer>
</div>
<!--弹框-->
<divclass="modalfade"id="about">
<divclass="modal-dialog">
<divclass="modal-content">
<divclass="modal-header"><!--头部-->
<buttontype="button"class="close"data-dismiss="modal">
<spanaria-hidden="true">×</span>
<spanclass="sr-only">Close</span>
</button>
<h4class="modal-title">关于</h4>
</div>
<divclass="modal-body"><!--内容-->
<p>网站基于Bootstrap开发；设计风格简单清爽！内容是关于当今主流浏览器介绍，并附有下载资源。</p>
</div>
<divclass="modal-footer"><!--底部-->
<buttontype="button"class="btnbtn-default"data-dismiss="modal">了解</button>
<!--<buttontype="button"class="btnbtn-primary">Savechanges</button>-->
</div>
</div>
</div>
</div>
<scriptsrc="js/jquery-1.11.1.min.js"></script>
<scriptsrc="js/bootstrap.min.js"></script>
</body>
<script>
document.getElementById('time').innerHTML=newDate().toLocaleString();
setInterval("document.getElementById('time').innerHTML=newDate().toLocaleString();",1000);
$(document).ready(function(){
$("#demo-navbar.dropdown-menua").click(function(){
varhref=$(this).attr("href");
$("#tab-lista[href='"+href+"']").tab("show");
});
});
</script>
</html>
导航及下拉菜单制作
<navclass="navbarnavbar-defaultnavbar-fixed-topnavbar-inverse"role="navigation"> <divclass="containe"> <divclass="navbar-header"> <buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#demo-navbar"> <spanclass="sr-only">Togglenavigation</span><!--Togglenavigation不能缺少--> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> </button> <aclass="navbar-brand"href="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">现代浏览器博物馆</a> </div> <!--导航栏--> <divclass="collapsenavbar-collapse"id="demo-navbar"> <ulclass="navnavbar-nav"> <liclass="active"><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">综述</a></li> <li><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">简述</a></li> <liclass="dropdown"> <ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"class="dropdown-toggle"data-toggle="dropdown">特点<spanclass="caret"></span></a> <ulclass="dropdown-menu"role="menu"> <li><ahref="#tab-chrome"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">Chrome</a></li> <li><ahref="#tab-firefox"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">Firefox</a></li> <li><ahref="#tab-safari"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">Safari</a></li> <!--<liclass="divider"></li>//divider:分隔符--> <li><ahref="#tab-opera"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">Opera</a></li> <li><ahref="#tab-ie"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">IE9</a></li> </ul> </li> <li><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"data-toggle="modal"data-target="#about">关于</a></li> <li> </ul> </div> </div> </nav>
滚动图片广告
<divid="carousel-example-generic"class="carouselslide"data-ride="carousel"> <olclass="carousel-indicators"> <lidata-target="#carousel-example-generic"data-slide-to="0"class="active"></li> <lidata-target="#carousel-example-generic"data-slide-to="1"></li> <lidata-target="#carousel-example-generic"data-slide-to="2"></li> <lidata-target="#carousel-example-generic"data-slide-to="3"></li> <lidata-target="#carousel-example-generic"data-slide-to="4"></li> </ol> <divclass="carousel-inner"role="listbox"> <divclass="itemactive"> <imgsrc="images/chrome-big.jpg"alt="1slide"> <divclass="carousel-caption"> <h1>Chrome</h1> <p>GoogleChrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器</p> <p><aclass="btnbtn-lgbtn-primary"href="http://www.google.cn/intl/zh-CN/chrome/browser/"role="button"target="_blank">点击下载</a></p> </div> </div> <divclass="item"> <imgsrc="images/firefox-big.jpg"alt="2slide"> <divclass="carousel-caption"> <h1>Firefox</h1> <p>MozillaFirefox,中文名通常称为“火狐”或者“火狐浏览器”，是一个开源的网页浏览器</p> <p><aclass="btnbtn-lgbtn-primary"href="http://www.firefox.com.cn/download/"role="button"target="_blank">点击下载</a></p> </div> </div> <divclass="item"> <imgsrc="images/safari-big.jpg"alt="3slide"> <divclass="carousel-caption"> <h1>Safari</h1> <p>Safari,是苹果计算机的最新操作系统MasOSX中的浏览器</p> <p><aclass="btnbtn-lgbtn-primary"href="http://www.apple.com/cn/safari/"role="button"target="_blank">点击下载</a></p> </div> </div> <divclass="item"> <imgsrc="images/opera-big.jpg"alt="4slide"> <divclass="carousel-caption"> <h1>Opera</h1> <p>Opera浏览器,是一款挪威OperaSoftwareASA公司制作的支持多页面标签式的网络浏览器</p> <p><aclass="btnbtn-lgbtn-primary"href="http://www.opera.com/zh-cn"role="button"target="_blank">点击下载</a></p> </div> </div> <divclass="item"> <imgsrc="images/ie-logo.jpg"alt="5slide"> <divclass="carousel-caption"> <h1>IE</h1> <p>InternetExplorer,简称IE，是微软公司推出的一款网页浏览器</p> <p><aclass="btnbtn-lgbtn-primary"href="http://www.microsoft.com/zh-cn/download/"role="button"target="_blank">点击下载</a></p> </div> </div> </div> <aclass="leftcarousel-control"href="#carousel-example-generic"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"role="button"data-slide="prev"> <spanclass="glyphiconglyphicon-chevron-left"></span> <spanclass="sr-only">上一页</span> </a> <aclass="rightcarousel-control"href="#carousel-example-generic"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"role="button"data-slide="next"> <spanclass="glyphiconglyphicon-chevron-right"></span> <spanclass="sr-only">下一页</span> </a> </div>
栅格布局
<divclass="row"> <divclass="col-md-4"> <imgclass="img-circle"src="images/chrome-logo-small.jpg"alt="chrome"> <h2>Chrome</h2> <p>GoogleChrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器</p> <p><aclass="btnbtn-default"href="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"role="button">点击下载</a></p> </div> <divclass="col-md-4"> <imgclass="img-circle"src="images/firefox-logo-small.jpg"alt="chrome"> <h2>Firefox</h2> <p>MozillaFirefox,中文名通常称为“火狐”或者“火狐浏览器”，是一个开源的网页浏览器</p> <p><aclass="btnbtn-default"href="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"role="button">点击下载</a></p> </div> <divclass="col-md-4"> <imgclass="img-circle"src="images/safari-logo-small.jpg"alt="chrome"> <h2>Safari</h2> <p>Safari,是苹果计算机的最新操作系统MasOSX中的浏览器</p> <p><aclass="btnbtn-default"href="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"role="button">点击下载</a></p> </div> </div>
标签页
<divclass="tab-content"> <divclass="tab-paneactive"id="tab-chrome"> <divclass="rowfeature"> <divclass="col-md-7"> <h2class="feature-heading">GoogleChrome<spanclass="text-muted">使用最广泛的浏览器</span></h2> <pclass="lead">GoogleChrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。 该浏览器是基于其他开源软件撰写，包括Webkit,目标是提升稳定性，速度和安全性，并创造出简单且有效率的使用这界面 </p> </div> <divclass="col-md-5"> <imgclass="feature-imageimg-responsive"src="images/chrome-logo.jpg"> </div> </div> </div> <divclass="tab-pane"id="tab-firefox"> <divclass="rowfeature"> <divclass="col-md-7"> <h2class="feature-heading">MozillaFirefox<spanclass="text-muted">燃烧的狐狸</span></h2> <pclass="lead">MozillaFirefox,中文名称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，使用Gecko引擎(非ie内核)，支持多种操作系统如window、Mac和linux。</p> </div> <divclass="col-md-5"> <imgclass="feature-imageimg-responsive"src="images/firefox-logo.jpg"> </div> </div> </div> <divclass="tab-pane"id="tab-safari"> <divclass="rowfeature"> <divclass="col-md-7"> <h2class="feature-heading">Safari<spanclass="text-muted">Mac用户首先</span></h2> <pclass="lead">Safari，是苹果计算机的最新操作系统MacOSX中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。Safari在2003年1月7日首度发行测试版，并成为MacOSXv10.3与之后的默认浏览器，也是iPhone与TPAD和iPodtouch的指定浏览器。</p> </div> <divclass="col-md-5"> <imgclass="feature-imageimg-responsive"src="images/safari-logo.jpg"> </div> </div> </div> <divclass="tab-pane"id="tab-opera"> <divclass="rowfeature"> <divclass="col-md-5"> <imgclass="feature-imageimg-responsive"src="images/opera-logo.jpg"> </div> <divclass="col-md-7"> <h2class="feature-heading">Opera<spanclass="text-muted">小众但易用</span></h2> <pclass="lead">Opera浏览器，是一款挪威OperaSoftwareASA公司制作的支持多也页面标签式浏览的网络浏览器。是跨平台浏览器可以在windowns，Mac和Linux三个操作系统平台上运行。</p> </div> </div> </div> <divclass="tab-pane"id="tab-ie"> <divclass="rowfeature"> <divclass="col-md-5"> <imgclass="feature-imageimg-responsive"src="images/ie-logo.jpg"> </div> <divclass="col-md-7"> <h2class="feature-heading">IE<spanclass="text-muted">老招牌</span></h2> <pclass="lead">InternetExplorer,原称MicrosoftInternetExplorer(7,8,9,10版本)，简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(内核)为Trident</p> </div> </div> </div> </div>
弹出框制作
<divclass="modalfade"id="about"> <divclass="modal-dialog"> <divclass="modal-content"> <divclass="modal-header"><!--头部--> <buttontype="button"class="close"data-dismiss="modal"> <spanaria-hidden="true">×</span> <spanclass="sr-only">Close</span> </button> <h4class="modal-title">关于</h4> </div> <divclass="modal-body"><!--内容--> <p>网站基于Bootstrap开发；设计风格简单清爽！内容是关于当今主流浏览器介绍，并附有下载资源。</p> </div> <divclass="modal-footer"><!--底部--> <buttontype="button"class="btnbtn-default"data-dismiss="modal">了解</button> <!--<buttontype="button"class="btnbtn-primary">Savechanges</button>--> </div> </div> </div> </div>
底部设计
<footer> <pclass="pull-right"><ahref="#top"rel="externalnofollow"rel="externalnofollow">回到顶部</a></p> <divid="time"></div> <footer>
JS脚本
<script>
document.getElementById('time').innerHTML=newDate().toLocaleString();
setInterval("document.getElementById('time').innerHTML=newDate().toLocaleString();",1000);
$(document).ready(function(){
$("#demo-navbar.dropdown-menua").click(function(){
varhref=$(this).attr("href");
$("#tab-lista[href='"+href+"']").tab("show");
});
});
</script>
<navclass="navbarnavbar-defaultnavbar-fixed-topnavbar-inverse"role="navigation"> <divclass="containe"> <divclass="navbar-header"> <buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#demo-navbar"> <spanclass="sr-only">Togglenavigation</span><!--Togglenavigation不能缺少--> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> </button> <aclass="navbar-brand"href="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">现代浏览器博物馆</a> </div> <!--导航栏--> <divclass="collapsenavbar-collapse"id="demo-navbar"> <ulclass="navnavbar-nav"> <liclass="active"><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">综述</a></li> <li><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">简述</a></li> <liclass="dropdown"> <ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"class="dropdown-toggle"data-toggle="dropdown">特点<spanclass="caret"></span></a> <ulclass="dropdown-menu"role="menu"> <li><ahref="#tab-chrome"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">Chrome</a></li> <li><ahref="#tab-firefox"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">Firefox</a></li> <li><ahref="#tab-safari"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">Safari</a></li> <!--<liclass="divider"></li>//divider:分隔符--> <li><ahref="#tab-opera"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">Opera</a></li> <li><ahref="#tab-ie"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow">IE9</a></li> </ul> </li> <li><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"data-toggle="modal"data-target="#about">关于</a></li> <li> </ul> </div> </div> </nav>
以上所述是小编给大家介绍的基于Bootstrap的网页设计实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！