美文网首页
bootstrap 类样式中的 展示与

bootstrap 类样式中的 展示与

作者: 豪威Howie | 来源:发表于2022-09-03 05:09 被阅读0次

内边距(pading)外边距(margin)

m - for classes 代表 margin

p - for classes 代表 padding

t - for classes that set margin-top or padding-top 设置margin-top或padding-top

b - for classes that set margin-bottom or padding-bottom 设置margin-bottom或padding-bottom

l - for classes that set margin-left or padding-left 设置margin-left或padding-left

r - for classes that set margin-right or padding-right 设置margin-right或padding-right

x - for classes that set both -left and -right 设置padding-left和padding-right或margin-left和margin-right

y - for classes that set both -top and -bottom 设置padding-top和padding-bottom或margin-top和margin-bottom

空白 – 在元素的所有4个边上设置边距或填充

0 – 将边距或填充设置为0

1 – 将边距或填充设置为.25rem(如果font-size为16px则为4px)

2 – 将边距或填充设置为.5rem(如果字体大小为16px则为8px)

3 – 将边距或填充设置为1rem(如果字体大小为16px,则为16px)

4 – 将边距或填充设置为1.5rem(如果字体大小为16px,则为24px)

5 – 将边距或填充设置为3rem(如果font-size为16px则为48px)

mt-3 设置上边距3rem

boostrap各种设备大小,以及不同设备的隐藏和显示

一:屏幕尺寸的区别
.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px)

一个栅格代表1,总共十二个。以上四个类分别表示当屏幕的宽度为多少时,触发相应的类

二:不同尺寸的显示和隐藏

Class 设备
.visible-xs 额外的小设备(小于 768px)可见
.visible-sm 小型设备(768 px 起)可见
.visible-md 中型设备(768 px 到 991 px)可见
.visible-lg 大型设备(992 px 及以上)可见
.hidden-xs 额外的小设备(小于 768px)隐藏
.hidden-sm 小型设备(768 px 起)隐藏
.hidden-md 中型设备(768 px 到 991 px)隐藏
.hidden-lg 大型设备(992 px 及以上)隐藏

相关文章

  • bootstrap 类样式中的 展示与

    内边距(pading)外边距(margin) m - for classes 代表 margin p - for ...

  • Bootstrap样式-工具类

    小工具类 响应式工具 响应式打印类

  • Bootstrap组件 - 导航

    知识点 Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的。改变修饰类可以改变样式。 为...

  • Bootstrap--常用及实例合集

    栅格系统 列的样式 文本对齐类 表单 表格 响应式表格 按钮 快速浮动 清除样式 Bootstrap3居中处理 垂...

  • Bootstrap学习文档(二)

    标签和样式 Bootstrap 中把一些标签的样式重置了,也即是为一些标签设置了带有 Bootstrap 风格的样...

  • Bootstrap3 快速入门(全局样式)

    一、全局样式 Bootstrap 提供了大量的全局样式,大部分的 HTML 元素都可以通过添加不同的类,来设置...

  • 02-Bootstrap

    一、自定义bootstrap按钮 自定义bootstrap按钮 将生成对应的样式拷贝到对应样式表中,即可以使用;例...

  • 02-Bootstrap

    一、自定义bootstrap按钮 自定义bootstrap按钮 将生成对应的样式拷贝到对应样式表中,即可以使用;例...

  • css

    css:层叠样式展示,用于制作静态页面 css样式分为三大类:行间样式、内部样式、外部样式 行间样式:写在body...

  • css

    css:层叠样式展示,用于制作静态页面 css样式分为三大类:行间样式、内部样式、外部样式 行间样式:写在body...

网友评论

      本文标题:bootstrap 类样式中的 展示与

      本文链接:https://www.haomeiwen.com/subject/fkdynrtx.html