前端之BootStrap的简单应用 

  1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3 
  4     <head>
  5         <meta charset="utf-8">
  6         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7         <meta name="viewport" content="width=device-width, initial-scale=1">
  8         <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  9         <title>网站首页</title>
 10 
 11         <!-- Bootstrap -->
 12         <link href="../css/bootstrap.min.css" rel="stylesheet">
 13         <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
 14         <script src="../js/jquery-1.11.0.js"></script>
 15         <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
 16         <script src="../js/bootstrap.min.js"></script>
 17         
 18         <!--以上是标准模板，导入写好的css文件，导入bootstrap.js文件前先导入jq文件，因为里面用了jq的东西-->
 19     <!--BootStrap：
 20         1.轻量级开发响应式页面的前端框架
 21         2.全局CSS,组件，js插件
 22         3.栅格系统：将页面的宽度分为12的等分-->
 23     </head>
 24 
 25     <body>
 26         <!--logo部分-->
 27         <div class="container"><!--都放入容器中 容器中先写行，然后对一行12个单位列进行分配，最后的数字是每列占多少个单位列-->
 28             <div class=" row ">
 29                 <div class="col-md-4 "><!--xs,sm,md,lg 依次是手机，平板，电脑，大屏幕-->
 30                     <img src="../img/logo2.png " />
 31                 </div>
 32                 <div class="col-md-4 ">
 33                     <img src="../img/header.png " />
 34                 </div>
 35                 <div class="col-md-4 " style="padding-top:15px "><!--内边距-->
 36                     <a href="# ">登录</a>
 37                     <a href="# ">注册</a>
 38                     <a href="# ">购物车</a>
 39                 </div>
 40             </div>
 41         </div>
 42     <!--导航栏部分--><!--组建下的导航条-->
 43     
 44         <div class="container" margin-top="10px">
 45             <nav class="navbar navbar-inverse"><!--navbar-inverse修改了背景颜色-->
 46   <div class="container-fluid">
 47     <!-- Brand and toggle get grouped for better mobile display -->
 48     <div class="navbar-header">
 49       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 50         <span class="sr-only">Toggle navigation</span>
 51         <span class="icon-bar"></span>
 52         <span class="icon-bar"></span>
 53         <span class="icon-bar"></span>
 54       </button>
 55       <a class="navbar-brand" href="#">首页</a>
 56     </div>
 57 
 58     <!-- Collect the nav links, forms, and other content for toggling -->
 59     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 60       <ul class="nav navbar-nav">
 61         <li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li>
 62         <li><a href="#">家用电器</a></li>
 63         <li><a href="#">鞋靴箱包</a></li>
 64         <li><a href="#">麻辣隔壁</a></li>
 65         <li><a href="#">神马浮云</a></li>
 66         <li class="dropdown">
 67           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
 68           <ul class="dropdown-menu">
 69             <li><a href="#">手机数码</a></li>
 70             <li><a href="#">家用电器</a></li>
 71             <li><a href="#">鞋靴箱包</a></li>
 72             <li role="separator" class="divider"></li>
 73             <li><a href="#">麻辣隔壁</a></li>
 74             <li role="separator" class="divider"></li>
 75             <li><a href="#">神马浮云</a></li>
 76           </ul>
 77         </li>
 78       </ul>
 79       <form class="navbar-form navbar-right">
 80         <div class="form-group">
 81           <input type="text" class="form-control" placeholder="Search">
 82         </div>
 83         <button type="submit" class="btn btn-default">Submit</button>
 84       </form>
 85     </div><!-- /.navbar-collapse -->
 86   </div><!-- /.container-fluid -->
 87 </nav>
 88 </div>
 89 
 90 <!--轮播图-->
 91 <!--使用bootstrap中的js插件，复制官网上carousel代码-->
 92 <div class="container">
 93     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 94   <!-- Indicators -->
 95   <ol class="carousel-indicators">
 96     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
 97     <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 98     <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 99     <li data-target="#carousel-example-generic" data-slide-to="3"></li><!--对应图片个数-->
100   </ol>
101 
102   <!-- Wrapper for slides -->
103   <div class="carousel-inner" role="listbox">
104     <div class="item active">
105       <img src="../img/1.jpg" alt="...">
106       <div class="carousel-caption">
107         ...
108       </div>
109     </div>
110     <div class="item">
111       <img src="../img/2.jpg" alt="...">
112       <div class="carousel-caption">
113         ...
114       </div>
115     </div>
116     <div class="item">
117       <img src="../img/3.jpg" alt="...">
118       <div class="carousel-caption">
119         ...
120       </div>
121     </div>
122     <div class="item"><!--添加图片-->
123       <img src="../img/okwu.jpg" alt="...">
124       <div class="carousel-caption">
125         ...
126       </div>
127     </div>
128   </div>
129 
130   <!-- Controls -->
131   <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
132     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
133     <span class="sr-only">Previous</span>
134   </a>
135   <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
136     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
137     <span class="sr-only">Next</span>
138   </a>
139 </div>
140 </div>
141 <!--热门商品-->
142 <div class="container" style="margin-top: 10px;">
143     <div class="row">
144         <div class="col-md-12">
145             <font size="6">热门商品</font><img src="../img/title2.jpg" />
146         </div>
147     </div>
148     <div class="row" >
149         <div class="col-md-2 hidden-xs hidden-sm" style="height:380px">
150             <img src="../img/big01.jpg" height="100%"/>
151         </div>
152         <div class="col-md-10">
153             <div class="row">
154                 <div class="col-md-6 hidden-xs hidden-sm" style="height:190px" align="center">
155                     <img src="../img/middle01.jpg"  width="100%" height="100%"/>
156                 </div>
157                 <div class="col-md-2 col-sm-4 col-xs-6"align="center">
158                     <img src="../img/small06.jpg"/><br />
159                     <a href="#"><font color="gray">洗衣机</font></a><br />
160                     <a href="#"><font color="red">￥998</font></a>
161                 </div>
162                 <div class="col-md-2 col-sm-4 col-xs-6" align="center">
163                     <img src="../img/small06.jpg"/><br />
164                     <a href="#"><font color="gray">洗衣机</font></a><br />
165                     <a href="#"><font color="red">￥998</font></a>
166                 </div>
167                 <div class="col-md-2 col-sm-4 col-xs-6" align="center">
168                     <img src="../img/small06.jpg"/><br />
169                     <a href="#"><font color="gray">洗衣机</font></a><br />
170                     <a href="#"><font color="red">￥998</font></a>
171                 </div>
172                 
173             </div>
174             <div class="row">
175                 <div class="col-md-2 col-sm-4 col-xs-6" align="center">
176                     <img src="../img/small06.jpg"/><br />
177                     <a href="#"><font color="gray">洗衣机</font></a><br />
178                     <a href="#"><font color="red">￥998</font></a>
179                 </div>
180                 <div class="col-md-2 col-sm-4 col-xs-6" align="center">
181                     <img src="../img/small06.jpg"/><br />
182                     <a href="#"><font color="gray">洗衣机</font></a><br />
183                     <a href="#"><font color="red">￥998</font></a>
184                 </div>
185                 <div class="col-md-2 col-sm-4 col-xs-6" align="center">
186                     <img src="../img/small06.jpg"/><br />
187                     <a href="#"><font color="gray">洗衣机</font></a><br />
188                     <a href="#"><font color="red">￥998</font></a>
189                 </div>
190                 <div class="col-md-2 col-sm-4 col-xs-6" align="center">
191                     <img src="../img/small06.jpg"/><br />
192                     <a href="#"><font color="gray">洗衣机</font></a><br />
193                     <a href="#"><font color="red">￥998</font></a>
194                 </div>
195                 <div class="col-md-2 col-sm-4 col-xs-6" align="center">
196                     <img src="../img/small06.jpg"/><br />
197                     <a href="#"><font color="gray">洗衣机</font></a><br />
198                     <a href="#"><font color="red">￥998</font></a>
199                 </div>
200                 <div class="col-md-2 col-sm-4 col-xs-6" align="center">
201                     <img src="../img/small06.jpg"/><br />
202                     <a href="#"><font color="gray">洗衣机</font></a><br />
203                     <a href="#"><font color="red">￥998</font></a>
204                 </div>
205                 
206             </div>
207         </div>
208     </div>
209 </div>
210 
211 <!--广告图片-->
212 <div class="container"style="margin-top: 10px;">
213     <div class="row">
214         <div class="col-md-12 hidden-xs hidden-sm">
215             <img src="../img/ad.jpg" width="100%"/>
216         </div>
217         
218     </div>
219 </div>
220 <div class="container">
221     <div class="row">
222         <div class="" align="center">
223             <ul class="list-inline">
224                 <li><a href="#">关于我们</a></li>
225                 <li><a href="#">联系我们</a></li>
226                 <li><a href="#">招纳贤士</a></li>
227                 <li><a href="#">法律声明</a></li>
228                 <li><a href="#">友情链接</a></li>
229                 <li><a href="#">支付方式</a></li>
230                 <li><a href="#">配送方式</a></li>
231                 <li><a href="#">服务声明</a></li>
232                 <li><a href="#">广告声明</a></li>
233             </ul>
234         </div>
235         <div style="text-align:center;margin-top:5px;margin-bottom:20px;">
236             Copyright &copy;2005-2016版权所有
237         </div>
238     </div>
239 </div>
240 
241 
242 
243   </body>
244 </html>

 

posted @ 2020-08-11 11:43  /*nobody*/  阅读(145)  评论(0)    收藏  举报