1.BootStrap4 导航栏
.navbar类来创建一个标准的导航栏
.navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠)
用 ul 元素并添加 class="navbar-nav" 类。 然后在 li 元素上添加 .nav-item 类, a 元素上使用 .nav-link 类
<nav class="navbar navbar-expand-sm bg-secondary ">
<ul class="navbar-nav ">
<li class="nav-item "><a href="# " class="nav-link ">导航栏1</a></li>
<li class="nav-item "><a href="# " class="nav-link ">导航栏2</a></li>
<li class="nav-item "><a href="# " class="nav-link ">导航栏3</a></li>
</ul>
</nav>
删除 .navbar-expand-xl|lg|md|sm 类来创建垂直导航栏
<h3>垂直导航栏</h3>
<nav class="navbar bg-success ">
<ul class="navbar-nav ">
<li class="nav-item "><a href="# " class="nav-link ">垂直导航栏1</a></li>
<li class="nav-item "><a href="# " class="nav-link ">垂直导航栏栏2</a></li>
<li class="nav-item "><a href="# " class="nav-link ">垂直导航栏栏3</a></li>
</ul>
</nav>
设置在nav中ul前面设置a元素.navbar-brand 类用于高亮显示品牌/Logo
<nav class="navbar navbar-expand-sm bg-secondary ">
<a href="#" class="navbar-brand"><img src="https://img-home.csdnimg.cn/images/20201124032511.png" alt=""></a>
<ul class="navbar-nav ">
<li class="nav-item "><a href="# " class="nav-link ">导航栏1</a></li>
<li class="nav-item "><a href="# " class="nav-link ">导航栏2</a></li>
<li class="nav-item "><a href="# " class="nav-link ">导航栏3</a></li>
</ul>
</nav>
li上设置dropdown,li中的a上设置dropdown-toggle,data-toggle="dropdown ",li中创建下拉菜单
<nav class="navbar navbar-expand-sm bg-secondary ">
<ul class="navbar-nav ">
<li class="nav-item dropdown ">
<a href="# " class="nav-link dropdown-toggle " data-toggle="dropdown">文件夹</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">文件一</a>
<a href="#" class="dropdown-item">文件二</a></li>
</li>
<li class="nav-item dropdown">
<a href="# " class="nav-link dropdown-toggle " data-toggle="dropdown">导航栏2</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">导航一</a>
<a href="#" class="dropdown-item">导航二</a>
</div>
</li>
<li class="nav-item disabled"><a href="# " class="nav-link ">导航栏3</a></li>
</ul>
</nav>
导航栏的表单form 元素使用 class="form-inline " 类来排版输入框与按钮
<nav class="navbar navbar-expand-sm ">
<form class="form-inline">
<input class="form-control" type="text">
<button class="btn btn-dark "> 百度一下</button>
</form>
<!-- 非链接文本 <span class="navbar-text"></span> -->
<span class="navbar-text">百度</span>
</nav>
固定导航栏
导航栏可以固定在头部或者底部。
我们使用 .fixed-top 类来实现导航栏的固定
.fixed-bottom 类用于设置导航栏固定在底部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<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>
<title>导航栏</title>
</head>
<body class="container">
<nav class="navbar navbar-expand-lg bg-success fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link ">111</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link ">222</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link ">333</a>
</li>
</ul>
</nav>
<h1>fixed-top</h1>
<h1>fixed-botton</h1>
<h1>fixed-top</h1>
<h1>fixed-botton</h1>
<h1>fixed-top</h1>
<h1>fixed-botton</h1>
<h1>fixed-top</h1>
<h1>fixed-botton</h1>
<h1>fixed-top</h1>
<h1>fixed-botton</h1>
<h1>fixed-top</h1>
<h1>fixed-botton</h1>
<h1>fixed-top</h1>
<h1>fixed-botton</h1>
<h1>fixed-top</h1>
<h1>fixed-botton</h1>
<h1>fixed-top</h1>
<h1>fixed-botton</h1>
<h1>fixed-top</h1>
<h1>fixed-botton</h1>
<h1>fixed-top</h1>
<h1>fixed-botton</h1>
</body>
</html>
2.Bootstrap4 面包屑导航(Breadcrumb)
面包屑导航是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置,是在用户界面中的一种导航辅助。
ul设置breadcrumb表示一个面包屑
breadcrumb-item面包屑中的每一项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<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>
<title>面包屑导航</title>
</head>
<body class="container">
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">宇宙</a></li>
<li class="breadcrumb-item"><a href="#">地球</a></li>
<li class="breadcrumb-item"><a href="#">亚洲</a></li>
<li class="breadcrumb-item"><a href="#">中国</a></li>
<li class="breadcrumb-item"><a href="#">陕西</a></li>
</ul>
</body>
</html>
3.Bootstrap4 表单
表单元素 <input>, <textarea>, 和 <select> elements 在使用 .form-control 类的情况下,宽度都是设置为 100%。
堆叠表单
全屏宽度、垂直方向
<form>
账号<input type="text" class="form-control" placeholder="请输入账号">
</form>
内联表单
在 <form> 元素上添加 .form-inline类
所有内联表单中的元素都是左对齐的。
屏幕宽度小于 576px 时为垂直堆叠,如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。
<form class="form-inline">
账号<input type="text" class="form-control" placeholder="请输入账号">
</form>
Bootstrap 复选框(checkbox)
复选框用于让用户从一系列预设置的选项中进行选择,可以选一个或多个。
使用 .form-check-inline 类可以让选项显示在同一行上
<form>
<input type="checkbox" value="" class="form-check-inline">复选框
<input type="checkbox" value="" class="form-check-inline">复选框
<input type="checkbox" value="" class="form-check-inline">复选框
</form>
Bootstrap 单选框(Radio)
单选框用于让用户从一系列预设置的选项中进行选择,只能选一个。
使用 .radio-inline 类可以让选项显示在同一行上
<form>
<input type="radio" name="danxuan" id="" class="radio-inline">单选框
<input type="radio" name="danxuan" id="" class="radio-inline">单选框
<input type="radio" name="danxuan" id="" class="radio-inline">单选框
</form>
Bootstrap select 下拉菜单
当您想让用户从多个选项中进行选择,但是默认情况下只能选择一个选项时,则使用选择框。
<form>
<select id="" multiple class="form-control">
<option >1111111</option>
<option >2222222</option>
<option >3333333</option>
<option >4444444</option>
<option >5555555</option>
<option >6666666</option>
<option >7777777</option>
</select>
</form>
4.Bootstrap4 输入框组
使用 .input-group 类来向表单输入框中添加更多的样式,如图标、文本或者按钮
使用 .input-group-prepend 类可以在输入框的的前面添加文本信息
使用 .input-group-append 类添加在输入框的后面
使用 .input-group-sm 类来设置小的输入框, .input-group-lg 类设置大的输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<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>
<title>Bootstrap4 输入框组</title>
</head>
</head>
<body>
<div class="container">
<h3>使用 .input-group 类来向表单输入框中添加更多的样式,如图标、文本或者按钮</h3>
<h3>使用 .input-group-prepend 类可以在输入框的的前面添加文本信息</h3>
<h3>使用 .input-group-append 类添加在输入框的后面</h3>
<h3>使用 .input-group-sm 类来设置小的输入框, .input-group-lg 类设置大的输入框</h3>
<form action="">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">账号</span></div>
<input type="text" class="form-control" placeholder="输入账号">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="输入账号">
<div class="input-group-append">
<span class="input-group-text">账号</span></div>
</div>
</form>
</div>
</body>
</html>
多个输入框
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">账号</span></div>
<input type="text" class="form-control" placeholder="输入账号">
<input type="text" class="form-control" placeholder="用户名">
</div>
多个前缀
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">账号1</span>
<span class="input-group-text">账号2</span>
<span class="input-group-text">账号3</span>
</div>
<input type="text" class="form-control" placeholder="用户名">
</div>
输入框添加按钮组
<div class="input-group">
<input type="text" class="form-control" placeholder="用户名">
<div class="input-group-append">
<span class="input-group-text">*</span>
<button class="btn btn-info"><a href="https://www.baidu.com/" >搜索</a></button>
</div>
</div>
5.Bootstrap4 轮播
轮播是一个循环的幻灯片
类 | 描述 |
.carousel | 创建一个轮播 |
.carousel-indicators | 为轮播添加一个指示符,就是轮播图底下的一个个小点,轮播的过程可以显示目前是第几张图。 |
.carousel-inner | 添加要切换的图片 |
.carousel-item | 指定每个图片的内容 |
.carousel-control-prev | 添加左侧的按钮,点击会返回上一张。 |
.carousel-control-next | 添加右侧按钮,点击会切换到下一张。 |
.carousel-control-prev-icon | 与 .carousel-control-prev 一起使用,设置左侧的按钮 |
.carousel-control-next-icon | 与 .carousel-control-next 一起使用,设置右侧的按钮 |
.slide | 切换图片的过渡和动画效果,如果你不需要这样的效果,可以删除这个类。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<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>
<style>
.carousel-inner img {
width: 100%;
height: 100%;
}
#demo {
width: 70%;
height: 70%;
}
</style>
<title>Bootstrap4 Bootstrap4 轮播</title>
</head>
<body class="container">
<h2>轮播是一个循环的幻灯片</h2>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
<li data-target="#demo" data-slide-to="3"></li>
</ul>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF">
<div class="carousel-caption">
<h3>图片</h3>
<p>网络图片</p>
</div>
</div>
<div class="carousel-item">
<img src="https://t7.baidu.com/it/u=737555197,308540855&fm=193&f=GIF">
<div class="carousel-caption">
<h3>图片</h3>
<p>网络图片</p>
</div>
</div>
<div class="carousel-item">
<img src="https://t7.baidu.com/it/u=4240641596,3235181048&fm=193&f=GIF">
<div class="carousel-caption">
<h3>图片</h3>
<p>网络图片</p>
</div>
</div>
<div class="carousel-item">
<img src="https://t7.baidu.com/it/u=1032479594,2383177859&fm=193&f=GIF">
<div class="carousel-caption">
<h3>图片</h3>
<p>网络图片</p>
</div>
</div>
</div>
<!-- 左右切换按钮 -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
6.Bootstrap4 模态框
模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等
.modal表示一个覆盖在父窗体上的子窗体
.modal-dialog对话框形式的子窗体
.modal-content具体内容设置
.modal-header具体内容的头
.modal-body具体内容身体
.modal-footer具体内容底部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<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>
<title>Bootstrap4 模态框</title>
</head>
<body>
<div class="container">
<p>.modal表示一个覆盖在父窗体上的子窗体</p>
<p>.modal-dialog对话框形式的子窗体</p>
<p>.modal-content具体内容设置</p>
<p>.modal-header具体内容的头</p>
<p>.modal-body具体内容身体</p>
<p>.modal-footer具体内容底部</p>
<button class="btn btn-dark " data-toggle="modal" data-target="#modal1">模态框</button>
<!-- 模态框 -->
<div class="modal-lg" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>员工信息</h3>
</div>
<div class="modal-body">
<form action="">
<table>
<tr>
<td>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">用户名</span>
</div>
<input type="text" class="form-control">
</div>
</td>
</tr>
<tr>
<td>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">密码</span>
<input type="password" class="form-control" name="" id="">
</div>
</div>
</td>
</tr>
</table>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-dark " data-toggle="modal" data-target="#modal1">关闭</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
7.Bootstrap4 提示框
提示框是一个小小的弹窗,在鼠标移动到元素上显示,鼠标移到元素外就消失
通过向元素添加 data-toggle="tooltip" 来来创建提示框
title元素是用来显示提示内容的
data-placement 属性来设定提示框显示的方向: top, bottom, left 或 right。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<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>
<title>Bootstrap4 提示框</title>
</head>
<body>
<div class="container">
<h1>提示框是一个小小的弹窗,在鼠标移动到元素上显示,鼠标移到元素外就消失</h1>
<h3>通过向元素添加 data-toggle="tooltip" 来来创建提示框</h3>
<h3>data-placement 属性来设定提示框显示的方向: top, bottom, left 或 right</h3>
<button class="btn btn-info"><a href="#" data-toggle="tooltip" data-placement="right" title="提示框提示的内容" >提示框</a></button>
<img src="zhaoxiangji.png" alt="" data-toggle="tooltip" data-placement="top" title="提示内容 ">
<script>
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</div>
</body>
</html>
8.Bootstrap4 弹出框
弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的是它可以显示更多的内容。
通过向元素添加 data-toggle="popover" 来来创建弹出框。
title 属性的内容为弹出框的标题,data-content 属性显示了弹出框的文本内容
<h1>弹出框</h1>
<h3>通过向元素添加 data-toggle="popover" 来来创建弹出框</h3>
<h3>title 属性的内容为弹出框的标题,data-content 属性显示了弹出框的文本内容</h3>
<a href="#" data-toggle="popover" title="标题" data-content="弹出框内容">弹出框</a>
9.Bootstrap4 滚动监听(Scrollspy)
滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。
向您想要监听的元素(通常是 body)添加 data-spy="scroll" 。
然后添加 data-target 属性,它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。
注意可滚动项元素上的 id (<div id="section1">) 必须匹配导航栏上的链接选项 (<a href="#section1">)。
可选项data-offset 属性用于计算滚动位置时,距离顶部的偏移像素。 默认为 10 px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<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>
<title>滚动监听(Scrollspy)</title>
</head>
<body class="container" data-spy="scroll" data-offset:70 data-target=".navbar">
<div>
<nav class=" navbar navbar-dark bg-danger navbar-expand-sm fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#section1" class="nav-link">第一节</a>
</li>
<li class="nav-item">
<a href="#section2" class="nav-link">第二节</a>
</li>
<li class="nav-item">
<a href="#section3" class="nav-link">第三节</a>
</li>
<li class="nav-item">
<a href="#section4" class="nav-link">第四节</a>
</li>
<li class="nav-item">
<a href="#section5" class="nav-link">第五节</a>
</li>
</ul>
</nav>
<div id="section1" class="bg-success container-fluid">
<h1>第一节</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="bg-success container-fluid">
<h1>第二节</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="bg-success container-fluid ">
<h1>第三节</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section4" class="bg-success container-fluid">
<h1>第四节</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section5" class="bg-success container-fluid">
<h1>第五节</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</div>
</body>
</html>
10.Bootstrap4 小工具
边框
使用 border 类可以添加或移除边框
边框圆角设置
使用rounded 类可以添加圆角边框
浮动
.float-right 类用于设置元素右浮动, .float-left 设置元素左浮动, .clearfix 类用于清除浮动
居中对齐
使用 .mx-auto 类来设置居中对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<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>
<title>Document</title>
</head>
<body>
<div class="container">
<span class="border">border 类添加或移除边框</span><br>
<span class="border border-success">border-success 添加边框颜色</span>
<h3>边框圆角rounded</h3>
<span class="border border-success rounded"> 边框圆角</span>
<h3>浮动</h3>
<span class="border border-success rounded float-left ">左浮动</span><br>
<span class="border border-success rounded float-right ">右浮动</span>
<h3>clearfix 类用于清除浮动</h3>
<h3>居中对齐.mx-auto</h3>
<div class="mx-auto bg-warning" style="width: 200px;">
<p>居中</p>
</div>
</div>
</body>
</html>