Bootstrap 中的容器及示例（3）

顧名思義，容器用於容納或繫結某些東西，類似地，Bootstrap 中的容器用於儲存或繫結視口上的內容。容器透過提供來自視口四邊的邊距來為內容新增填充，並且可以根據需要進行更改。容器也可以相互巢狀。

現在，讓我們詳細瞭解每個類

container

在 Bootstrap 中，.container 類建立一個響應式容器，在視口中具有固定寬度。它根據視口的大小設定容器的最大寬度。

下面是圖表，描述了根據視口大小 .container 類的最大寬度。


超小小中大超大
最大寬度100%540px720px960px1140px

示例

讓我們舉個例子來更好地理解它

 即時演示

<html>
<head>
<title>.Container Class</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body style="border:5px solid Black;">
<br>
<div class="container bg-dark text-white" style>
<center>
<h1>tutorialspoint</h1>
<h6>SIMPLYEASYLEARNING</h6>
</center>
</div>
</body>
</html>

輸出

此程式碼的輸出將是

container-fluid

在 Bootstrap 中，.container-fluid 類建立一個響應式容器，在視口中具有 100% 的固定寬度。它將容器的最大寬度設定為 100%，而不管視口的大小。

下面是圖表，描述了 .container-fluid 類的最大寬度。


超小小中大超大
最大寬度100%100%100%100%100%

示例

讓我們舉個例子來更好地理解它

 即時演示

<html>
<head>
<title>.Container Class</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body style="border:5px solid Black;">
<br>
<div class="container-fluid bg-dark text-white">
<center>
<h1>tutorialspoint</h1>
<h6>SIMPLYEASYLEARNING</h6>
</center>
</div>
</body>
</html>

輸出

此程式碼的輸出將是

更新於： 2020-06-06

332 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告