发表于: 2019-11-16 22:00:05
1 780
今天完成的事情:
今天学习栅格和媒体查询,学蒙了。。。 没学到多少
吸收的知识略少
因为不知道要引用外链才能实现栅格 一直没效果 找问题找到下午4点多才明白 需要引入外链。。。。。
col-md-offset-3 无法实现列右移 思考轮播图中的文字如何居中,还未实现 导航栏还没想明白怎么弄
对栅格了解还是不够 完全没有思路。。。 明天好好努力学明白了
.col-xs-超小屏幕 手机 (<768px),.col-sm-小屏幕 平板 (≥768px),.col-md-中等屏幕 桌面显示器 (≥992px)(栅格参数).
不管在哪种屏幕上,栅格系统都会自动的分12列 col-xs-*和col-sm-* 和col-md-*后面跟的参数表示在当前的屏幕中 div占的宽度。例如 <div class="col-xs-6 col-md-3"> 这个div在屏幕中占的位置是:1在超小屏幕中占6列 也就是屏幕的一半(6/12) 2.在中单屏幕中占3列也就是1/4(3/12)。 如果我们要在小屏幕上并排显示3个div(12/3=4),在大屏幕上显示6个 则col-xs-4 col-md-2
这样我们就可以控制我们自己想要的什么排版了。
还有一种情况是 <div class="col-sm-10 col-md-8"> 后面跟的div中col-sm的参数如果为3 也就是
<div class="col-sm-10 col-md-8"></div>
<div class="col-sm-3 col-md-4"></div>
如果是这样 这两个div在小屏幕中会排2排 因为10+3>12 ,在中等屏幕中可以排同一排 8+4=12
col-lg一般用于大屏设备,
(min-width:1200px);
col-md一般用于中屏设备,
(min-width:992px);
col-sm一般用于小屏设备,
(min-width:768px);
col-xs用于超小型设备,
(max-width:768px);
后面跟数字是几,也就是占几份(每个占据12份中的几份),
比如是4,也就是一行可以显示3个;
或者12,就是一行可以显示1个。
明天计划的事情:
好好学习栅格和媒体查询 记住一些单位
遇到的问题:
栅格有点迷茫
收获:
一点点知识吧
评论