ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

快速掌握Bootstrap布局

2021-08-06 21:04:07  阅读:260  来源: 互联网

标签:md Bootstrap 掌握 media 布局 像素 sm ... col


布局基础

1 布局容器

Bootstrap中定义了两个容器类,分别为.container和.container-fluid。容器是bootstrap中最基本的布局元素,在使用默认网格系统时是必需的。

Container容器和container-fluid容器最大的不同之处在于宽度的设定。
Container容器根据屏幕宽度的不同,会利用媒体查询设定固定的宽度,当改变浏览器的大小时,页面会呈现阶段性变化。意味着Container容器的最大宽度在每个断点都发生变化。

2 响应断点

/ 超小设备(xs,小于576像素)。
// 没有媒体查询"xs",因为在 Bootstrap 中是默认的。
// 小型设备 (sm,576像素及以上)
@media (min-width: 576像素) { ... }
// 中型设备(md,768像素及以上)
@media (min-width: 768像素) { ... }

// 大型设备(lg,992像素及以上)
@media (min-width: 992像素) { ... }
// 超大型设备(xl,1200像素及以上)
@media (min-width: 1200像素) { ... }

由于在Sass中编写源CSS,因此所有的媒体查询都可以通过Sass mixins获得:
// xs断点不需要媒体查询,因为它实际上是'@media (min-width: 0){…}'
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

3 z-index

一些bootstrap4组件使用了z-index样式属性。z-index属性设置一个定位元素沿z轴的位置,z轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。Bootstrap4利用该属性来安排内容,帮助控制布局。
Bootstrap4中定义了相应的z-index标度,对导航、工具提示和弹出窗口、模态框等进行分层。
$zindex-dropdown:          1000 !default;
$zindex-sticky:             1020 !default;
$zindex-fixed:              1030 !default;
$zindex-modal-backdrop:     1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:            1060 !default;
$zindex-tooltip:             1070 !default;
提示:不推荐自定义z-index属性值,如果改变了其中一个,可能需要改变所有的。

网格系统

1 网格选项

设备从小到大排序xs(小于576像素),sm(大于等于576像素),md(大于768等于像素),lg(大于等于992像素),xl(大于等于1200像素)

2 自动布局列

  1. 等宽列
div class="row">
    <div class="col-8 border py-1 bg-light1">二分之一</div><!--col有多少格,总共12格,col后可加数字; border容器的边框 py-上下内边距 背景色-->
    <div class="col border py-3 bg-light1">二分之一</div>
</div>
<div class="row"><!-- class="row"是每一行-->
    <div class="col border py-3 bg-light1">三分之一</div>
    <div class="col border py-3 bg-light1">三分之一</div>
    <div class="col border py-3 bg-light1">三分之一</div>
</div>
<div class="row">
    <div class="col border py-3 bg-light1">四分之一</div>
    <div class="col border py-3 bg-light1">四分之一</div>
    <div class="col border py-3 bg-light1">四分之一</div>
    <div class="col border py-3 bg-light1">四分之一</div>
</div>
  1. 设置一个列宽
<div class="row"><!-- class="row"是每一行-->
    <div class="col border py-3 bg-light">左</div>
    <div class="col-7 border py-3 bg-light">中</div>
    <div class="col border py-3 bg-light">右</div>
</div>
  1. 可变宽度内容
<div class="row justify-content-md-center">
    <!--设备从小到大排序xs(小于576像素),sm(大于等于576像素),md(大于768等于像素),lg(大于等于992像素),xl(大于等于1200像素)-->
    <div class="col col-lg-2 border py-3 bg-light">左</div>
    <!--col-md-auto border py-3 bg-light这个为什么这样分布呢,可看下视频,2个相同的大的布局,包含1个小的布局,有啥技巧么-->
    <div class="col-md-auto border py-3 bg-light">中(在屏幕尺寸≥768px时,可根据内容自动调整列宽度)</div>
    <div class="col col-lg-2 border py-3 bg-light">右</div>
</div>

4. 等宽多列(可研究)

div class="row">
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="w-100"></div><!--class="w-100"可把一行的元素分成2行-->
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="col border py-3 bg-light">四分之一</div>
</div>

3 响应类

  1. 覆盖所有设备
<div class="row">
    <div class="col-8 border py-3 bg-light">col-8</div>
    <div class="col-4 border py-3 bg-light">col-4</div>
</div>
  1. 水平排列
<!--在sm(≥576px)型设备上开始水平排列-->
<div class="row">
    <div class="col-sm-8 border py-3 bg-light">col-sm-8</div>
    <div class="col-sm-4 border py-3 bg-light">col-sm-4</div>
</div>
<!--在md(≥768px)这里的px代表的是屏幕页面的宽度,型设备上开始水平排列-->
<div class="row">
    <div class="col-md-8 border py-3 bg-light">col-md-8</div>
    <div class="col-md-4 border py-3 bg-light">col-md-4</div>
</div>
  1. 混合搭配(每一个列都进行不同的设备定义,还可以添加 sm,lg,xs等设备)
<!--在小于md型的设备上显示为一个全宽列和一个半宽列,在大于等于md型设备上显示为一列,分别占8份和4份-->
<div class="row">
    <div class="col-12 col-md-8 border py-3 bg-light">.col-12 .col-md-8</div>
    <div class="col-6 col-md-4 border py-3 bg-light">.col-6 .col-md-4</div>
</div>
<!--在任何类型的设备上,列的宽度都是占50%-->
<div class="row">
    <div class="col-6 border py-3 bg-light">.col-6</div>
    <div class="col-6 border py-3 bg-light">.col-6</div>
</div>
  1. 删除边距
<div class="row no-gutters"> <!--采用 no-gutters删除边距;Bootstrap默认的网格和列间有间距,一般是左右-15px的margin或padding -->
    <div class="col-12 col-sm-6 col-md-8 py-3 border bg-light">.col-12 .col-sm-6 .col-md-8</div>
    <div class="col-6 col-md-4 py-3 border bg-light">.col-6 .col-md-4</div>
    <!--很小,就是两列直接的距离-->
</div>
  1. 列包装
    如果一行放置超过12列,则每组额外列将作为一个单元包裹到新行
<div class="row">
    <div class="col-9 py-3 border bg-light">.col-9</div>
    <!--如果一行放置超过12列,则每组额外列将作为一个单元包裹到新行上-->
    <div class="col-4 py-3 border bg-light">.col-4<br>因为9 + 4 = 13 >12,4列宽的div被包装到一个新行上,作为一个连续的单元。</div>
    <div class="col-6 py-3 border bg-light">.col-6<br>后续的列沿着新行继续排列。</div>
</div>

4 重排序

  1. 排列顺序
    .order-1到.order-12等12个级别的顺序;还有order-first更改顺序到最前面;order-last更改顺序到最后面
<div class="row">
    <!--order-*类选择符可对空间进行可视化排序 ,没有定义order类的元素,将默认排在前面-->
    <div class="col order-12 py-3 border bg-light">
        order-12
    </div>
    <div class="col order-1 py-3 border bg-light">
        order-1
    </div>
    <div class="col order-6 py-3 border bg-light">
        order-6
    </div>
    <div class="col py-3 border bg-light">
        col
    </div>
</div>
  1. 列偏移
    在bootstrap中可以使用两种方式进行列偏移:
    使用响应式的.offset-类偏移方法。
    使用边距通用样式处理,它内置了诸如.ml-
    、.p-、.pt-等实用工具。
    .offset-*类偏移方法
<div class="row">
    <div class="col-md-6 offset-md-3 py-3 border bg-light">.col-md-6 .offset-md-3</div>
</div>
<div class="row">
    <div class="col-md-4 offset-md-1 py-3 border bg-light">.col-md-4 .offset-md-1</div>
    <div class="col-md-4 offset-md-2 py-3 border bg-light">.col-md-4 .offset-md-2</div>
</div>
  1. 使用边距通用样式处理,它内置了诸如.ml-、.p-、.pt-*
<div class="row">
    <!--ml* p-* pt-* -->
    <div class="col-md-4 py-3 border bg-light">.col-md-4</div>
    <div class="col-md-4 ml-auto py-3 border bg-light">.col-md-4 .ml-auto</div>
</div>

5 列嵌套(不懂)

如果想在网格系统中将内容再次嵌套,可以通过添加一个新的.row元素和一系列.col-sm-元素到已经存在的.col-sm-元素内。被嵌套的行(row)所包含的列(column)数量推荐不要超过12个。

<div class="row">
    <div class="col-12 col-lg-6"> <!--col-12 col-lg-6使用了这个嵌套,固定了下面的div在一定像素下就是一行-->
        <!--嵌套行-->
        <div class="row border no-gutters">
            <div class="col-12 col-sm-3"><img src="images/b.jpg" alt=""></div>
            <div class="col-12 col-sm-9 pl-3"><!--pl-3是文字离图片的边据-->
                李白诗歌的语言,有的清新如同口语,有的豪放,不拘声律,近于散文,但都统一在“清水出芙蓉,天然去雕饰”的自然美之中。
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-6">
        <!--嵌套行-->
        <div class="row border no-gutters">
            <div class="col-12 col-sm-3"><img src="images/c.jpg" alt=""></div>
            <div class="col-12 col-sm-9 pl-3">
                在杜甫中年因其诗风沉郁顿挫,忧国忧民,杜甫的诗被称为“诗史”。他的诗词以古体、律诗见长,风格多样,以“沉郁顿挫”四字准确概括出他自己的作品风格,而以沉郁为主。
            </div>
        </div>
    </div>
</div>

布局工具类

1 display块属性定义

使用bootstrap的实用程序来响应地切换display属性的值,将其与网格系统、内容或组件混合使用,以便在特定的视图中显示或隐藏它们

2 Flexbox选项

Bootstrap 4是基于Flexbox流式布局,大多数组件都支持Flex流式布局,但不是所有元素的display都是默认就启用display:flex属性的(因为那样会增加很多不必要的DIV层叠,并会影响到浏览器的渲染)。
如果需要将display: flex添加到元素中,可以使用.d-flex或响应式变体(例如.d-sm-flex)。需要这个类或display值来允许使用额外的flexbox实用程序来调整大小、对齐、间距等。

3 外边距和内边距

使用外边距和内边距实用程序来控制元素和组件的间距和大小。Bootstrap 4包含一个用于间隔实用程序的5级刻度,基于1rem值默认$spacer变量。为所有视图选择值(例如,.mr-3用于右边框:1rem),或为目标特定视图选择响应变量(例如,.mr-md-3用于右边框:1rem,从md断点开始)。

4 切换显示和隐藏

如果不使用display对元素进行隐藏(或无法使用时),可以使用visibility这个BootStrap 可见性工具来对网页上的元素进行隐藏,使用它后网页元素对于正常用户是不可见的,但元素的宽高占位依然有效。

标签:md,Bootstrap,掌握,media,布局,像素,sm,...,col
来源: https://www.cnblogs.com/wkhzwmr/p/15110246.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有