首页
所有分类
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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
js 浮动层菜单收藏
Jan 16 Javascript
JS 实现双色表格实现代码
Nov 24 Javascript
javascript中的107个基础知识收集整理 推荐
Mar 29 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 Javascript
js+css3实现简单时钟特效
Sep 13 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
矩阵(1) pandas(7) GUI(2) mp3Play(1) Pool(1) agg(1) 音频(1) apply(1) Tkinter(4) 数据处理(2)
You might like
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
PHP实现文件上传与下载
2020/08/28 PHP
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
鼠标经过子元素触发mouseout，mouseover事件的解决方案
2015/07/26 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
微信小程序实战之自定义抽屉菜单（7）
2017/04/18 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
python 串行执行和并行执行实例
2020/04/30 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
日本最大的药妆连锁店：Matsukiyo松本清药妆店
2017/11/23 全球购物
英国婴儿产品专家：Samuel Johnston
2020/04/20 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
《美丽的公鸡》教学反思
2014/02/25 职场文书
纪念九一八事变演讲稿：忘记意味着背叛
2014/09/14 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
营销计划书范文
2015/01/17 职场文书
聘任协议书（挂靠）
2015/09/21 职场文书
教师听课学习心得体会
2016/01/15 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery