设为首页收藏本站

IT技术擎 - 最棒的IT web技术交流社区

 找回密码
 注册为IT技术擎人

QQ登录

只需一步,快速开始

搜索
热搜: php h5 jquery
查看: 39|回复: 0

[未分类] BootStrap实例

[复制链接]

1万

主题

1万

帖子

3万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
34166
发表于 2018-3-1 20:30:09 | 显示全部楼层 |阅读模式
使用BootStrap做一个简单的商城首页
代码:
  1. <!DOCTYPE html > <
  2. html >
  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. title >商城首页 </title > <
  9. link href="css/bootstrap.min.css"rel="stylesheet" > <
  10. script type="text/javascript"src="js/jquery-1.11.3.min.js" > </script > <
  11. script type="text/javascript"src="js/bootstrap.min.js" > </script > </head >
  12. <
  13. body > <
  14. div class="container" > <
  15. div class="row" > <
  16. div class="col-lg-4 col-md-4 col-sm-6" > <
  17. img src="img/logo.png"height="51px" > </div > <
  18. div class="col-lg-5 col-md-5 hidden-xs col-sm-6" > <
  19. img src="img/header.png" > </div > <
  20. div class="col-lg-3 col-md-3 col-sm-12"style="padding-top: 15px;" > <
  21. a href="#" >登录 </a > <
  22. a href="#" >注册 </a > <
  23. a href="#" >购物车 </a > </div > </div > </div > <
  24. div class="container"style="margin-top: 10px;" > <
  25. nav class="navbar navbar-inverse" > <
  26. div class="container-fluid" > <
  27. div class="navbar-header" > <
  28. button type="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-expanded="false" > <
  29. span class="sr-only" >Toggle navigation </span > <
  30. span class="icon-bar" > </span > <
  31. span class="icon-bar" > </span > <
  32. span class="icon-bar" > </span > </button > <
  33. a class="navbar-brand"href="#" >首页 </a > </div > <
  34. div class="collapse navbar-collapse"id="bs-example-navbar-collapse-1" > <
  35. ul class="nav navbar-nav" > <
  36. li class="active" > <
  37. a href="#" >智能手机 <
  38. span class="sr-only" >(current) </span > </a > </li > <
  39. li > <
  40. a href="#" >家用电器 </a > </li > <
  41. li > <
  42. a href="#" >电脑办公 </a > </li > <
  43. li > <
  44. a href="#" >品牌服装 </a > </li > <
  45. li class="dropdown" > <
  46. a href="#"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-haspopup="true"aria-expanded="false" >所有分类 <
  47. span class="caret" > </span > </a > <
  48. ul class="dropdown-menu" > <
  49. li > <
  50. a href="#" >智能手机 </a > </li > <
  51. li > <
  52. a href="#" >家用电器 </a > </li > <
  53. li > <
  54. a href="#" >电脑办公 </a > </li > <
  55. li > <
  56. a href="#" >品牌服装 </a > </li > </ul > </li > </ul > <
  57. form class="navbar-form navbar-right" > <
  58. div class="form-group" > <
  59. input type="text"class="form-control"placeholder="搜索" > </div > <
  60. button type="submit"class="btn btn-default" >搜索 </button > </form > </div > </div > </nav > </div > <
  61. div class="container" > <
  62. div id="carousel-example-generic"class="carousel slide"data-ride="carousel" > <
  63. ol class="carousel-indicators" > <
  64. li data-target="#carousel-example-generic"data-slide-to="0"class="active" > </li > <
  65. li data-target="#carousel-example-generic"data-slide-to="1" > </li > <
  66. li data-target="#carousel-example-generic"data-slide-to="2" > </li > </ol > <
  67. div class="carousel-inner"role="listbox" > <
  68. div class="item active" > <
  69. img src="img/1.jpg"alt="..." > <
  70. div class="carousel-caption" >
  71. ...  </div > </div > <
  72. div class="item" > <
  73. img src="img/2.jpg"alt="..." > <
  74. div class="carousel-caption" > </div > </div > <
  75. div class="item" > <
  76. img src="img/3.jpg"alt="..." > <
  77. div class="carousel-caption" > </div > </div >
  78. ...  </div > <
  79. a class="left carousel-control"href="#carousel-example-generic"role="button"data-slide="prev" > <
  80. span class="glyphicon glyphicon-chevron-left"aria-hidden="true" > </span > <
  81. span class="sr-only" >Previous </span > </a > <
  82. a class="right carousel-control"href="#carousel-example-generic"role="button"data-slide="next" > <
  83. span class="glyphicon glyphicon-chevron-right"aria-hidden="true" > </span > <
  84. span class="sr-only" >Next </span > </a > </div > </div > <
  85. div class="container"style="margin-top: 10px;" > <!--文字内容-- > <
  86. div class="row" > <
  87. span style="font-size: 30px; padding-left: 30px;" >
  88. 热门商品 &nbsp; &nbsp; &nbsp; <
  89. img src="img/title2.jpg"/ > </span > </div > <!--图片内容-- > <
  90. div class="row" > <
  91. div class="col-md-2 col-sm-2 hidden-xs hidden-sm"style="height: 400px;" > <
  92. img src="img/big01.jpg"height="100%"/ > </div > <
  93. div class="col-md-10 col-sm-10"style="padding-left: 10px;" > <
  94. div class="row" > <
  95. div class="col-md-6 hidden-xs hidden-sm"style="height: 200px; width: 490px;" > <
  96. img src="img/middle01.jpg"height="100%"width="100%"/ > </div > <
  97. div class="col-md-2 col-sm-4 col-xs-6"align="center" > <
  98. img src="img/small09.jpg"/ > <
  99. p > <
  100. font color="gray" >商品名 </font > </p > <
  101. p > <
  102. font color="red" >¥666 </font > </p > </div > <
  103. div class="col-md-2 col-sm-4 col-xs-6"align="center" > <
  104. img src="img/small03.jpg"/ > <
  105. p > <
  106. font color="gray" >商品名 </font > </p > <
  107. p > <
  108. font color="red" >¥666 </font > </p > </div > <
  109. div class="col-md-2 col-sm-4 col-xs-6"align="center" > <
  110. img src="img/small02.jpg"/ > <
  111. p > <
  112. font color="gray" >商品名 </font > </p > <
  113. p > <
  114. font color="red" >¥666 </font > </p > </div > </div > <
  115. div class="row" > <
  116. div class="col-md-2 col-sm-4 col-xs-6"align="center" > <
  117. img src="img/small09.jpg"/ > <
  118. p > <
  119. font color="gray" >商品名 </font > </p > <
  120. p > <
  121. font color="red" >¥666 </font > </p > </div > <
  122. div class="col-md-2 col-sm-4 col-xs-6"align="center" > <
  123. img src="img/small03.jpg"/ > <
  124. p > <
  125. font color="gray" >商品名 </font > </p > <
  126. p > <
  127. font color="red" >¥666 </font > </p > </div > <
  128. div class="col-md-2 col-sm-4 col-xs-6"align="center" > <
  129. img src="img/small02.jpg"/ > <
  130. p > <
  131. font color="gray" >商品名 </font > </p > <
  132. p > <
  133. font color="red" >¥666 </font > </p > </div > <
  134. div class="col-md-2 col-sm-4 col-xs-6"align="center" > <
  135. img src="img/small09.jpg"/ > <
  136. p > <
  137. font color="gray" >商品名 </font > </p > <
  138. p > <
  139. font color="red" >¥666 </font > </p > </div > <
  140. div class="col-md-2 col-sm-4 col-xs-6"align="center" > <
  141. img src="img/small03.jpg"/ > <
  142. p > <
  143. font color="gray" >商品名 </font > </p > <
  144. p > <
  145. font color="red" >¥666 </font > </p > </div > <
  146. div class="col-md-2 col-sm-4 col-xs-6"align="center" > <
  147. img src="img/small02.jpg"/ > <
  148. p > <
  149. font color="gray" >商品名 </font > </p > <
  150. p > <
  151. font color="red" >¥666 </font > </p > </div > </div > </div > </div > </div > <
  152. div class="container"style="margin-top: 10px;" > <
  153. div class="row" > <
  154. div class="col-lg-12 col-md-12 hidden-sm hidden-xs"style="padding-left: 15px;" > <
  155. img src="img/ad.jpg"width="100%"/ > </div > </div > </div > <
  156. div class="container"style="margin-top: 10px;" > <!--文字内容-- > <
  157. div class="row" > <
  158. span style="font-size: 30px; padding-left: 30px;" >
  159. 最新商品 &nbsp; &nbsp; &nbsp; <
  160. img src="img/title2.jpg"/ > </span > </div > <!--图片内容-- > <
  161. div class="row" > <
  162. div class="col-md-2 col-sm-2 hidden-xs hidden-sm"style="height: 400px;" > <
  163. img src="img/big01.jpg"height="100%"/ > </div > <
  164. div class="col-md-10 col-sm-10"style="padding-left: 10px;" > <
  165. div class="row" > <
  166. div class="col-md-6 hidden-xs hidden-sm"style="height: 200px; width: 490px;" > <
  167. img src="img/middle01.jpg"height="100%"width="100%"/ > </div > <
  168. div class="col-md-2 col-sm-4 col-xs-6"align="center" > <
  169. img src="img/small09.jpg"/ > <
  170. p > <
  171. font color="gray" >商品名 </font > </p > <
  172. p > <
  173. font color="red" >¥666 </font > </p > </div > <
  174. div class="col-md-2 col-sm-4 col-xs-6"align="center" > <
  175. img src="img/small03.jpg"/ > <
  176. p > <
  177. font color="gray" >商品名 </font > </p > <
  178. p > <
  179. font color="red" >¥666 </font > </p > </div > <
  180. div class="col-md-2 col-sm-4 col-xs-6"align="center" > <
  181. img src="img/small02.jpg"/ > <
  182. p > <
  183. font color="gray" >商品名 </font > </p > <
  184. p > <
  185. font color="red" >¥666 </font > </p > </div > </div > <
  186. div class="row" > <
  187. div class="col-md-2 col-sm-4 col-xs-6"align="center" > <
  188. img src="img/small09.jpg"/ > <
  189. p > <
  190. font color="gray" >商品名 </font > </p > <
  191. p > <
  192. font color="red" >¥666 </font > </p > </div > <
  193. div class="col-md-2 col-sm-4 col-xs-6"align="center" > <
  194. img src="img/small03.jpg"/ > <
  195. p > <
  196. font color="gray" >商品名 </font > </p > <
  197. p > <
  198. font color="red" >¥666 </font > </p > </div > <
  199. div class="col-md-2 col-sm-4 col-xs-6"align="center" > <
  200. img src="img/small02.jpg"/ > <
  201. p > <
  202. font color="gray" >商品名 </font > </p > <
  203. p > <
  204. font color="red" >¥666 </font > </p > </div > <
  205. div class="col-md-2 col-sm-4 col-xs-6"align="center" > <
  206. img src="img/small09.jpg"/ > <
  207. p > <
  208. font color="gray" >商品名 </font > </p > <
  209. p > <
  210. font color="red" >¥666 </font > </p > </div > <
  211. div class="col-md-2 col-sm-4 col-xs-6"align="center" > <
  212. img src="img/small03.jpg"/ > <
  213. p > <
  214. font color="gray" >商品名 </font > </p > <
  215. p > <
  216. font color="red" >¥666 </font > </p > </div > <
  217. div class="col-md-2 col-sm-4 col-xs-6"align="center" > <
  218. img src="img/small02.jpg"/ > <
  219. p > <
  220. font color="gray" >商品名 </font > </p > <
  221. p > <
  222. font color="red" >¥666 </font > </p > </div > </div > </div > </div > </div > <
  223. div class="container"style="margin-top: 10px;" > <
  224. div class="row" > <
  225. div class="col-lg-12 col-md-12 hidden-sm hidden-xs"style="padding-left: 15px;" > <
  226. img src="img/footer.jpg"width="100%"/ > </div > </div > </div > <
  227. div class="container"style="margin-top: 10px;" > <
  228. div class="row" > <
  229. div align="center" > <
  230. ul class="list-inline" > <
  231. li > <
  232. a >关于我们 </a > </li > <
  233. li > <
  234. a >联系我们 </a > </li > <
  235. li > <
  236. a >招贤纳士 </a > </li > <
  237. li > <
  238. a >法律声明 </a > </li > <
  239. li > <
  240. a >友情链接 </a > </li > <
  241. li > <
  242. a >支付方式 </a > </li > <
  243. li > <
  244. a >配送方式 </a > </li > <
  245. li > <
  246. a >服务声明 </a > </li > <
  247. li > <
  248. a >广告声明 </a > </li > </ul > </div > <
  249. div style="text-align: center;margin-top: 5px;margin-bottom:20px;" >
  250. Copyright  &copy;
  251. 1998-2018 版权所有  </div > </div > </div > </body >
  252. </html >
复制代码



上一篇:jQuery查找节点(选择器)
下一篇:OkHttp自定义重试次数
该用户未在地球留下任何的痕迹

本版积分规则

QQ|小黑屋|帮助|IT技术擎 ( 沪ICP备15054863号  

GMT+8, 2018-9-19 01:39

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表