bootstrap 黑边框表格样式_bootstrap4 使用及常用样式详细整理
引入方式
前端项目基于jquery去构建:可以直接引入cdn库,bootstrap4.css、jquery.js、bootstrap4.js
前端项目基于react去构建:bootstrap4.css(scss,less)、react.js、react-bootstrap
前端项目基于angular去构建:bootstrap4.css(scss,less)、angular4、ngx-bootstrap
目录
容器和网格系统
字体颜色及背景颜色
边框
内边距(pading)外边距(margin)
清除浮动
display 显示
嵌入元素样式
弹性布局
浮动
图片替换文字
定位
尺寸(size)
文本
垂直对齐(Vertical alignment)
显示隐藏
表格
按钮及按钮组
列表
表单组
信息提示框
三角
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
内边距
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
1
2
3
外边距
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;
1
2
3
4
5
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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、嵌入元素样式
包含, , , and 等元素样式
embed-responsive //外部盒子
embed-responsive-21by9(16by9,4by3,1by1)//宽高比
embed-responsive-item //添加在元素上的样式
1
2
3
4
5
6
7
8、弹性布局
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类来帮助用背景图像替换元素的文本内容。
Bootstrap
1
2
3
11、定位
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 是根据元素是否达到设定了的阈值决定的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
1
2
3
15、显示隐藏
show
hidden or sr-only
hide //类仍然可用,但是它不能对屏幕阅读器起作 不建议使用
invisible 隐藏保留该元素的文档位置
visible //可见
visibility: hidden!important;
1
2
3
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实现向下小三角
————————————————
版权声明:本文为CSDN博主「Altaba」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Altaba/article/details/81324513
bootstrap 黑边框表格样式_bootstrap4 使用及常用样式详细整理相关推荐
- bootstrap 黑边框表格样式_设置Bootstrap Table表格样式并隔行变色
设置Bootstrap Table表格样式并隔行变色 设置bootstrap-table表格样式可以通过设置classess属性进行设置,官方默认支持黑色主题.隔行变色等样式,你也可以自定义样式把你的 ...
- bootstrap 黑边框表格样式_Excel表格如何添加绘制边框?
Excel表格如何添加绘制边框?日常生活中我们会经常用Excel表格做表,以便于我们在生活中的方便.而在Excel里我们可以直接在上面输入我们需要的内容,但有些时候打印出来,有一些表格是没有边框线,我 ...
- css文本样式有,CSS文本常用样式
1.常用的应用文本的CSS样式: color设置文字的颜色 font-size 设置文字的大小,如font-size:12px font-family 设置文字的字体,如font-family:'微软 ...
- Bootstrap 基础五表格
原文:Bootstrap <基础五>表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> ...
- CSS常用样式属性有哪些?代码怎么写?
CSS常用样式属性有哪些?CSS样式属性有两种分别是局常用样式属性和文本常用样式属性,CSS的作用是美化HTML网页和控制页面布局,我们需要掌握这两种常用的样式属性来美化页面.一套教程,带你轻松掌握H ...
- CSS的选择器和常用样式(id,class,组合,字体,背景,宽度,高度,颜色等CSS样式)
<html><head><title>CSS的选择器和常用样式</title><meta charset="UTF-8"/&g ...
- option样式美化 css,CSS select样式优化
下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,就可以起到美化的作用了. 请选择您所在的城市 请选择您所在的城市 中山市 太原市 广州市 CSS样式 .sel_wrap{ height ...
- dw中css目标规则命名,css 常用样式命名规则
大家在写css的时候,对一些html标签起一个合适的名字是个很头疼的事情,现在给大家分享项目中常用的名字供参考. 外套:wrap --用于最外层 头部:header --用于头部 主要内容:mai ...
- HTML表格(合并单元格、边框、行高、间距等样式)
HTML实现表格的核心是table(表格).tr(行).td(单元格). 基础结构 <table><tr><td></td><td>< ...
最新文章
- 红黑树效率为甚恶魔是log_一文带你彻底读懂红黑树(附详细图解)
- [云炬创业管理笔记]第四章把握创业机会测试3
- 如何更改OST、OAB文件的默认路径?
- oracle 10g 关库,Oracle Db10g 启动和关闭数据库
- Find The Multiple——简单搜索+大胆尝试
- 算法导论 思考题4-1
- 10. Have assignment operators return a reference to *this
- [转载] 像 IDE 一样使用 vim
- 使用Aria2下载百度网盘和115的资源
- 偏差(bias)和方差(variance)区别:
- 对抗样本之DeepFool原理coding
- 2011广告联盟排名,最好的广告联盟推荐
- ​2 万字系统总结,带你实现 Linux 命令自由?
- quill上传本地视频(保姆级教学)
- 语音专题第三讲,语言模型
- 天平游码读数例题_天平游码怎么读数?
- 如何解锁CourseHero文档
- 孤立词语音识别matlab,基于Matlab仿真的孤立词语音识别技术研究
- 【eoe源码索引】2014年3月份源码索引贴
- JavaBean技术的使用