11. 制作响应式网页

Bootstrap4入门

优酷频道 技术频道

制作响应式网页

知识点

  • col-*
  • col-sm-*
  • col-md-*
  • col-lg-*
  • col-xl-*

参考网页:

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

实战演习

<div class="row mb-3">
    <div class="col-6 bg-success">Helo1</div>
</div>

<div class="row mb-3">
    <div class="col-xl-12 col-lg-10 col-md-8 col-sm-4 col-6 bg-warning">Helo2</div>
</div>

<div class="row">
    <div class="col-12 col-md-6 bg-danger">Helo3a</div>
    <div class="col-12 col-md-6 bg-primary">Helo3b</div>
</div>

<div class="row">
    <div class="col-12 col-md-6 bg-danger">Helo4a</div>
    <div class="d-none d-md-block col-md-6 bg-primary">Helo4b</div>
</div>

课程文件

https://gitee.com/komavideo/LearnBootstrap4

小马视频频道

http://komavideo.com