Bootstrap学习方法及案例分享
发布时间：2020-12-17 20:54:22 所属栏目：安全 来源：网络整理
导读：前言： 本文将分享一下自己学习Bootstrap时的一点经验，希望能对正在开始与Bootstrap作战的小伙伴们一点点帮助，避免一些不必要的曲折。 一、官网 学习一款框架，最开始，学习途径一定是它的官方网站，几乎每一款框架都有非常详细且清晰的文档，虽然网上关于
|
前言： 本文将分享一下自己学习Bootstrap时的一点经验，希望能对正在开始与Bootstrap作战的小伙伴们一点点帮助，避免一些不必要的曲折。 一、官网 学习一款框架，最开始，学习途径一定是它的官方网站，几乎每一款框架都有非常详细且清晰的文档，虽然网上关于该框架的学习资源很多，但是也都不是自创的，追其根源，全部都是来自于官网。与其花费动辄十几个小时去看别人的视频，不如自己去官网学习来得快。 二、官网怎么学 相信好多小伙伴也看过官方文档了，虽然文档挺清晰的，但是还是会觉得一头雾水，抓不住重点。那到底要怎么弄呢？ 1、首先，需要明确这款框架是做什么的，一般，官网首页都会有一个比较醒目的概述，像这样 ?↓
2、其次，就是研究基础示例。一般，一款框架的官网都会提供一个基本模板，或者是简单示例，也就是一个使用该框架的一个最最简单的小例子，可以将代码复制到本地编辑器进行运行，当然，如果需要引用其他的文件，那么也需要下载好进行引用。 3、然后，可以大概随意点击浏览一下，了解一下它里面都有哪些功能模块。 4、耐心研读，在这个过程中，哪些是实现的重点文档都会有说明，需要特别注意，遇到难以理解的部分，或者不明白的部分，可以先跳过，看过几个小模块之后就会对整个模式有一个大致的了解了，后面通过实际项目练习，再着重研究对应的部分就可以了。 5、最后，需要说明的是，样式名是不需要背下来的，做项目的时候，能快速找到相应的位置就可以了。 三、下面是在慕课网上面找的一个bootstrap练手小项目进行练习，包含了几大块重点，很适合练手。比如导航的标签页（选项卡），导航条，轮播图，栅格系统，模态框等
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> 7 <title></title> 8 <link rel="stylesheet" href="css/bootstrap.min.css"> 9 <style> 10 /*导航*/ 11 .my-navbar { 12 margin-bottom: 0; 13 border-radius: 0; 14 } 15 /*轮播图*/ 16 .my-carousel { 17 height: 500px; 18 margin-bottom: 60px; 19 } 20 .my-carousel .item { 21 height: 500px; 22 } 23 .carousel-caption p { 24 margin-bottom: 20px; 25 font-size: 20px; 26 line-height: 1.8; 27 } 28 /*下载——栅格模块*/ 29 .my-container { 30 text-align: center; 31 } 32 33 .my-feature-divider { 34 margin: 40px 0; 35 } 36 .feature { 37 padding: 30px 0; 38 } 39 40 .feature-heading { 41 font-size: 50px; 42 color: #2a6496; 43 } 44 45 .feature-heading .text-muted { 46 font-size: 28px; 47 } 48 .feature p { 49 font-size: 21px; 50 } 51 .feature span { 52 margin-left: 10px; 53 } 54 .my-footer { 55 padding-bottom: 50px; 56 } 57 58 @media (max-width: 768px) { 59 .carousel { 60 height: 300px; 61 margin-bottom: 30px; 62 } 63 64 .carousel .item { 65 height: 300px; 66 } 67 68 .carousel img { 69 min-height: 300px; 70 } 71 72 .carousel-caption p { 73 font-size: 16px; 74 line-height: 1.4; 75 } 76 .feature-heading { 77 font-size: 34px; 78 color: #2a6496; 79 } 80 81 .feature-heading .text-muted { 82 font-size: 22px; 83 } 84 .my-tab-content p{ 85 font-size: 18px; 86 } 87 } 88 </style> 89 <!--[if lt IE 9]> 90 <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> 91 <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> 92 <![endif]--> 93 </head> 94 <body> 95 <!-- 头部导航 --> 96 <div class="navbar navbar-inverse my-navbar"> 97 <div class="container"> 98 <div class="container-fluid"> 99 <!-- Brand and toggle get grouped for better mobile display --> 100 <div class="navbar-header"> 101 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 102 <span class="sr-only">Toggle navigation</span> 103 <span class="icon-bar"></span> 104 <span class="icon-bar"></span> 105 <span class="icon-bar"></span> 106 </button> 107 <a class="navbar-brand" href="#">现代浏览器博物馆</a> 108 </div> 109 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 110 <ul class="nav navbar-nav"> 111 <li class="active"><a href="#">综述 <span class="sr-only">(current)</span></a></li> 112 <li><a href="#">简述</a></li> 113 <li class="dropdown"> 114 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">特点 <span class="caret"></span></a> 115 <ul class="dropdown-menu"> 116 <li><a href="#">Chrome</a></li> 117 <li><a href="#">Firefox</a></li> 118 <li><a href="#">Safari</a></li> 119 <li><a href="#">Opera</a></li> 120 <li><a href="#">IE</a></li> 121 </ul> 122 </li> 123 <li><a href="#" data-target="#myModal" data-toggle="modal">关于</a></li> 124 </ul> 125 </div><!-- /.navbar-collapse --> 126 </div><!-- /.container-fluid --> 127 </div> 128 </div> 129 <!-- 头部导航END --> 130 <!-- 轮播图 --> 131 <div id="carousel-example-generic" class="carousel slide my-carousel" data-ride="carousel"> 132 <!-- Indicators --> 133 <ol class="carousel-indicators"> 134 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 135 <li data-target="#carousel-example-generic" data-slide-to="1"></li> 136 <li data-target="#carousel-example-generic" data-slide-to="2"></li> 137 <li data-target="#carousel-example-generic" data-slide-to="3"></li> 138 <li data-target="#carousel-example-generic" data-slide-to="4"></li> 139 </ol> 140 <!-- Wrapper for slides --> 141 <div class="carousel-inner" role="listbox"> 142 <div class="item active"> 143 <img src="images/chrome-big.jpg" alt="slide_1"> 144 <div class="carousel-caption"> 145 <h1>Chrome</h1> 146 <p> 147 Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。 148 </p> 149 <p> 150 <a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/" 151 role="button" target="_blank"> 152 点我下载 153 </a> 154 </p> 155 156 </div> 157 </div> 158 <div class="item"> 159 <img src="images/firefox-big.jpg" alt="slide_2"> 160 <div class="carousel-caption"> 161 <h1>Firefox</h1> 162 163 <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p> 164 165 <p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank" 166 role="button">点我下载</a></p> 167 168 </div> 169 </div> 170 <div class="item"> 171 <img src="images/safari-big.jpg" alt="slide_3"> 172 <div class="carousel-caption"> 173 <h1>Safari</h1> 174 175 <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p> 176 177 <p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" target="_blank" 178 role="button">点我下载</a></p> 179 180 </div> 181 </div> 182 <div class="item"> 183 <img src="images/ie-big.jpg" alt="slide_4"> 184 <div class="carousel-caption"> 185 <h1>IE</h1> 186 187 <p>Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。</p> 188 189 <p><a class="btn btn-lg btn-primary" href="http://ie.microsoft.com/" target="_blank" 190 role="button">点我下载</a></p> 191 192 </div> 193 </div> 194 <div class="item"> 195 <img src="images/opera-big.jpg" alt="slide_4"> 196 <div class="carousel-caption"> 197 <h1>Opera</h1> 198 199 <p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p> 200 201 <p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" target="_blank" 202 role="button">点我下载</a></p> 203 204 </div> 205 </div> 206 </div> 207 208 <!-- Controls --> 209 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 210 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 211 <span class="sr-only">Previous</span> 212 </a> 213 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 214 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 215 <span class="sr-only">Next</span> 216 </a> 217 </div> 218 <!-- 轮播图END --> 219 220 <!-- 主体 --> 221 <!-- 下载介绍 --> 222 <div class="container"> 223 <div class="row my-container"> 224 <div class="col-md-4"> 225 <img src="images/chrome-logo-small.jpg" alt="chrome-s"> 226 <h1>Chrome</h1> 227 <p> 228 Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。 229 </p> 230 <p> 231 <a class="btn btn-default" href="http://www.google.cn/intl/zh-CN/chrome/browser/" 232 role="button" target="_blank"> 233 点我下载 234 </a> 235 </p> 236 </div> 237 <div class="col-md-4"> 238 <img src="images/firefox-logo-small.jpg" alt="firefox-s"> 239 <h1>Firefox</h1> 240 241 <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p> 242 243 <p><a class="btn btn-default" href="http://www.firefox.com.cn/download/" target="_blank" 244 role="button">点我下载</a></p> 245 </div> 246 <div class="col-md-4"> 247 <img src="images/safari-logo-small.jpg" alt="safari-s"> 248 <h1>Safari</h1> 249 250 <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p> 251 252 <p><a class="btn btn-default" href="http://www.apple.com/cn/safari/" target="_blank" 253 role="button">点我下载</a></p> 254 255 </div> 256 </div> 257 258 <!-- 下载介绍END --> 259 <hr class="my-feature-divider"> 260 <!-- 详情 --> 261 <!-- Nav tabs --> 262 <ul class="nav nav-tabs" role="tablist"> 263 <li role="presentation" class="active"><a href="#chrome" aria-controls="home" role="tab" data-toggle="tab">Chrome</a></li> 264 <li role="presentation"><a href="#firefox" aria-controls="profile" role="tab" data-toggle="tab">Firefox</a></li> 265 <li role="presentation"><a href="#safari" aria-controls="messages" role="tab" data-toggle="tab">Safari</a></li> 266 <li role="presentation"><a href="#opera" aria-controls="settings" role="tab" data-toggle="tab">Opera</a></li> 267 <li role="presentation"><a href="#ie" aria-controls="settings" role="tab" data-toggle="tab">IE</a></li> 268 </ul> 269 270 <!-- Tab panes --> 271 <div class="tab-content my-tab-content"> 272 <div role="tabpanel" class="tab-pane active" id="chrome"> 273 <div class="container"> 274 <div class="row feature"> 275 <div class="col-md-7"> 276 <h2 class="feature-heading">Google Chrome<span class="text-muted">使用最广的浏览器</span></h1> 277 278 <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。 279 该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。 280 281 <p> 282 </div> 283 <div class="col-md-5"> 284 <img src="images/chrome-logo.jpg" alt="chrome_logo" class="img-responsive"> 285 </div> 286 </div> 287 </div> 288 </div> 289 <div role="tabpanel" class="tab-pane" id="firefox"> 290 <div class="container"> 291 <div class="row feature"> 292 <div class="col-md-5"> 293 <img src="images/firefox-logo.jpg" alt="firefox-logo" class="img-responsive"> 294 </div> 295 <div class="col-md-7"> 296 <h2 class="feature-heading">Mozilla Firefox<span class="text-muted">美丽的狐狸</span></h1> 297 298 <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器， 使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。 299 300 <p> 301 </div> 302 </div> 303 </div> 304 </div> 305 <div role="tabpanel" class="tab-pane" id="safari"> 306 <div class="container"> 307 <div class="row feature"> 308 309 <div class="col-md-7"> 310 <h2 class="feature-heading">Safari<span class="text-muted">Mac用户首选</span></h1> 311 312 <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。 Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后的默认浏览器，也是iPhone与IPAD和iPod touch的指定浏览器。 313 <p> 314 </div> 315 <div class="col-md-5"> 316 <img src="images/safari-logo.jpg" alt="safari-logo" class="img-responsive"> 317 </div> 318 </div> 319 </div> 320 </div> 321 <div role="tabpanel" class="tab-pane" id="opera"> 322 <div class="container"> 323 <div class="row feature"> 324 <div class="col-md-5"> 325 <img src="images/opera-logo.jpg" alt="opera-logo"> 326 </div> 327 <div class="col-md-7"> 328 <h2 class="feature-heading">Opera<span class="text-muted">小众但易用</span></h1> 329 330 <p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。 是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。 331 <p> 332 </div> 333 </div> 334 </div> 335 </div> 336 <div role="tabpanel" class="tab-pane" id="ie"> 337 <div class="container"> 338 <div class="row feature"> 339 340 <div class="col-md-7"> 341 <h2 class="feature-heading">IE<span class="text-muted">你懂的</span></h1> 342 343 <p>Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。 344 <p> 345 </div> 346 <div class="col-md-5"> 347 <img src="images/ie-logo.jpg" alt="ie-logo" class="img-responsive"> 348 </div> 349 </div> 350 </div> 351 </div> 352 </div> 353 354 </div> 355 </div> 356 <!-- 详情END --> 357 <!-- 底部 --> 358 <div class="container my-footer"> 359 <p class="pull-right"><a href="#">回到顶部</a></p> 360 <p>© 2017</p> 361 </div> 362 <!-- 底部END --> 363 364 <!-- 点击关于，出现弹出层 --> 365 <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" id="myModal"> 366 <div class="modal-dialog" role="document"> 367 <div class="modal-content"> 368 <div class="modal-header"> 369 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 370 <h4 class="modal-title" id="gridSystemModalLabel">关于</h4> 371 </div> 372 <div class="modal-body"> 373 内容... 374 </div> 375 <div class="modal-footer"> 376 <button type="button" class="btn btn-default" data-dismiss="modal">了解了</button> 377 </div> 378 </div><!-- /.modal-content --> 379 </div><!-- /.modal-dialog --> 380 </div><!-- /.modal --> 381 <script src=js/jquery-1.10.2.js></script> 382 <script src=js/bootstrap.min.js></script> 383 </body> 384 </html> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
