卡片式设计风格 bootstrap order

布局容器

. .-fluid

容器和-fluid容器最大的不同之处在于宽度的设定。

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

响应断点

//超小设备(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: O){.…"@include media-breakpoint-up(sm) { ... ]
@include media-breakpoint-up(md) { ...]
@include media-breakpoint-up(lg) i ...]
@include media-breakpoint-up(xl) { ...]

网格选项

网格系统在各种屏幕和设备上的约定:

卡片式设计风格 bootstrap order插图-阿鹏资源网

自动布局列

栅格网格系统

.row

.col-auto

.w-100 换行

响应类

的网格系统包括五种宽度预定义,用于

构建复杂的响应布局,可以根据需要定义在

特小.col

小.col-sm-

中.col-md-*、

大.col-lg-*、

特大.1g

超大.col-xl-*五种屏幕(设备)下的样式。

1.覆盖所有设备

2.水平排列

3.混合搭配

4.删除边距

5.列包装

卡片式设计风格 bootstrap order插图-阿鹏资源网

内容对齐

使用容器上的align-通用样式定义,可以将flex项对齐到横轴上。可选方向有start(浏览器默认值)、end、、、和。

内容排列

卡片式设计风格 bootstrap order插图-阿鹏资源网

项目对齐

使用align-items-*通用样式可以在容器上实现flex项目的对齐(以y轴开始,如果选择flex-

: ,则从x轴开始),可选值有:start.end、、和(浏览器默认值)。

自动对齐

使用align-self-*通用样式,可以使上的项目单独改变在横轴上的对齐方式(y值开始,如果是flex-: 则为x轴开始),其拥有与align-items相同的可选子项:start、end、、、和(浏览器默认值)。

排列顺序

使用一些order实用程序可以实现弹性项目的可视化排序。仅提供将一个项目排在第一或最后,以及重置DOM顺序,由于order只能使用整数值(例如:5),因此对于任何额外值需要自定义CSs样式。

重排序

排雷顺序

使用.order-*类选择符,可以对空间进行可视化排序,系统提供了.order-1到.order-12等12个级别的顺序,在主流浏览器和设备宽度上都能生效。

提示:没有定义.order类的元素,将默认排在前面。

列偏移

在中可以使用两种方式进行列偏移:

使用响应式的.-*类偏移方法

使用边距通用样式处理,它内置了诸如.ml-、.p-、.pt-*等实用工具

列嵌套

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

选项

4是基于流式布局,大多数组件都支持Flex流式布局,但不是所有元素的都是默认就启用:flex属性的(因为那样会增加很多不必要的DIV层叠,并会影响到浏览器的渲染)。

如果需要将: flex添加到元素中,可以使用.d-flex或响应式变体(例如.d-sm-flex)。需要这个类或值来允许使用额外的实用程序来调整大小、对齐、间距等。

相对于父元素

相对于父元素的宽度和高度样式类是由

.scss文件中$sizes变量来控制的,默认值包括25%、50%、75%、100%和auto。用户可以调整这些值,定制不同的规格。

提示: .w-auto为宽度自适应类,.h-auto为高度自适应类。

	<h3 class="mb-2">宽度</h3>
    <div class="bg-secondary text-white mb-4">
        <div class="w-25 p-3 bg-success">w-25</div>
        <div class="w-50 p-3 bg-success">w-50</div>
        <div class="w-75 p-3 bg-success">w-75</div>
        <div class="w-100 p-3 bg-success">w-100</div>
        <div class="w-auto p-3 bg-success border-top">w-auto</div>
    </div>
    <h3 class="mb-2">高度</h3>
    <div class="bg-secondary text-white" style="height: 100px;">
        <div class="h-25 d-inline-block bg-success text-center">h-25</div>
        <div class="h-50 d-inline-block bg-success text-center">h-50</div>
        <div class="h-75 d-inline-block bg-success text-center">h-75</div>
        <div class="h-100 d-inline-block bg-success text-center">h-100</div>
        <div class="h-auto d-inline-block bg-success text-center">h-auto</div>
    </div>

相对于视口

<h3 class="text-right text-dark mb-4">.min-vw-100类和.vw-100类的对比效果</h3>
    <h2 style="width: 1200px;" class="min-vw-100 bg-primary text-center">.min-vw-100</h2>
    <h2 style="width: 1200px;" class="vw-100 bg-success text-center">vw-100</h2>

外边距和内边距

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

边距定义

在CSS中卡片式设计风格,通过(外边距)和(内边距)来设置元素的边距。在 4中,用m来表示,用p来表示。


    <h3 class="mb-4 mx-auto border border-primary" style="width:150px">mx-auto</h3>
    
    <div class="ml-4 border border-primary">ml-4</div>
    <div class="border border-primary">正常的盒子</div>
    
    <div class="ml-n4 border border-primary">ml-n4</div>

响应式边距

<h3 class="mb-4">响应式的边距</h3>
    <div class="mx-auto mr-sm-2 border border-primary" style="width: 150px">mx-auto mr-sm-2</div>

平方向浮动

​ 以下是通过auto 来控制flex项目的三种案例,分别是预设(无)、向右推两个项目(.mr-auto)、向左推两个项(.ml-auto)。

<h3 class="mb-4">水平方向</h3>
    <div class="d-flex bg-warning text-white mb-3">
        <div class="p-2 bg-primary">Flex item</div>

卡片式设计风格 bootstrap order插图-阿鹏资源网

<div class="p-2 bg-success">Flex item</div> <div class="p-2 bg-danger">Flex item</div> </div> <div class="d-flex bg-warning text-white mb-3"> <div class="mr-auto p-2 bg-primary">Flex item</div> <div class="p-2 bg-success">Flex item</div> <div class="p-2 bg-danger">Flex item</div> </div> <div class="d-flex bg-warning text-white mb-3"> <div class="p-2 bg-primary">Flex item</div> <div class="p-2 bg-success">Flex item</div> <div class="ml-auto p-2 bg-danger">Flex item</div> </div>

实现浮动

在 4中,可以使用以下两个类来实现左浮动和右浮动。

.float-left:元素向左浮动。

.float-right:元素向右浮动。

设置浮动后,为了不影响网页的整体布局,需要清除浮动。 4中使用.类来清除浮动,只需把.添加到父元素中即可。

<h3 class="mb-4">浮动效果</h3>
    <div class="clearfix text-white border border-primary p-3">
        <div class="float-left bg-primary">左浮动</div>
        <div class="float-right bg-primary">右浮动</div>
    </div>

响应式浮动

还可以在网格不相同的视口断点上来设置元素不同的浮动。例如,在小型设备(sm)上设置右浮动,可添加.float-sm-right类来实现;在中型设备((md)上设置左浮动,可添加.float-md-left类来实现。

.float-sm-right和.float-md-left称为响应式的浮动类。

<h2 class="mb-4">响应式的浮动</h2>
    <div class="clearfix text-white">
        <div class="bg-success w-50">box1</div>
        <div class="float-md-left bg-danger w-50">box2</div>
        <div class="float-md-right bg-primary w-50">box3</div>
    </div>

快属性定义

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

实现属性

卡片式设计风格 bootstrap order插图-阿鹏资源网

<h2>内联元素和块级元素的转换</h2>
    <p>div显示为内联元素(一行排列)</p>
    <div class="d-inline bg-primary text-white">div——d-inline</div>
    <div class="d-inline m-5 bg-danger text-white">div——d-inlineK</div>
    <p>span显示为块级元素(独占一行)</p>
    <span class="d-block bg-success text-white">span——d-block</span>
    <span class="d-block bg-dark text-white">span——d-block</span>

响应式的隐藏或显示元素

实际开发中,可以根据需要自由组合显示和隐藏的类,经常使用的组合类如表所示:

卡片式设计风格 bootstrap order插图-阿鹏资源网

<h2>响应式的显示和隐藏</h2>
    <div class="d-md-none bg-primary text-white">在xs、sm设备上显示(蓝色背景)</div>
    <div class="d-none d-md-block bg-danger text-white">在md、lg、xl设备上显示(浅红色背景)</div>

切换显示和隐藏

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

内容溢出

在 4中定义了以下两个类来处理内容溢出的情况:

卡片式设计风格 bootstrap order插图-阿鹏资源网

    <h4>内容溢出: overflow-auto和overflow-hidden的效果</h4>
    <div class="overflow-auto border float-left" style="width: 200px; height: 100px;">
        转朱阁,低绮户,照无眠。不应有恨,何事长向别时圆?人有悲欢离合,月有阴晴圆缺,此事古难全。但愿人长久,千里共婢娟。</div>
    <div class="overflow-hidden border float-right" style="width: 200px; height: 100px;">
        转朱阁,低绮户,照无眠。不应有恨,何事长向别时圆?人有悲欢离合,月有阴晴圆缺,此事古难全。但愿人长久,千里共婢娟。</div>

定位

在 4中,定位元素可以使用以下类来实现:

.-:无定位。

.-:相对定位。

.-:绝对定位。

.-fixed:固定定位。

.-:粘性定位。

    <div class="container text-white">
        <nav class="sticky-top bg-primary p-5 mb-5">头部导航栏固定</nav>
        <div class=" bg-secondary p-3">
            <p>内容栏1</p>
            <p>内容栏2</p>
            <p>内容栏3</p>
            <p>内容栏4</p>
            <p>内容栏5</p>
            <p>内容栏6</p>
            <p>内容栏7</p>
            <p>内容栏8</p>
            <p>内容栏9</p>
        </div>
    </div>

第三讲 媒体 媒体板块

媒体对象是一类特殊版式的区块样式,用来设计图文混排效果,也可以是对媒体与文本的混排效果。

媒体对象仅需要引用.media和.media-body两个类,就可以实现页面设计目标、形成布局、间距并控制可选的填充和边距。

媒体嵌套

媒体对象可以无限嵌套,但是建议在某些时候尽量减少网页的嵌套层级,嵌套太多会影响页面的美观。

嵌套时只需要在.media-body中在嵌套.media即可。

媒体对齐

媒体对象中的图片可以使用样式类来设置布局,实现顶部、中间和底部的对齐。只要在图片上添加align-self-start、align-self-和align-self-end类即可实现

卡片式设计风格 bootstrap order插图-阿鹏资源网

卡片式设计风格 bootstrap order插图-阿鹏资源网

abbr缩略语内联元素

卡片式设计风格 bootstrap order插图-阿鹏资源网

卡片式设计风格 bootstrap order插图-阿鹏资源网

引用块效果

4为标签定义了.类,设置标签的底外边距为1rem卡片式设计风格字体大小为1.25rem;

为标签定义了.-类,设置元素为块级元素,字体缩小20%,字体颜色为#。

卡片式设计风格 bootstrap order插图-阿鹏资源网

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img–93)()]

强调

卡片式设计风格 bootstrap order插图-阿鹏资源网

卡片式设计风格 bootstrap order插图-阿鹏资源网

代码

卡片式设计风格 bootstrap order插图-阿鹏资源网

卡片式设计风格 bootstrap order插图-阿鹏资源网

代码块

使用

标签可以包裹代码块,可以对HTML的尖括号进行转义;还可以使用.pre-scrollable类样式,实现垂直滚动的效果,它默认提供350px的高度。

卡片式设计风格 bootstrap order插图-阿鹏资源网

卡片式设计风格 bootstrap order插图-阿鹏资源网

var变量

------本页内容已结束,喜欢请分享------
© 版权声明
THE END
喜欢就支持一下吧
点赞17赞助作者 分享
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容