Bootstrap 기반 웹 디자인 실례

48245 단어 bootstrap홈 페이지
잔말 말고 바로 코드 를 붙 여 드 리 겠 습 니 다.구체 적 인 코드 는 다음 과 같 습 니 다.

<%@ 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">&times;</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">&times;</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 기반 의 웹 디자인 실례 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.만약 에 궁금 한 점 이 있 으 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 제때에 여러분 에 게 답장 을 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

좋은 웹페이지 즐겨찾기