标签：
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="GB2312"> <!-- Bootstrap --> <link href="bootstrap-3.3.2-dist/css/bootstrap.css" rel="stylesheet" media="screen"> <style> /* 导航条的默认高度是50px */ body{ padding-top: 50px; } /* 限制图片显示高度 */ .carousel{ height: 300px; background-color: #000000; margin-bottom: 60px; } .carousel .item{ height: 300px; background-color: #000000; } /* 图片显示宽度百分之百 */ .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_css{ margin: 40px 0; } </style> </head> <body> <!--宝航条--> <div class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation"> <div class="navbar-inner container"> <a class="navbar-brand" href="#">Title</a> <ul class="nav navbar-nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <!--下拉菜单--> <li class=""dropzone=""> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a> </li> <li><a href="#">Action</a> </li> <li><a href="#">Action</a> </li> <li class="divider"></li> <li><a href="#">Action</a> </li> </ul> </li> <li><a href="#">Link</a></li> </ul> </div> </div> <!--滚动图片广告--> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"><!--轮播组件的导航（小圆点）--> <!--data-target="#myCarousel"当点击圆点时切换图片--> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel items --> <div class="carousel-inner" role=""listbox><!--轮播组件的内容--> <div class="active item"> <img src="bootstrap-3.3.2-dist/cat.jpg" alt=""> <div class="carousel-caption"> <h3>Chrome</h3> <p>Google Chrome,又称Google浏览器，是一个由Google公司开发的网页浏览器</p> <p> <a class="btn btn-lg btn-primary" href="#">Download</a> </p> </div> </div> <div class="item"> <img src="bootstrap-3.3.2-dist/bird1.jpg" alt=""> <div class="carousel-caption">Picture2</div> </div> <div class="item"> <img src="bootstrap-3.3.2-dist/bird2.jpg" alt=""> <div class="carousel-caption">Picture3</div> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#myCarousel" role=button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control right" href="#myCarousel" role=button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> <!--栅格系统/三栏布局--> <div class="container" id="summary-container"><!--container固定宽度，container-fluid 100%--> <div class="row"><!--必须包含在container/container-fluid中--> <div class="col-md-4"> <img class="img-circle" src="" alt=""> <h3>Chrome</h3> <p>Google Chrome,又称Google浏览器，是一个由Google公司开发的网页浏览器</p> <p> <a class="btn btn-lg btn-primary" href="#">Download</a> </p> </div> <div class="col-md-4"> <img class="img-circle" src="" alt=""> <h3>Chrome</h3> <p>Google Chrome,又称Google浏览器，是一个由Google公司开发的网页浏览器</p> <p> <a class="btn btn-lg btn-primary" href="#">Download</a> </p> </div> <div class="col-md-4"> <img class="img-circle" src="" alt=""> <h3>Chrome</h3> <p>Google Chrome,又称Google浏览器，是一个由Google公司开发的网页浏览器</p> <p> <a class="btn btn-lg btn-primary" href="#">Download</a> </p> </div> </div> <hr> <!-- 标签页 --> <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> <li><a href="#message" role="tab" data-toggle="tab">Message</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home"> <div class="row"> <div class="col-md-5"> <img class="img-circle" src="" alt=""> </div> <div class="col-md-7"> <h3>Chrome</h3> <p>Google Chrome,又称Google浏览器，是一个由Google公司开发的网页浏览器</p> <p> <a class="btn btn-lg btn-primary" href="#">Download</a> </p> </div> </div> </div> <div class="tab-pane" id="message"> <div class="row"> <div class="col-md-5"> <img class="img-circle" src="" alt=""> </div> <div class="col-md-7"> <h3>IE</h3> <p>microsoft,又称microsoft浏览器，是一个由microsoft公司开发的网页浏览器</p> <p> <a class="btn btn-lg btn-primary" href="#">Download</a> </p> </div> </div> </div> </div> <hr> <footer> <p class="pull-right"><a href="#top">回到顶部</a></p> <p>版权所有</p> </footer> </div> <script src="jquery-2.1.3.js"></script> <script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/timerainbow/p/4347184.html
