bootStrap

Bootstrap

** 等宽布局
*** 1.bootStrap每一行有12块。超过12份会自动换行
*** 2.1200px 576px 998px

<div class="container">
   <div class="row">
      <div class="col-x1-3" style="background: #FFCCC;">
	      111
	  </div>
	   <div class="col-x1-3" style="background: #FFCCC;">
	      222
	  </div>
	   <div class="col-x1-3" style="background: #FFCCC;">
	      333
	  </div>
	   <div class="col-x1-3" style="background: #FFCCC;">
	      444
	  </div>
	   <div class="col-x1-3" style="background: #FFCCC;">
	      555
	  </div>
   </div>
</div>

** 混合布局

<div class="container">
   <div class="row">
      <div class="col-sm-6 col-lg-3" style="background: #FFCCC;">
	      111
	  </div>
	   <div class="col-sm-6 col-lg-3" style="background: #FFCCC;">
	      222
	  </div>
	   <div class="col-sm-6 col-lg-3" style="background: #FFCCC;">
	      333
	  </div>
	   <div class="col-sm-6 col-lg-3" style="background: #FFCCC;">
	      444
	  </div>
   </div>
</div>

** 垂直布局
*** align-item-start 垂直顶部对齐
*** justify-content-center 水平居中对齐
*** justify-content-around 等距对齐
*** justify-content-between 两端对齐

<div class="container">
   <div class="row align-item-xl-start" style="border:3px solid #F00;height:100px">
      <div class="col-3" style="background: #FFCCC;">
	      111
	  </div>
	   <div class="col-3 align-self-center" style="background: #FFCCC;">
	      222
	  </div>
	   <div class="col-3" style="background: #FFCCC;">
	      333
	  </div>
   </div>
</div>

** 清除沟槽边距
*** no-gutters 清除沟槽边距
*** order-1 调整顺序
*** order-frist 调整顺序

<div class="container">
   <div class="row no-gutters" style="border:3px solid #F00;height:100px">
      <div class="col-3" style="background: #FFCCC;">
	      111
	  </div>
	   <div class="col-3 order-1" style="background: #FFCCC;">
	      222
	  </div>
	   <div class="col-3" style="background: #FFCCC;">
	      333
	  </div>
   </div>
</div>

** 列偏移
*** offet-3 表示偏移几个格子

<div class="container">
   <div class="row" style="border:3px solid #F00;height:100px">
      <div class="col-3" style="background: #FFCCC;">
	      111
	  </div>
	   <div class="col-3 offet-3 " style="background: #FFCCC;">
	      222
	  </div>
	   <div class="col-3" style="background: #FFCCC;">
	      333
	  </div>
   </div>
</div>

** 列偏移
*** mr-auto ml-auto 实现类水平隔离效果
** row 嵌套

<div class="container">
   <div class="row" style="border:3px solid #F00;height:100px">
      <div class="col-3" style="background: #FFCCC;">
	      111
	  </div>
	   <div class="col-3" style="background: #FFCCC;">
	      222
	  </div>
	   <div class="col-3" style="background: #FFCCC;">
	       <div class="row">
		      <div class="col-xl-4" style="background: #FFCCC;">aaa</div>
			  <div class="col-xl-8" style="background: #FFCCC;">888</div>
		   </div>
	  </div>
   </div>
</div>
posted @ 2020-04-02 13:59  weichenji0  阅读(128)  评论(0)  编辑  收藏  举报