為移動端而設計的bootstrap的使用
阿新 • • 發佈：2018-11-30
一、下載
--bs
---css
----bootstrap.css
----bootstrap.min.css
---fonts
---js
----bootstrap.js
----jquery.js
----bootstrap.min.js
二、使用
引入css,js檔案
<script src="bs/js/jquery.js"></script> <script src="bs/js/bootstrap.js"></script> <script src="bs/js/docs.min.js"></script>
三、特點
1、移動端優先 @media(min-width: 960px)
2、佈局容器 container
3、柵格系統 1140px分成12份
4、列偏移
5、holder.js <img src="holder.js/100%x200" alt="">
6、優先順序 若自己寫的css檔案和bootstrap的css檔案標籤和樣式重名，但是想先用自己的css樣式，在後面加 ！important，如：
.row{
margin-top: 20px！important;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bs/css/bootstrap.css"> <script src="bs/js/jquery.js"></script> <script src="bs/js/bootstrap.js"></script> <script src="bs/js/docs.min.js"></script> <style> .row{ margin-top: 20px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4"> <img src="holder.js/100%x200" alt=""> </div> <div class="col-md-offset-4 col-md-4"> <img src="holder.js/100%x200" alt=""> </div> </div> <div class="row"> <div class="col-md-6"> <img src="holder.js/100%x200" alt=""> </div> <div class="col-md-6"> <img src="holder.js/100%x200" alt=""> </div> </div> </div> </body> </html>
四、常用案列
1、table表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bs/css/bootstrap.css"> <script src="bs/js/jquery.js"></script> <script src="bs/js/bootstrap.js"></script> <script src="bs/js/docs.min.js"></script> <style> .container{ margin-top: 50px; } </style> </head> <body> <div class="container"> <table class="table table-bordered table-hover table-striped"> <tr> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> </tr> <tr> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> </tr> <tr> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> </tr> <tr> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> </tr> <tr> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> </tr> </table> </div> </body> </html>
2、表格行內樣式 class： active，info.......
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bs/css/bootstrap.css"> <script src="bs/js/jquery.js"></script> <script src="bs/js/bootstrap.js"></script> <script src="bs/js/docs.min.js"></script> <style> .container{ margin-top: 50px; } </style> </head> <body> <div class="container"> <table class="table table-bordered"> <tr class="active"> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> </tr> <tr class="info"> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> </tr> <tr class="warning"> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> </tr> <tr class="danger"> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> </tr> <tr class="success"> <td>001</td> <td>002</td> <td>003</td> <td>004</td> <td>005</td> </tr> </table> </div> </body> </html>
3、按鈕的各種樣式
4、圖形形狀，圓形，矩形等
5、表單 form-group form-control
6、導航條
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bs/css/bootstrap.css"> <script src="bs/js/jquery.js"></script> <script src="bs/js/bootstrap.js"></script> <script src="bs/js/docs.min.js"></script> <style> /*.container{*/ /*margin-top: 50px;*/ /*}*/ </style> </head> <body> <div class="container"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-header"> <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynav"></button> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse" id="mynav"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </nav> </div> </body> </html>
7、分頁
8、進度條 -----------元件
9、模態框
10、Carousel 切換圖片******************
11、推薦書籍閱覽：
我是醫生不是人 -----------莆田系醫院內幕