04、栅格系统

栅格系统

可通过bootstrap实现：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

 

结构

//若在大屏下找不到对应的样式类名，那么就会找比它小的且相邻的md，若md没定义就会找sm....

 <div class="container"> <!-- 所有内容都在一个大容器里面，这个容器占据整个屏幕80%的宽度，水平居中 -->
     <div class="row">  <!-- 每一行内容都放在row里面 -->
         <div class="col-12">
             col-3实际上是col-xs-3，表示在超小屏下这个div占据总宽度的3/12
             col-sm-5表示在小屏下，这个div占据总宽度的5/12
             col-md-4，中屏，占总宽度4/12
             col-lg-2，大屏，占总宽度2/12
             col-xl-1，超大屏，占总宽度1/12
         </div>
         <div class="col-12"></div>
     </div>
 </div>

 

 

若在lg屏下，某元素想要往右移3列，即中间空3列

<div class="col-12 col-lg-push-3"></div>  <!-- col-12是原来的，col-lg-push-3表示向右移3列 -->
或->
<div class="col-12 col-lg-offset-3"></div>  <!-- col-12是原来的，col-lg-offset-3表示向右移3列 -->

 

若在md屏下，只有两个元素，且想要调换位置

<div class="col-md-6 col-md-push-3">1</div> <!--1号往右推3列-->
<div class="col-md-6 col-md-pull-3">2</div> <!--2号往左拉3列-->

 

 

元素在超小屏及以上隐藏，在中屏及以上显示

<div class="col-md-6 d-none d-md-block"></div> <!-- d-none实际是d-xs-none -->

 

元素在中屏及以上消失，在小屏及超小屏显示

<div class="col-md-6 d-md-none"></div>