bootstrap学习
模板页：MasterMe.cshtml
MasterMe.cshtml
1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <title>@ViewBag.title</title> 10 <link href="http://www.cnblogs.com/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> 11 <script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-1.7.1.min.js"></script> 12 <script type="text/javascript" src="http://www.cnblogs.com/Content/bootstrap/js/bootstrap.min.js"></script> 13 @*预留一个节点，提供给继承该模板的子页面使用*@ 14 @RenderSection("Head",false) 15 </head> 16 <body> 17 <div class="container-fluid"> 18 <div class="row-fluid"> 19 <div class="navbar"> 20 <div class="navbar-inner"> 21 <a class="brand">xxx</a> 22 <div class="nav-collapse collapse"> 23 <ul class="nav"> 24 <li class="active"><a href="/T1/Home">首页</a></li> 25 <li>@Html.ActionLink("白酒","/WineList")</li> 26 </ul> 27 <ul class="nav pull-right"> 28 <li><a href="#">登录</a></li> 29 <li><a href="#">注册</a></li> 30 <li class="divider-vertical"></li> 31 <li class="dropdown"> 32 <a href="#" data-toggle="dropdown"><i class="icon-user"></i>Admin<b class="caret"></b></a> 33 <ul class="dropdown-menu"> 34 <li><a href="#"><i class="icon-pencil"></i>购物车</a></li> 35 <li><a href="/T1/Order"><i class="icon-pencil"></i>我的订单</a></li> 36 <li class="divider"></li> 37 <li><a href="#"><i class="icon-pencil"></i>修改密码</a></li> 38 <li><a href="#"><i class="icon-pencil"></i>注销</a></li> 39 </ul> 40 </li> 41 </ul> 42 </div> 43 </div> 44 </div> 45 </div> 46 <div class="row-fluid"> 47 @RenderBody() 48 </div> 49 <div class="row-fluid"> 50 <footer class="text-center well">版权所有©xxxx</footer> 51 </div> 52 </div> 53 </body> 54 </html>
首页：Home.cshtml
Home.cshtml
1 @{ 2 ViewBag.Title = "xxx-首页"; 3 Layout = "~/Views/Shared/MasterMe.cshtml"; 4 } 5 6 <div class="row-fluid"> 7 <div class="span3"> 8 <div class="accordion" id="accordion"> 9 <div class="accordion-group"> 10 <div class="accordion-heading"> 11 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">热销商品</a> 12 </div> 13 <div id="collapseOne" class="accordion-body collapse in"> 14 <div class="accordion-inner"> 15 <ul> 16 <li> 17 <a href="#"> 18 <img style="width: 33px; height: 33px;" src="http://www.cnblogs.com/Content/MyImg/1.png" /> 19 热销商品1</a> 20 <p /> 21 </li> 22 23 <li> 24 <a href="#"> 25 <img style="width: 33px; height: 33px;" src="http://www.cnblogs.com/Content/MyImg/1.png" /> 26 热销商品1</a> 27 <p /> 28 </li> 29 <li> 30 <a href="#"> 31 <img style="width: 33px; height: 33px;" src="http://www.cnblogs.com/Content/MyImg/1.png" /> 32 热销商品1</a> 33 <p /> 34 </li> 35 <li> 36 <a href="#"> 37 <img style="width: 33px; height: 33px;" src="http://www.cnblogs.com/Content/MyImg/1.png" /> 38 热销商品1</a><p /> 39 </li> 40 <li> 41 <a href="#"> 42 <img style="width: 33px; height: 33px;" src="http://www.cnblogs.com/Content/MyImg/1.png" /> 43 热销商品1</a><p /> 44 </li> 45 <li> 46 <a href="#"> 47 <img style="width: 33px; height: 33px;" src="http://www.cnblogs.com/Content/MyImg/1.png" /> 48 热销商品1</a><p /> 49 </li> 50 <li> 51 <a href="#"> 52 <img style="width: 33px; height: 33px;" src="http://www.cnblogs.com/Content/MyImg/1.png" /> 53 热销商品1</a><p /> 54 </li> 55 </ul> 56 </div> 57 58 </div> 59 </div> 60 <div class="accordion-group"> 61 <div class="accordion-heading"> 62 <a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse">热销。。。</a> 63 </div> 64 <div id="collapseTwo" class="accordion-body collapse"> 65 ... 66 </div> 67 </div> 68 </div> 69 </div> 70 <div class="span9"> 71 <div id="ad" class="carousel slide"> 72 <ol class="carousel-indicators"> 73 <li data-target="#ad" data-slide-to="0" class="active"></li> 74 <li data-target="#ad" data-slide-to="1"></li> 75 <li data-target="#ad" data-slide-to="2"></li> 76 </ol> 77 <div class="carousel-inner"> 78 <div class="active item"> 79 <img src="http://www.cnblogs.com/Content/MyImg/bootstrap-mdo-sfmoma-01.jpg" style="height: 250px; width: 100%;" /> 80 <div class="carousel-caption"> 81 <h4>图片简要描述</h4> 82 <p>这是一个神奇的。。。。。。</p> 83 </div> 84 </div> 85 <div class="item"> 86 <img src="http://www.cnblogs.com/Content/MyImg/bootstrap-mdo-sfmoma-02.jpg" style="height: 250px; width: 100%;" /> 87 <div class="carousel-caption"> 88 <h4>图片简要描述</h4> 89 <p>这是一个神奇的。。。。。。</p> 90 </div> 91 </div> 92 <div class="item"> 93 <img src="http://www.cnblogs.com/Content/MyImg/bootstrap-mdo-sfmoma-03.jpg" style="height: 250px; width: 100%;" /> 94 <div class="carousel-caption"> 95 <h4>图片简要描述</h4> 96 <p>这是一个神奇的。。。。。。</p> 97 </div> 98 </div> 99 </div> 100 <a class="carousel-control left" href="#ad" data-slide="prev">‹</a> 101 <a class="carousel-control right" href="#ad" data-slide="next">›</a> 102 </div> 103 <div class="pager"> 104 <ul style="margin-left: 0px;"> 105 <li class="previous"><a href="#">← 前一页</a></li> 106 <li class="next"><a href="#">后一页→</a></li> 107 </ul> 108 </div> 109 <ul class="thumbnails text-center"> 110 <li class="span3"> 111 <a class="thumbnail" href="#"> 112 <img src="http://www.cnblogs.com/Content/MyImg/1351742446178.jpg" /> 113 <h4 class="text-center">商品名称</h4> 114 <br /> 115 市场价：<del>￥1999</del> 116 <br /> 117 本网优惠价:<span style="color: red">￥1888</span> 118 </a> 119 </li> 120 <li class="span3"> 121 <a class="thumbnail" href="#"> 122 <img src="http://www.cnblogs.com/Content/MyImg/1351742446178.jpg" /> 123 <h4 class="text-center">商品名称</h4> 124 <br /> 125 市场价：<del>￥1999</del> 126 <br /> 127 本网优惠价:<span style="color: red">￥1888</span> 128 </a> 129 </li> 130 <li class="span3"> 131 <a class="thumbnail" href="#"> 132 <img src="http://www.cnblogs.com/Content/MyImg/1351742446178.jpg" /> 133 <h4 class="text-center">商品名称</h4> 134 <br /> 135 市场价：<del>￥1999</del> 136 <br /> 137 本网优惠价:<span style="color: red">￥1888</span> 138 </a> 139 </li> 140 <li class="span3"> 141 <a class="thumbnail" href="#"> 142 <img src="http://www.cnblogs.com/Content/MyImg/1351742446178.jpg" /> 143 <h4 class="text-center">商品名称</h4> 144 <br /> 145 市场价：<del>￥1999</del> 146 <br /> 147 本网优惠价:<span style="color: red">￥1888</span> 148 </a> 149 </li> 150 <li class="span3" style="margin-left: 0px;"> 151 <a class="thumbnail" href="#"> 152 <img src="http://www.cnblogs.com/Content/MyImg/1351742446178.jpg" /> 153 <h4 class="text-center">商品名称</h4> 154 <br /> 155 市场价：<del>￥1999</del> 156 <br /> 157 本网优惠价:<span style="color: red">￥1888</span> 158 </a> 159 </li> 160 </ul> 161 <div class="pagination pagination-centered"> 162 <ul> 163 <li class="disabled"><a href="#">Prev</a></li> 164 <li class="active"><a href="#">1</a></li> 165 <li><a href="#">2</a></li> 166 <li><a href="#">3</a></li> 167 <li><a href="#">Next</a></li> 168 </ul> 169 </div> 170 </div> 171 </> 172 </div>
效果图：
分类页：
WineList
1 @{ 2 ViewBag.Title = "xxx-酒列表"; 3 Layout = "~/Views/Shared/MasterMe.cshtml"; 4 } 5 6 7 8 <div class="row-fluid"> 9 <div class="span3"> 10 <div style="margin-bottom: 10px;"> 11 <a class="btn btn-primary" href="#">重置筛选条件</a> 12 </div> 13 <div class="accordion"> 14 <div class="accordion-group"> 15 <div class="accordion-heading"> 16 <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">品牌</a> 17 </div> 18 <div id="collapseOne" class="accordion-body collapse in"> 19 <ul class="nav nav-pills"> 20 <li class="active"><a href="#">不限</a></li> 21 <li><a href="#">茅台</a></li> 22 <li><a href="#">五粮液</a></li> 23 <li><a href="#">剑南春</a></li> 24 <li><a href="#">茅台</a></li> 25 <li><a href="#">茅台</a></li> 26 <li><a href="#">茅台fdsfdsss</a></li> 27 <li><a href="#">茅台</a></li> 28 <li><a href="#">茅台</a></li> 29 <li><a href="#">茅台</a></li> 30 <li><a href="#">茅台</a></li> 31 <li><a href="#">茅台</a></li> 32 </ul> 33 </div> 34 </div> 35 <div class="accordion-group"> 36 <div class="accordion-heading"> 37 <a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse">价格</a> 38 </div> 39 <div id="collapseTwo" class="accordion-body collapse in"> 40 <ul class="nav nav-pills"> 41 <li class="active"><a href="#">不限</a></li> 42 <li><a href="#">1-99元</a></li> 43 <li><a href="#">100-299</a></li> 44 <li><a href="#">300-499</a></li> 45 <li><a href="#">300-499</a></li> 46 </ul> 47 </div> 48 </div> 49 <div class="accordion-group"> 50 <div class="accordion-heading"> 51 <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">香型</a> 52 </div> 53 <div id="collapseThree" class="accordion-body collapse in"> 54 <ul class="nav nav-pills"> 55 <li class="active"><a href="#">不限</a></li> 56 <li><a href="#">浓香型</a></li> 57 <li><a href="#">酱香型</a></li> 58 </ul> 59 </div> 60 </div> 61 </div> 62 </div> 63 <div class="span9"> 64 <div id="ad" class="carousel slide"> 65 <ol class="carousel-indicators"> 66 <li data-target="#ad" data-slide-to="0" class="active"></li> 67 <li data-target="#ad" data-slide-to="1"></li> 68 <li data-target="#ad" data-slide-to="2"></li> 69 </ol> 70 <div class="carousel-inner"> 71 <div class="active item"> 72 <img src="http://www.cnblogs.com/Content/MyImg/bootstrap-mdo-sfmoma-01.jpg" style="height: 250px; width: 100%;" /> 73 <div class="carousel-caption"> 74 <h4>图片简要描述</h4> 75 <p>这是一个神奇的。。。。。。</p> 76 </div> 77 </div> 78 <div class="item"> 79 <img src="http://www.cnblogs.com/Content/MyImg/bootstrap-mdo-sfmoma-02.jpg" style="height: 250px; width: 100%;" /> 80 <div class="carousel-caption"> 81 <h4>图片简要描述</h4> 82 <p>这是一个神奇的。。。。。。</p> 83 </div> 84 </div> 85 <div class="item"> 86 <img src="http://www.cnblogs.com/Content/MyImg/bootstrap-mdo-sfmoma-03.jpg" style="height: 250px; width: 100%;" /> 87 <div class="carousel-caption"> 88 <h4>图片简要描述</h4> 89 <p>这是一个神奇的。。。。。。</p> 90 </div> 91 </div> 92 </div> 93 <a class="carousel-control left" href="#ad" data-slide="prev">‹</a> 94 <a class="carousel-control right" href="#ad" data-slide="next">›</a> 95 </div> 96 <div class="pager"> 97 <ul style="margin-left: 0px;"> 98 <li class="previous"><a href="#">← 前一页</a></li> 99 <li class="next"><a href="#">后一页→</a></li> 100 </ul> 101 </div> 102 <ul class="thumbnails text-center"> 103 <li class="span3"> 104 <a class="thumbnail" href="/T1/Product"> 105 <img src="http://www.cnblogs.com/Content/MyImg/1351742446178.jpg" /> 106 <h4 class="text-center">商品名称</h4> 107 <br /> 108 市场价：<del>￥1999</del> 109 <br /> 110 本网优惠价:<span style="color: red">￥1888</span> 111 </a> 112 </li> 113 <li class="span3"> 114 <a class="thumbnail" href="#"> 115 <img src="http://www.cnblogs.com/Content/MyImg/1351742446178.jpg" /> 116 <h4 class="text-center">商品名称</h4> 117 <br /> 118 市场价：<del>￥1999</del> 119 <br /> 120 本网优惠价:<span style="color: red">￥1888</span> 121 </a> 122 </li> 123 <li class="span3"> 124 <a class="thumbnail" href="#"> 125 <img src="http://www.cnblogs.com/Content/MyImg/1351742446178.jpg" /> 126 <h4 class="text-center">商品名称</h4> 127 <br /> 128 市场价：<del>￥1999</del> 129 <br /> 130 本网优惠价:<span style="color: red">￥1888</span> 131 </a> 132 </li> 133 <li class="span3"> 134 <a class="thumbnail" href="#"> 135 <img src="http://www.cnblogs.com/Content/MyImg/1351742446178.jpg" /> 136 <h4 class="text-center">商品名称</h4> 137 <br /> 138 市场价：<del>￥1999</del> 139 <br /> 140 本网优惠价:<span style="color: red">￥1888</span> 141 </a> 142 </li> 143 <li class="span3" style="margin-left: 0px;"> 144 <a class="thumbnail" href="#"> 145 <img src="http://www.cnblogs.com/Content/MyImg/1351742446178.jpg" /> 146 <h4 class="text-center">商品名称</h4> 147 <br /> 148 市场价：<del>￥1999</del> 149 <br /> 150 本网优惠价:<span style="color: red">￥1888</span> 151 </a> 152 </li> 153 </ul> 154 <div class="pagination pagination-centered"> 155 <ul> 156 <li class="disabled"><a href="#">Prev</a></li> 157 <li class="active"><a href="#">1</a></li> 158 <li><a href="#">2</a></li> 159 <li><a href="#">3</a></li> 160 <li><a href="#">Next</a></li> 161 </ul> 162 </div> 163 </div> 164 </> 165 </div>
Product.cshtml
1 @{ 2 ViewBag.Title = "Product"; 3 Layout = "~/Views/Shared/MasterMe.cshtml"; 4 } 5 6 <div class="row-fluid"> 7 <div class="span9"> 8 <div class="row-fluid"> 9 <div> 10 <ul class="breadcrumb" style="background-color: white;"> 11 <li>当前位置：</li> 12 <li><a href="#">首页</a><span class="divider">></span></li> 13 <li><a href="#">白酒</a><span class="divider">></span></li> 14 <li class="active">茅台。。</li> 15 </ul> 16 </div> 17 </div> 18 <div class="row-fluid"> 19 <div class="span5"> 20 <div class="thumbnail"> 21 <img src="http://www.cnblogs.com/Content/MyImg/1351742446178.jpg" style="width: 460px; height: 460px;" /> 22 </div> 23 </div> 24 <div class="span7"> 25 <p style="margin-left: 15px;">53°茅台飞天500ml国酒茅台，至尊享受！</p> 26 <hr /> 27 <p style="margin-left: 15px;">本网价：￥1000</p> 28 <p style="margin-left: 15px;">市场价：<del>￥1999</del></p> 29 <div class="well"> 30 <p>库存：</p> 31 <p>品牌：</p> 32 <p>说明：</p> 33 </div> 34 <div class="well" style="background-color: #fff3d9;"> 35 <div>我要买：<input class="input-small" type="text" placeholder="请填入数量" /></div> 36 <p></p> 37 <a href="/T1/Cart" type="button" class="btn btn-primary">加入购物车</a> 38 </> 39 </div> 40 </div> 41 </div> 42 <div class="row-fluid" style="margin-top: 20px;"> 43 <div id="productDescription"> 44 <ul id="myTab" class="nav nav-tabs"> 45 <li class="active"><a href="#content1" data-toggle="tab">商品介绍</a></li> 46 <li><a href="#content2" data-toggle="tab">其他</a></li> 47 </ul> 48 <div id="myContent" class="tab-content"> 49 <div id="content1" class="tab-pane fade active in"> 50 <p>tgg好酒啊 。。又贵又香</p> 51 <img src="http://www.cnblogs.com/Content/MyImg/1352553126266.jpg" /> 52 </div> 53 <div id="content2" class="tab-pane fade">dfd</div> 54 </div> 55 </div> 56 </div> 57 </div> 58 <div class="span3 well"> 59 <h4 class="text-warning">您可能还喜欢</h4> 60 <ul class="thumbnails"> 61 <li class="span12"> 62 <a href="#" class="thumbnail"> 63 <img src="http://www.cnblogs.com/Content/MyImg/1351742446178.jpg" /> 64 </a> 65 </li> 66 <li class="span12"> 67 <a href="#" class="thumbnail"> 68 <img src="http://www.cnblogs.com/Content/MyImg/1351742446178.jpg" /> 69 </a> 70 </li> 71 <li class="span12"> 72 <a href="#" class="thumbnail"> 73 <img src="http://www.cnblogs.com/Content/MyImg/1351742446178.jpg" /> 74 </a> 75 </li> 76 </ul> 77 </div> 78 </div>
Cart.cshtml
1 @{ 2 ViewBag.Title = "Cart"; 3 Layout = "~/Views/Shared/MasterMe.cshtml"; 4 } 5 6 <div class="row-fluid"> 7 <div class="row-fluid"> 8 <h4 class="span6">我的购物车</h4> 9 <div class="span6 text-right"> 10 <a href="#">清空购物车</a> 11 </div> 12 </div> 13 <div class="row-fluid"> 14 <table class="table table-hover table-bordered table-striped"> 15 <thead> 16 <tr> 17 <th></th> 18 <th style="text-align: center; vertical-align: middle;">商品名称</th> 19 <th style="text-align: center; vertical-align: middle;">市场价</th> 20 <th style="text-align: center; vertical-align: middle;">本网价</th> 21 <th style="text-align: center; vertical-align: middle;">购买数量</th> 22 <th style="text-align: center; vertical-align: middle;">小计</th> 23 <th style="text-align: center; vertical-align: middle;">操作</th> 24 </tr> 25 </thead> 26 <tbody> 27 <tr> 28 <td style="width: 100px; height: 100px;"><a href="#" class="thumbnail"> 29 <img src="http://www.cnblogs.com/Content/MyImg/1351742446178.jpg" style="width: 100px; height: 100px;" /></a></td> 30 <td style="text-align: center; vertical-align: middle;">茅台500ml</td> 31 <td style="text-align: center; vertical-align: middle;">￥1000</td> 32 <td style="text-align: center; vertical-align: middle;">￥990</td> 33 <td style="text-align: center; vertical-align: middle;"> 34 <input type="text" class="input-small" value="1" /></td> 35 <td style="text-align: center; vertical-align: middle;">￥990</td> 36 <td style="text-align: center; vertical-align: middle;"><a href="#">删除</a><br /> 37 <a href="#">添加到收藏夹</a></td> 38 </tr> 39 <tr> 40 <td style="width: 100px; height: 100px;"><a href="#" class="thumbnail"> 41 <img src="http://www.cnblogs.com/Content/MyImg/1351742446178.jpg" style="width: 100px; height: 100px;" /></a></td> 42 <td style="text-align: center; vertical-align: middle;">茅台500ml</td> 43 <td style="text-align: center; vertical-align: middle;">￥1000</td> 44 <td style="text-align: center; vertical-align: middle;">￥990</td> 45 <td style="text-align: center; vertical-align: middle;"> 46 <input type="text" class="input-small" value="1" /></td> 47 <td style="text-align: center; vertical-align: middle;">￥990</td> 48 <td style="text-align: center; vertical-align: middle;"><a href="#">删除</a><br /> 49 <a href="#">添加到收藏夹</a></td> 50 </tr> 51 </tbody> 52 </table> 53 </div> 54 <div class="row-fluid" style="margin-bottom: 10px;"> 55 <div class="pull-right"> 56 <b>合计：</b><span>￥1980</span> 57 <p></p> 58 <p></p> 59 <a href="/T1/Pay" class="btn btn-primary">去结算》》</a> 60 </div> 61 </div> 62 </div>
pay.cshtml
1 @{ 2 ViewBag.Title = "Order"; 3 Layout = "~/Views/Shared/MasterMe.cshtml"; 4 } 5 6 <div class="row-fluid"> 7 <form class="form-horizontal"> 8 <fieldset> 9 <legend>请完善订单信息</legend> 10 <h4>收货信息</h4> 11 <div class="row-fluid"> 12 <div class="span4"> 13 <div class="control-group"> 14 <label class="control-label">收货人：</label> 15 <div class="controls"> 16 <div class=" input-prepend"> 17 <span class="add-on"><i class="icon-user"></i></span> 18 <input type="text" placeholder="姓名" class="input" /> 19 </div> 20 </div> 21 </div> 22 </div> 23 <div class="span4"> 24 <div class="control-group"> 25 <label class="control-label">地址：</label> 26 <div class="controls"> 27 <div class="input-append"> 28 <select class="input-small"> 29 <option>福建省</option> 30 <option>广东省</option> 31 </select> 32 <select class="input-small"> 33 <option>厦门市</option> 34 <option>广州市</option> 35 </select> 36 <select class="input-small"> 37 <option>思明区</option> 38 </select> 39 <input type="text" class="input" placeholder="街道地址、门牌号" /> 40 </div> 41 </div> 42 </div> 43 </div> 44 <div class="span4"></div> 45 </div> 46 <div class="row-fluid"> 47 <div class="span4"> 48 <div class="control-group"> 49 <label class="control-label">手机：</label> 50 <div class="controls"> 51 <div class="input-prepend"> 52 <span class="add-on">Tel</span> 53 <input type="text" class="input" placeholder="手机号码" /> 54 </div> 55 56 </div> 57 </div> 58 </div> 59 <div class="span4"> 60 <div class="control-group"> 61 <label class="control-label">邮件：</label> 62 63 <div class="controls"> 64 <div class="input-prepend"> 65 <span class="add-on"><i class="icon-envelope"></i></span> 66 <input type="text" class="input" placeholder="电子邮件" /> 67 </div> 68 </div> 69 70 </div> 71 </div> 72 <div class="span4"> 73 </div> 74 </div> 75 <h4>配送方式</h4> 76 <div class="row-fluid"> 77 <div class="span4" style="padding-left: 138px;"> 78 <label class="radio"> 79 <input type="radio" name="shipType" checked="checked" /> 80 货到付款 81 </label> 82 </div> 83 <div class="span4"> 84 <label class="radio"> 85 <input type="radio" name="shipType" /> 86 在线支付 87 </label> 88 </div> 89 <div class="span4"></div> 90 </div> 91 <div class="row-fluid" style="margin-top: 20px;"> 92 <ul class="inline"> 93 <li class="span3" style="height: 30px; line-height: 30px; vertical-align: middle;"> 94 <label class="radio"> 95 <input style="width: 28px; height: 28px;" type="radio" name="onlinePay" /><img src="http://www.cnblogs.com/Content/MyImg/bank_zgyh.png" style="width: 30px; height: 30px;" /> 96 中国银行 97 </label> 98 </li> 99 <li class="span3" style="height: 30px; line-height: 30px; vertical-align: middle;"> 100 <label class="radio"> 101 <input style="width: 28px; height: 28px;" type="radio" name="onlinePay" /><img src="http://www.cnblogs.com/Content/MyImg/bank_zgyh.png" style="width: 30px; height: 30px;" /> 102 中国银行 103 </label> 104 </li> 105 <li class="span3" style="height: 30px; line-height: 30px; vertical-align: middle;"> 106 <label class="radio"> 107 <input style="width: 28px; height: 28px;" type="radio" name="onlinePay" /><img src="http://www.cnblogs.com/Content/MyImg/bank_zgyh.png" style="width: 30px; height: 30px;" /> 108 中国银行 109 </label> 110 </li> 111 <li class="span3" style="height: 30px; line-height: 30px; vertical-align: middle;"> 112 <label class="radio"> 113 <input style="width: 28px; height: 28px;" type="radio" name="onlinePay" /><img src="http://www.cnblogs.com/Content/MyImg/bank_zgyh.png" style="width: 30px; height: 30px;" /> 114 中国银行 115 </label> 116 </li> 117 </ul> 118 </div> 119 <div class="row-fluid" style="margin-top: 20px;"> 120 <ul class="inline"> 121 <li class="span3" style="height: 30px; line-height: 30px; vertical-align: middle;"> 122 <label class="radio"> 123 <input style="width: 28px; height: 28px;" type="radio" name="onlinePay" /><img src="http://www.cnblogs.com/Content/MyImg/bank_zgyh.png" style="width: 30px; height: 30px;" /> 124 中国银行 125 </label> 126 </li> 127 <li class="span3" style="height: 30px; line-height: 30px; vertical-align: middle;"> 128 <label class="radio"> 129 <input style="width: 28px; height: 28px;" type="radio" name="onlinePay" /><img src="http://www.cnblogs.com/Content/MyImg/bank_zgyh.png" style="width: 30px; height: 30px;" /> 130 中国银行 131 </label> 132 </li> 133 <li class="span3" style="height: 30px; line-height: 30px; vertical-align: middle;"> 134 <label class="radio"> 135 <input style="width: 28px; height: 28px;" type="radio" name="onlinePay" /><img src="http://www.cnblogs.com/Content/MyImg/bank_zgyh.png" style="width: 30px; height: 30px;" /> 136 中国银行 137 </label> 138 </li> 139 <li class="span3" style="height: 30px; line-height: 30px; vertical-align: middle;"> 140 <label class="radio"> 141 <input style="width: 28px; height: 28px;" type="radio" name="onlinePay" /><img src="http://www.cnblogs.com/Content/MyImg/bank_zgyh.png" style="width: 30px; height: 30px;" /> 142 中国银行 143 </label> 144 </li> 145 </ul> 146 </div> 147 <div class="row-fluid" style="margin-top: 20px;"> 148 <ul class="inline"> 149 <li class="span3" style="height: 30px; line-height: 30px; vertical-align: middle;"> 150 <label class="radio"> 151 <input style="width: 28px; height: 28px;" type="radio" name="onlinePay" /><img src="http://www.cnblogs.com/Content/MyImg/bank_zgyh.png" style="width: 30px; height: 30px;" /> 152 中国银行 153 </label> 154 </li> 155 <li class="span3" style="height: 30px; line-height: 30px; vertical-align: middle;"> 156 <label class="radio"> 157 <input style="width: 28px; height: 28px;" type="radio" name="onlinePay" /><img src="http://www.cnblogs.com/Content/MyImg/bank_zgyh.png" style="width: 30px; height: 30px;" /> 158 中国银行 159 </label> 160 </li> 161 <li class="span3" style="height: 30px; line-height: 30px; vertical-align: middle;"> 162 <label class="radio"> 163 <input style="width: 28px; height: 28px;" type="radio" name="onlinePay" /><img src="http://www.cnblogs.com/Content/MyImg/bank_zgyh.png" style="width: 30px; height: 30px;" /> 164 中国银行 165 </label> 166 </li> 167 <li class="span3" style="height: 30px; line-height: 30px; vertical-align: middle;"> 168 <label class="radio"> 169 <input style="width: 28px; height: 28px;" type="radio" name="onlinePay" /><img src="http://www.cnblogs.com/Content/MyImg/bank_zgyh.png" style="width: 30px; height: 30px;" /> 170 中国银行 171 </label> 172 </li> 173 </ul> 174 </div> 175 <h4 style="margin-top: 30px;">订单清单</h4> 176 <div class="row-fluid" style="margin-top: 20px;"> 177 <table class="table table-hover table-bordered table-striped"> 178 <thead> 179 <tr> 180 <th></th> 181 <th style="text-align: center; vertical-align: middle;">商品名称</th> 182 <th style="text-align: center; vertical-align: middle;">市场价</th> 183 <th style="text-align: center; vertical-align: middle;">本网价</th> 184 <th style="text-align: center; vertical-align: middle;">购买数量</th> 185 <th style="text-align: center; vertical-align: middle;">小计</th> 186 <th style="text-align: center; vertical-align: middle;">操作</th> 187 </tr> 188 </thead> 189 <tbody> 190 <tr> 191 <td style="width: 100px; height: 100px;"><a href="#" class="thumbnail"> 192 <img src="http://www.cnblogs.com/Content/MyImg/1351742446178.jpg" style="width: 100px; height: 100px;" /></a></td> 193 <td style="text-align: center; vertical-align: middle;">茅台500ml</td> 194 <td style="text-align: center; vertical-align: middle;">￥1000</td> 195 <td style="text-align: center; vertical-align: middle;">￥990</td> 196 <td style="text-align: center; vertical-align: middle;"> 197 <input type="text" class="input-small" value="1" /></td> 198 <td style="text-align: center; vertical-align: middle;">￥990</td> 199 <td style="text-align: center; vertical-align: middle;"><a href="#">删除</a><br /> 200 <a href="#">添加到收藏夹</a></td> 201 </tr> 202 <tr> 203 <td style="width: 100px; height: 100px;"><a href="#" class="thumbnail"> 204 <img src="http://www.cnblogs.com/Content/MyImg/1351742446178.jpg" style="width: 100px; height: 100px;" /></a></td> 205 <td style="text-align: center; vertical-align: middle;">茅台500ml</td> 206 <td style="text-align: center; vertical-align: middle;">￥1000</td> 207 <td style="text-align: center; vertical-align: middle;">￥990</td> 208 <td style="text-align: center; vertical-align: middle;"> 209 <input type="text" class="input-small" value="1" /></td> 210 <td style="text-align: center; vertical-align: middle;">￥990</td> 211 <td style="text-align: center; vertical-align: middle;"><a href="#">删除</a><br /> 212 <a href="#">添加到收藏夹</a></td> 213 </tr> 214 </tbody> 215 </table> 216 </div> 217 <div class="row-fluid"> 218 <div class="pull-right"> 219 <a href="#" class="btn btn-primary">提交订单</a> 220 </div> 221 </div> 222 </fieldset> 223 </form> 224 </div>
浙公网安备 33010602011771号