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

კომუნალური API

utility API არის Sass-ზე დაფუძნებული ინსტრუმენტი სასარგებლო კლასების გენერირებისთვის.

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

რუკა შეიცავს ყველა ჩვენს კომუნალურ პროგრამას $utilitiesდა მოგვიანებით გაერთიანდება თქვენს მორგებულ $utilitiesრუკასთან, თუ ეს არის. კომუნალური რუქა შეიცავს კომუნალური ჯგუფების ღილაკების ჩამონათვალს, რომლებიც იღებენ შემდეგ ვარიანტებს:

ვარიანტი ტიპი აღწერა
property საჭირო ქონების სახელი, ეს შეიძლება იყოს სტრიქონი ან სტრიქონების მასივი (მაგ. ჰორიზონტალური ბალიშები ან მინდვრები).
values საჭირო მნიშვნელობების სია, ან რუკა, თუ არ გსურთ, რომ კლასის სახელი იყოს იგივე მნიშვნელობა. თუ nullგამოიყენება რუკის გასაღებად, ის არ არის კომპილირებული.
class სურვილისამებრ ცვლადი კლასის სახელისთვის, თუ არ გსურთ, რომ ის იგივე იყოს, რაც თვისება. იმ შემთხვევაში, თუ თქვენ არ მიუთითებთ classგასაღებს და propertyგასაღები არის სტრიქონების მასივი, კლასის სახელი იქნება propertyმასივის პირველი ელემენტი.
state სურვილისამებრ ფსევდო-კლასის ვარიანტების სია, როგორიცაა :hoverან :focusგენერირება კომუნალური პროგრამისთვის. ნაგულისხმევი მნიშვნელობა არ არის.
responsive სურვილისამებრ ლოგიკური მიუთითებს, საჭიროა თუ არა საპასუხო კლასების გენერირება. falseნაგულისხმევად.
rfs სურვილისამებრ ლოგიკური სითხის ხელახალი სკალირების გასააქტიურებლად. გადახედეთ RFS გვერდს იმის გასარკვევად, თუ როგორ მუშაობს ეს. falseნაგულისხმევად.
print სურვილისამებრ ლოგიკური მიუთითებს, საჭიროა თუ არა ბეჭდვის კლასების გენერირება. falseნაგულისხმევად.
rtl სურვილისამებრ ლოგიკური მაჩვენებელი მიუთითებს, უნდა იყოს თუ არა უტილიტა შენახული RTL-ში. trueნაგულისხმევად.

API განმარტა

ყველა სასარგებლო ცვლადი ემატება $utilitiesცვლადს ჩვენს _utilities.scssსტილის ფურცელში. კომუნალური საშუალებების თითოეული ჯგუფი ასე გამოიყურება:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

რომელიც გამოსცემს შემდეგს:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

მორგებული კლასის პრეფიქსი

გამოიყენეთ classოფცია შედგენილ CSS-ში გამოყენებული კლასის პრეფიქსის შესაცვლელად:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

გამომავალი:

.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }

შტატები

გამოიყენეთ stateოფცია ფსევდო-კლასის ვარიაციების გენერირებისთვის. ფსევდოკლასების მაგალითებია :hoverდა :focus. როდესაც მოცემულია მდგომარეობების სია, კლასების სახელები იქმნება ამ ფსევდოკლასისთვის. მაგალითად, ჰოვერზე გამჭვირვალობის შესაცვლელად, დაამატეთ state: hoverდა მიიღებთ .opacity-hover:hoverთქვენს კომპილირებული CSS-ში.

გჭირდებათ მრავალი ფსევდოკლასი? გამოიყენეთ მდგომარეობების სივრცით გამოყოფილი სია: state: hover focus.

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

გამომავალი:

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }

საპასუხო კომუნალური საშუალებები

დაამატეთ responsiveლოგიკური მნიშვნელობა საპასუხო უტილიტების გენერირებისთვის (მაგ., .opacity-md-25) ყველა წყვეტის წერტილში .

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

გამომავალი:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}

კომუნალური საშუალებების შეცვლა

გააუქმეთ არსებული კომუნალური პროგრამები იგივე გასაღების გამოყენებით. მაგალითად, თუ გსურთ დამატებითი საპასუხო გადინების კომუნალური კლასები, შეგიძლიათ ამის გაკეთება:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

printოფციის ჩართვა ასევე გამოიმუშავებს სასარგებლო კლასებს ბეჭდვისთვის, რომლებიც გამოიყენება მხოლოდ @media print { ... }მედია მოთხოვნის ფარგლებში.

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

გამომავალი:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media print {
  .opacity-print-0 { opacity: 0 !important; }
  .opacity-print-25 { opacity: .25 !important; }
  .opacity-print-50 { opacity: .5 !important; }
  .opacity-print-75 { opacity: .75 !important; }
  .opacity-print-100 { opacity: 1 !important; }
}

მნიშვნელობა

API-ს მიერ გენერირებული ყველა კომუნალური პროგრამა მოიცავს !importantიმის უზრუნველსაყოფად, რომ ისინი გადალახონ კომპონენტები და მოდიფიკატორების კლასები, როგორც ეს იყო დაგეგმილი. თქვენ შეგიძლიათ გადართოთ ეს პარამეტრი გლობალურად $enable-important-utilitiesცვლადით (ნაგულისხმევად true).

API-ის გამოყენება

ახლა, როცა გაეცანით, თუ როგორ მუშაობს Utilities API, ისწავლეთ როგორ დაამატოთ თქვენი საკუთარი კლასები და შეცვალოთ ჩვენი ნაგულისხმევი უტილიტები.

კომუნალური საშუალებების დამატება

$utilitiesნაგულისხმევ რუკას შეიძლება დაემატოს ახალი კომუნალური პროგრამები map-merge. დარწმუნდით, რომ ჩვენი საჭირო Sass ფაილები _utilities.scssჯერ იმპორტირებულია, შემდეგ გამოიყენეთ map-mergeთქვენი დამატებითი უტილიტების დასამატებლად. მაგალითად, აი, როგორ დავამატოთ საპასუხო cursorპროგრამა სამი მნიშვნელობით.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

კომუნალური საშუალებების შეცვლა

შეცვალეთ არსებული კომუნალური პროგრამები ნაგულისხმევ $utilitiesრუკაში map-getდა map-mergeფუნქციებით. ქვემოთ მოყვანილ მაგალითში ჩვენ ვამატებთ დამატებით მნიშვნელობას widthკომუნალურ მომსახურებებს. დაიწყეთ საწყისით map-mergeდა შემდეგ მიუთითეთ რომელი პროგრამა გსურთ შეცვალოთ. იქიდან, აიღეთ ჩადგმული "width"რუკა, map-getრომ შეხვიდეთ და შეცვალოთ პროგრამის პარამეტრები და მნიშვნელობები.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

ჩართეთ საპასუხო

თქვენ შეგიძლიათ ჩართოთ საპასუხო კლასები არსებული კომუნალური პროგრამებისთვის, რომლებიც ამჟამად არ პასუხობენ ნაგულისხმევად. მაგალითად, იმისათვის, რომ borderკლასები საპასუხო იყოს:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

ეს ახლა წარმოქმნის საპასუხო ვარიაციებს .borderდა .border-0თითოეული წყვეტის წერტილისთვის. თქვენი გენერირებული CSS ასე გამოიყურება:

.border { ... }
.border-0 { ... }

@media (min-width: 576px) {
  .border-sm { ... }
  .border-sm-0 { ... }
}

@media (min-width: 768px) {
  .border-md { ... }
  .border-md-0 { ... }
}

@media (min-width: 992px) {
  .border-lg { ... }
  .border-lg-0 { ... }
}

@media (min-width: 1200px) {
  .border-xl { ... }
  .border-xl-0 { ... }
}

@media (min-width: 1400px) {
  .border-xxl { ... }
  .border-xxl-0 { ... }
}

კომუნალური პროგრამების გადარქმევა

აკლია v4 კომუნალური პროგრამები, ან გამოიყენება სხვა სახელების კონვენციაში? Utilities API შეიძლება გამოყენებულ იქნას classმოცემული უტილიტის შედეგების გადასაფარად - მაგალითად, .ms-*კომუნალური პროგრამების ძველის სახელით გადარქმევა .ml-*:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

ამოიღეთ კომუნალური საშუალებები

წაშალეთ რომელიმე ნაგულისხმევი უტილიტა ჯგუფის გასაღების დაყენებით null. მაგალითად, ჩვენი ყველა widthკომუნალური პროგრამის წასაშლელად, შექმენით $utilities map-mergeდა დაამატეთ "width": nullშიგნით.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

წაშალეთ პროგრამა RTL-ში

ზოგიერთი გვერდითი ქეისი ართულებს RTL სტილს , როგორიცაა ხაზების წყვეტა არაბულში. ამრიგად, კომუნალური პროგრამები შეიძლება ამოღებულ იქნეს RTL გამომავალიდან rtlოფციის დაყენებით false:

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

გამომავალი:

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

ეს არაფერს გამოსცემს RTL- ში, RTLCSS removeკონტროლის დირექტივის წყალობით .