发表于: 2021-05-15 23:09:59
1 993
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
1,对bootstrap知识点进行了学习,有了一定的理解
【列组合】这种代码,写出来的,就是默认的,从左排到右
<div class="container">
<div class="row">
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">col-md-8</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
【列偏移】 用到的是.col-md-offset-*就可以偏移了 默认的是做左对齐的
<div class="container">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4 col-md-offset-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">col-md-3</div>
<div class="col-md-3 col-md-offset-3">col-md-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">col-md-3</div>
</div>
</div>
【列嵌套】在一个列里面在声明一个或者多个行(row),但是注意,内部嵌套的row的宽度为100%时,就说当前外部列的宽度。
<div class="container">
<div class="row">
<div class="col-md-9">LEVEL1:col-md-9
<div class="row">
<div class="col-md-6">LEVEL2:col-md-6</div>
<div class="col-md-6">LEVEL2:col-md-6</div>
</div>
</div>
<div class="col-md-3">LEVEL1:col-md-3</div>
</div>
</div>
【列排序】列排序其实可以改变列的方向,也就是给编左右浮动,并且设置浮动的距离,通过.col-md-pull-*和.col-md-push来实现的。
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3">col-md-9</div>
<div class="col-md-3 col-md-pull-9">col-md-3</div>
</div>
</div>
明天计划的事情:(一定要写非常细致的内容)
1,学到的栅格化知识点,运用到任务当中
遇到的问题:(遇到什么困难,怎么解决的)
1,栅格化知识点懂,但是运用起来,总觉得不是那么回事。布局的时候,套进去的div,加了样式不受控制。本以为是在格子里放内容,实际操作有的内容,占了同一个格子,这让人很困惑,不知道如何处理,总之问题很多,还没搞清楚,具体要怎么运用到任务中。
2,布局中的定宽不定宽,定高不定高,或者自适应,用的时候,觉得自己很乱,往往用错了,页面缩放,导致内容很别捏。
收获:(通过今天的学习,学到了什么知识)
1,栅格化的基础知识,列组合,列偏移,列嵌套,列排序
2,子元素选择器与后代选择器,多类名选择器
3,布局容器与流式布局容器
评论