Source

Theming Bootstrap

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

შესავალი

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

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

სას

გამოიყენეთ ჩვენი წყარო 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

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

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

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

// Optional
@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 4-ში შეიცავს !defaultდროშას, რომელიც საშუალებას გაძლევთ გადალახოთ ცვლადის ნაგულისხმევი მნიშვნელობა თქვენს Sass-ში Bootstrap-ის წყაროს კოდის შეცვლის გარეშე. დააკოპირეთ და ჩასვით ცვლადები საჭიროებისამებრ, შეცვალეთ მათი მნიშვნელობები და წაშალეთ !defaultდროშა. თუ ცვლადი უკვე მინიჭებულია, მაშინ ის ხელახლა არ იქნება მინიჭებული Bootstrap-ში ნაგულისხმევი მნიშვნელობებით.

თქვენ ნახავთ Bootstrap-ის ცვლადების სრულ ჩამონათვალს scss/_variables.scss.

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

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

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

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

გაიმეორეთ საჭიროებისამებრ 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`
}

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`სტილებს სხვადასხვა კომპონენტზე.
`$enable-gradients`	`true`ან `false`(ნაგულისხმევი)	რთავს წინასწარ განსაზღვრულ გრადიენტებს `background-image`სტილის მეშვეობით სხვადასხვა კომპონენტზე.
`$enable-transitions`	`true`(ნაგულისხმევი) ან`false`	რთავს წინასწარ განსაზღვრულ `transition`s-ებს სხვადასხვა კომპონენტზე.
`$enable-hover-media-query`	`true`ან `false`(ნაგულისხმევი)	მოძველებულია
`$enable-grid-classes`	`true`(ნაგულისხმევი) ან`false`	ჩართავს CSS კლასების გენერირებას ბადის სისტემისთვის (მაგ., `.container`, `.row`, `.col-md-1`და ა.შ.).
`$enable-caret`	`true`(ნაგულისხმევი) ან`false`	ჩართავს ფსევდო ელემენტის კარეტს `.dropdown-toggle`.
`$enable-print-styles`	`true`(ნაგულისხმევი) ან`false`	ჩართავს სტილებს ბეჭდვის ოპტიმიზაციისთვის.

ფერი

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

ყველა ფერი

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

ლურჯი

ინდიგო

მეწამული

ვარდისფერი

წითელი

ნარინჯისფერი

ყვითელი

მწვანე

ჩაისფერი

ციანი

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

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

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

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

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

თემის ფერები

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

პირველადი

მეორადი

წარმატებები

საფრთხე

გაფრთხილება

ინფორმაცია

Მსუბუქი

Ბნელი

ნაცრისფერი

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

100

200

300

400

500

600

700

800

900

შიგნით 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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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);
  }
}