网格系统
example:

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>  
</div>

效果(每个div都赋予了不同颜色以分辨):
1.PNG
超小设备 .col-
平板 .col-sm-
桌面显示器 col-md-

<div class="row">
  <div class="col-sm-3 first">.col-sm-3</div>
  <div class="col-sm-3 offset-sm-3 second">.col-sm-3</div>
</div>  

offset-sm-3相当于偏移一个col-sm-3
效果:
2.PNG

颜色
文本颜色(个人感觉可用于连接)

<p class="text-muted">柔和的文本。</p>
  <p class="text-primary">重要的文本。</p>
  <p class="text-success">执行成功的文本。</p>
  <p class="text-info">代表一些提示信息的文本。</p>
  <p class="text-warning">警告文本。</p>
  <p class="text-danger">危险操作文本。</p>
  <p class="text-secondary">副标题。</p>
  <p class="text-dark">深灰色文字。</p>
  <p class="text-light">浅灰色文本(白色背景上看不清楚)。</p>
  <p class="text-white">白色文本(白色背景上看不清楚)。</p>  

表格
提供了特色表格,通过定义<table class="table"> 来设置
设置前:
21.PNG
设置后:
22.PNG
设置带条纹的表格:在table类的基础上再添加一个.table-striped
3.PNG
黑色的表格(逼格) 添加类table-dark
4.PNG
将上述两个合起来得到本人认为最霸气的表格
5.PNG
可以通过设定其中不同的tr来实现在一个表格中有不同的效果

响应式图片
图片的大小需要根据屏幕的大小自动适应
添加类.img-fluid即可
(本质是将图片的max-width设置为100%,height设为auto)

按钮
来自菜鸟教程

 <button type="button" class="btn">基本按钮</button>
  <button type="button" class="btn btn-primary">主要按钮</button>
  <button type="button" class="btn btn-secondary">次要按钮</button>
  <button type="button" class="btn btn-success">成功</button>
  <button type="button" class="btn btn-info">信息</button>
  <button type="button" class="btn btn-warning">警告</button>
  <button type="button" class="btn btn-danger">危险</button>
  <button type="button" class="btn btn-dark">黑色</button>
  <button type="button" class="btn btn-light">浅色</button>
  <button type="button" class="btn btn-link">链接</button>  

这些按钮的类还可以用于<a><input>

禁用按钮(个人感觉以后可以用于特定条件下的按钮设定,通过JS改变按钮的可用性,比如说要输入用户名才能点击下一步,否则禁用)
添加类.disabled
徽章
我觉得这个可以有

<p class="badge badge-danger">警告</p>
	<p class="badge badge-dark">失效</p>  
	<p class="badge badge-info">新消息</p> 
	<p class="badge badge-light">温馨提示</p> 
	<p class="badge badge-primary">主要</p> 
	<p class="badge-secondary badge">次要</p>
	<p class="badge-success badge">注册成功</p>
	<p class="badge badge-warning">warning</p>   

效果:
6.PNG

分页
<ul>标签中添加.pagination类,然后在下属<li>中添加.page-item类,然后在li下属的<a>中添加.page-link

<ul class="pagination">
	<li class="page-item"><a class="page-link">Previous</a></li>
	<li class="page-item"><a class="page-link">1</a></li>
	<li class="page-item"><a class="page-link">2</a></li>
	<li class="page-item"><a class="page-link">3</a></li>
	<li class="page-item"><a class="page-link">4</a></li>
	<li class="page-item"><a class="page-link">next</a></li>
	</ul>  

效果:
7.PNG
同样的道理,如果想要设置链接不可点击,只要在li的class添加.disabled类即可

----------分割线----------
以下内容需要添加下属语句

 <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>  

在原先bootstrap link添加即可
折叠内容

	<div class="container">
 <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">简单的折叠</button>
		<div id="demo" class="collapse">
		this is a card which can hide
			yeah this is second paragraph 
			third
			fourth
		</div>
</div>   

一开始进入的时候内容会隐藏,点击按钮后有一个下滑动画,显示出内容

下拉列表
初始状态是一个带着下三角的按钮,点击会下拉一个列表
example:

<div class="container">
		<div class="dropdown">
 <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">省份</button>
		<div class="dropdown-menu">
		<a class="dropdown-item" href="#">福建</a>
			<a class="dropdown-item" href="#">湖北</a>
			<a class="dropdown-item" href="#">安徽</a>
			</div>
		</div>
</div>  

效果:
8.PNG

导航(个人偏好的一种)

大体代码:

<div class="container">
<ul class="nav nav-tabs">
		<li class="nav-item">
	<a class="nav-link" data-toggle="tab" href="#WH">武汉</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" data-toggle="tab" href="#QZ">泉州</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" data-toggle="tab" href="#XC">宣城</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" data-toggle="tab" href="#SH">上海</a>
	</li>
		</ul>
		<div class="tab-content">
		<div class="container tab-pane active" id="QZ">
		泉州市隶属于福建,地级市
		</div>
		<div class="container tab-pane fade" id="WH">
		武汉市隶属于湖北,省会
		</div>
		<div class="container tab-pane fade" id="XC">
		宣城市隶属于安徽,地级市
		</div>
			<div class="container tab-pane fade" id="SH">
		上海,直辖市
		</div>
		</div>
</div>  

效果图:
9.PNG

面包屑导航
是一种基于网络层次信息的显示方式
代码如下:

<div class="container">
	<ol class="breadcrumb">
	<li class="breadcrumb-item"><a href="#">文档</a></li>
		<li class="breadcrumb-item"><a href="#">功能性文档</a></li>
		<li class="breadcrumb-item active">C++</li>
	</ol>
	</div>  

效果图:
10.PNG

幻灯片切换效果
链接:https://www.runoob.com/bootstrap4/bootstrap4-carousel.html

Q.E.D.

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议