页面布局:容器与栅格系统


发布时间:2020-03-14 20:25    作者: Uncle Hui   已过去:5 月   阅读总量:220 已被赞:0


Container容器

Container容器是窗口布局的最基本元素,我们推荐所有样式都定义在.container.container-fluid容器之中-- 这是启用整个栅格系统必不可少的前置条件,它们分别对应选择一个响应式的、固定宽度的容器,或者选择一个流式自适应浏览器或容器最大合法宽度的窗口(意味着任何时候它的宽度总是100%)。

(1) .container容器可以被嵌套,但是大多数布局并不需要这么做(最少层次的嵌套构建出的网页更优雅)

<div class="container">

<!-- Content here -->

</div>

(2) .container-fluid 类,可以使div宽度扩展到整个宽度(如果没有被其它CSS容器包含,则应是浏览器运行时的宽度,否则应是父容器中允许的最大宽度,一般视为100%宽度)

<div class="container-fluid">

<!-- Content here -->

</div>                                                                                                                                     

栅格系统

Bootstrap是基于移动优先的原则开发的,使用了一系列的媒体查询(media queries)方法,为我们的布局和界面创建自适应的的分界点。这些分界点主要是基于视口宽度的最小值,并且当窗口视图改变的时候允许元素缩放。

(分界点大小:576px768px992px1200px)

Bootstrap包含了一个强大的移动优先的网格系统,它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)Bootstrap4是完全基于flexbox流式布局构建的,完全支持响应式标准

基本实例:在container容器里,我们一行row分为4列,col-xl-3:显示屏幕大于等于1140时,每列占3份,低于这个宽度就每列独占一行。

<div class="container">

<div class="row">

<div class="col-xl-3" style="background:#007bff;">

111

</div>

<div class="col-xl-3" style="background:#868e96;">

222

</div>

<div class="col-xl-3" style="background:#28a745;">

333

</div>

<div class="col-xl-3" style="background:#dc3545;">

444

</div>

</div>

</div>

自动布局列

等宽布局

所有设备上都是等宽并占满一行,只要简单的应用.col就可以完成。

<div class="container">

<div class="row">

<div class="col-sm">

1-1

</div>

<div class="col-sm">

1-2

</div>

</div>

<div class="row">

<!-- <div class="w-100"></div> -->

<div class="col">

2-1

</div>

<div class="col">

2-2

</div>

<div class="col">

2-3

</div>

</div>

</div>

设置一列宽度

<div class="container">

<div class="row">

<div class="col">

1-1

</div>

<div class="col-6">

1-2(中间占6格,其余6格两边等分)

</div>

<div class="col">

1-3

</div>

</div>

<div class="row">

<div class="col">

2-1

</div>

<div class="col-5">

2-2(中间占5格,其余7格两边等分,奇偶都能)

</div>

<div class="col">

2-3

</div>

</div>

</div>

可变宽度的弹性空间

 .col-{breakpoint}-auto 断点方法,可以实现根据其内容的自然宽度来对列进行大小调整。

<div class="container">

<div class="row">

<div class="col-1">

1-1

</div>

<div class="col-auto">

1-2

</div>

<div class="col-1">

1-3

</div>

</div>

</div>

等宽多行

创建跨多个行的等宽列,方法是插入.w-100要将列拆分为新行。通过混合.w-100一些还可以影响一些显示状态效果,如按钮排序等。w-100表示宽度显示比例,默认分为4个比例:w-100 w-75 w-50 w-25” 在img里往往需要结合d-block使用

<div class="row">

<div class="col-md-6">

1-1

</div>

<div class="col-md-6">

1-2

</div>

<!-- </div>

<div class="row"> -->

<!-- <div class="w-100"></div> -->

<div class="col-md-6">

2-1

</div>

<div class="col-md-6">

2-2

</div>

</div>

 

点赞

0




登陆后方可评论