5.bootstrap入门

1. bootstrap入门

1. 下载bootstarp
   
   • 网站:http://www.bootcss.com/
   • 下载:用于生产环境的 Bootstrap
2. 导入bootstarp.css
3. 导入jquery.js

4. 导入bootstrap.js

   <!-- 导入 css-->
   <link rel="stylesheet" href="../css/bootstrap.min.css" />
   <!--导入jquery.js-->
   <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
   
   <!--导入bootstrap.js-->
   <script type="text/javascript" src="../js/bootstrap.min.js" ></script>
   

5. 添加一个meta标签 支持移动设备

       <meta name="viewport" content="width=device-width, initial-scale=1">
   

   注意：通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

6. 将所有的内容放入到布局容器中.
   Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类

   • 方式1:

     <div class="container"></div>
     

   • 方式2:

     <div class="container-fluid"></div>
     

注意:bootstrap将每一行分成12份

1. 假如大屏幕,每行显示6个

   • 超大电脑,屏幕分辨率>1200 使用: col-lg-2

2. 假如屏幕小点,每行显示4个

   • 992<屏幕分辨率<1200 使用: col-md-3

3. 再小点,每行显示2个

   • 768<屏幕分辨率<992 使用: col-sm-6

4. 继续小,每行显示1个

   • 屏幕分辨率<768 使用:col-xs-12

     <div style="border: 1px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div>