bootstrap课程2 bootstrap的栅格系统的主要作用是什么 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、代码
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <link rel="stylesheet" href="bs/css/bootstrap.css"> 7 <script src="bs/js/jquery.min.js"></script> 8 <script src="bs/js/bootstrap.js"></script> 9 <script src="bs/js/holder.min.js"></script> 10 <style> 11 *{ 12 /*font-family: 微软雅黑;*/ 13 } 14 .container{ 15 height:300px; 16 } 17 18 .row{ 19 margin-bottom:15px; 20 } 21 </style> 22 </head> 23 <body> 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> 32 </body> 33 </html>