資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究Bootstrap 邊框及示例
Bootstrap 中的邊框用於為 HTML 元素（例如 div、表格等）新增輪廓。這些邊框有助於使元素在視覺上更具區分度。使用 Bootstrap，我們可以新增邊框、移除邊框、指定邊框顏色、修改邊框寬度以及建立圓角邊框。在 Bootstrap 中，有不同的類用於新增、移除或修改邊框。
新增邊框類
要為 HTML 元素新增邊框，我們使用以下類：
.border - 此類將在元素周圍新增邊框。
.border-top - 這將在元素的頂部邊緣新增邊框。
.border-bottom - 這將在元素的底部邊緣新增邊框。
.border-left - 此類將在元素的左側邊緣新增邊框。
.border-right - 這將在元素的右側邊緣新增邊框。
示例
在以下示例中，我們嘗試使用“新增邊框類”為 HTML <span> 元素新增邊框：
<!DOCTYPE html>
<html>
<head>
<title>Borders in Bootstrap</title>
<!-- Link Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- Link Bootstrap JS and JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
/* CSS for Square boxes */
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
background-color: lightskyblue;
}
</style>
</head>
<body>
<!-- Additive border classes -->
<div>
<h2>Additive Border Classes</h2>
<span class="border"></span>
<span class="border-top border-dark"></span>
<span class="border-left border-dark"></span>
<span class="border-bottom border-dark"></span>
<span class="border-right border-dark"></span>
</div>
</body>
</html>
輸出
如果我們編譯並執行查詢，則結果如下所示：
移除邊框類
要從 HTML 元素中移除邊框，我們使用以下類：
.border-0 - 此類將移除元素周圍的所有邊框。
.border-top-0 - 如果存在，此類將移除元素頂部邊緣的邊框。
.border-bottom-0 - 如果存在，這將移除元素底部邊緣的邊框。
.border-left-0 - 如果存在，此類將移除元素左側邊緣的邊框。
.border-right-0 - 如果存在，此類將移除元素右側邊緣的邊框。
示例
在下面的示例中，我們使用“新增邊框類”為 HTML <span> 元素移除邊框：
<!DOCTYPE html>
<html>
<head>
<title>Borders in Bootstrap</title>
<!-- Link Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- Link Bootstrap JS and JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
/* CSS for Square boxes */
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
background-color: lightskyblue;
}
</style>
</head>
<body>
<!-- Subtractive border classes -->
<div>
<h2>Subtractive Border Classes</h2>
<span class="border border-0"></span>
<span class="border border-top-0 border-dark"></span>
<span class="border border-left-0 border-dark"></span>
<span class="border border-bottom-0 border-dark"></span>
<span class="border border-right-0 border-dark"></span>
</div>
</body>
</html>
輸出
讓我們編譯並執行查詢，以生成以下結果：
邊框顏色類
我們可以使用以下邊框顏色類為任何 HTML 元素的邊框新增顏色：.border-primary、.border-secondary、.border-success、.border-danger、.border-warning、.border-info、.border-light、.border-dark、.border-white。如果我們想設定其他自定義顏色，我們可以使用 CSS 手動設定。
.border-primary
.border-secondary
.border-success
.border-danger
.border-warning
.border-info
.border-light
.border-dark
.border-white
示例
在下面的示例中，我們使用“邊框顏色類”為元素的邊框新增顏色：
<!DOCTYPE html>
<html>
<head>
<title>Borders in Bootstrap</title>
<!-- Link Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- Link Bootstrap JS and JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
/* CSS for Square boxes */
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
background-color: lightgray;
}
</style>
</head>
<body>
<!-- Color of borders -->
<div>
<h2>Color of borders</h2>
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
</div>
</body>
</html>
輸出
當我們執行上面的查詢時，輸出如下所示：
邊框寬度類
我們可以使用“邊框寬度類”設定 html 元素的邊框寬度。寬度可以設定為 1-5。
示例
在以下示例中，我們使用上面提到的“邊框寬度類”設定元素邊框的寬度：
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
<style>
/* CSS for Square boxes */
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
background-color: lightgray;
}
</style>
</head>
<body>
<!--Border Width-->
<h2>Border Width</h2>
<span class="border border-danger border-1"></span>
<span class="border border-danger border-2"></span>
<span class="border border-danger border-3"></span>
<span class="border border-danger border-4"></span>
</body>
</html>
輸出
執行給定查詢後，輸出將顯示如下：
邊框半徑類
我們可以使用以下邊框半徑類使元素的邊框圓角化：.rounded-top、.rounded-bottom、.rounded-left、.rounded-right、.rounded-circle、.rounded-0 等。
.rounded-top
.rounded-bottom
.rounded-left
.rounded-right
.rounded-circle
.rounded-0 等。
示例
在以下示例中，我們使用上面提到的“邊框半徑類”使元素邊框圓角化：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- Link Bootstrap JS and JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
<style>
/* CSS for Square boxes */
span {
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
background-color: lightgray;
}
</style>
</head>
<body>
<!--Border radius -->
<h2>Border Radius</h2>
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-right"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>
</body>
</html>
輸出
上面查詢的輸出如下所示：
315 次檢視
