前端之BootStrap的簡單應用
阿新 • • 發佈：2020-08-11
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 ©2005-2016版權所有 237 </div> 238 </div> 239 </div> 240 241 242 243 </body> 244 </html>