bootstrap4使用及常用样式整理
简介
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。如果对于其中需要用到以前的浏览器，那么请使用 Bootstrap3。入门详细学习请参考 菜鸟教程.
引入方式
-
前端项目基于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
内边距
-
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、嵌入元素样式
包含