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、代码

 <!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>
 
上一篇:bootstrap中栅格系统的原理


下一篇:C语言学习_一个简单程序的解释与C学习方法概括