Bootstrap4.x 布局系统

Bootstrap4.x 布局系统

前端知识qingyu2020-09-15 20:57:1226A+A-

  布局介绍

  Bootstrap4.x提供了.container和.container-fluid两种方式。这两种方式是启用布局栅格系统最基本的元素。

  .container是固体自适应方式,宽度固定

  .container-fluid是流体100%自适应方式,宽度随着屏幕的增大而增大。

  Bootstrap4.x自适应的响应方式如下:

  @media (min-width:576px) 小屏幕

  @media(min-width:768px) 中等屏幕

  @media(min-width:992px) 大屏幕

  @media(min-width:1200px) 超大屏幕

  栅格系统

  Bootstrap4.x 基于12列的布局,5种响应尺寸。具体采用div容器的行、列和对齐内容来构建响应式布局。所占格栅位正好是12列,超过12列则自动换行,小于12列则不能100%

  Eg:

  一行三列的布局

	<div class="container">
		<!--表示启用栅格行-->
		<div class="row">
			<!--启用栅格列-->
			<div class="col-sm">第一列</div>
			<div class="col-sm">第二列</div>
			<div class="col-sm">第三列</div>
		</div>
	</div>	

  栅格等级

  Bootstrap4.x有5个栅格等级,具体如下表:


超小屏幕

 小屏幕 


中等屏幕


大屏幕


超大屏幕

 

尺寸<576px>=576px >=768px >=992px.>=1200px
前缀.col-.col-sm .col-md-.col-lg-col-xl-

  如果同时使用两个或以上的级别,则遵循移动优先的原则;

<div class="container-fluid">
			<div class="row">
				<div class="col-sm-4 col-lg-6 col-xl-12">第一列</div>
				<div class="col-sm-4 col-lg-6 col-xl-12">第二列</div>
				<div class="col-sm-4 col-lg-12 col-xl-12">第三列</div>
			</div>
		</div>	
点击这里复制本文地址 计算机毕业设计_计算机程序设计

支持Ctrl+Enter提交

首页 © All Rights Reserved.  Copyright shenhuangji.com
Powered by Z-BlogPHP
联系我们| 关于我们| 广告联系| 网站管理