คอนเทนเนอร์ใน Bootstrap พร้อมตัวอย่าง(3)

ตามที่ชื่อแนะนำ คอนเทนเนอร์ถูกใช้เพื่อเก็บหรือผูกบางสิ่ง ในทำนองเดียวกัน คอนเทนเนอร์ในบูตสแตรปใช้สำหรับจัดเก็บหรือผูกเนื้อหาบนวิวพอร์ต คอนเทนเนอร์เพิ่มช่องว่างภายในให้กับเนื้อหาโดยให้ระยะขอบจากทั้งสี่ด้านของวิวพอร์ต และสามารถเปลี่ยนแปลงได้ตามความต้องการ คอนเทนเนอร์สามารถซ้อนกันได้

ทีนี้ มาทำความเข้าใจกับแต่ละคลาสอย่างละเอียดกัน

คอนเทนเนอร์

ในบูตสแตรป คลาส .container จะสร้างคอนเทนเนอร์แบบตอบสนองที่มีความกว้างคงที่ในวิวพอร์ต โดยจะตั้งค่าความกว้างสูงสุดของคอนเทนเนอร์ตามขนาดของวิวพอร์ต

ด้านล่างนี้คือแผนภูมิที่อธิบายความกว้างสูงสุดของคลาส .container ขึ้นอยู่กับขนาดของวิวพอร์ต

	ขนาดเล็กพิเศษ	เล็ก	ปานกลาง	ใหญ่	ขนาดใหญ่พิเศษ
ความกว้างสูงสุด	100%	540px	720px	960px	1140px

ตัวอย่าง

มาดูตัวอย่างเพื่อทำความเข้าใจกันดีกว่า

<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>

ผลลัพธ์

ผลลัพธ์สำหรับรหัสนี้จะเป็น

คอนเทนเนอร์ใน Bootstrap พร้อมตัวอย่าง(3)

ภาชนะ-ของเหลว

ในบูตสแตรป คลาส .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>

ผลลัพธ์

ผลลัพธ์สำหรับรหัสนี้จะเป็น

คอนเทนเนอร์ใน Bootstrap พร้อมตัวอย่าง(3)