1. Bootstrap常用组件
进度条案例
1 <!doctype html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> 10 <link rel="stylesheet" href="fontawesome/css/font-awesome.min.css"> 11 <link rel="stylesheet" href="sweetalert/sweetalert.css"> 12 13 14 </head> 15 <body> 16 17 <br> 18 <br> 19 <div class="container"> 20 <button id="b1" class="btn btn-danger">红色的按钮</button> 21 <div class="progress"> 22 <!-- progress-bar 让进度条有颜色可以填充进度条 --> 23 <div id="progress" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 24 style="width: 0%;"> 25 0% 26 </div> 27 </div> 28 </div> 29 <script src="jquery-3.3.1.min.js"></script> 30 <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> 31 <script src="sweetalert/sweetalert.min.js"></script> 32 <script> 33 let width = 0; 34 let t; 35 36 37 $('#b1').on('click',()=>{ 38 39 t = setInterval(f,100) 40 }); 41 42 function f(){ 43 if (width<100){ 44 width ++; 45 $('#progress').css('width',width+'%').text(width+'%') 46 47 }else{ 48 clearInterval(t); 49 } 50 } 51 52 53 </script> 54 </body> 55 </html>
2. Bootstrap常用插件
1. 模态框
1 <div class="row"> 2 <div class="dropdown"> 3 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" 4 aria-haspopup="true" aria-expanded="true"> 5 Dropdown 6 <span class="caret"></span> 7 </button> 8 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 9 <li><a href="#">Action</a></li> 10 <li><a href="#">Another action</a></li> 11 <li><a href="#">Something else here</a></li> 12 <li role="separator" class="divider"></li> 13 <li><a href="#">Separated link</a></li> 14 </ul> 15 </div> 16 <div class="dropdown pull-right"> 17 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" 18 aria-haspopup="true" aria-expanded="true"> 19 Dropdown 20 <span class="caret"></span> 21 </button> 22 <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1"> 23 <li><a href="#">Action</a></li> 24 <li><a href="#">Another action</a></li> 25 <li><a href="#">Something else here</a></li> 26 <li role="separator" class="divider"></li> 27 <li><a href="#">Separated link</a></li> 28 </ul> 29 </div> 30 31 <!--按钮组--> 32 <div class="btn-group" role="group" aria-label="..."> 33 <button type="button" class="btn btn-default">Left</button> 34 <button type="button" class="btn btn-primary">Middle</button> 35 <button type="button" class="btn btn-success">Right</button> 36 <button type="button" class="btn btn-warning">Right</button> 37 <button type="button" class="btn btn-danger">Right</button> 38 </div> 39 </div>
标签页
1 <ul class="nav nav-tabs" role="tablist"> 2 <li role="presentation" class="active"> 3 <a href="#home" aria-controls="home" role="tab" data-toggle="tab">商品介绍</a> 4 </li> 5 <li role="presentation"> 6 <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">规格包装</a> 7 </li> 8 9 10 <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">评价</a> 11 </li> 12 <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">售后服务</a> 13 </li> 14 </ul>
导航条
1 <div class="navbar-header"> 2 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 3 data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 4 <span class="sr-only">Toggle navigation</span> 5 <span class="icon-bar"></span> 6 <span class="icon-bar"></span> 7 <span class="icon-bar"></span> 8 </button> 9 <a class="navbar-brand" href="#">老男孩教育</a> 10 <p class="navbar-text">只与精英同行</p> 11 </div> 12 13 14 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 15 <ul class="nav navbar-nav"> 16 <li class="active"><a href="#">北京校区 <span class="sr-only">(current)</span></a></li> 17 <li><a href="#">上海校区</a></li> 18 <li><a href="#">深圳校区</a></li> 19 </ul> 20 21 <ul class="nav navbar-nav navbar-right"> 22 <li><a href="#">Link</a></li> 23 <li class="dropdown"> 24 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" 25 aria-expanded="false">个人中心<span class="caret"></span></a> 26 <ul class="dropdown-menu"> 27 <li><a href="#">我的消息</a></li> 28 <li><a href="#">我的设置</a></li> 29 <li><a href="#">账号安全</a></li> 30 <li role="separator" class="divider"></li> 31 <li><a href="#">退出登录</a></li> 32 </ul> 33 </li> 34 </ul> 35 </div><!-- /.navbar-collapse -->
iframe 没啥用
1 <div class="embed-responsive embed-responsive-16by9"> 2 <iframe class="embed-responsive-item" src="http://www.luffycity.com"></iframe> 3 </div>
bootstrap案例
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 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"> 7 <title>BootStrap示例二</title> 8 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 9 <style> 10 11 .my-center { 12 float: none; 13 display: inline-block; 14 vertical-align: middle; 15 margin-right: -4px; 16 } 17 18 .my-nav { 19 border-radius: 0; 20 margin-bottom: 0; 21 } 22 23 .navbar-inverse .navbar-brand { 24 color: #ffffff; 25 background-color: transparent; 26 } 27 28 .my-banner-title { 29 font-size: 36px; 30 } 31 32 @media screen and (max-width: 768px) { 33 .my-banner-title { 34 font-size: 24px; 35 } 36 } 37 38 .my-space { 39 height: 10px; 40 width: 100%; 41 } 42 43 @media screen and (min-width: 768px) { 44 .my-space { 45 height: 40px; 46 width: 100%; 47 } 48 } 49 50 .my-line { 51 display: inline-block; 52 width: 70px; 53 height: 1px; 54 border-top: 1px solid #bbb; 55 margin: auto; 56 } 57 58 .my-padding { 59 padding: 10px 0; 60 } 61 62 @media screen and (min-width: 768px) { 63 .my-padding { 64 padding: 40px 0; 65 } 66 } 67 68 .my-dark { 69 background-color: #f5f5f5; 70 } 71 72 .center-heading { 73 text-align: center; 74 margin-bottom: 40px; 75 } 76 77 .footer { 78 background: #111; 79 font-size: 0.9em; 80 position: relative; 81 clear: both; 82 } 83 </style> 84 </head> 85 <body> 86 87 <nav class="navbar navbar-inverse my-nav"> 88 <div class="container"> 89 <!-- Brand and toggle get grouped for better mobile display --> 90 <div class="navbar-header"> 91 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 92 data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 93 <span class="sr-only">Toggle navigation</span> 94 <span class="icon-bar"></span> 95 <span class="icon-bar"></span> 96 <span class="icon-bar"></span> 97 </button> 98 <a class="navbar-brand" href="#"><strong>OldBoy Edu</strong></a> 99 </div> 100 101 <!-- Collect the nav links, forms, and other content for toggling --> 102 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 103 <ul class="nav navbar-nav"> 104 <li><a href="#">Python学院<span class="sr-only">(current)</span></a></li> 105 <li><a href="#">Linux学院</a></li> 106 </ul> 107 <ul class="nav navbar-nav navbar-right"> 108 <li><a href="#">好好学习</a></li> 109 <li class="dropdown"> 110 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" 111 aria-expanded="false">联系我们<span class="caret"></span></a> 112 <ul class="dropdown-menu"> 113 <li><a href="#">Rain</a></li> 114 <li><a href="#">Egon</a></li> 115 <li><a href="#">Yuan</a></li> 116 <li role="separator" class="divider"></li> 117 <li><a href="#">Q1mi</a></li> 118 </ul> 119 </li> 120 </ul> 121 </div><!-- /.navbar-collapse --> 122 </div><!-- /.container-fluid --> 123 </nav> 124 <header class="header-index"> 125 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 126 <!-- Indicators --> 127 <ol class="carousel-indicators"> 128 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 129 <li data-target="#carousel-example-generic" data-slide-to="1"></li> 130 <li data-target="#carousel-example-generic" data-slide-to="2"></li> 131 </ol> 132 133 <!-- Wrapper for slides --> 134 <div class="carousel-inner" role="listbox"> 135 <div class="item active"> 136 <img src="./banner_1.jpg" alt="..."> 137 <div class="carousel-caption"> 138 <div class="h1 my-banner-title"><strong>Bootstrap一学就会用</strong></div> 139 </div> 140 </div> 141 <div class="item"> 142 <img src="./banner_2.jpg" alt="..."> 143 <div class="carousel-caption"> 144 <div class="h1 my-banner-title">Bootstrap一点都不难</div> 145 </div> 146 </div> 147 <div class="item"> 148 <img src="./banner_3.jpg" alt="..."> 149 <div class="carousel-caption"> 150 <div class="h1 my-banner-title">Bootstrap一试就崩溃</div> 151 </div> 152 </div> 153 </div> 154 155 <!-- Controls --> 156 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 157 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 158 <span class="sr-only">Previous</span> 159 </a> 160 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 161 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 162 <span class="sr-only">Next</span> 163 </a> 164 </div> 165 </header> 166 167 <div class="my-dark"> 168 <div class="container my-padding"> 169 <div class="row"> 170 <div class="col-md-12 text-center"> 171 <h1><strong>Bootstrap能做什么？</strong></h1> 172 <span class="my-line"></span> 173 <p>网站首页、网站后台、手机页面。。。</p> 174 </div> 175 </div> 176 </div> 177 </div> 178 179 <div class="my-space"></div> 180 181 <div> 182 <div class="container my-padding"> 183 <div class="row"> 184 <div class="col-md-6 col-sm-6"> 185 <div class="thumbnail"><img src="./Bootstrap_d1.png" alt=""></div> 186 </div> 187 <div class="col-md-6 col-sm-6 text-center"> 188 <h2>使用<strong>Bootstrap</strong>搭建的</h2> 189 <h2>登陆页面</h2> 190 <span class="my-line"></span> 191 <p class="lead"> 192 使用表单、按钮组件搭建 193 </p> 194 </div> 195 </div> 196 </div> 197 </div> 198 199 <div class="my-dark"> 200 <div class="container my-padding"> 201 <div class="row"> 202 <div class="col-md-6 col-sm-6 text-center"> 203 <h2>使用Bootstrap搭建的</h2> 204 <h2>信息采集单</h2> 205 <span class="my-line"></span> 206 <p class="lead"> 207 使用表单、页头、面板组件、进度条等组件搭建 208 </p> 209 </div> 210 <div class="col-md-6 col-sm-6"> 211 <div class="thumbnail"><img src="./Bootstrap_d2.png" alt=""></div> 212 </div> 213 </div> 214 </div> 215 </div> 216 217 <div> 218 <div class="container my-padding"> 219 <div class="row"> 220 <div class="col-md-6 col-sm-6"> 221 <div class="thumbnail"><img src="./Bootstrap_d3.png" alt=""></div> 222 </div> 223 <div class="col-md-6 col-sm-6 text-center"> 224 <h2>使用<strong>Bootstrap</strong>搭建的</h2> 225 <h2>管理后台</h2> 226 <span class="my-line"></span> 227 <p class="lead"> 228 使用导航条、表格、面板、分页等组件搭建 229 </p> 230 </div> 231 </div> 232 </div> 233 </div> 234 235 <div class="my-dark"> 236 <div class="container my-padding"> 237 <div class="row"> 238 <div class="col-md-6 col-sm-6 text-center"> 239 <h2>使用<strong>Bootstrap</strong>搭建的</h2> 240 <h2>博客页面</h2> 241 <span class="my-line"></span> 242 <p class="lead"> 243 使用自定义导航、自定义分栏和分页等组件搭建 244 </p> 245 </div> 246 <div class="col-md-6 col-sm-6"> 247 <div class="thumbnail"><img src="./Bootstrap_d4.png" alt=""></div> 248 </div> 249 </div> 250 </div> 251 </div> 252 253 <div> 254 <div class="container my-padding"> 255 <div class="row"> 256 <div class="col-md-12"> 257 <div class="center-heading"> 258 <h2>心路历程</h2> 259 <span class="my-line"></span> 260 <p>备课真的累，一下午就写了一个页面</p> 261 <p>时间都去哪儿了？时间都浪费在找我前女友的照片了。。。</p> 262 </div> 263 </div> 264 </div> 265 <hr> 266 <div class="row"> 267 <div class="col-xs-6 col-md-3"> 268 <a href="#" class="thumbnail"> 269 <img src="./Bootstrap_i1.png" alt="..."> 270 </a> 271 </div> 272 <div class="col-xs-6 col-md-3"> 273 <a href="#" class="thumbnail"> 274 <img src="./Bootstrap_i2.png" alt="..."> 275 </a> 276 </div> 277 <div class="col-xs-6 col-md-3"> 278 <a href="#" class="thumbnail"> 279 <img src="./Bootstrap_i3.png" alt="..."> 280 </a> 281 </div> 282 <div class="col-xs-6 col-md-3"> 283 <a href="#" class="thumbnail"> 284 <img src="./Bootstrap_i4.png" alt="..."> 285 </a> 286 </div> 287 </div> 288 <div class="row"> 289 <div class="col-md-12 text-center">对，这些都是我前女友</div> 290 </div> 291 </div> 292 </div> 293 <div class="my-space"></div> 294 295 <div class="my-dark my-padding"> 296 <div class="container"> 297 <div class="col-sm-8 my-center"> 298 <h4>所以说</h4> 299 <p>学好Bootstrap真的很重要，学好Bootstrap真的很重要，学好Bootstrap真的很重要</p> 300 </div> 301 <div class="col-sm-4 my-center"> 302 <a class="btn-success btn-lg btn-success-outline" href="http://v3.bootcss.com/">我知道了</a> 303 </div> 304 </div> 305 </div> 306 307 <div class="footer"> 308 <div class="row"> 309 <div class="col-md-12 text-center"> 310 <span style="color:#fff">©2018 沙河前端小王子</span> 311 </div> 312 </div> 313 </div> 314 315 316 <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script> 317 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 318 </body> 319 </html>