本篇文章给大家带来的内容是关于推荐：bootstrap4中常用的样式介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
背景
最近在做一些小的学习项目时，多次用到了bootstrap4，所以在这里将bootstrap进行整理，用来以后查看。（免费视频课程推荐：bootstrap教程）
bootstrap4安装
登录后复制
容器和网格系统
container container-fluid //容器类前者固定宽度后者100%宽度
文字排版
display //标题类 1-4small //小文本 //文本底部下面一条虚线边框
登录后复制
颜色
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 //添加一个pprogress-bar //在上面的p中添加一个progress-bar的p
登录后复制
分页
pagination //ul元素上添加page-item //在li元素上添加page-item
登录后复制
列表组
list-group //列表组list-group-item //列表lilist-group-item-action
登录后复制
卡片
card、card-header、card-body、card-footercard-img-top //图片card-body、card-title、card-text //图片卡片card-img-overlay//设置图片为背景
登录后复制
下拉菜单
dropdown //下拉菜单默认button设置dropdown-toggle data-toggle=“dropdown” //下拉buttondropdown-menu //下拉菜单a设置样式dropdown-item
登录后复制
导航栏
navbar、navbar-expand-sm、bg-lightul：navbar-nav li：nav-item
登录后复制
表单
form-grouplabel for emailinput class form-control
登录后复制
模态框
button设置 data-toggle="modal" data-target="#myModal"模态框头部
模态框内容..
登录后复制
提示框
data-toggle="tooltip" //创建提示框title="我是提示内容!" //提示内容data-placement="top" //指定提示框位置
登录后复制
$(document).ready(function(){ //初始化$('[data-toggle="tooltip"]').tooltip(); });
登录后复制
以上就是推荐：bootstrap4中常用的样式介绍的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2739400.html
