in English

Theming Bootstrap

დააკონფიგურირეთ Bootstrap 4 ჩვენი ახალი ჩაშენებული Sass ცვლადებით გლობალური სტილის პრეფერენციებისთვის, თემებისა და კომპონენტების მარტივი ცვლილებებისთვის.

შესავალი

Bootstrap 3-ში თემის შექმნა ძირითადად განპირობებული იყო LESS-ის, მორგებული CSS-ით და ცალკე თემის სტილის ფურცლით, რომელიც ჩვენ შევიტანეთ ჩვენს distფაილებში. გარკვეული ძალისხმევით, შეიძლება Bootstrap 3-ის იერსახის მთლიანად გადაკეთება ძირითადი ფაილების შეხების გარეშე. Bootstrap 4 გთავაზობთ ნაცნობ, მაგრამ ოდნავ განსხვავებულ მიდგომას.

ახლა თემის შექმნა ხორციელდება Sass ცვლადებით, Sass რუქებით და მორგებული CSS-ით. აღარ არის გამოყოფილი თემის სტილის ცხრილი; ამის ნაცვლად, შეგიძლიათ ჩართოთ ჩაშენებული თემა გრადიენტების, ჩრდილების და სხვათა დასამატებლად.

სას

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

ფაილის სტრუქტურა

შეძლებისდაგვარად, მოერიდეთ Bootstrap-ის ძირითადი ფაილების შეცვლას. Sass-ისთვის ეს ნიშნავს საკუთარი სტილის ფურცლის შექმნას, რომელიც შემოაქვს Bootstrap-ს, რათა შეცვალოთ და გააფართოვოთ იგი. თუ ვივარაუდებთ, რომ იყენებთ პაკეტის მენეჯერს, როგორიცაა npm, გექნებათ ფაილის სტრუქტურა, რომელიც ასე გამოიყურება:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

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

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

იმპორტი

თქვენს ში custom.scss, თქვენ იმპორტირებთ Bootstrap-ის წყარო Sass ფაილებს. თქვენ გაქვთ ორი ვარიანტი: ჩართეთ ყველა Bootstrap, ან შეარჩიეთ თქვენთვის საჭირო ნაწილები. ჩვენ ვამხნევებთ ამ უკანასკნელს, თუმცა გაითვალისწინეთ, რომ არსებობს გარკვეული მოთხოვნები და დამოკიდებულებები ჩვენს კომპონენტებს შორის. თქვენ ასევე დაგჭირდებათ JavaScript-ის ჩართვა ჩვენი დანამატებისთვის.

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

ამ დაყენებით, შეგიძლიათ დაიწყოთ Sass-ის ნებისმიერი ცვლადისა და რუკის შეცვლა თქვენს custom.scss. თქვენ ასევე შეგიძლიათ დაიწყოთ Bootstrap-ის ნაწილების დამატება // Optionalგანყოფილების ქვეშ, საჭიროებისამებრ. ჩვენ გირჩევთ გამოიყენოთ სრული იმპორტის სტეკი ჩვენი bootstrap.scssფაილიდან, როგორც საწყისი წერტილი.

ცვლადი ნაგულისხმევი

ყველა Sass ცვლადი Bootstrap-ში შეიცავს !defaultდროშას, რომელიც საშუალებას გაძლევთ გადალახოთ ცვლადის ნაგულისხმევი მნიშვნელობა თქვენს Sass-ში Bootstrap-ის წყაროს კოდის შეცვლის გარეშე. დააკოპირეთ და ჩასვით ცვლადები საჭიროებისამებრ, შეცვალეთ მათი მნიშვნელობები და წაშალეთ !defaultდროშა. თუ ცვლადი უკვე მინიჭებულია, მაშინ ის ხელახლა არ იქნება მინიჭებული Bootstrap-ში ნაგულისხმევი მნიშვნელობებით.

თქვენ ნახავთ Bootstrap-ის ცვლადების სრულ ჩამონათვალს scss/_variables.scss. ზოგიერთი ცვლადი დაყენებულია null, ეს ცვლადები არ გამოიტანს თვისებას, თუ ისინი არ გადაიჭრება თქვენს კონფიგურაციაში.

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

აი მაგალითი, რომელიც ცვლის background-colorდა colorfor- <body>ს npm-ის საშუალებით Bootstrap-ის იმპორტისა და შედგენისას:

@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

გაიმეორეთ საჭიროებისამებრ Bootstrap-ში ნებისმიერი ცვლადისთვის, ქვემოთ მოყვანილი გლობალური ვარიანტების ჩათვლით.

დაიწყეთ Bootstrap–ით npm–ით ჩვენი დამწყები პროექტით! გადადით twbs /bootstrap-npm-starter შაბლონის საცავში, რათა ნახოთ, თუ როგორ უნდა ააწყოთ და დააკონფიგურიროთ Bootstrap საკუთარ npm პროექტში. მოყვება Sass შემდგენელი, Autoprefixer, Stylelint, PurgeCSS და Bootstrap ხატები.

რუკები და მარყუჟები

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

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

რუკის შეცვლა

ჩვენს რუკაზე არსებული ფერის შესაცვლელად $theme-colors, დაამატეთ შემდეგი თქვენს მორგებულ Sass ფაილს:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

რუკაზე დამატება

ახალი ფერის $theme-colorsდასამატებლად, დაამატეთ ახალი გასაღები და მნიშვნელობა:

$theme-colors: (
  "custom-color": #900
);

რუკიდან ამოღება

ფერების ამოსაღებად $theme-colorsან ნებისმიერი სხვა რუკიდან, გამოიყენეთ map-remove. გაითვალისწინეთ, რომ ის უნდა ჩასვათ ჩვენს მოთხოვნებსა და ვარიანტებს შორის:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

საჭირო გასაღებები

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

მაგალითად, ჩვენ ვიყენებთ primary, success, და dangerკლავიშებს $theme-colorsბმულებისთვის, ღილაკებისთვის და ფორმის მდგომარეობებისთვის. ამ გასაღებების მნიშვნელობების ჩანაცვლებამ არ უნდა გამოიწვიოს პრობლემები, მაგრამ მათმა ამოღებამ შეიძლება გამოიწვიოს Sass-ის კომპილაციის პრობლემები. ამ შემთხვევებში, თქვენ უნდა შეცვალოთ Sass კოდი, რომელიც იყენებს ამ მნიშვნელობებს.

ფუნქციები

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

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

ეს საშუალებას გაძლევთ აირჩიოთ ერთი ფერი Sass რუკიდან, ისევე, როგორც თქვენ იყენებდით ფერის ცვლადს v3-დან.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

ჩვენ ასევე გვაქვს კიდევ ერთი ფუნქცია რუქიდან ფერის კონკრეტული დონის$theme-colors მისაღებად . ნეგატიური დონის მნიშვნელობები გაანათებს ფერს, ხოლო უფრო მაღალი დონეები ჩამუქდება.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

პრაქტიკაში, თქვენ დაუძახებდით ფუნქციას და გადასცემდით ორ პარამეტრს: ფერის სახელს $theme-colors(მაგ., პირველადი ან საშიშროება) და რიცხვითი დონე.

.custom-element {
  color: theme-color-level(primary, -10);
}

დამატებითი ფუნქციები შეიძლება დაემატოს მომავალში ან თქვენი საკუთარი Sass, რათა შექმნათ დონის ფუნქციები დამატებითი Sass რუკებისთვის, ან თუნდაც ზოგადი, თუ გსურთ იყოთ უფრო ვრცელი.

ფერის კონტრასტი

დამატებითი ფუნქცია, რომელსაც ჩვენ ჩავთვლით Bootstrap-ში, არის ფერის კონტრასტის ფუნქცია, color-yiq. ის იყენებს YIQ ფერთა სივრცეს , რათა ავტომატურად დააბრუნოს ღია ( #fff) ან მუქი ( #111) კონტრასტული ფერი მითითებულ საბაზისო ფერზე დაყრდნობით. ეს ფუნქცია განსაკუთრებით სასარგებლოა მიქსებისთვის ან მარყუჟებისთვის, სადაც თქვენ ქმნით მრავალ კლასს.

მაგალითად, ჩვენი რუქიდან ფერადი ნიმუშების შესაქმნელად $theme-colors:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

ის ასევე შეიძლება გამოყენებულ იქნას კონტრასტის ერთჯერადი საჭიროებისთვის:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

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

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Escape SVG

ჩვენ ვიყენებთ ფუნქციას SVG ფონური სურათებისთვის და სიმბოლოების escape-svgგასაქცევად . ამ სიმბოლოების გაქცევა საჭიროა IE-ში ფონის სურათების სათანადოდ გადასაცემად. ფუნქციის გამოყენებისას მონაცემთა URI უნდა იყოს ციტირებული.<>#escape-svg

ფუნქციების დამატება და გამოკლება

ჩვენ ვიყენებთ addდა subtractფუნქციებს CSS calcფუნქციის შესაფუთად. ამ ფუნქციების უპირველესი მიზანია შეცდომების თავიდან აცილება, როდესაც "unitless" 0მნიშვნელობა გადადის calcგამოხატულებაში. მსგავსი გამონათქვამები calc(10px - 0)დააბრუნებს შეცდომას ყველა ბრაუზერში, მიუხედავად იმისა, რომ მათემატიკურად სწორია.

მაგალითი, სადაც გაანგარიშება მოქმედებს:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

მაგალითი, სადაც გაანგარიშება არასწორია:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

Sass პარამეტრები

შეცვალეთ Bootstrap 4 ჩვენი ჩაშენებული ცვლადების ფაილით და მარტივად გადართეთ გლობალური CSS პრეფერენციები ახალი $enable-*Sass ცვლადებით. ცვლადის მნიშვნელობის უგულებელყოფა და npm run testსაჭიროების შემთხვევაში ხელახლა კომპილაცია.

თქვენ შეგიძლიათ იპოვოთ და დააკონფიგურიროთ ეს ცვლადები ძირითადი გლობალური პარამეტრებისთვის Bootstrap-ის scss/_variables.scssფაილში.

ცვლადი ღირებულებები აღწერა
$spacer 1rem(ნაგულისხმევი), ან ნებისმიერი მნიშვნელობა > 0 განსაზღვრავს ნაგულისხმევი spacer მნიშვნელობა ჩვენი spacer უტილიტების პროგრამულად გენერირებისთვის .
$enable-rounded true(ნაგულისხმევი) ანfalse რთავს წინასწარ განსაზღვრულ border-radiusსტილებს სხვადასხვა კომპონენტზე.
$enable-shadows trueან false(ნაგულისხმევი) რთავს წინასწარ განსაზღვრულ დეკორატიულ box-shadowსტილებს სხვადასხვა კომპონენტზე. არ ახდენს გავლენას box-shadowფოკუსირების მდგომარეობებზე გამოყენებულ ზე.
$enable-gradients trueან false(ნაგულისხმევი) რთავს წინასწარ განსაზღვრულ გრადიენტებს background-imageსტილის მეშვეობით სხვადასხვა კომპონენტზე.
$enable-transitions true(ნაგულისხმევი) ანfalse რთავს წინასწარ განსაზღვრულ transitions-ებს სხვადასხვა კომპონენტზე.
$enable-prefers-reduced-motion-media-query true(ნაგულისხმევი) ანfalse ჩართავს prefers-reduced-motionმედია მოთხოვნას , რომელიც თრგუნავს გარკვეულ ანიმაციებს/გადასვლებს მომხმარებლის ბრაუზერის/ოპერაციული სისტემის პრეფერენციებზე დაყრდნობით.
$enable-hover-media-query trueან false(ნაგულისხმევი) მოძველებულია
$enable-grid-classes true(ნაგულისხმევი) ანfalse ჩართავს CSS კლასების გენერირებას ბადის სისტემისთვის (მაგ., .container, .row, .col-md-1და ა.შ.).
$enable-caret true(ნაგულისხმევი) ანfalse ჩართავს ფსევდო ელემენტის კარეტს .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(ნაგულისხმევი) ანfalse დაამატეთ „ხელის“ კურსორი ღილაკების ელემენტებს, რომლებიც არ არის გამორთული.
$enable-print-styles true(ნაგულისხმევი) ანfalse ჩართავს სტილებს ბეჭდვის ოპტიმიზაციისთვის.
$enable-responsive-font-sizes trueან false(ნაგულისხმევი) ჩართავს საპასუხო შრიფტის ზომებს .
$enable-validation-icons true(ნაგულისხმევი) ანfalse რთავს background-imageხატულებს ტექსტურ შეყვანებში და ზოგიერთ მორგებულ ფორმებს ვალიდაციის მდგომარეობებისთვის.
$enable-deprecation-messages true(ნაგულისხმევი) ანfalse დააყენეთ falseგაფრთხილებების დამალვა რომელიმე მოძველებული მიქსებისა და ფუნქციების გამოყენებისას, რომელთა ამოღებაც იგეგმება v5.

ფერი

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

ყველა ფერი

ყველა ფერი ხელმისაწვდომია Bootstrap 4-ში, ხელმისაწვდომია როგორც Sass ცვლადები და Sass რუკა scss/_variables.scssფაილში. ეს გაფართოვდება მომდევნო მცირე გამოშვებებში, რათა დაემატოს დამატებითი ჩრდილები, ისევე როგორც ნაცრისფერი ფერის პალიტრა , რომელიც ჩვენ უკვე გვაქვს.

$ ლურჯი #007bff
$ინდიგო #6610f2
$იისფერი #6f42c1
$ვარდისფერი #e83e8c
$წითელი #dc3545
$ ფორთოხალი #fd7e14
$ ყვითელი #ffc107
$მწვანე #28a745
$ჩაისფერი #20c997
$ ციანი #17a2b8

აი, როგორ შეგიძლიათ გამოიყენოთ ისინი თქვენს Sass-ში:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

ფერების სასარგებლო კლასები ასევე ხელმისაწვდომია დასაყენებლად colorდა background-color.

სამომავლოდ, ჩვენ მიზნად მივაწოდებთ Sass-ის რუქებს და ცვლადებს თითოეული ფერის ჩრდილებისთვის, როგორც ეს გავაკეთეთ ქვემოთ მოყვანილი ნაცრისფერი ფერებით.

თემის ფერები

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

$ პირველადი #007bff
$ მეორეხარისხოვანი #6c757d
$წარმატება #28a745
$ საფრთხე #dc3545
$ გაფრთხილება #ffc107
$ინფორმაცია #17a2b8
$ მსუბუქი #f8f9fa
$ მუქი #343a40

ნაცრისფერი

ნაცრისფერი ცვლადების ვრცელი ნაკრები და Sass რუკა scss/_variables.scssთქვენს პროექტში რუხი ფერის თანმიმდევრული ჩრდილებისთვის. გაითვალისწინეთ, რომ ეს არის "მაგარი ნაცრისფერი", რომელიც მიდრეკილია დახვეწილი ლურჯი ტონისკენ, ვიდრე ნეიტრალური ნაცრისფერი.

რუხი $-100 #f8f9fa
რუხი $-200 #e9ecef
რუხი $-300 #dee2e6
რუხი $-400 #ced4da
რუხი $-500 #adb5bd
რუხი $-600 #6c757d
რუხი $-700 #495057
რუხი $-800 #343a40
რუხი $-900 #212529

შიგნით scss/_variables.scss, თქვენ იპოვით Bootstrap-ის ფერის ცვლადებს და Sass რუკას. აი $colorsSass რუკის მაგალითი:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

დაამატეთ, წაშალეთ ან შეცვალეთ მნიშვნელობები რუკაში, რათა განაახლოთ მათი გამოყენება ბევრ სხვა კომპონენტში. სამწუხაროდ, ამ დროისთვის, ყველა კომპონენტი არ იყენებს ამ Sass რუკას. მომავალი განახლებები შეეცდება გააუმჯობესოს ეს. მანამდე, დაგეგმეთ ${color}ცვლადების და ამ Sass რუკის გამოყენება.

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

Bootstrap-ის ბევრი კომპონენტი და კომუნალური პროგრამა აგებულია @eachმარყუჟებით, რომლებიც იმეორებენ Sass რუკაზე. ეს განსაკუთრებით სასარგებლოა ჩვენი მიერ კომპონენტის ვარიანტების გენერირებისთვის $theme-colorsდა თითოეული წყვეტის წე���ტილისთვის საპასუხო ვარიანტების შესაქმნელად. ამ Sass-ის რუკების მორგებისას და ხელახლა შედგენისას თქვენ ავტომატურად დაინახავთ თქვენს ცვლილებებს, რომლებიც აისახება ამ მარყუჟებში.

მოდიფიკატორები

Bootstrap-ის ბევრი კომპონენტი აგებულია ბაზის-მოდიფიკატორის კლასის მიდგომით. ეს ნიშნავს, რომ სტილის უმეტესი ნაწილი შეიცავს საბაზისო კლასს (მაგ., .btn), ხოლო სტილის ვარიაციები შემოიფარგლება მოდიფიკატორის კლასებით (მაგ., .btn-danger). მოდიფიკატორის ეს კლასები აგებულია რუქიდან $theme-colors, რათა მორგებული იყოს ჩვენი მოდიფიკატორის კლასების ნომერი და სახელი.

აქ მოცემულია ორი მაგალითი იმისა, თუ როგორ ვატრიალებთ $theme-colorsრუკაზე, რათა შევქმნათ მოდიფიკატორები .alertკომპონენტზე და ყველა ჩვენს .bg-*ფონურ პროგრამაზე.

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

საპასუხო

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

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

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

თუ თქვენ უნდა შეცვალოთ თქვენი $grid-breakpoints, თქვენი ცვლილებები გავრცელდება ყველა მარყუჟზე, რომელიც მეორდება ამ რუკაზე.

CSS ცვლადები

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

ხელმისაწვდომი ცვლადები

აქ არის ცვლადები, რომლებიც ჩვენ ჩავრთავთ (გაითვალისწინეთ, რომ :rootაუცილებელია). ისინი განთავსებულია ჩვენს _root.scssფაილში.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

მაგალითები

CSS ცვლადები გვთავაზობენ მსგავს მოქნილობას Sass-ის ცვლადებთან მიმართებაში, მაგრამ ბრაუზერში გადაცემამდე კომპილაციის საჭიროების გარეშე. მაგალითად, აქ ჩვენ ვაბრუნებთ ჩვენი გვერდის შრიფტს და ბმულის სტილებს CSS ცვლადებით.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

წყვეტის წერტილის ცვლადები

მიუხედავად იმისა, რომ ჩვენ თავდაპირველად შევიტანეთ წყვეტების წერტილები ჩვენს CSS ცვლადებში (მაგ., --breakpoint-md), ისინი არ არის მხარდაჭერილი მედია მოთხოვნებში , მაგრამ მათი გამოყენება მაინც შესაძლებელია მედიის მოთხოვნების წესების ფარგლებში . წყვეტის წერტილის ეს ცვლადები რჩება შედგენილ CSS-ში უკანა თავსებადობისთვის, რადგან მათი გამოყენება შესაძლებელია JavaScript-ით. შეიტყვეთ მეტი სპეციფიკაში .

აქ არის მაგალითი იმისა, რაც არ არის მხარდაჭერილი:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

და აქ არის მაგალითი იმისა, თუ რა არის მხარდაჭერილი:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}