与上下文文本颜色类类似,可以轻松地将元素的背景设置为任何上下文类。背景实用程序不设置color,因此在某些情况下您需要使用.text-*实用程序。 .bg-primary .bg-secondary .bg-success .bg-danger .bg-warning .bg-info .bg-light .bg-dark .bg-white ...
使用.text-*将文本设置成指定的颜色,比如: .text-success; 也可以.text-*-50降色【只有白色和黑色才可以设 置 : white 和 black !】 使用.text-*也可以实现悬停和焦点的超链接样式【a标签】,white和muted 这样个颜色不支持! 列出颜色:【来之菜鸟教程】 代表指定意义的文本颜色 柔和的文本。 重要的文本。
text-primary text-secondary text-success text-danger text-warning text-info text-light text-dark text-body text-black-50 text-white-50 背景颜色 与text文字类颜色class定义相同,链接元互会在hover状态时变暗。背景色不要设置color样式, 尽可能使用.text-*通用CSS类。 背景颜色 bg-primary bg-secondary bg...
color),"body-tertiary":var(--#{$prefix}tertiary-color),"body-emphasis":var(--#{$prefix}emphasis-color),"reset":inherit,))),"text-opacity":(css-var:true,class:text-opacity,values:(25:.25,50:.5,75:.75,100:1)),"text-color":(property:color,class:text,values:$utilities-text-...
1.颜色Color: 使用.text-*将文本设置成指定的颜色,比如: .text-success; 也可以.text-*-50降色【只有白色和黑色才可以设 置 :white 和 black!】 使用.text-*也可以实现悬停和焦点的超链接样式【a标签】,white和muted 这样个颜色不支持! 列出颜色:【来之菜鸟教程】 ...
text-danger 红色 bg-primary 蓝色背景 bg-sucess bg-info bg-warning bg-danger image.png 元素浮动到左侧 元素浮动到右侧 image.png 中间显示 该 div 显示在中间 image.png clearfix清除浮动 <!DOCTYPE html> Bootstrap .clearfix 实例
了解如何使用实用程序API。 "color":(property:color,class:text,values:map-merge($theme-colors,("white":$white,"body":$body-color,"muted":$text-muted,"black-50":rgba($black,.5),"white-50":rgba($white,.5),"reset":inherit,))),
Here’s an example that generates text color utilities (e.g.,.text-purple-500) using the above steps. @import"bootstrap/scss/functions";@import"bootstrap/scss/variables";@import"bootstrap/scss/maps";@import"bootstrap/scss/mixins";@import"bootstrap/scss/utilities";$all-colors:map-merge-mul...
颜色(Color) 数据列表(Datalists) 二、实例 1、表单大小(Sizing) .form-control 默认输入框大小 .form-control-lg 大号输入框 .form-control-sm 小号输入框 2、表单禁用 disabled 禁用(不可编辑) readonly 只读
.progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#428bca;-webkit-box-shadow:inset0-1px0rgba(0,0,0,.15);box-shadow:inset0-1px0rgba(0,0,0,.15);-webkit-transition:width.6sease;transition:width.6sease;} ...