bootstrap的组件应用练习
2023-09-11 14:20:08 时间
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <link rel="stylesheet" href="css/bootstrap.min.css"> 8 9 <style> 10 11 12 .box1{ 13 margin-top: 50px; 14 } 15 16 .box1, .box1 .item{ 17 height: 500px; 18 overflow: hidden; 19 } 20 21 .carousel-inner .carousel-caption{ 22 bottom: 20%; 23 font-size: 40px; 24 } 25 26 @media only screen and (max-width: 768px){ 27 .carousel-inner .carousel-caption{ 28 bottom: 50%; 29 height: 200px; 30 font-size: 20px; 31 } 32 .box1{ 33 height: 200px; 34 } 35 } 36 37 .box2{ 38 margin-top: 50px; 39 } 40 41 .box4 hr { 42 margin: 50px auto; 43 background-color: brown; 44 border: 1px solid brown; 45 width: 80%; 46 } 47 48 .tab-content img{ 49 height: 70%; 50 /* 图片响应式 */ 51 width: 100%; 52 } 53 54 55 </style> 56 </head> 57 <body> 58 <!-- 导航条 --> 59 60 61 <nav class=" mydht navbar navbar-inverse navbar-fixed-top"> 62 <div class="container-fluid"> 63 <!-- Brand and toggle get grouped for better mobile display --> 64 <div class="navbar-header"> 65 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 66 <span class="sr-only">Toggle navigation</span> 67 <span class="icon-bar"></span> 68 <span class="icon-bar"></span> 69 <span class="icon-bar"></span> 70 </button> 71 <a class="navbar-brand" href="#">现代浏览器博物馆</a> 72 </div> 73 74 <!-- Collect the nav links, forms, and other content for toggling --> 75 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 76 <ul class="nav navbar-nav"> 77 <li class="active"><a href="#">综合 <span class="sr-only">(current)</span></a></li> 78 <li><a href="#">学校</a></li> 79 <li class="dropdown"> 80 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉框 <span class="caret"></span></a> 81 <!-- 这里的href="#Chrome" 要与标签页的连接的 href相同--> 82 <ul class="dropdown-menu" id="marco"> 83 <li><a href="#Chrome">Chrome</a></li> 84 <li><a href="#firefox">firefox</a></li> 85 <li><a href="#safari">safari</a></li> 86 <li role="separator" class="divider"></li> 87 <li><a href="#opera">opera</a></li> 88 <li role="separator" class="divider"></li> 89 <li><a href="#ie">IE</a></li> 90 </ul> 91 </li> 92 <li><a href="#" data-target="#myModal" data-toggle="modal">关于</a></li> 93 </ul> 94 95 <ul class="nav navbar-nav navbar-right"> 96 <li><a href="#">介绍</a></li> 97 <li class="dropdown"> 98 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">你好 <span class="caret"></span></a> 99 <ul class="dropdown-menu"> 100 <li><a href="#">Action</a></li> 101 <li><a href="#">Another action</a></li> 102 <li><a href="#">Something else here</a></li> 103 <li role="separator" class="divider"></li> 104 <li><a href="#">Separated link</a></li> 105 </ul> 106 </li> 107 </ul> 108 </div><!-- /.navbar-collapse --> 109 </div><!-- /.container-fluid --> 110 </nav> 111 112 113 114 <!-- 轮播图 --> 115 116 <div id="carousel-example-generic" class="carousel slide box1" 117 data-ride="carousel" > 118 <!-- Indicators --> 119 <ol class="carousel-indicators"> 120 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 121 <li data-target="#carousel-example-generic" data-slide-to="1"></li> 122 <li data-target="#carousel-example-generic" data-slide-to="2"></li> 123 <li data-target="#carousel-example-generic" data-slide-to="2"></li> 124 <li data-target="#carousel-example-generic" data-slide-to="2"></li> 125 </ol> 126 127 <!-- Wrapper for slides --> 128 <div class="carousel-inner" role="listbox"> 129 <div class="item active"> 130 <img src="images/firefox-big.jpg" alt="..."> 131 <div class="carousel-caption"> 132 <h3>chrome</h3> 133 </div> 134 </div> 135 <div class="item"> 136 <img src="images/firefox-big.jpg" alt="..."> 137 <div class="carousel-caption"> 138 <h3>firefox</h3> 139 </div> 140 </div> 141 <div class="item"> 142 <img src="images/ie-big.jpg" alt="..."> 143 <div class="carousel-caption"> 144 <h3>ie</h3> 145 </div> 146 </div> 147 <div class="item"> 148 <img src="images/opera-big.jpg" alt="..."> 149 <div class="carousel-caption"> 150 <h3>opera</h3> 151 </div> 152 </div> 153 <div class="item"> 154 <img src="images/safari-big.jpg" alt="..."> 155 <div class="carousel-caption"> 156 <h3>safari</h3> 157 </div> 158 </div> 159 160 </div> 161 162 <!-- Controls --> 163 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 164 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 165 <span class="sr-only">Previous</span> 166 </a> 167 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 168 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 169 <span class="sr-only">Next</span> 170 </a> 171 </div> 172 173 <!-- 三列布局 --> 174 <div class="container box2"> 175 176 <div class="row"> 177 <div class=" col-sm-4 text-center"> 178 179 <img src="images/chrome-logo-small.jpg" alt="..."> 180 <div class="caption"> 181 <h3 class="text-center">chrome</h3> 182 <p class="text-center">Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p> 183 <p class="text-center"><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> 184 185 </div> 186 187 </div> 188 <div class=" col-sm-4 text-center"> 189 190 <img src="images/firefox-logo-small.jpg" alt="..."> 191 <div class="caption"> 192 <h3 class="text-center">firefox</h3> 193 <p class="text-center">Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p> 194 <p class="text-center"><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> 195 196 </div> 197 </div> 198 199 <div class=" col-sm-4 text-center"> 200 201 <img src="images/safari-logo-small.jpg" alt="..."> 202 <div class="caption"> 203 <h3 class="text-center">safari</h3> 204 <p class="text-center">Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p> 205 <p class="text-center"><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> 206 207 </div> 208 209 </div> 210 </div> 211 </div> 212 213 <!-- 分割线 --> 214 <div class="box4"><hr></div> 215 216 <!-- 标签页切换栏 --> 217 <div class="container mybqy"> 218 219 <!-- Nav tabs --> 220 <ul class="nav nav-tabs" role="tablist" id="marco-list" > 221 <li role="presentation" class="active"><a href="#Chrome" aria-controls="home" role="tab" data-toggle="tab">Chrome</a></li> 222 <li role="presentation"><a href="#firefox" aria-controls="profile" role="tab" data-toggle="tab">firefox</a></li> 223 <li role="presentation"><a href="#safari" aria-controls="messages" role="tab" data-toggle="tab">safari</a></li> 224 <li role="presentation"><a href="#opera" aria-controls="settings" role="tab" data-toggle="tab">opera</a></li> 225 <li role="presentation"><a href="#ie" aria-controls="settings" role="tab" data-toggle="tab">IE</a></li> 226 </ul> 227 228 <!-- Tab panes id="Chrome"和href="#Chrome"相关联 --> 229 <div class="tab-content"> 230 <div role="tabpanel" class="tab-pane active" id="Chrome"> 231 <div class="container"> 232 <div class="row"> 233 <div class=" col-md-7"> 234 <h3>IE 你懂的</h3> 235 Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。 236 </div > 237 <div class=" col-md-5"> 238 <img src="./images/chrome-logo.jpg" alt=""> 239 </div> 240 </div> 241 </div> 242 </div> 243 244 <div role="tabpanel" class="tab-pane" id="firefox"> 245 246 <div class="container"> 247 <div class="row"> 248 <div class=" col-md-7"> 249 <h3>firefox 你懂的</h3> 250 Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。 251 </div > 252 <div class=" col-md-5"> 253 <img src="./images/firefox-logo.jpg" alt=""> 254 </div> 255 </div> 256 </div> 257 </div> 258 <div role="tabpanel" class="tab-pane" id="safari"> 259 260 <div class="container"> 261 <div class="row"> 262 <div class=" col-md-7"> 263 <h3>IE 你懂的</h3> 264 Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。 265 </div > 266 <div class=" col-md-5"> 267 <img src="./images/safari-logo.jpg" alt=""> 268 </div> 269 </div> 270 </div> 271 </div> 272 <div role="tabpanel" class="tab-pane" id="opera"> 273 274 <div class="container"> 275 <div class="row"> 276 <div class=" col-md-7"> 277 <h3>IE 你懂的</h3> 278 Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。 279 </div > 280 <div class=" col-md-5"> 281 <img src="./images/ie-logo.jpg" alt=""> 282 </div> 283 </div> 284 </div> 285 </div> 286 <div role="tabpanel" class="tab-pane" id="ie"> 287 288 <div class="container"> 289 <div class="row"> 290 <div class=" col-md-5"> 291 <h3>safari 你懂的</h3> 292 Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。 293 </div > 294 <div class=" col-md-7"> 295 <img src="./images/safari-logo.jpg" alt=""> 296 </div> 297 </div> 298 </div> 299 </div> 300 </div> 301 302 </div> 303 304 <!-- 版权 --> 305 <div class="container"> 306 <span style="font-family: 宋体;">©尚硅谷</span> 307 308 </div> 309 310 <!-- 模态框，通过点击关于连接，弹出弹框 --> 311 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 312 <div class="modal-dialog" role="document"> 313 <div class="modal-content"> 314 <div class="modal-header"> 315 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 316 <h4 class="modal-title" id="myModalLabel">Modal title</h4> 317 </div> 318 <div class="modal-body"> 319 我是一个模态框 320 </div> 321 <div class="modal-footer"> 322 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 323 <button type="button" class="btn btn-primary">Save changes</button> 324 </div> 325 </div> 326 </div> 327 </div> 328 329 <!-- 点击顶部下拉框，跳转到标签页对应的位置 330 1.获取标签页的元素marco 331 2.将下拉框连接的href与标签页的href相同，获取下拉框中连接的href属性 332 3.将标签页的href属性获取到，下拉框的href相关联，tab('show')方法展示出来 333 4.获取标签页当前的top,利用浏览器的滚动距离，滚动标签页这里 334 --> 335 336 337 338 </body> 339 <script src="js/jquery.min.js"></script> 340 <script src="js/bootstrap.min.js"></script> 341 342 <script> 343 $(function(){ 344 345 // $('.start').click(function(){ 346 // $('.carousel').carousel('cycle'); 347 // }) 348 349 // $('.pause').click(function(){ 350 // $('.carousel').carousel('pause'); 351 // }) 352 353 $('#marco li>a' ).click(function(e){ //点击下拉框每个连接 354 var href= $(this).attr('href'); //获取每个连接的href属性 355 // console.log(href) 356 $('#marco-list li>a[href='+href+']').tab('show'); //自动切换标签页，tab('show')方法 357 e.preventDefault(); //阻止浏览器点击连接的默认行为 358 // console.log($('.mybqy').offset().top) 359 $('html,body').scrollTop($('.mybqy').offset().top) //让浏览器的滚动条滚到标签页位置 360 361 362 }) 363 }) 364 </script> 365 </html>
相关文章
- 使用Bootstrap typeahead插件实现搜索框自动补全的配置参数。
- 第二百四十九节，Bootstrap附加导航插件
- bootstrap, boosting, bagging
- Angular-Bootstrap和Compiler
- bootstrap之Click大事
- 日期时间选择器、Bootstrap日期和时间表单组件。bootstrap-datetimepicker实现年月日，时分秒的选择。
- 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题
- Bootstrap WPF Style,Bootstrap风格的WPF样式
- 【Bootstrap】bootstrap入门之Scss知识点详解_03