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>