# 5.Utilities：工具
- 1. 边框
- 2. 清除浮动
- 3. 关闭图标
- 4. 颜色
- 5. 显示
3.x版本显示只有三种：block, inline, inline-block。类名叫visiable-{breakpoint}-block
3.x版本隐藏的类名：.hidden-{breakpoint}
3.x版本打印显示的类名：.visiable-print-block
4.x版本：d-block,d-inline,d-inline-block,d-flex,d-table等等
```html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<title>Document</title>
<style>
</style>
</head>
<body>
<div class="container">
<div class="row">
<!-- 在各种尺寸下显示一个元素，只在某个尺寸下显示，在其他尺寸下隐藏
1.隐藏式分为两个部分
1.比他大的尺寸隐藏
2.比他小的尺寸隐藏
-->
<div class="col bg-primary text-white d-none d-xl-block">只在超大屏下显示</div>
<div class="col bg-primary text-white d-none d-lg-block d-xl-none">只在大屏下显示</div>
<div class="col bg-primary text-white d-none d-md-block d-lg-none">只在中屏下显示</div>
<div class="col bg-primary text-white d-none d-sm-block d-md-none">只在小屏下显示</div>
<div class="col bg-primary text-white d-sm-none">只在超小屏屏下显示</div><!--默认是d-block,只要比超小屏大的隐藏就好-->
</div>
<!--
在各种尺寸下隐藏
-->
<div class="row">
<div class="col g-primary text-white d-xl-none">超大屏幕以外的显示</div>
<div class="col g-primary text-white d-lg-none d-xl-block">大屏幕以外的显示</div>
<div class="col g-primary text-white d-md-none d-lg-block">中屏幕以外的显示</div>
<div class="col g-primary text-white d-sm-none d-md-block">小屏幕以外的显示</div>
<div class="col g-primary text-white d-none d-sm-none">超小屏幕以外的显示</div>
</div>
<!--
在打印情况下显示:.d-print-block
-->
<div class="row">
<div class="col d-none d-print-block">auther:lanshanxiao</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
</body>
</html>
```
- 6. 嵌入
```html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<title>Document</title>
<style>
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="embed-responsive embed-responsive-21by9">
<iframe src="xx.xxx.xxx" allowfullscreen></iframe>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
</body>
</html>
```
以上是markdown格式的笔记