首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于Bootstrap的网页设计实例

Posted in Javascript onMarch 01, 2017

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>首页菜单</title>
<link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<style type="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;
 }
 .carousel img{
  width: 100%;
 }
 .carousel-caption p{
  margin-bottom:20px;
  font-size: 20px;
  line-height: 1.8;
 }
 #summary-container .col-md-4{
  text-align:center;/*居中对齐*/
 }
 hr.divder{
  margin:40px 0;
 }
 .feature{
  padding: 30px 0;
 }
 .feature-heading{
  font-size:50px;
  color:#2a6496;
  margin-top:120px;
 }
 .feature-heading .text-muted{
  font-size: 28px;
  color:#999;
 }
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
 <div class="containe">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#demo-navbar">
    <span class="sr-only">Toggle navigation</span><!-- Toggle navigation不能缺少 -->
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>   
   </button>
   <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >现代浏览器博物馆</a>
  </div> 
  <!-- 导航栏 -->
  <div class="collapse navbar-collapse" id="demo-navbar">
   <ul class="nav navbar-nav">
    <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >综述</a></li>   
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >简述</a></li>   
    <li class="dropdown">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">特点 <span class="caret"></span></a>
     <ul class="dropdown-menu" role="menu">
      <li><a href="#tab-chrome" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Chrome</a></li>
      <li><a href="#tab-firefox" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Firefox</a></li>
      <li><a href="#tab-safari" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Safari</a></li>
      <!-- <li class="divider"></li> //divider:分隔符 -->
      <li><a href="#tab-opera" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Opera</a></li>
      <li><a href="#tab-ie" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >IE9</a></li>
     </ul>
    </li>   
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="modal" data-target="#about">关于</a></li>   
    <li>   
   </ul>
  </div>
 </div>
</nav>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <ol class="carousel-indicators">
  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  <li data-target="#carousel-example-generic" data-slide-to="4"></li>
 </ol>
 <div class="carousel-inner" role="listbox">
  <div class="item active">
   <img src="images/chrome-big.jpg" alt="1 slide">
   <div class="carousel-caption">
    <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>
  </div>
  <div class="item">
   <img src="images/firefox-big.jpg" alt="2 slide" >
   <div class="carousel-caption">
    <h1>Firefox</h1>
    <p>Mozilla Firefox,中文名通常称为“火狐”或者“火狐浏览器”，是一个开源的网页浏览器</p>
    <p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" role="button" target="_blank">点击下载</a></p>
   </div>
  </div>
  <div class="item">
   <img src="images/safari-big.jpg" alt="3 slide" >
   <div class="carousel-caption">
    <h1>Safari</h1>
    <p>Safari,是苹果计算机的最新操作系统Mas OS X中的浏览器</p>
    <p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" role="button" target="_blank">点击下载</a></p>
   </div>
  </div>
  <div class="item">
   <img src="images/opera-big.jpg" alt="4 slide" >
   <div class="carousel-caption">
    <h1>Opera</h1>
    <p>Opera浏览器,是一款挪威Opera Software ASA公司制作的支持多页面标签式的网络浏览器</p>
    <p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" role="button" target="_blank">点击下载</a></p>
   </div>
  </div>
  <div class="item">
   <img src="images/ie-logo.jpg" alt="5 slide" >
   <div class="carousel-caption">
    <h1>IE</h1>
    <p>Internet Explorer,简称IE，是微软公司推出的一款网页浏览器</p>
    <p><a class="btn btn-lg btn-primary" href="http://www.microsoft.com/zh-cn/download/" role="button" target="_blank">点击下载</a></p>
   </div>
  </div>
 </div>
 <a class="left carousel-control" href="#carousel-example-generic" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
  <span class="sr-only">上一页</span>
 </a>
 <a class="right carousel-control" href="#carousel-example-generic" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
  <span class="sr-only">下一页</span>
 </a>
</div>
<div class="container" id="summary-container">
 <div class="row">
  <div class="col-md-4">
  <img class="img-circle" src="images/chrome-logo-small.jpg" alt="chrome">
  <h2>Chrome</h2>
  <p>Google Chrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器</p>
  <p><a class="btn btn-default" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">点击下载</a></p>
  </div>
  <div class="col-md-4">
  <img class="img-circle" src="images/firefox-logo-small.jpg" alt="chrome">
  <h2>Firefox</h2>
  <p>Mozilla Firefox,中文名通常称为“火狐”或者“火狐浏览器”，是一个开源的网页浏览器</p>
  <p><a class="btn btn-default" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">点击下载</a></p>
  </div>
  <div class="col-md-4">
  <img class="img-circle" src="images/safari-logo-small.jpg" alt="chrome">
  <h2>Safari</h2>
  <p>Safari,是苹果计算机的最新操作系统Mas OS X中的浏览器</p>
  <p><a class="btn btn-default" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">点击下载</a></p>
  </div>
 </div>
 <hr class="divder">
 <ul class="nav nav-tabs" role="tablist" id="tab-list">
  <li class="active"><a href="#tab-chrome" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="tab" data-toggle="tab">Chrome</a></li>
  <li><a href="#tab-firefox" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="tab" data-toggle="tab">Firefox</a></li>
  <li><a href="#tab-safari" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="tab" data-toggle="tab">Safari</a></li>
  <li><a href="#tab-opera" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="tab" data-toggle="tab">Opera</a></li>
  <li><a href="#tab-ie" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="tab" data-toggle="tab">IE</a></li>
 </ul>
 <div class="tab-content">
  <div class="tab-pane active" id="tab-chrome">
   <div class="row feature">
   <div class="col-md-7">
    <h2 class="feature-heading">Google Chrome <span class="text-muted">使用最广泛的浏览器</span></h2>
    <p class="lead">Google Chrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。
    该浏览器是基于其他开源软件撰写，包括Webkit,目标是提升稳定性，速度和安全性，并创造出简单且有效率的使用这界面
    </p>
   </div>
   <div class="col-md-5">
    <img class="feature-image img-responsive" src="images/chrome-logo.jpg">
   </div>
  </div>
  </div>
  <div class="tab-pane" id="tab-firefox">
  <div class="row feature">
   <div class="col-md-7">
    <h2 class="feature-heading">Mozilla Firefox<span class="text-muted">燃烧的狐狸</span></h2>
    <p class="lead">Mozilla Firefox,中文名称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，使用Gecko引擎(非ie内核)，支持多种操作系统如window、Mac和linux。</p>
   </div>
   <div class="col-md-5">
    <img class="feature-image img-responsive" src="images/firefox-logo.jpg">
   </div>
  </div>
  </div>
  <div class="tab-pane" id="tab-safari">
  <div class="row feature">
   <div class="col-md-7">
    <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与TPAD和iPod touch的指定浏览器。</p>
   </div>
   <div class="col-md-5">
    <img class="feature-image img-responsive" src="images/safari-logo.jpg">
   </div>
  </div>
  </div>
  <div class="tab-pane" id="tab-opera">
  <div class="row feature">
   <div class="col-md-5">
    <img class="feature-image img-responsive" src="images/opera-logo.jpg">
   </div>
   <div class="col-md-7">
    <h2 class="feature-heading">Opera<span class="text-muted">小众但易用</span></h2>
    <p class="lead">Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多也页面标签式浏览的网络浏览器。是跨平台浏览器可以在windowns，Mac和Linux三个操作系统平台上运行。</p>
   </div>
  </div>
  </div>
  <div class="tab-pane" id="tab-ie">
  <div class="row feature">
   <div class="col-md-5">
    <img class="feature-image img-responsive" src="images/ie-logo.jpg">
   </div>
   <div class="col-md-7">
    <h2 class="feature-heading">IE<span class="text-muted">老招牌</span></h2>
    <p class="lead">Internet Explorer,原称Microsoft Internet Explorer(7,8,9,10版本)，简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(内核)为Trident</p>
   </div>
  </div>
  </div>
 </div>
 <hr class="divider">
 <footer>
  <p class="pull-right"><a href="#top" rel="external nofollow" rel="external nofollow" >回到顶部</a></p>
  <div id="time"></div>
 </footer>
</div>
<!-- 弹框 -->
<div class="modal fade" id="about">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header"><!-- 头部 -->
    <button type="button" class="close" data-dismiss="modal">
    <span aria-hidden="true">×</span>
    <span class="sr-only">Close</span>
    </button>
    <h4 class="modal-title">关于</h4>
   </div>
   <div class="modal-body"><!-- 内容 -->
   <p>网站基于Bootstrap开发；设计风格简单清爽！内容是关于当今主流浏览器介绍，并附有下载资源。</p>
   </div>
   <div class="modal-footer"><!-- 底部 -->
    <button type="button" class="btn btn-default" data-dismiss="modal">了解</button>
    <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
   </div>
  </div>
 </div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
<script>  
document.getElementById('time').innerHTML=new Date().toLocaleString();  
setInterval("document.getElementById('time').innerHTML=new Date().toLocaleString();",1000);
$(document).ready(function(){
 $("#demo-navbar .dropdown-menu a").click(function(){
  var href=$(this).attr("href");
  $("#tab-list a[href='"+href+"']").tab("show");
 });
});
</script> 
</html>

导航及下拉菜单制作

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
 <div class="containe">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#demo-navbar">
    <span class="sr-only">Toggle navigation</span><!-- Toggle navigation不能缺少 -->
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>   
   </button>
   <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >现代浏览器博物馆</a>
  </div> 
  <!-- 导航栏 -->
  <div class="collapse navbar-collapse" id="demo-navbar">
   <ul class="nav navbar-nav">
    <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >综述</a></li>   
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >简述</a></li>   
    <li class="dropdown">
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">特点 <span class="caret"></span></a>
     <ul class="dropdown-menu" role="menu">
      <li><a href="#tab-chrome" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Chrome</a></li>
      <li><a href="#tab-firefox" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Firefox</a></li>
      <li><a href="#tab-safari" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Safari</a></li>
      <!-- <li class="divider"></li> //divider:分隔符 -->
      <li><a href="#tab-opera" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Opera</a></li>
      <li><a href="#tab-ie" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >IE9</a></li>
     </ul>
    </li>   
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="modal" data-target="#about">关于</a></li>   
    <li>   
   </ul>
  </div>
 </div>
</nav>

滚动图片广告

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <ol class="carousel-indicators">
  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  <li data-target="#carousel-example-generic" data-slide-to="4"></li>
 </ol>
 <div class="carousel-inner" role="listbox">
  <div class="item active">
   <img src="images/chrome-big.jpg" alt="1 slide">
   <div class="carousel-caption">
    <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>
  </div>
  <div class="item">
   <img src="images/firefox-big.jpg" alt="2 slide" >
   <div class="carousel-caption">
    <h1>Firefox</h1>
    <p>Mozilla Firefox,中文名通常称为“火狐”或者“火狐浏览器”，是一个开源的网页浏览器</p>
    <p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" role="button" target="_blank">点击下载</a></p>
   </div>
  </div>
  <div class="item">
   <img src="images/safari-big.jpg" alt="3 slide" >
   <div class="carousel-caption">
    <h1>Safari</h1>
    <p>Safari,是苹果计算机的最新操作系统Mas OS X中的浏览器</p>
    <p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" role="button" target="_blank">点击下载</a></p>
   </div>
  </div>
  <div class="item">
   <img src="images/opera-big.jpg" alt="4 slide" >
   <div class="carousel-caption">
    <h1>Opera</h1>
    <p>Opera浏览器,是一款挪威Opera Software ASA公司制作的支持多页面标签式的网络浏览器</p>
    <p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" role="button" target="_blank">点击下载</a></p>
   </div>
  </div>
  <div class="item">
   <img src="images/ie-logo.jpg" alt="5 slide" >
   <div class="carousel-caption">
    <h1>IE</h1>
    <p>Internet Explorer,简称IE，是微软公司推出的一款网页浏览器</p>
    <p><a class="btn btn-lg btn-primary" href="http://www.microsoft.com/zh-cn/download/" role="button" target="_blank">点击下载</a></p>
   </div>
  </div>
 </div>
 <a class="left carousel-control" href="#carousel-example-generic" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
  <span class="sr-only">上一页</span>
 </a>
 <a class="right carousel-control" href="#carousel-example-generic" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
  <span class="sr-only">下一页</span>
 </a>
</div>

栅格布局

<div class="row">
 <div class="col-md-4">
 <img class="img-circle" src="images/chrome-logo-small.jpg" alt="chrome">
 <h2>Chrome</h2>
 <p>Google Chrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器</p>
 <p><a class="btn btn-default" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">点击下载</a></p>
 </div>
 <div class="col-md-4">
 <img class="img-circle" src="images/firefox-logo-small.jpg" alt="chrome">
 <h2>Firefox</h2>
 <p>Mozilla Firefox,中文名通常称为“火狐”或者“火狐浏览器”，是一个开源的网页浏览器</p>
 <p><a class="btn btn-default" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">点击下载</a></p>
 </div>
 <div class="col-md-4">
 <img class="img-circle" src="images/safari-logo-small.jpg" alt="chrome">
 <h2>Safari</h2>
 <p>Safari,是苹果计算机的最新操作系统Mas OS X中的浏览器</p>
 <p><a class="btn btn-default" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">点击下载</a></p>
 </div>
 </div>

标签页

<div class="tab-content">
  <div class="tab-pane active" id="tab-chrome">
   <div class="row feature">
   <div class="col-md-7">
    <h2 class="feature-heading">Google Chrome <span class="text-muted">使用最广泛的浏览器</span></h2>
    <p class="lead">Google Chrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。
    该浏览器是基于其他开源软件撰写，包括Webkit,目标是提升稳定性，速度和安全性，并创造出简单且有效率的使用这界面
    </p>
   </div>
   <div class="col-md-5">
    <img class="feature-image img-responsive" src="images/chrome-logo.jpg">
   </div>
  </div>
  </div>
  
  <div class="tab-pane" id="tab-firefox">
  <div class="row feature">
   <div class="col-md-7">
    <h2 class="feature-heading">Mozilla Firefox<span class="text-muted">燃烧的狐狸</span></h2>
    <p class="lead">Mozilla Firefox,中文名称为“火狐”或“火狐浏览器”，是一个开源网页浏览器，使用Gecko引擎(非ie内核)，支持多种操作系统如window、Mac和linux。</p>
   </div>
   <div class="col-md-5">
    <img class="feature-image img-responsive" src="images/firefox-logo.jpg">
   </div>
  </div>
  </div>
  
  <div class="tab-pane" id="tab-safari">
  <div class="row feature">
   <div class="col-md-7">
    <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与TPAD和iPod touch的指定浏览器。</p>
   </div>
   <div class="col-md-5">
    <img class="feature-image img-responsive" src="images/safari-logo.jpg">
   </div>
  </div>
  </div>
  
  <div class="tab-pane" id="tab-opera">
  <div class="row feature">
   <div class="col-md-5">
    <img class="feature-image img-responsive" src="images/opera-logo.jpg">
   </div>
   <div class="col-md-7">
    <h2 class="feature-heading">Opera<span class="text-muted">小众但易用</span></h2>
    <p class="lead">Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多也页面标签式浏览的网络浏览器。是跨平台浏览器可以在windowns，Mac和Linux三个操作系统平台上运行。</p>
   </div>
  </div>
  </div>
  
  <div class="tab-pane" id="tab-ie">
  <div class="row feature">
   <div class="col-md-5">
    <img class="feature-image img-responsive" src="images/ie-logo.jpg">
   </div>
   <div class="col-md-7">
    <h2 class="feature-heading">IE<span class="text-muted">老招牌</span></h2>
    <p class="lead">Internet Explorer,原称Microsoft Internet Explorer(7,8,9,10版本)，简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(内核)为Trident</p>
   </div>
  </div>
  </div>
 </div>

弹出框制作

<div class="modal fade" id="about">
 <div class="modal-dialog">
  <div class="modal-content">
  
   <div class="modal-header"><!-- 头部 -->
    <button type="button" class="close" data-dismiss="modal">
    <span aria-hidden="true">×</span>
    <span class="sr-only">Close</span>
    </button>
    <h4 class="modal-title">关于</h4>
   </div>
   
   <div class="modal-body"><!-- 内容 -->
   <p>网站基于Bootstrap开发；设计风格简单清爽！内容是关于当今主流浏览器介绍，并附有下载资源。</p>
   </div>
   
   <div class="modal-footer"><!-- 底部 -->
    <button type="button" class="btn btn-default" data-dismiss="modal">了解</button>
    <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
   </div>
   
  </div>
 </div>
</div>

底部设计

<footer>
 <p class="pull-right"><a href="#top" rel="external nofollow" rel="external nofollow" >回到顶部</a></p>
 <div id="time"></div>
   <footer>

JS脚本

<script>   
document.getElementById('time').innerHTML=new Date().toLocaleString();   
setInterval("document.getElementById('time').innerHTML=new Date().toLocaleString();",1000);
$(document).ready(function(){
  $("#demo-navbar .dropdown-menu a").click(function(){
    var href=$(this).attr("href");

    $("#tab-list a[href='"+href+"']").tab("show");
  });
});
</script>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
  <div class="containe">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#demo-navbar">
        <span class="sr-only">Toggle navigation</span><!-- Toggle navigation不能缺少 -->
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>      
      </button>
      <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >现代浏览器博物馆</a>
    </div> 
    <!-- 导航栏 -->
    <div class="collapse navbar-collapse" id="demo-navbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >综述</a></li>      
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >简述</a></li>      
        <li class="dropdown">
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">特点 <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#tab-chrome" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Chrome</a></li>
            <li><a href="#tab-firefox" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Firefox</a></li>
            <li><a href="#tab-safari" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Safari</a></li>
            <!-- <li class="divider"></li> //divider:分隔符 -->
            <li><a href="#tab-opera" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Opera</a></li>
            <li><a href="#tab-ie" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >IE9</a></li>
          </ul>
        </li>      
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="modal" data-target="#about">关于</a></li>      
        <li>      
      </ul>
    </div>
  </div>
</nav>

以上所述是小编给大家介绍的基于Bootstrap的网页设计实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

基于Bootstrap的网页设计实例

- Author -

补课生

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
常规表格多表头查询示例
Feb 21 Javascript
javascript中字符串拼接详解
Sep 26 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化（二）
Feb 16 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
如何快速上手Vuex
Feb 14 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
JS中的作用域链
Mar 01 #Javascript
javascript html5轻松实现拖动功能
Mar 01 #Javascript
详解数组Array.sort()排序的方法
May 09 #Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 #Javascript
javascript中replace使用方法总结
Mar 01 #Javascript
jQuery validate 验证radio实例
Mar 01 #Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 #Javascript
感谢信(72) 保证书(97) 建议书(203) 主持词(345) 决心书(42) 倡议书(159) 活动总结(790) 请假条(31) 广告词(105) 责任书(145)
You might like
一个域名查询的程序
2006/10/09 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
xmlplus组件设计系列之文本框（TextBox)（3）
2017/05/03 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
python调用摄像头显示图像的实例
2018/08/03 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
详解Python是如何实现issubclass的
2019/07/24 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
Deux par Deux官方网站：设计师童装
2020/01/03 全球购物
iHerb俄罗斯：维生素、补品和天然产品
2020/07/09 全球购物
房屋授权委托书范本
2014/10/07 职场文书
先进个人自荐书
2015/03/06 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
学校捐书活动总结
2015/05/08 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL