Bootstrap框架小网页
投稿于 被查看 20397 次 评论：205
Bootstrap框架小网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<!--<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>-->
<script src="http://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">宠物用品</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a>[登录]</a>
</li>
<li>
<a>[注册]</a>
</li>
<li>
<a class="glyphicon glyphicon-shopping-cart">购物车(0)</a>
</li>
<li>
<a class="glyphicon glyphicon-user">个人中心</a>
</li>
<li>
<a class="glyphicon glyphicon-heart">收藏本站</a>
</li>
<li>
<a>?帮助</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img src="img/logo.png" />
</div>
</div>
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">E宠商城</a>
</div>
<div>
<ul class="nav navbar-nav">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">新品上市</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
优惠折扣
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">jmeter</a>
</li>
<li>
<a href="#">EJB</a>
</li>
<li>
<a href="#">Jasper Report</a>
</li>
<li class="divider"></li>
<li>
<a href="#">分离的链接</a>
</li>
<li class="divider"></li>
<li>
<a href="#">另一个分离的链接</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
宠物新闻
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">jmeter</a>
</li>
<li>
<a href="#">EJB</a>
</li>
<li>
<a href="#">Jasper Report</a>
</li>
<li class="divider"></li>
<li>
<a href="#">分离的链接</a>
</li>
<li class="divider"></li>
<li>
<a href="#">另一个分离的链接</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
品牌街
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">jmeter</a>
</li>
<li>
<a href="#">EJB</a>
</li>
<li>
<a href="#">Jasper Report</a>
</li>
<li class="divider"></li>
<li>
<a href="#">分离的链接</a>
</li>
<li class="divider"></li>
<li>
<a href="#">另一个分离的链接</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<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）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="img/banner1.png" alt="First slide">
</div>
<div class="item">
<img src="img/banner2.png" alt="Second slide">
</div>
<div class="item">
<img src="img/banner3.png" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<h4 class="page-header">商品分类</h4>
</div>
<div class="col-lg-8">
<h4 class="page-header">天天惊喜<small>限量尝鲜,超低折扣</small></h4>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
宠物食品
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="page-header">狗粮</div>
<div class="page-header">猫粮</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo">
宠物服饰
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="page-header">狗粮</div>
<div class="page-header">猫粮</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseThree">
宠物玩具
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="page-header">狗粮</div>
<div class="page-header">猫粮</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseThree">
宠物小窝
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="page-header">狗粮</div>
<div class="page-header">猫粮</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="col-lg-3 table-bordered ">
<img src="img/pic1.png" class="img-responsive center-block" />
<h4 class="text-center">尝鲜价:￥60.00<small><del>69.00</del></small></h4>
<div class="bg-success panel-heading">
<h4 class="text-center panel-title">马上抢购</h4></div>
</div>
<div class="col-lg-3 table-bordered">
<img src="img/pic2.png" class="img-responsive center-block" />
<h4 class="text-center">尝鲜价:￥60.00<small><del>69.00</del></small></h4>
<div class="bg-success panel-heading">
<h4 class="text-center panel-title">马上抢购</h4></div>
</div>
<div class="col-lg-3 table-bordered">
<img src="img/pic3.png" class="img-responsive center-block" />
<h4 class="text-center">尝鲜价:￥60.00<small><del>69.00</del></small></h4>
<div class="bg-success panel-heading">
<h4 class="text-center panel-title">马上抢购</h4></div>
</div>
<div class="col-lg-3 table-bordered">
<img src="img/pic4.png" class="img-responsive center-block" />
<h4 class="text-center">尝鲜价:￥60.00<small><del>69.00</del></small></h4>
<div class="bg-success panel-heading">
<h4 class="text-center panel-title">马上抢购</h4></div>
</div>
<div class="col-lg-3 table-bordered">
<img src="img/pic1.png" class="img-responsive center-block" />
<h4 class="text-center">尝鲜价:￥60.00<small><del>69.00</del></small></h4>
<div class="bg-success panel-heading">
<h4 class="text-center panel-title">马上抢购</h4></div>
</div>
<div class="col-lg-3 table-bordered">
<img src="img/pic2.png" class="img-responsive center-block" />
<h4 class="text-center">尝鲜价:￥60.00<small><del>69.00</del></small></h4>
<div class="bg-success panel-heading">
<h4 class="text-center panel-title">马上抢购</h4></div>
</div>
<div class="col-lg-3 table-bordered">
<img src="img/pic3.png" class="img-responsive center-block" />
<h4 class="text-center">尝鲜价:￥60.00<small><del>69.00</del></small></h4>
<div class="bg-success panel-heading">
<h4 class="text-center panel-title">马上抢购</h4></div>
</div>
<div class="col-lg-3 table-bordered">
<img src="img/pic4.png" class="img-responsive center-block" />
<h4 class="text-center">尝鲜价:￥60.00<small><del>69.00</del></small></h4>
<div class="bg-success panel-heading">
<h4 class="text-center panel-title">马上抢购</h4></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<h4 class="page-header">新闻专栏</h4>
</div>
<div class="col-lg-8">
<h4 class="page-header">留言板</h4>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">
本站新闻</a>
</li>
<li>
<a href="#ios" data-toggle="tab">宠物新闻</a>
</li>
<li>
<a href="#wanju" data-toggle="tab">玩具</a>
</li>
<li>
<a href="#yaopin" data-toggle="tab">药品</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active " id="home">
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center ra">2015-3-10</small></p>
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center">2015-3-10</small></p>
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center">2015-3-10</small></p>
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center">2015-3-10</small></p>
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center">2015-3-10</small></p>
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center">2015-3-10</small></p>
</div>
<div class="tab-pane fade" id="ios">
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center ra">2015-3-12</small></p>
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center">2015-3-12</small></p>
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center">2015-3-12</small></p>
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center">2015-3-12</small></p>
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center">2015-3-12</small></p>
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center">2015-3-12</small></p>
</div>
<div class="tab-pane fade" id="wanju">
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center ra">2015-3-15</small></p>
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center">2015-3-15</small></p>
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center">2015-3-15</small></p>
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center">2015-3-15</small></p>
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center">2015-3-15</small></p>
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center">2015-3-15</small></p>
</div>
<div class="tab-pane fade" id="yaopin">
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center ra">2015-3-20</small></p>
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center">2015-3-20</small></p>
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center">2015-3-20</small></p>
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center">2015-3-20</small></p>
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center">2015-3-20</small></p>
<p class="panel-heading table-bordered text-info">E宠2周年，新春大优惠活动<small class="navbar-right text-center">2015-3-20</small></p>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="col-lg-4 panel-heading text-left">用户名</div>
<div class="col-lg-8 panel-heading">内容</div>
<div class="col-lg-4 panel-heading text-left">Shylo</div>
<div class="col-lg-8 panel-heading">frgreghtgngyuukuiouyi efrdgffdjyukyherger,htrhtrgdkfbregh</div>
<div class="col-lg-4 panel-heading text-left">Shylo</div>
<div class="col-lg-8 panel-heading">frgreghtgngyuukuiouyi efrdgffdjyukyherger,htrhtrgdkfbregh</div>
<div class="col-lg-4 panel-heading text-left">Shylo</div>
<div class="col-lg-12">
<form role="form">
<div class="form-group">
<textarea class="form-control" rows="3"></textarea>
</div>
</form>
</div>
<div class="col-lg-10">
</div>
<div class="col-lg-2">
<button class="btn btn-primary"">提交留言</button>
</div>
</div>
</div>
<hr class="divider" />
<div class="row">
<div class="col-lg-6">
<div class="col-lg-6">
<img src="img/logo2.png" />
</div>
<div class="col-lg-6">
<h4 class="panel-heading">400-600-6200</h4>
<h4 class="panel-heading">客服电话(免费长途)</h4>
</div>
</div>
<div class="col-lg-6">
<div class="col-lg-3">关于
<h6 class="text-primary">关于我们</h6>
<h6 class="text-primary">广告合作</h6>
<h6 class="text-primary">友情链接</h6>
<h6 class="text-primary">招聘</h6>
</div>
<div class="col-lg-3">联系方式
<h6 class="text-primary">新浪微博</h6>
<h6 class="text-primary">电子邮件</h6>
</div>
<div class="col-lg-3">旗下网站
<h6 class="text-primary">chine中文网</h6>
<h6 class="text-primary">Ghost中国</h6>
</div>
<div class="col-lg-3">赞助商
<h6 class="text-primary">UCloud</h6>
<h6 class="text-primary">又拍云</h6>
</div>
</div>
</div>
</div>
</body></html>
用户评论