Bootstrap 简明教程
Bootstrap - Borders
本章讨论了可以应用于元素的边框。利用边框实用程序,可以快速为元素的边框和边框半径应用样式,使其适用于图像、按钮或任何其他元素。
边框可以添加到元素,也可以从元素中移除。Bootstrap 提供一系列边框样式,可以选择全部或逐个选择。
Add a border
可以将边框添加到自定义元素。我们看一个示例:
Example
你可以编辑并尝试运行此代码,使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Borders</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: #f1f1f1
}
</style>
</head>
<body>
<div class="container mt-3">
<h4>Borders</h4>
<p>Use the border classes to add borders to an element:</p><br>
<span class="border border-2"></span>
<span class="border-top border-2"></span>
<span class="border-end border-2"></span>
<span class="border-bottom border-2"></span>
<span class="border-start border-2"></span>
</div>
</body>
</html>
Remove a border
可以从自定义元素中移除边框。我们看一个示例:
Example
你可以编辑并尝试运行此代码,使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Borders</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<div class="container mt-3">
<h4>Borders</h4>
<p>Use the border classes to remove borders from an element:</p><br>
<span class="border border-2"></span>
<span class="border border-0 border-2"></span>
<span class="border border-top-0 border-2"></span>
<span class="border border-end-0 border-2"></span>
<span class="border border-bottom-0 border-2"></span>
<span class="border border-start-0 border-2"></span>
</div>
</body>
</html>
Border colors
可以使用基于主题颜色的实用程序修改边框颜色。我们看一个示例:
Example
你可以编辑并尝试运行此代码,使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Borders</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: #faf8f8;
}
</style>
</head>
<body>
<div class="container mt-3">
<h4>Borders color</h4><br>
<p>Use the .border-* classes to add colors to the borders:</p><br>
<span class="border border-success"></span>
<span class="border border-success-subtle"></span>
<span class="border border-danger"></span>
<span class="border border-danger-subtle"></span>
<span class="border border-light"></span>
<span class="border border-light-subtle"></span>
<span class="border border-secondary"></span>
<span class="border border-secondary-subtle"></span>
<span class="border border-primary"></span>
<span class="border border-primary-subtle"></span>
<span class="border border-black"></span>
<span class="border border-white"></span>
<span class="border border-info"></span>
<span class="border border-info-subtle"></span>
<span class="border border-warning"></span>
<span class="border border-warning-subtle"></span>
<span class="border border-dark"></span>
<span class="border border-dark-subtle"></span>
</div>
</body>
</html>
还可以使用 .border- * 类修改元素的默认边框。
Example
你可以编辑并尝试运行此代码,使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Borders</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>Border colors of elements</h4><br>
<p>Use the .border-* classes to add colors to the borders of different elements:</p><br>
<div class="h4 pb-4 mb-2 text-center text-success border border-success">
Border for success
</div>
<div class="p-2 bg-warning bg-opacity-25 border border-warning border-start-0">
Adding color to a warning text, with warning border.
</div><br>
<button class="btn btn-light text-dark border">Click</button>
</div>
</body>
</html>
Border opacity
为了更改边框的不透明度,你需要通过自定义样式或内联样式覆盖 --bs-border-opacity 。
我们看一个示例:
Example
你可以编辑并尝试运行此代码,使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Borders</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>Border opacity of borders</h4><br>
<p>Use the .border-* classes to change the opacity of the borders of different elements:</p><br>
<div class="border border-primary p-2 mb-2">Primary border default</div>
<div class="border border-danger p-2 mb-2 border-opacity-75">75% opacity of danger border</div>
<div class="border border-warning p-2 mb-2 border-opacity-50">50% opacity of warning border</div>
<div class="border border-success p-2 mb-2 border-opacity-25">25% opacity of success border</div>
<div class="border border-secondary p-2 border-opacity-10">10% opacity of secondary border</div>
</body>
</html>
Border width
为了更改元素边框的宽度,请使用 .border-1, .border-2, .border-3, .border-4 和 .border-5 等类
我们看一个示例:
Example
你可以编辑并尝试运行此代码,使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Borders</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: #f9f6f6;
}
</style>
</head>
<body>
<div class="container mt-3">
<h4>Borders - width</h4><br>
<p>Set the border width with .border-* classes:</p><br>
<span class="border border-5"></span>
<span class="border border-4"></span>
<span class="border border-3"></span>
<span class="border border-2"></span>
<span class="border border-1"></span>
</div>
</body>
</html>
Border radius
为了给任意元素添加圆角,请使用 .rounded- * 类。
我们看一个示例:
Example
你可以编辑并尝试运行此代码,使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Borders</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: #440d0d;
}
</style>
</head>
<body>
<div class="container mt-3">
<h4>Borders - Radius</h4>
<p>Set the radius of the border with .rounded-* classes:</p><br>
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-end"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
</div>
</body>
</html>
Borders size
使用范围从 0 到 5 的 .rounded- * 类来设置圆角的大小。
我们看一个示例:
Example
你可以编辑并尝试运行此代码,使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Borders</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: #440d0d;
}
</style>
</head>
<body>
<div class="container mt-3">
<h4>Borders - Size</h4>
<p>Set the size of the rounded corners with .rounded-* classes:</p><br>
<span class="rounded-5"></span>
<span class="rounded-4"></span>
<span class="rounded-3"></span>
<span class="rounded-2"></span>
<span class="rounded-1"></span>
<span class="rounded-0"></span>
</div>
</body>
</html>
另一组 .rounded- * 类可用于将元素的一侧设置为圆角。我们来看一个示例:
Example
你可以编辑并尝试运行此代码,使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Borders</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<style>
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: #440d0d;
}
</style>
</head>
<body>
<div class="container mt-3">
<h4>Borders - Rounded side</h4><br>
<p>Set the side to be with rounded corners</p><br>
<span class="rounded-start-pill"></span>
<span class="rounded-start-2"></span>
<span class="rounded-bottom-1"></span>
<span class="rounded-5 rounded-top-0"></span>
<span class="rounded-end-circle"></span>
</div>
</body>
</html>