Bootstrap学习方法及案例分享
来源：互联网 发布：上海紫越网络好吗 编辑：程序博客网 时间：2024/06/07 05:13
前言：
本文将分享一下自己学习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>
阅读全文
0 0
- Bootstrap学习方法及案例分享
- Bootstrap学习方法及案例分享
- Bootstrap学习方法及案例分享
- BootStrap简单介绍及案例分享
- LVS+Heartbeat 实施案例及经验分享
- 探索网站改版：注意事项及案例分享
- PHP学习方法分享到:
- Linux学习方法分享
- JAVA学习方法分享
- Linux学习方法分享
- [转]分享我的网站优化经验及学习方法，欢迎大家来探讨
- 新媒体营销操作手法及案例分享-初贵民
- java线程池的使用及案例分享
- 2017精选BIM案例分享介绍及下载
- bootstrap样式案例
- Bootstrap 一个案例应用
- 分享PHP入门的学习方法
- 分享PHP入门的学习方法
- 数据类型的转换
- 理解Vue 2.0 的ref属性及简单用法
- uva 12563 01背包 两个最优条件 lrj-P274
- ajax传输json数据遇到不执行success方法也不报错的问题
- word2vec
- Bootstrap学习方法及案例分享
- 计算机二进制的自我理解
- jquery动态修改背景图片
- 一种非AirPlay的方法来实现IOS录屏
- httpclient调用京东万象数字营销频道新闻api实例
- Java 查找某个数字在数组中第一次和最后一次出现的位置
- 暑期 NLP 之 TF-IDF 算法笔记
- hdu 1520 Anniversary party(树形dp)
- 新手第一次注册
