გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
in English

კომპონენტები

შეიტყვეთ როგორ და რატომ ვაშენებთ თითქმის ყველა კომპონენტს პასუხისმგებლობით და საბაზისო და მოდიფიკატორის კლასებით.

საბაზო კლასები

Bootstrap-ის კომპონენტები ძირითადად აგებულია ბაზის-მოდიფიკატორის ნომენკლატურით. ჩვენ ვაჯგუფებთ რაც შეიძლება მეტ საერთო თვისებას საბაზისო კლასში, როგორიცაა .btnდა შემდეგ ვაჯგუფებთ ინდივიდუალურ სტილებს თითოეული ვარიანტისთვის მოდიფიკატორ კლასებად, როგორიცაა .btn-primaryან .btn-success.

ჩვენი მოდიფიკატორის კლასების ასაშენებლად, ჩვენ ვიყენებთ Sass-ის @eachმარყუჟებს 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 მარყუჟები არ შემოიფარგლება მხოლოდ ფერადი რუქებით. თქვენ ასევე შეგიძლიათ შექმნათ თქვენი კომპონენტების საპასუხო ვარიაციები. მაგალითად, ავიღოთ ჩამოსაშლელი ველების ჩვენი საპასუხო გასწორება, სადაც ჩვენ ვურევთ Sass რუქის @eachმარყუჟს მედია მოთხოვნის ჩათვლით.$grid-breakpoints

// 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 რუკები და ცვლადები, გთხოვთ, იხილოთ Grid დოკუმენტაციის Sass განყოფილება .

საკუთარის შექმნა

ჩვენ მოგიწოდებთ მიიღოთ ეს გაიდლაინები Bootstrap-ით შექმნისას თქვენი საკუთარი კომპონენტების შესაქმნელად. ჩვენ გავაფართოვეთ ეს მიდგომა ჩვენს დოკუმენტაციასა და მაგალითებში მორგებულ კომპონენტებზე. კომპონენტები, როგორიცაა ჩვენი გამოხმაურება, აგებულია ისევე, როგორც ჩვენი მოწოდებული კომპონენტები საბაზისო და მოდიფიკატორის კლასებით.

ეს არის გამოძახილი. ჩვენ შევქმენით ის ჩვენი დოკუმენტებისთვის, რათა გამოირჩეოდეს ჩვენი შეტყობინებები თქვენთვის. მას აქვს სამი ვარიანტი მოდიფიკატორის კლასების საშუალებით.
<div class="callout">...</div>

თქვენს CSS-ში გექნებათ მსგავსი რამ, სადაც სტილის უმეტესი ნაწილი კეთდება .callout. შემდეგ, თითოეულ ვარიანტს შორის უნიკალური სტილები კონტროლდება მოდიფიკატორის კლასის მეშვეობით.

// Base class
.callout {}

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

მოწოდებებისთვის, ეს უნიკალური სტილი მხოლოდ border-left-color. როდესაც ამ საბაზისო კლასს აერთიანებთ მოდიფიკატორის ერთ-ერთ კლასთან, თქვენ მიიღებთ კომპონენტთა სრულ ოჯახს:

ეს არის ინფორმაციის გამოძახება. ტექსტის მაგალითი მოქმედებაში საჩვენებლად.
ეს არის გამაფრთხილებელი გამოხმაურება. ტექსტის მაგალითი მოქმედებაში საჩვენებლად.
ეს საფრთხის გამოძახილია. ტექსტის მაგალითი მოქმედებაში საჩვენებლად.