bootstrap 黑边框表格样式_bootstrap4常用样式整理

背景

最近在做一些小的学习项目时，多次用到了bootstrap4，所以在这里将bootstrap进行整理，用来以后查看。

bootstrap4安装

容器和网格系统

container container-fluid //容器类前者固定宽度后者100%宽度

文字排版

display //标题类 1-4

small //小文本

//文本底部下面一条虚线边框

颜色

text-muted 柔和

text-primary 重要

text-success 成功

text-info 提示

text-warning 警告

text-danger 危险

text-secondary 副标题

text-dark 深灰色文字

text-light 浅灰色

text-white 白色

表格

table //默认样式

table-striped //条纹表格

table-bordered //边框表格

table-hover //鼠标悬停

table-dark //黑色背景表格

table-responsive //响应式表格

图片

rounded //圆角效果

rounded-circle //椭圆效果

img-thumbnail //图片缩略图效果

img-fluid //图片响应式效果

超大屏幕

jumbotron // 屏幕

jumbotron-fluid //没有圆角的全屏幕

信息提示框

alert-success //成功提示信息

alert-dismissable class="close" data-dismiss="alert" //关闭提示框

按钮

btn-primary //主要按钮

btn-secondary //次要按钮

btn-success //成功按钮

btn-info //信息按钮

btn-danger //危险

btn-outline-primary //按钮边框

btn-sm btn-lg //小大号按钮

btn-block //块级按钮

active //可用

disabled //禁用

按钮组

btn-group //按钮组

btn-group-lg|sm|xs 控制按钮组大小

btn-group-vertical 垂直按钮组

进度条

progress //添加一个div

progress-bar //在上面的div中添加一个progress-bar的div

分页

pagination //ul元素上添加

page-item //在li元素上添加page-item

列表组

list-group //列表组

list-group-item //列表li

list-group-item-action

卡片

card、card-header、card-body、card-footer

card-img-top //图片

card-body、card-title、card-text //图片卡片

card-img-overlay//设置图片为背景

下拉菜单

dropdown //下拉菜单默认

button设置dropdown-toggle data-toggle=“dropdown” //下拉button

dropdown-menu //下拉菜单

a设置样式dropdown-item

导航栏

navbar、navbar-expand-sm、bg-light

ul：navbar-nav li：nav-item

表单

form-group

label for email

input class form-control

模态框

button设置 data-toggle="modal" data-target="#myModal"

模态框头部

×

模态框内容..

关闭

提示框

data-toggle="tooltip" //创建提示框

title="我是提示内容!" //提示内容

data-placement="top" //指定提示框位置

$(document).ready(function(){ //初始化

$('[data-toggle="tooltip"]').tooltip();

});