Bootstrap4 提供了一些小工具，可以讓我們不用寫 CSS 代碼就能實現(xiàn)想要的效果。
使用 border 類可以添加或移除邊框:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 示例</title>
<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>
<style>
.border {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
}
</style>
</head>
<body>
<div class="container">
<h2>邊框</h2>
<p>使用 border 類可以添加或移除邊框:</p>
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
</div>
</body>
</html>測試看看 ?/?Bootstrap4 提供了一些類來設(shè)置邊框顏色:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 示例</title>
<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>
<style>
.border {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
}
</style>
</head>
<body>
<div class="container">
<h2>邊框顏色</h2>
<p>Bootstrap4 提供了一些類來設(shè)置邊框顏色:</p>
<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>測試看看 ?/?使用rounded 類可以添加圓角邊框:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 示例</title>
<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>
<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #555;
}
</style>
</head>
<body>
<div class="container">
<h2>邊框圓角設(shè)置</h2>
<p>使用rounded 類可以添加圓角邊框:</p>
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>
</div>
</body>
</html>測試看看 ?/?.float-right 類用于設(shè)置元素右浮動， .float-left 設(shè)置元素左浮動, .clearfix 類用于清除浮動:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <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> </head> <body> <div class="container"> <h2>浮動</h2> <p>.float-right 類用于設(shè)置元素右浮動， .float-left 設(shè)置元素左浮動, .clearfix 類用于清除浮動:</p> <div class="clearfix"> <span class="float-left">左浮動</span> <span class="float-right">右浮動</span> </div> </div> </body> </html>測試看看 ?/?
我們看可以設(shè)置浮動 (.float-*-left|right - * 為 sm, md, lg 或 xl)的方向依賴于屏幕的大小:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <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> </head> <body> <div class="container"> <h2>響應(yīng)式浮動</h2> <p>重置瀏覽器大小查看效果。</p> <p>我們看可以設(shè)置浮動 (.float-*-left|right - * 為 sm, md, lg 或 xl)的方向依賴于屏幕的大小:</p> <div class="float-sm-right">在大于小屏幕尺寸上右浮動</div><br> <div class="float-md-right">在大于中等屏幕尺寸上右浮動</div><br> <div class="float-lg-right">在大于大屏幕尺寸上右浮動</div><br> <div class="float-xl-right">在大于超大屏幕尺寸上右浮動</div><br> <div class="float-none">沒有浮動</div> </div> </body> </html>測試看看 ?/?
使用 .mx-auto 類來設(shè)置居中對齊:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <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> </head> <body> <div class="container"> <h1>水平居中</h1> <p>使用 .mx-auto 類來設(shè)置居中對齊::</p> <div class="mx-auto bg-warning" style="width:150px">居中</div> </div> </body> </html>測試看看 ?/?
元素上使用 w-* 類 (.w-25, .w-50, .w-75, .w-100, .mw-100) 來設(shè)置寬度:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <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> </head> <body> <div class="container"> <h1>寬度設(shè)置小工具</h1> <p>元素上使用 w-* 類 (.w-25, .w-50, .w-75, .w-100, .mw-100) 來設(shè)置寬度:</p> <div class="w-25 bg-warning">寬度 25%</div> <div class="w-50 bg-warning">寬度 50%</div> <div class="w-75 bg-warning">寬度 75%</div> <div class="w-100 bg-warning">寬度 100%</div> <div class="mw-100 bg-warning">最大寬度 100%</div> </div> </body> </html>測試看看 ?/?
元素上使用 h-* 類 (.h-25, .h-50, .h-75, .h-100, .mh-100) 來設(shè)置高度:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <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> </head> <body> <div class="container"> <h1>高度小工具</h1> <p>元素上使用 h-* 類 (.h-25, .h-50, .h-75, .h-100, .mh-100) 來設(shè)置高度:</p> <div style="height:200px;background-color:#ddd"> <div class="h-25 d-inline-block p-2 bg-warning">高度 25%</div> <div class="h-50 d-inline-block p-2 bg-warning">高度 50%</div> <div class="h-75 d-inline-block p-2 bg-warning">高度 75%</div> <div class="h-100 d-inline-block p-2 bg-warning">高度 100%</div> <div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">最大高度 100%</div> </div> </div> </body> </html>測試看看 ?/?