Bootstrap 5: Containers

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Bootstrap 5 Containers

Μάθατε από το προηγούμενο κεφάλαιο ότι το Bootstrap απαιτεί ένα περιεχόμενο στοιχείο για την αναδίπλωση του περιεχομένου του ιστότοπου.

Τα δοχεία χρησιμοποιούνται για να γεμίσουν το περιεχόμενο μέσα από αυτά, και υπάρχουν δύο διαθέσιμες κατηγορίες κοντέινερ:

  1. Η κλάση .container παρέχει ένα αποκριτικό κοντέινερ σταθερού πλάτους

  2. Η κλάση .container-fluid παρέχει ένα κοντέινερ πλήρους πλάτους, που εκτείνεται σε όλο το πλάτος της θύρας προβολής

.container
.container-fluid

Σταθερό δοχείο

Χρησιμοποιήστε την κλάση .container για να δημιουργήσετε ένα αποκριτικό κοντέινερ σταθερού πλάτους.

Λάβετε υπόψη ότι το πλάτος του (max-width) θα αλλάξει σε διαφορετικά μεγέθη οθόνης:

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra Large
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

Ανοίξτε το παρακάτω παράδειγμα και αλλάξτε το μέγεθος του παραθύρου του προγράμματος περιήγησης για να δείτε ότι το πλάτος του κοντέινερ θα αλλάξει σε διαφορετικά σημεία διακοπής:

Παράδειγμα

 <div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
  <p>Resize the browser window to see that the container width will change at different breakpoints.</p>
</div>

</body>
</html>

Το σημείο διακοπής XXL (≥1400px) είναι νέο στο Bootstrap 5, ενώ το μεγαλύτερο σημείο διακοπής στο Bootstrap 4 είναι Εξαιρετικά μεγάλο (≥1200px).

Δοχείο Ρευστό (περιέκτη πλήρους πλάτους).

Χρησιμοποιήστε την κλάση .container-fluid για να δημιουργήσετε ένα κοντέινερ πλήρους πλάτους, που θα εκτείνεται πάντα σε όλο το πλάτος της οθόνης (πλάτος Το είναι πάντα 100%):

Παράδειγμα

 <div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>     
</div>

</body>
</html>

Γέμισμα κοντέινερ

Από προεπιλογή, τα κοντέινερ έχουν αριστερή και δεξιά επένδυση, χωρίς επάνω ή κάτω επένδυση. Ως εκ τούτου, χρησιμοποιούμε συχνά βοηθητικά προγράμματα διαστήματος, όπως πρόσθετες επενδύσεις και περιθώρια για να φαίνονται ακόμα καλύτερα. Για παράδειγμα, .pt-5 σημαίνει "προσθέστε μια μεγάλη επάνω γέμιση":

Παράδειγμα

 <div class="container pt-5"></div>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container pt-5">
  <h1>My First Bootstrap Page</h1>
  <p>This container has an extra top padding.</p>
  <p>Try to remove the .pt-5 class to see the difference.</p>
</div>

</body>
</html>

Περιγραφή και χρώμα δοχείου

Άλλα βοηθητικά προγράμματα, όπως περιγράμματα και χρώματα, χρησιμοποιούνται επίσης συχνά μαζί με δοχεία:

Παράδειγμα

<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container p-5 my-5 border">
  <h1>My First Bootstrap Page</h1>
  <p>This container has a border and some extra padding and margins.</p>
</div>

<div class="container p-5 my-5 bg-dark text-white">
  <h1>My First Bootstrap Page</h1>
  <p>This container has a dark background color and a white text, and some extra padding and margins.</p>
</div>

<div class="container p-5 my-5 bg-primary text-white">
  <h1>My First Bootstrap Page</h1>
  <p>This container has a blue background color and a white text, and some extra padding and margins.</p>
</div>

</body>
</html>

Θα μάθετε πολύ περισσότερα για τα χρώματα και τα βοηθητικά προγράμματα περιγράμματος σε επόμενο κεφάλαιο.

Αποκριτικά δοχεία

Μπορείτε επίσης να χρησιμοποιήσετε τις κλάσεις .container-sm|md|lg|xl για να καθορίσετε πότε το κοντέινερ πρέπει να αποκρίνεται.

Το max-width του κοντέινερ θα αλλάξει σε διαφορετικά μεγέθη οθόνης/θυρίδες προβολής:

Class Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra large
≥1200px 		XXL
≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

Παράδειγμα

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container pt-3">
  <h1>Responsive Containers</h1>
  <p>Resize the browser window to see the effect.</p>
</div>

<div class="container-sm border">.container-sm</div>
<div class="container-md mt-3 border">.container-md</div>
<div class="container-lg mt-3 border">.container-lg</div>
<div class="container-xl mt-3 border">.container-xl</div>
<div class="container-xxl mt-3 border">.container-xxl</div>

</body>
</html>