bootstrap4 常用样式类名 (供自己参考)
1、容器和网格系统 容器 container 固定宽度,不同尺寸固定了不同的宽度 container-fluid 100%宽度 栅格系统 cal-xs//<768px cal-sm //>=768px cal-md //>=992px cal-lg //>=1200px 2、字体颜色及背景颜色 text-muted 柔和 text-primary 重要 text-success 成功 text-info 提示 text-warning 警告 text-danger 危险 text-secondary 副标题 text-dark 深灰色文字 text-light 浅灰色 text-white 白色 背景 bg-primary bg-secondary bg-success bg-danger bg-warning bg-info bg-light bg-dark bg-white 3、边框 border //默认:1px solid #dee2e6!important border-top border-left border-right border-bottom 删除边框 border-0 //去除边框或者除去某一边的边框 border-top-0 border-left-0 border-right-0 border-bottom-0 边框颜色 border-primary border-secondary border-success border-danger border-warning border-info border-light border-dark border-white 圆角边框 rounded //border-radius: .25rem!important; rounded-top //只有顶部的两边有圆角 rounded-right rounded-bottom rounded-left rounded-circle 类可以设置椭圆形图片 rounded-0 .img-thumbnail 类用于设置图片缩略图(图片有边框) 4 内边距(pading)外边距(margin) m - for classes 代表 margin p - for classes 代表 padding ? t - for classes that set margin-top or padding-top b - for classes that set margin-bottom or padding-bottom l - for classes that set margin-left or padding-left r - for classes that set margin-right or padding-right x - for classes that set both *-left and *-right y - for classes that set both *-top and *-bottom p-1 // padding: .25rem!important; p-2 // padding: .5rem!important; p-3 // padding: 1rem!important; p-4 // padding: 1.5rem!important; p-5 // padding: 3rem!important; 单边 pt-0 pl-0 pr-0 pb-0 px-2 py-2
m-1 // margin: .25rem!important; m-2 // margin: .5rem!important; m-3 // margin: 1rem!important; m-4 // margin: 1.5rem!important; m-5 // margin: 3rem!important; 单边 mt-0 ml-0 mr-0 mb-0 单边大小 mt-1 // margin-left: ($spacer * .25) !important; mt-2 mt-3 mt-4 mt-5 mx-auto
ml-auto // margin-left: auto!important; mr-auto // margin-right: auto!important; mt-auto // margin-top: auto!important; mb-auto // margin-bottom: auto!important; 5、清除浮动 // Mixin itself @mixin clearfix() { &::after { display: block; content: ""; clear: both; } } ? // Usage as a mixin .element { @include clearfix; } .d-{breakpoint}-{value} for sm,md,lg,and xl.//对应尺寸加载 d-none d-inline d-inline-block d-block d-table d-table-cell d-table-row d-flex d-inline-flex 打印样式 //使用较少 d-print-none d-print-inline d-print-inline-block d-print-block d-print-table d-print-table-row d-print-table-cell d-print-flex d-print-inline-flex 7、嵌入元素样式 embed-responsive //外部盒子 embed-responsive-21by9(16by9,4by3,1by1)//宽高比 embed-responsive-item //添加在元素上的样式
<`iframe class="embed-responsive-item" src="..."></iframe`> </div> d-inline-flex //将对象作为内联块级弹性伸缩盒显示 d-sm-flex //对应尺寸加载 d-sm-inline-flex d-md-flex d-md-inline-flex d-lg-flex d-lg-inline-flex d-xl-flex d-xl-inline-flex 方向 水平 flex-row flex-row-reverse //相反方向 垂直 flex-column flex-column-reverse 同样的不同尺寸适配样式 flex-row flex-row-reverse flex-column flex-column-reverse flex-sm-row flex-sm-row-reverse flex-sm-column flex-sm-column-reverse flex-md-row flex-md-row-reverse flex-md-column flex-md-column-reverse flex-lg-row flex-lg-row-reverse flex-lg-column flex-lg-column-reverse flex-xl-row flex-xl-row-reverse flex-xl-column flex-xl-column-reverse justify content //可匹配到不同尺寸 justify-content-start justify-content-end justify-content-center justify-content-between justify-content-around wrap flex-nowrap //支持不同尺寸匹配 flex-rap flex-sm-wrap-reverse order //子元素设置 支持不同尺寸匹配 order-0 order-1 order-2 order-3 order-4 order-5 order-6 order-7 order-8 order-9 order-10 order-11 order-12 Align items //子元素设置 支持不同尺寸匹配 align-items-start align-items-end align-items-center lign-items-baseline align-items-stretch Align self//子元素设置 支持不同尺寸匹配 align-self-start align-self-end align-self-center align-self-baseline align-self-stretch Align content//子元素设置 支持不同尺寸匹配? align-content-start align-content-end align-content-center align-content-around align-content-stretch 9、浮动 可适配:float-(sm,md lg xl)-xxx float-right float-none 10、图片替换文字 <h1 class="text-hide" style="background-image: url(‘/assets/brand/bootstrap-solid.svg‘); width: 50px; height: 50px;">Bootstrap</h1> position-relative position-absolute position-fixed position-sticky 固定定位 fixed-top fixed-bottom
position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } position: sticky; //粘性布局 这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。 生效规则 position:sticky 的生效是有一定的限制的,总结如下: 须指定 top,right,bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。 并且 top 和 bottom 同时设置时,top 生效的优先级高,left 和 right 同时设置时,left 的优先级高。 设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible,否则 position:sticky 不会生效。这里需要解释一下: 如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden,则父容器无法进行滚动,所以 position:sticky 元素也不会有滚动然后固定的情况。 如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed,则元素相对父元素进行定位,而不会相对 viewprot 定位。 达到设定的阀值。这个还算好理解,也就是设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。 w-50 w-75 w-100 区间 mw-100 mh-100 13、文本 text-left //文本居左 text-center text-right text-sm-left text-md-left text-lg-left text-xl-left 文本 转换(Text transform) //所有浏览器都支持该属性 text-lowercase //字母文本小写 text-uppercase //字母文本大写 text-capitalize //文本中的每个单词以大写字母开头。 字体 加重和斜体(Font weight and italics) font-weight-bold //字体加重 font-weight-normal //正常字体 font-weight-light //字体变细 font-italic //斜体 14、 垂直对齐(Vertical alignment) align-top align-middle align-bottom align-text-top align-text-bottom
hidden or sr-only hide //类仍然可用,但是它不能对屏幕阅读器起作 不建议使用 invisible 隐藏保留该元素的文档位置 visible //可见
table-striped //条纹表格 table-bordered //边框表格 table-hover //鼠标悬停 table-dark //黑色背景表格 table-condensed //紧凑的表格 table-responsive //响应式表格 表格行设置背景色 active //鼠标悬停在行或单元格上时所设置的颜色 success //标识成功或积极的动作 info //标识普通的提示信息或动作 warning //标识警告或需要用户注意 danger //标识危险或潜在的带来负面影响的动作 17、按钮及按钮组 btn-primary //主要按钮 btn-secondary //次要按钮 btn-success //成功按钮 btn-info //信息按钮 btn-danger //危险 btn-outline-primary //按钮边框 btn-xs btn-sm btn-lg //小大号按钮 btn-block //块级按钮 active //可用 disabled //禁用 按钮组 btn-group //按钮组 btn-group-lg|sm|xs 控制按钮组大小 btn-group-vertical 垂直按钮组 18、列表组 list-group-item //列表li list-unstyled //无样式列表 list-inline //内联列表 添加在ul上 列表背景色 list-group-item-action list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, list-group-item-danger, list-group-item-dark list-group-item-light: 19、表单 form-horizontal //可以将 label 标签和控件组水平并排布局 form-group //表单组 margin-bottom: 15px; input-group-addon //配合input表单使用,可再起前后添加图标或者后缀 form-control //该表单元素宽度变成100% sr-only 隐藏表单 控制表单尺寸 input-lg input-sm 多选和单选 checkbox //包裹复选框 checkbox-inline // 内联多选 radio // 包裹单选框 radio-inline // 内联单选 disabled //不可点击 下拉列表(select) form-control has-success //可配合.form-group使用 has-warning //可配合.form-group使用 has-error //可配合.form-group使用 20 信息提示框 alert-success, alert-info, alert-warning, alert-danger, alert-primary, alert-secondary, alert-light alert-dark 类来实现暗黑提示框 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |