bootstrap课程2 bootstrap的栅格系统的主要作用是什么

一、总结

一句话总结：响应式布局（就是适应不同的屏幕，手机，平板，电脑）

1、bootstrap的栅格系统如何使用？

row + col-md-4

26         <div class="row">

27             <div class="col-md-4 pull-right">

28                 <img src="logo.png" width="100%">

29             </div>

30         </div>

2、bootstrap的栅格系统的主要作用是什么？

响应式布局（就是适应不同的屏幕，手机，平板，电脑）

3、bootstrap的容器是什么？

布局容器:
.container

24     <div class="container">

25         <h1>Boostrap前端框架</h1>

26         <div class="row">

27             <div class="col-md-4 pull-right">

28                 <img src="logo.png" width="100%">

29             </div>

30         </div>

31     </div>

4、bootstrap右浮动是什么？

pull-right

27             <div class="col-md-4 pull-right">

5、手机根据宽高设置样式，而不是根据分辨率，为什么？

手机的分辨率现在很大，要是根据分辨率，字会小的看不清

6、为什么bootstrap不适合做颗粒特别小的网站？

上来很多控件（比如栅格）就给你加了内边距，如果左颗粒度比较小的网站，还得自己调，划不来

7、bootstrap栅格系统里面的col-md-4这句话的精髓是什么？

col-md-4把可用区域分成了四份，要是小于了我的最小宽度，我就跑到下一行，也就是电脑上面的很多横放的图片组到手机上面竖放的了。

8、bootstrap栅格系统中，电脑端和移动端（平板和手机）分别使用什么好？

电脑端使用中等屏幕的 .col-md-
移动端（平板和手机）使用小屏幕 .col-sm-
除这两个外，还有超小屏幕的.col-xs- 和大屏幕的 .col-lg-

9、栅格系统开发页面方便么？

开发的话会特别特别快，比如云之梦

二、bootstrap的栅格系统的主要作用是什么

1、相关知识

bootstrap安装:
<link rel="stylesheet" href="bs/css/bootstrap.css">
<script src="bs/js/jquery.min.js"></script>
<script src="bs/js/bootstrap.js"></script>

html5文档类型:
<!doctype html>

移动端设备的真实宽度:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

布局容器:
.container

栅格系统:
.row 一行12列
.col-md-4 占3列的宽

2、代码

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <link rel="stylesheet" href="bs/css/bootstrap.css">

     <script src="bs/js/jquery.min.js"></script>

     <script src="bs/js/bootstrap.js"></script>

     <script src="bs/js/holder.min.js"></script>

     <style>

         *{

             /*font-family: 微软雅黑;*/

         }

         .container{

             height:300px;

         }

         .row{

             margin-bottom:15px;

         }

     </style>

 </head>

 <body>

     <div class="container">

         <h1>Boostrap前端框架</h1>

         <div class="row">

             <div class="col-md-4 pull-right">

                 <img src="logo.png" width="100%">

             </div>

         </div>

     </div>

 </body>

 </html>