Source

Сэдэвчилсэн ачаалагч

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";

Энэ тохиргоог хийснээр та өөрийн custom.scss. Та шаардлагатай бол Bootstrap-ийн хэсгүүдийг тухайн хэсгийн доор нэмж эхэлж болно // Optional. Манай bootstrap.scssфайлын бүрэн импортын стекийг эхлэх цэг болгон ашиглахыг бид санал болгож байна.

Хувьсагчийн өгөгдмөл

Bootstrap 4-ийн Sass хувьсагч бүр нь !defaultBootstrap-ийн эх кодыг өөрчлөхгүйгээр өөрийн Sass дээрх хувьсагчийн өгөгдмөл утгыг дарах боломжийг олгодог тугийг агуулдаг. Шаардлагатай бол хувьсагчдыг хуулж, буулгаж, утгыг нь өөрчилж, !defaultтугийг устгана уу. Хэрэв хувьсагчийг аль хэдийн оноосон бол Bootstrap дээрх өгөгдмөл утгуудаар дахин хуваарилагдахгүй.

Та Bootstrap-ийн хувьсагчийн бүрэн жагсаалтыг эндээс олох болно scss/_variables.scss.

Нэг Sass файл доторх хувьсагчийг дарж бичих нь анхдагч хувьсагчийн өмнө болон хойно ирж болно. Гэсэн хэдий ч, Sass файлууд дээр дарж бичихдээ Bootstrap-ийн Sass файлуудыг импортлохоос өмнө таны хүчингүй болсон тэмдэг ирэх ёстой.

Bootstrap-г npm-ээр дамжуулан импортлох, эмхэтгэх үед background-colorболон color-г өөрчилдөг жишээ энд байна :<body>

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

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

Доорх глобал сонголтуудыг оруулаад Bootstrap дээрх аливаа хувьсагчдад шаардлагатай бол давт.

Газрын зураг ба гогцоо

Bootstrap 4 нь CSS-ийн гэр бүлүүдийг үүсгэхэд хялбар болгодог цөөн тооны Sass газрын зураг, гол утгын хосуудыг агуулдаг. Бид өнгө, сүлжээний таслах цэг болон бусад зүйлд 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);
}

Эдгээр нь v3-ийн өнгөний хувьсагчийг хэрхэн ашигладагтай адил Sass газрын зургаас нэг өнгө сонгох боломжийг танд олгоно.

.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 хэрэгслүүдийг программчлан үүсгэхийн тулд анхдагч зайны утгыг зааж өгдөг .
`$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 газрын зурагт тодорхойлогдсон өнгөний цуваагаар бүтээгдсэн байдаг. Хэд хэдэн дүрмийн багцыг хурдан үүсгэхийн тулд энэ газрын зургийг Сасс руу эргүүлж болно.

Бүх өнгө

Bootstrap 4 дээр байгаа бүх өнгийг Sass хувьсагч болон scss/_variables.scssфайл дахь Sass газрын зураг хэлбэрээр авах боломжтой. Үүнийг бидний оруулсан саарал өнгийн палитр шиг нэмэлт сүүдэр нэмэхийн тулд дараагийн жижиг хувилбаруудад өргөжүүлэх болно.

Цэнхэр

Индиго

Нил ягаан

Ягаан

Улаан

жүрж

Шар

Ногоон

Цайвар

Цэнхэр

Та эдгээрийг Sass дээрээ хэрхэн ашиглаж болохыг эндээс үзнэ үү:

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

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

Өнгөний хэрэглээний ангиуд нь мөн тохиргоо colorболон background-color.

Цаашид бид доорх саарал өнгийн өнгөнүүдийг хийсэн шиг өнгө бүрийн сүүдэрт зориулсан Sass газрын зураг болон хувьсагчдыг өгөхийг зорьж байна.

Сэдвийн өнгө

Бид өнгөний схемийг үүсгэхийн тулд жижиг өнгөт палитр үүсгэхийн тулд бүх өнгөний дэд багцыг ашигладаг бөгөөд Sass хувьсагч болон Bootstraps scss/_variables.scssфайл дахь Sass газрын зураг хэлбэрээр ашиглах боломжтой.

Үндсэн

Хоёрдогч

Амжилт

аюул

Анхааруулга

Мэдээлэл

Гэрэл

Харанхуй

Саарал

Саарал хэмжигдэхүүний өргөн багц ба Sass газрын зураг нь scss/_variables.scssтаны төсөлд тогтвортой саарал өнгийг харуулдаг.

100

200

300

400

500

600

700

800

900

Дотор scss/_variables.scssнь та Bootstrap-ийн өнгөт хувьсагч болон Sass газрын зургийг олох болно. $colorsСасс газрын зургийн жишээ энд байна :

$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;

Газрын зураг дээрх утгуудыг нэмэх, хасах эсвэл өөр олон бүрэлдэхүүн хэсгүүдэд хэрхэн ашиглагдаж байгааг шинэчлэх. Харамсалтай нь одоогоор бүрэлдэхүүн хэсэг бүр энэ Сасс газрын зургийг ашигладаггүй. Ирээдүйн шинэчлэлтүүд үүнийг сайжруулахыг хичээх болно. Тэр болтол ${color}хувьсагч болон энэхүү Сасс газрын зургийг ашиглахаар төлөвлөж байгаарай.

Бүрэлдэхүүн хэсгүүд

Bootstrap-ийн ихэнх бүрэлдэхүүн хэсгүүд болон хэрэгслүүд нь @eachSass газрын зураг дээр давтагддаг гогцоонуудаар бүтээгдсэн. Энэ нь ялангуяа манай бүрэлдэхүүн хэсгийн $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 газрын зургийн @eachгогцоог $grid-breakpointsмедиа асуулгатай хольсон манай responsive text зэрэглэлийн хэрэгслүүдийг авч үзье.

@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 хувийн шинж чанарыг (хувьсагч) агуулдаг . Эдгээр нь таны хөтчийн Inspector, кодын хамгаалагдсан хязгаарлагдмал орчин эсвэл ерөнхий загварчлал дээр ажиллах үед манай загварын өнгө, таслах цэг, үндсэн үсгийн стек зэрэг түгээмэл хэрэглэгддэг утгуудад хялбар хандах боломжийг олгодог.

Боломжтой хувьсагч

Энд бидний оруулсан хувьсагчууд байна ( :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) таслах цэгүүдийг оруулсан хэдий ч эдгээр нь медиа асуулгад дэмжигддэггүй , гэхдээ тэдгээрийг медиа асуулгад дүрмийн багц дотор ашиглах боломжтой хэвээр байна . Эдгээр таслах цэгийн хувьсагчууд нь JavaScript-д ашиглах боломжтой тул буцаах нийцтэй байх үүднээс эмхэтгэсэн CSS-д үлддэг. Тодорхойлолтоос илүү ихийг мэдэж аваарай.

Дэмжигдээгүй зүйлийн жишээ энд байна :

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

Дэмжигдсэн зүйлийн жишээ энд байна :

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