发表于: 2021-05-15 23:09:59

1 994


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了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,布局容器与流式布局容器




返回列表 返回列表
评论

    分享到