布局容器
. .-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) { ...]
网格选项
网格系统在各种屏幕和设备上的约定:
自动布局列
栅格网格系统
.row
.col-auto
.w-100 换行
响应类
的网格系统包括五种宽度预定义，用于
构建复杂的响应布局，可以根据需要定义在
特小.col
小.col-sm-
中.col-md-*、
大.col-lg-*、
特大.1g
超大.col-xl-*五种屏幕(设备)下的样式。
1.覆盖所有设备
2.水平排列
3.混合搭配
4.删除边距
5.列包装
内容对齐
使用容器上的align-通用样式定义，可以将flex项对齐到横轴上。可选方向有start(浏览器默认值)、end、、、和。
内容排列
项目对齐
使用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>
<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>
快属性定义
使用的实用程序来响应地切换属性的值，将其与网格系统、内容或组件混合使用，以便在特定的视图中显示或隐藏它们。
实现属性
<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>
响应式的隐藏或显示元素
在实际开发中，可以根据需要自由组合显示和隐藏的类，经常使用的组合类如表所示:
<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中定义了以下两个类来处理内容溢出的情况:
<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类即可实现
abbr缩略语内联元素
引用块效果
4为标签定义了.类，设置标签的底外边距为1rem卡片式设计风格，字体大小为1.25rem；
为标签定义了.-类，设置元素为块级元素，字体缩小20%，字体颜色为#。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img–93)()]
强调
代码块
使用
标签可以包裹代码块，可以对HTML的尖括号进行转义；还可以使用.pre-scrollable类样式，实现垂直滚动的效果，它默认提供350px的高度。
var变量
请登录后查看评论内容