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 93 head> 94 <body> 95 96 <div class="navbar navbar-inverse my-navbar"> 97 <div class="container"> 98 <div class="container-fluid"> 99 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 navigationspan> 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="#">Chromea>li> 117 <li><a href="#">Firefoxa>li> 118 <li><a href="#">Safaria>li> 119 <li><a href="#">Operaa>li> 120 <li><a href="#">IEa>li> 121 ul> 122 li> 123 <li><a href="#" data-target="#myModal" data-toggle="modal">关于a>li> 124 ul> 125 div> 126 div> 127 div> 128 div> 129 130 131 <div id="carousel-example-generic" class="carousel slide my-carousel" data-ride="carousel"> 132 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 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>Chromeh1> 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>Firefoxh1> 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>Safarih1> 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>IEh1> 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>Operah1> 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 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">Previousspan> 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">Nextspan> 216 a> 217 div> 218 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>Chromeh1> 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>Firefoxh1> 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>Safarih1> 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 259 <hr class="my-feature-divider"> 260 261 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">Chromea>li> 264 <li role="presentation"><a href="#firefox" aria-controls="profile" role="tab" data-toggle="tab">Firefoxa>li> 265 <li role="presentation"><a href="#safari" aria-controls="messages" role="tab" data-toggle="tab">Safaria>li> 266 <li role="presentation"><a href="#opera" aria-controls="settings" role="tab" data-toggle="tab">Operaa>li> 267 <li role="presentation"><a href="#ie" aria-controls="settings" role="tab" data-toggle="tab">IEa>li> 268 ul> 269 270 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 357 358 <div class="container my-footer"> 359 <p class="pull-right"><a href="#">回到顶部a>p> 360 <p>© 2017p> 361 div> 362 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> 379 div> 380 div> 381 <script src=js/jquery-1.10.2.js>script> 382 <script src=js/bootstrap.min.js>script> 383 body> 384 html>