bootstrap4常用样式整理
BootStrap4.3.1
一副图
1 引入JS
<meta name="viewpoint" content="width=device-width,initial-scale=1" />
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
设置设备大小viewport
2 基础排版样式
2.1 容器和网格系统
• container container-fluid //容器类前者固定宽度后者100%宽度
文字排版
• display //标题类 1-4
• small //小文本
• //文本底部下面一条虚线边框
2.2 栅格布局系统
栅格嵌套*
响应式布局
显示和隐藏样式
3 导航栏
• navbar、navbar-expand-sm、bg-light
• ul：navbar-nav li：nav-item
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-dark">
<div class="navbar-header">
<!-- <img src="/img/logo.png" class="img-rounded"> -->
<h2><a class="navbar-brand" href="../index.html">LOGO</a></h2>
</div>
<ul class="nav navbar-nav">
<li class="nav-item active" id="nav1Page"><a class="nav-link" href="#">主页</a></li>
<li class="nav-item" id="nav2Page"><a class="nav-link" href="#">基础管理</a></li>
<li class="nav-item" id="nav3Page"><a class="nav-link" href="#">业务管理</a></li>
<li class="nav-item" id="nav4Page"><a class="nav-link" href="#">消息管理</a></li>
<li class="nav-item" id="nav5Page"><a class="nav-link" href="#">系统管理</a></li>
</ul>
</nav>
折叠导航栏
https://www.runoob.com/bootstrap4/bootstrap4-navbar.html
4 下拉菜单
• dropdown //下拉菜单默认
• button设置dropdown-toggle data-toggle=“dropdown” //下拉button
• dropdown-menu //下拉菜单
• a设置样式dropdown-item
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-user"></span>admin</a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#">个人中心</a></li>
<li class="dropdown-item"><a href="#">设置</a></li>
<li class="dropdown-item"><a href="#">关于</a></li>
<li class="dropdown-item"><a href="#">退出</a></li>
</ul>
</div>
5 列表组（折叠）
• list-group //列表组
• list-group-item //列表li
• list-group-item-action
collapse类用于指定一个折叠元素，点击后控制内容的隐藏与显示，需要在元素上添加 data-toggle=“collapse” 属性。data-target="#id" 属性是对应折叠的内容。
<!-- 左侧栏 List Group -->
<div class="row">
<div class="col-md-2">
<ul class="list-group">
<li class="list-group-item">
<a data-toggle="collapse" data-target="#collapse1" href="#">基础管理</a>
<ul class="collapse show" id="collapse1">
<li><a class="list-group-item-action" href="#">部门管理
<span id="totalCount" class="badge badge-pill badge-secondary">0</span></a>
</li>
<li><a href="#">管理2</a></li>
<li><a href="#">管理3</a></li>
<li><a href="#">管理4</a></li>
</ul>
</li>
<li class="list-group-item">
<a data-toggle="collapse" data-target="#collapse2" href="#">权限管理</a>
<ul class="collapse" id="collapse2">
<li><a href="#">管理1</a></li>
<li><a href="#">管理2</a></li>
<li><a href="#">管理3</a></li>
<li><a href="#">管理4</a></li>
</ul>
</li>
</ul>
</div></div>
6 表单样式
• form-group 可用于表单布局，对form中的div添加该样式进行布局，同时配合form的class进行布局。
• input-group 输入框组，是对表单的扩展，可在form的div中方便的组合span和input等
• label for email
• input class form-control
6.1 input-group
关键字检索
<!-- 关键字检索 -->
<div class="input-group justify-content-end">
<input type="text" class="form-control col-md-2" placeholder="输入关键字"/>
<span class="input-group-btn">
<button type="submit" class="btn btn-outline-primary">搜索</button>
</span>
</div>
6.2 form-group
右侧栏：查询条件+表格+分页
<!-- 右侧栏：查询条件 -->
<div class="col-md-10">
<div class="row form-inline form-group" id="manage_dept_query">
<div class="form-group col-md-3">
<label for="dept_id">部门ID</label>
<input type="text" id="dept_id" class="form-control"/>
</div>
<div class="form-group col-md-3">
<label for="dept_name">部门名称</label>
<input type="text" id="dept_name" class="form-control" value="" placeholder="请输入" />
</div>
<div class="form-group col-md-2">
<label for="dept_level">部门级别</label>
<select id="dept_level" class="form-control">
<option value="1">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<!-- 查询按钮 -->
<span class="col-md-1"><button class="btn btn-outline-primary" type="button" id="manage_query_button" onclick="queryDepts()">查询</button></span>
<span class="col-md-1"><button class="btn btn-outline-primary" type="button" id="manage_add_button" onclick="addDept()">新增</button></span>
</div>
7 表格样式
<table> 标签样式有以下几种：
.table 表格基本样式
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑
.table-responsive //响应式表格，可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。
.table-dark //黑色背景表格
7.2 table
表格固定
<!-- 列表 -->
<div id="mamage_list" style="height: 550px; overflow: auto;">
<table class="table table-bordered table-hover text-center" id="manage_list_table">
<thead>
<tr>
<th>全选<input type='checkbox' id="cb0"/></th>
<th>序号</th>
<th>部门编号</th>
<th>部门名称</th>
<th>部门级别</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
7.3 分页
• pagination //ul元素上添加
• page-item //在li元素上添加page-item
• page-link
<!-- 分页查询 -->
<div class="input-group justify-content-end">
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link" href="#">首页</a></li>
<li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">下一页</a></li>
<li class="page-item"><a class="page-link" href="#">尾页</a></li>
</ul>
<!-- Query Result -->
<span class="col-md-2"><label>共50条记录 第1/3页 </label></span>
<div class="input-group col-md-2">
<input type="text" id="table_page" class="form-control text-center col-md-4" value="1" placeholder="1"/>
<span class="input-group-addon"><button class="btn btn-outline-primary">GO</button></span>
</div>
信息提示框
• alert-success //成功提示信息
• alert-dismissable class=“close” data-dismiss=“alert” //关闭提示框× × 是 HTML 实体字符，来表示关闭操作
<div class="container">
<div class="alert alert-success alert-dismissible fade show">
<span><strong>信息：</strong>success</span>
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
</div>
图片
• rounded //圆角效果
• rounded-circle //椭圆效果
• img-thumbnail //图片缩略图效果
• img-fluid //图片响应式效果
超大屏幕
• jumbotron // 屏幕
• jumbotron-fluid //没有圆角的全屏幕
按钮
• 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
卡片
• card、card-header、card-body、card-footer
• card-img-top //图片
• card-body、card-title、card-text //图片卡片
• card-img-overlay//设置图片为背景
模态框
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();
});
颜色
• text-muted 柔和
• text-primary 重要
• text-success 成功
• text-info 提示
• text-warning 警告
• text-danger 危险
• text-secondary 副标题
• text-dark 深灰色文字
• text-light 浅灰色
• text-white 白色
参考资料
折叠导航栏
https://www.runoob.com/bootstrap4/bootstrap4-navbar.html
来源：https://blog.csdn.net/qq_19636353/article/details/99625792