Συστατικά

Βασικές τάξεις

Τα εξαρτήματα του Bootstrap είναι σε μεγάλο βαθμό κατασκευασμένα με μια ονοματολογία βασικού τροποποιητή. Ομαδοποιούμε όσο το δυνατόν περισσότερες κοινόχρηστες ιδιότητες σε μια βασική κλάση, όπως .btn, και στη συνέχεια ομαδοποιούμε μεμονωμένα στυλ για κάθε παραλλαγή σε κλάσεις τροποποιητών, όπως .btn-primaryή .btn-success.

Για να δημιουργήσουμε τις τάξεις τροποποιητών μας, χρησιμοποιούμε τους @eachβρόχους του Sass για επανάληψη σε έναν χάρτη Sass. Αυτό είναι ιδιαίτερα χρήσιμο για τη δημιουργία παραλλαγών ενός στοιχείου από εμάς $theme-colorsκαι τη δημιουργία παραλλαγών που αποκρίνονται για κάθε σημείο διακοπής. Καθώς προσαρμόζετε αυτούς τους χάρτες Sass και κάνετε εκ νέου μεταγλώττιση, θα βλέπετε αυτόματα τις αλλαγές σας να αντικατοπτρίζονται σε αυτούς τους βρόχους.

Ρίξτε μια ματιά στους χάρτες Sass και τα έγγραφα βρόχων για το πώς να προσαρμόσετε αυτούς τους βρόχους και να επεκτείνετε την προσέγγιση τροποποίησης βάσης του Bootstrap στον δικό σας κώδικα.

Τροποποιητές

Πολλά από τα στοιχεία του Bootstrap είναι κατασκευασμένα με μια προσέγγιση κλάσης βασικού τροποποιητή. Αυτό σημαίνει ότι το μεγαλύτερο μέρος του στυλ περιέχεται σε μια βασική κλάση (π.χ., .btn) ενώ οι παραλλαγές στυλ περιορίζονται σε κατηγορίες τροποποιητών (π.χ., .btn-danger). Αυτές οι κατηγορίες τροποποιητών δημιουργούνται από τον $theme-colorsχάρτη για να προσαρμόσουν τον αριθμό και το όνομα των κατηγοριών τροποποιητών μας.

Ακολουθούν δύο παραδείγματα για το πώς κάνουμε βρόχο πάνω από τον $theme-colorsχάρτη για να δημιουργήσουμε τροποποιητές στα στοιχεία .alertκαι .list-group.

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

Ευαίσθητος

Αυτοί οι βρόχοι Sass δεν περιορίζονται επίσης στους έγχρωμους χάρτες. Μπορείτε επίσης να δημιουργήσετε παραλλαγές απόκρισης των στοιχείων σας. Ας πάρουμε για παράδειγμα την ευθυγράμμιση των αναπτυσσόμενων μενού με απόκριση, όπου αναμιγνύουμε έναν @eachβρόχο για τον $grid-breakpointsχάρτη Sass με ένα ερώτημα μέσων που περιλαμβάνει.

// We deliberately hardcode the `bs-` prefix because we check
// this custom property in JS to determine Popper's positioning

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .dropdown-menu#{$infix}-start {
      --bs-position: start;

      &[data-bs-popper] {
        right: auto;
        left: 0;
      }
    }

    .dropdown-menu#{$infix}-end {
      --bs-position: end;

      &[data-bs-popper] {
        right: 0;
        left: auto;
      }
    }
  }
}

Εάν τροποποιήσετε το $grid-breakpoints, οι αλλαγές σας θα εφαρμοστούν σε όλους τους βρόχους που επαναλαμβάνονται σε αυτόν τον χάρτη.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Για περισσότερες πληροφορίες και παραδείγματα σχετικά με τον τρόπο τροποποίησης των χαρτών και των μεταβλητών Sass, ανατρέξτε στην ενότητα Sass της τεκμηρίωσης Grid .

Δημιουργώντας το δικό σας

Σας ενθαρρύνουμε να υιοθετήσετε αυτές τις οδηγίες κατά τη δημιουργία με το Bootstrap για να δημιουργήσετε τα δικά σας στοιχεία. Έχουμε επεκτείνει αυτήν την προσέγγιση μόνοι μας στα προσαρμοσμένα στοιχεία στην τεκμηρίωση και τα παραδείγματά μας. Στοιχεία όπως τα μηνύματά μας δημιουργούνται ακριβώς όπως τα παρεχόμενα στοιχεία μας με κατηγορίες βάσης και τροποποιητές.

<div class="callout">...</div>

Στο CSS σας, θα έχετε κάτι σαν το παρακάτω όπου το μεγαλύτερο μέρος του στυλ γίνεται μέσω .callout. Στη συνέχεια, τα μοναδικά στυλ μεταξύ κάθε παραλλαγής ελέγχονται μέσω της κλάσης τροποποιητή.

// Base class
.callout {}

// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}

Για τα μηνύματα, αυτό το μοναδικό στυλ είναι απλώς ένα border-left-color. Όταν συνδυάζετε αυτή τη βασική κλάση με μία από αυτές τις κατηγορίες τροποποιητών, λαμβάνετε την πλήρη οικογένεια στοιχείων: