本篇文章给大家带来的内容是关于推荐：bootstrap4中常用的样式介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
背景
最近在做一些小的学习项目时，多次用到了bootstrap4，所以在这里将bootstrap进行整理，用来以后查看。（免费视频课程推荐：bootstrap教程）
bootstrap4安装
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
容器和网格系统
container container-fluid //容器类前者固定宽度后者100%宽度
文字排版
display //标题类 1-4 small //小文本 <abbr> //文本底部下面一条虚线边框
颜色
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" //关闭提示框
按钮
睿拓智能网站系统-网上商城
下载
睿拓智能网站系统-网上商城1.0免费版软件大小:5M运行环境：asp+access本版本是永州睿拓信息专为电子商务入门级用户开发的网上电子商城系统，拥有产品发布，新闻发布，在线下单等全部功能，并且正式商用用户可在线提供多个模板更换，可实现一般网店交易所有功能，是中小企业和个人开展个人独立电子商务商城最佳的选择，以下为详细功能介绍：1.最新产品-提供最新产品发布管理修改，和最新产品订单查看2.推荐产
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 //添加一个p progress-bar //在上面的p中添加一个progress-bar的p
分页
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"
<div class="modal fade" id="myModal"></div>
<div class="modal-dialog"></div>
<div class="modal-content"></div>
<div class="modal-header">
<h4 class="modal-title">模态框头部</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">模态框内容..</div>
<div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button></div>提示框
data-toggle="tooltip" //创建提示框 title="我是提示内容!" //提示内容 data-placement="top" //指定提示框位置
$(document).ready(function(){ //初始化
$('[data-toggle="tooltip"]').tooltip();
}); 
