Χρήσιμα εργαλεία του Bootstrap 5

Κλάσεις Utilities / Helper

Το Bootstrap 5 έχει πολλά κλάσεις utility/helper που επιτρέπουν τη γρήγορη ρύθμιση του στυλ των στοιχείων χωρίς καμία κώδικα CSS.

Πλαίσια

Χρήση της κλάσης border για την προσθήκη ή την αφαίρεση των πλαισίων από τα στοιχεία:

Παραδείγματα

<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>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Δοκιμάστε το προσωπικά

πλάτος του περιγράμματος

Χρήση .border-1 προς .border-5 Για να αλλάξετε το πλάτος του περιγράμματος:

Παραδείγματα

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

Δοκιμάστε το προσωπικά

χρώμα του περιγράμματος

Χρησιμοποιήστε οποιαδήποτε κλάση χρώματος περιγράμματος για να προσθέσετε χρώμα στο περίγραμμα:

Παραδείγματα

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

Δοκιμάστε το προσωπικά

γωνιακή καμπύλη του περιγράμματος

Χρήση γωνιακή καμπύλη Για την προσθήκη γωνιακής καμπύλης στο στοιχείο:

Παραδείγματα

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>

Δοκιμάστε το προσωπικά

Κύτταση και καθαρισμός κύτασης

Χρήση .float-end Κλάση κύτασης προς τα δεξιά ή χρήση .float-start Κύτταρο προς τα αριστερά και χρήση .clearfix Κλάση καθαρισμού κύτασης:

Παραδείγματα

<div class="clearfix">
  <span class="float-start">Κύτταρο προς τα αριστερά</span>
  <span class="float-end">Κύτταρο προς τα δεξιά</span>
</div>

Δοκιμάστε το προσωπικά

Αντανακλαστική κύτταση

Κύτταρα που κολυμπάνε προς τα αριστερά ή τα δεξιά ανάλογα με το πλάτος του οθόνη, χρησιμοποιώντας κλάσεις αντανακλαστικής κύτασης (.float-*-left|rightόπου * είναι:

  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

Παραδείγματα

<div class="float-sm-end">Σε μικρά οθόνια ή ευρύτερα οθόνια, κύτταρο προς τα δεξιά</div><br>
<div class="float-md-end">Σε μεσαία οθόνια ή ευρύτερα οθόνια, κύτταρο προς τα δεξιά</div><br>
<div class="float-lg-end">Σε μεγάλα οθόνια ή ευρύτερα οθόνια, κύτταρο προς τα δεξιά</div><br>
<div class="float-xl-end">Σε υπερμεγάλα οθόνια ή ευρύτερα οθόνια, κύτταρο προς τα δεξιά</div><br>
<div class="float-xxl-end">Σε μεγάλα οθόνια ή ευρύτερα οθόνια, κύτταρο προς τα δεξιά</div><br>
<div class="float-none">Δεν γίνεται κύτταρο</div>

Δοκιμάστε το προσωπικά

Κεντρική κατεύθυνση

Χρήση .mx-auto Κεντρικοί στοιχεία (προσθήκη margin-left και margin-right: auto):

Παραδείγματα

<div class="mx-auto bg-warning" style="width:150px">Centered</div>

Δοκιμάστε το προσωπικά

Width

Use w-* classes (.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100) Set the width of the element:

Παραδείγματα

<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
<div class="w-auto bg-warning">Automatic width</div>
<div class="mw-100 bg-warning">Maximum width 100%</div>

Δοκιμάστε το προσωπικά

Height

Use h-* classes (.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100Set the height of the element:

Παραδείγματα

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">Height 25%</div>
  <div class="h-50 bg-warning">Height 50%</div>
  <div class="h-75 bg-warning">Height 75%</div>
  <div class="h-100 bg-warning">Height 100%</div>
  <div class="h-auto bg-warning">Automatic height</div>
  <div class="mh-100 bg-warning" style="height:500px">Maximum height 100%</div>
</div>

Δοκιμάστε το προσωπικά

Spacing

Bootstrap 5 has a wide range of responsive margin and padding utility classes. They are applicable to all breakpoints:

  • xs (<= 576px)
  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

The usage format of these classes is:{ιδιότητα}{πλευρές}-{μέγεθος} χρησιμοποιείται για xs，κατά {ιδιότητα}{πλευρές}-{κόρυφα}-{μέγεθος} χρησιμοποιείται για sm、md、lg、xl και xxl。

ιδιότητα είναι ένα από τα εξής:

  • m - Ρυθμίστε περιθώριο
  • p - Ρυθμίστε περιθώριο

πλευρές είναι ένα από τα εξής:

  • t - Ρυθμίστε περιθώριο επάνω ή περιθώριο επάνω εσωτερικό
  • b - Ρυθμίστε περιθώριο κάτω ή περιθώριο κάτω εσωτερικό
  • s - Ρυθμίστε περιθώριο αριστερά ή περιθώριο αριστερά εσωτερικό
  • e - Ρυθμίστε περιθώριο δεξιά ή περιθώριο δεξιά εσωτερικό
  • x - Ρυθμίστε ταυτόχρονα περιθώριο αριστερά εσωτερικό και περιθώριο δεξιά εσωτερικό ή περιθώριο αριστερά και περιθώριο δεξιά
  • y - Ρυθμίστε ταυτόχρονα περιθώριο επάνω εσωτερικό και περιθώριο κάτω εσωτερικό ή περιθώριο επάνω και περιθώριο κάτω
  • blank - Ρυθμίστε περιθώρια σε όλες τις τέσσερις πλευρές του στοιχείου περιθώριο ή περιθώριο

μέγεθος είναι ένα από τα εξής:

  • 0 - Ρυθμίστε περιθώριο ή περιθώριο Ρυθμίστε 0
  • 1 - Ρυθμίστε περιθώριο ή περιθώριο Ρυθμίστε .25rem
  • 2 - Ρυθμίστε περιθώριο ή περιθώριο Ρυθμίστε .5rem
  • 3 - Ρυθμίστε περιθώριο ή περιθώριο Ρυθμίστε 1rem
  • 4 - Ρυθμίστε περιθώριο ή περιθώριο Ρυθμίστε 1.5rem
  • 5 - Ρυθμίστε περιθώριο ή περιθώριο Ρυθμίστε 3rem
  • auto - Ρυθμίστε περιθώριο Ρυθμίστε σε auto

Παραδείγματα

<div class="pt-4 bg-warning">Έχω μόνο περιθώριο εσωτερικό επάνω (1.5rem)</div>
<div class="p-5 bg-success">Έχω περιθώρια σε όλες τις πλευρές (3rem)</div>
<div class="m-5 pb-5 bg-info">Έχω περιθώρια σε όλες τις πλευρές (3rem) και κάτω περιθώριο εσωτερικό (3rem)</div>

Δοκιμάστε το προσωπικά

Περισσότερες παραδείγματα διαστημάτων

.m-# / m-*-# Περιθώρια όλων των πλευρών εξωτερικά Δοκιμάστε
.mt-# / mt-*-# Περιθώριο επάνω εξωτερικά Δοκιμάστε
.mb-# / mb-*-# Περιθώριο κάτω εξωτερικά Δοκιμάστε
.ms-# / ms-*-# Περιθώριο αριστερά εξωτερικά Δοκιμάστε
.me-# / me-*-# Περιθώριο δεξιά εξωτερικά Δοκιμάστε
.mx-# / mx-*-# Περιθώρια αριστερά και δεξιά Δοκιμάστε
.my-# / my-*-# Περιθώρια επάνω και κάτω εξωτερικά Δοκιμάστε
.p-# / p-*-# Περιθώρια όλων των πλευρών (χρησιμοποιούμενη διάσταση) Δοκιμάστε
.pt-# / pt-*-# Περιθώριο επάνω Δοκιμάστε
.pb-# / pb-*-# Περιθώριο κάτω Δοκιμάστε
.ps-# / ps-*-# Περιθώριο αριστερά Δοκιμάστε
.pe-# / pe-*-# Περιθώριο δεξιά Δοκιμάστε
.py-# / py-*-# Περιθώρια επάνω και κάτω Δοκιμάστε
.px-# / px-*-# Περιθώρια αριστερά και δεξιά Δοκιμάστε

Μπορείτε να βρείτε στο Εγχειρίδιο μονάδων CSS Διαβάστε περισσότερα για το rem και τις διαφορετικές μονάδες μεγέθους στο κείμενο.

Σκιές

Please use shadow- Προσθέτοντας σκιά στο στοιχείο με την κλάση:

Παραδείγματα

χωρίς σκιές
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>

Δοκιμάστε το προσωπικά

Vertical alignment

Please use align- The class changes the alignment of the element (only for inline, inline-block, inline-table, and table cell elements):

Παραδείγματα

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

Δοκιμάστε το προσωπικά

Aspect ratio

Create responsive videos or slideshows based on the width of the parent element.

Place .ratio The class corresponds to the aspect ratio you choose .aspect-ratio-* Add to the parent element and add embedded content (video or iframe) within it:

Παραδείγματα

<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

Δοκιμάστε το προσωπικά

Visibility

Χρήση .visible ή .invisible Classes can control the visibility of elements:

Note:These classes do not change the CSS display value. They only add visibility:visible ή visibility:hidden。

Παραδείγματα

<div class="visible">Είμαι ορατός.</div>
<div class="invisible">Είμαι αόρατος.</div>

Δοκιμάστε το προσωπικά

Εικονίδιο κλείσιμο

Χρήση .btn-close Οι κλάσεις μπορούν να ρυθμίσουν τον τύπο του εικονιδίου κλείσιμος. Γενικά χρησιμοποιούνται σε alert boxes και modals.

Παραδείγματα

<button type="button" class="btn-close"></button>

Δοκιμάστε το προσωπικά

Αναγνώστης οθόνης

Χρήση .visually-hidden Οι κλάσεις μπορούν να κρύβουν στοιχεία σε όλες τις συσκευές εκτός από τους αναγνώστες οθόνης:

Παραδείγματα

<span class="visually-hidden">Θα κρυφεί σε όλες τις οθόνες εκτός από τους αναγνώστες οθόνης.</span>

Δοκιμάστε το προσωπικά

Χρώματα

Ως αναφέρεται στο κεφάλαιο "Χρώματα", παρακάτω παρατίθεται η λίστα όλων των κλασεων κειμένου και παρασκηνίου:

Οι κλάσεις για το χρώμα του κειμένου είναι:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body（προεπιλεγμένο χρώμα body/γενικά μαύρο）
  • .text-light

Παραδείγματα

Δοκιμάστε το προσωπικά

Οι κλάσεις κειμένου περιβάλλοντος μπορούν επίσης να χρησιμοποιηθούν για συνδέσμους:

Παραδείγματα

Δοκιμάστε το προσωπικά

Μπορείτε επίσης να χρησιμοποιήσετε τις κλάσεις .text-black-50 ή .text-white-50 για να προσθέσετε 50% αδιαφάνειας σε μαύρο ή λευκό κείμενο:

Παραδείγματα

Δοκιμάστε το προσωπικά

Χρώμα παρασκηνίου

Οι κλάσεις για το χρώμα του παρασκηνίου είναι:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Παρακαλώ σημειώστε ότι το χρώμα του παρασκηνίου δεν ρυθμίζει το χρώμα του κειμένου, οπότε σε ορισμένες περιπτώσεις, χρειάζεται να τα συνδυάζετε με .text-* Κατηγορίες μαζί

Παραδείγματα

Δοκιμάστε το προσωπικά