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>