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中 ~~~     ~~~