bootstrap4常用样式整理

背景

最近在做一些小的学习项目时，多次用到了bootstrap4，所以在这里将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" //关闭提示框

按钮

• 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"
<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">&times;</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(); 

});