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
pading:.5rem 0; //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
margin:0 auto;
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、清除浮动
clearfix //清除浮动类实现方式如下
// Mixin itself
@mixin clearfix() {
&::after {
display: block;
content: "";
clear: both;
}
}
// Usage as a mixin
.element {
@include clearfix;
}
6、display 显示
.d-{value} for all //任何尺寸使用
.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、嵌入元素样式
包含<iframe>, <embed>, <video>, and <object>等元素样式
embed-responsive //外部盒子
embed-responsive-21by9(16by9,4by3,1by1)//宽高比
embed-responsive-item //添加在元素上的样式
<div class="embed-responsive embed-responsive-21by9">
<`iframe class="embed-responsive-item" src="..."></iframe`>
</div>
弹性布局
d-flex //将对象作为弹性伸缩盒显示
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-left
float-right
float-none
10、图片替换文字
text-hide //使用.text-hide类来帮助用背景图像替换元素的文本内容。
<h1 class="text-hide" style="background-image: url('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
定位
position-static
position-relative
position-absolute
position-fixed
position-sticky
固定定位
fixed-top
fixed-bottom
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
sticky-top //使用较少,兼容性一般
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 是根据元素是否达到设定了的阈值决定的。
12 尺寸(size)
w-25
//width: 25%!important; 以下值同理
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-baseline
align-top
align-middle
align-bottom
align-text-top
align-text-bottom
vertical-align: text-bottom!important; //.align-text-bottom
显示隐藏
show
hidden or sr-only
hide //类仍然可用,但是它不能对屏幕阅读器起作 不建议使用
invisible 隐藏保留该元素的文档位置
visible //可见
visibility: hidden!important;
16、表格
table //默认样式
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 //列表组
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-inline //form元素添加该类,可构成内联表单
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 类
背景色 追加以下类名
alert-success,
alert-info,
alert-warning,
alert-danger,
alert-primary,
alert-secondary,
alert-light
alert-dark 类来实现暗黑提示框
21、三角符号
caret //css实现向下小三角
---------------------
作者:Altaba
来源:CSDN
原文:https://blog.csdn.net/Altaba/article/details/81324513
版权声明:本文为博主原创文章,转载请附上博文链接!
转载于:https://www.cnblogs.com/king94Boy/p/10654097.html
bootstrap4 常用样式类名 (供自己参考)相关推荐
- bootstrap4常用样式(仅供参考)
1.容器和网格系统 容器 container 固定宽度,不同尺寸固定了不同的宽度 container-fluid 100%宽度 栅格系统 cal-xs//<768px cal-sm //> ...
- Qt样式表之二:QSS语法及常用样式
一.简述 Qt样式表(以下统称QSS)的术语和语法规则几乎和CSS相同.如果你熟悉CSS,可以快速浏览以下内容.不熟悉的话可以先去W3School - CSS或者本人的CSS博客随笔简单了解一下. 在 ...
- CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
- 1-2 CSS常用样式笔记
文章目录 CSS常用样式 字体属性 文本属性 盒模型属性 宽度width 高度height 内边距padding 边框border 外边距margin 盒模型拓展应用 清除默认样式 高度height应 ...
- [总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
- dw中css目标规则命名,css 常用样式命名规则
大家在写css的时候,对一些html标签起一个合适的名字是个很头疼的事情,现在给大家分享项目中常用的名字供参考. 外套:wrap --用于最外层 头部:header --用于头部 主要内容:mai ...
- RN style使用以及常用样式总结
React-Native 编写的应用的样式不是靠css来实现的,而是依赖javascript来为你的应用来添加样式 1.声明样式 导入必要文件 import React, { StyleSheet } ...
- css图片菜鸟教程,css 常用样式(分享)
font-family设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size 设 ...
- Vue常用经典开源项目汇总参考-海量
Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...
最新文章
- Linux内核网络设备驱动
- iphone闪退修复工具_升级 iOS 14.2 微信闪退?iPhone 12 维修贵
- java 查看堆外内存占用_如何监控和诊断JVM堆内和堆外内存使用?
- JAVA内存释放机制
- 吉林省计算机二级vf试题,计算机等级考试二级VF模拟试题四及答案解析
- 2021年下种子磁力最好用的网盘
- 移动100m宽带慢的要死_为什么同样是100M的宽带, 中国移动就是比中国电信卡慢...
- 从零开始学Java自己利用接口和集合框架做的简单图书管理系统
- 网络信息安全之安全风险管理
- rsync来实现文件同步
- Photoshop文字排版小技巧。
- codevs 2382 [CSTC2007] 挂缀 贪心
- 运维笔记(三)服务器介绍和XShell使用
- C语言这么厉害,它自身又是用什么语言写的?
- Linux中curl命令详解
- ping请求超时问题研究
- 哈工大软件构造 Git使用
- 黑苹果 GTX1060 6G显卡 EFI 文件
- omnipeek安装与抓包
- OTT供应商揭示安全如何影响观众体验