09. 独特的网格系统

Bootstrap4入门

优酷频道 技术频道

独特的网格系统

知识点

  • col-*
  • 12列布局

参考网页:

https://getbootstrap.com/docs/4.0/layout/grid/

实战演习

<div class="container">
    <div class="row mb-3">
        <div class="col-4 bg-danger">
            COL1
        </div>
        <div class="col-4 bg-success">
            COL2
        </div>
        <div class="col-4 bg-warning">
            COL3
        </div>
    </div>

    <div class="row">
        <div class="col-2 bg-danger">
            COL1
        </div>
        <div class="col-8 bg-success">
            COL2
        </div>
        <div class="col-2 bg-warning">
            COL3
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-6 bg-danger">
            COL1
        </div>
        <div class="col-4 bg-success">
            COL2
        </div>
        <div class="col-8 bg-warning">
            COL3
        </div>
    </div>
</div>

课程文件

https://gitee.com/komavideo/LearnBootstrap4

小马视频频道

http://komavideo.com