bootstrap · 前端學習筆記

### 后臺開發（很多表單），企業官網。不適于電商官網之類的定制 # 1. 引用在線模板 [Bootstap中文網](http://www.bootcss.com/) 選擇bs3 ![](https://i.loli.net/2019/03/08/5c825ec169265.png) 選擇起步 ![](https://i.loli.net/2019/03/08/5c825efb67f60.png) 直接找模板，用node.js的關鍵 ![](https://i.loli.net/2019/03/08/5c826035f1682.png) ~~~ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Bootstrap 101 Template</title>  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <style> /* 選擇器，以col為前綴的 */ div[class^="col"]{ } </style> </head> <body> <h1>你好，世界！</h1>  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </body> </html> ~~~ # 2.媒體查詢 bs柵格原理 [全局CSS樣式](https://v3.bootcss.com/css/) ![](https://i.loli.net/2019/03/09/5c83275aa3ea3.png) >其中柵格系統：Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列下面用常規html-css實現柵格原理，即使用媒體查詢 - 媒體查詢：根據屏幕尺寸的不同給它不同的樣式 ~~~ <style> div{ width: 100px; height: 100px; background: red; } @media(max-width:768px){ div{ background: blue; } .col-xs-12{ width: 100%; } } @media (min-width:768px) and (max-width:992px){ div{ background: yellow; } .col-sm-6{ width: 50%; } } @media (min-width:993px) { div{ background: pink; } .col-md-3{ width: 25%; } } </style> <body> //class的寫法曾寫錯過，還半天都看不出來。 <div class="col-xs-12 col-sm-6 col-md-3"></div> </body> ~~~ [柵格系統的詳細講解 Bootstap中文網](https://v3.bootcss.com/css/#grid) # 3. 快捷組合鍵在body中 ~~~     ~~~