首页
所有分类
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 相关文章推荐
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 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) format(1) CompletableFuture(1) 井字棋(1) 底部导航(1) 人工智能(2) 五子棋(12) 对齐打印(1) 异步回调(1) 计算器(5)
You might like
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
用session做客户验证时的注意事项
2006/10/09 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
php中smarty区域循环的方法
2015/06/11 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
9个JavaScript评级/投票插件
2010/01/18 Javascript
javascript的内存管理详解
2013/08/07 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
深入理解JavaScript系列（39）：设计模式之适配器模式详解
2015/03/04 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
python 解析html之BeautifulSoup
2009/07/07 Python
python网络编程学习笔记(三)：socket网络服务器
2014/06/09 Python
Python记录详细调用堆栈日志的方法
2015/05/05 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
英国第一的市场和亚马逊替代品：OnBuy
2019/03/16 全球购物
装修施工安全责任书
2014/07/24 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
Django程序的优化技巧
2021/04/29 Python
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers