您的位置：首页 > Web前端 > BootStrap

bootstrap4强大的栅格功能

2017-08-17 16:24 274 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.css" />
<title></title>
<style type="text/css">
.box{
border: 1px solid saddlebrown;
}
.width-200{
width: 200px;
}
</style>
</head>
<body>
<div class="container" style="border: 1px solid red;">
123<br />
123
</div>
<div class="container">
<div class="row">
<div class="col-lg box">123<br>123</div>
<div class="col-lg box">123<br>123</div>
<div class="col-lg box">123<br>123</div>
</div>
<!--bootstrap4的栅格系统运用了伸缩弹性盒模型,三个col-lg，则每个为100%除以3=33.333333333%-->
</div>
<div class="container">
<div class="row no-gutters">
<div class="col-lg-4 box">123<br>123</div>
<div class="col-lg-4 box">123<br>123</div>
<div class="col-lg-4 box">123<br>123</div>
</div>
<!--bootstrap4的栅格系统运用了伸缩弹性盒模型,三个col-lg，则每个为100%除以3=33.333333333%-->
</div>
<div class="container">
<h3>5个断层</h3>
<code>
// Extra small devices (portrait phones, less than 576px)<br />
@media (max-width: 575px) { ... }<br />

// Small devices (landscape phones, 576px and up)<br />
@media (min-width: 576px) and (max-width: 767px) { ... }<br />

// Medium devices (tablets, 768px and up)<br />
@media (min-width: 768px) and (max-width: 991px) { ... }<br />

// Large devices (desktops, 992px and up)<br />
@media (min-width: 992px) and (max-width: 1199px) { ... }<br />

// Extra large devices (large desktops, 1200px and up)<br />
@media (min-width: 1200px) { ... }
</code>
</div>
<div class="container">
<h1>只设置一列栅格</h1>
<div class="container">
<div class="row">
<div class="col box">
1 of 3
</div>
<div class="col-6 box">
2 of 3 (wider)
</div>
<div class="col box">
3 of 3
</div>
</div>
<div class="row">
<div class="col box">
1 of 3
</div>
<div class="width-200 box">
2 of 3 (wider)
</div>
<div class="col box">
3 of 3
</div>
</div>
</div>
</div>
<div class="container">
<h1>自适应宽度列</h1>
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2 box">
1 of 3
</div>
<div class="col-md-auto box">
Variable width contentVariable width content
</div>
<div class="col col-lg-2 box">
3 of 3
</div>
</div>
<div class="row">
<div class="col box">
1 of 3
</div>
<div class="col-md-auto box">
Variable width content
</div>
<div class="col col-lg-2 box">
3 of 3
</div>
</div>
</div>
</div>

<div class="container">
<h1>多行等宽列</h1>
<div class="row">
<div class="col box">123</div>
<div class="col box">123</div>
<div class="w-100"></div>
<div class="col box">123</div>
<div class="col box">123</div>
</div>
</div>

<div class="container">
<h1>内容等高</h1>
<div class="row">
<div class="col-6 col-sm-3 box">.col-6 .col-sm-3<br>123</div>
<div class="col-6 col-sm-3 box">.col-6 .col-sm-3</div>

<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix d-none d-sm-block"></div>

<div class="col-6 col-sm-3 box">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3 box">.col-6 .col-sm-3</div>
</div>
</div>

<div class="container">
<h1>弹性排序，用order-类来对列进行排序</h1>
<div class="container">
<div class="row">
<div class="col box">
First, but unordered
</div>
<div class="col order-12 box">
Second, but last
</div>
<div class="col order-1 box">
Third, but first
</div>
</div>
</div>
</div>
</body>
</html>


View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航