Сэдэвчилсэн ачаалагч
Bootstrap 4-ийг манай шинэ суурилагдсан Sass хувьсагчаар тохируулж, загварчлал болон бүрэлдэхүүн хэсгүүдийг хялбархан өөрчлөх боломжтой.
Bootstrap 3 дээр загварчлалыг голчлон LESS дахь хувьсагч хүчингүй болгох, өөрчлөн тохируулсан CSS болон бидний dist
файлууддаа оруулсан тусдаа загварын загварын хүснэгтээр удирддаг. Зарим хүчин чармайлтаар Bootstrap 3-ын үндсэн файлуудад хүрэлгүйгээр харагдах байдлыг бүрэн өөрчлөх боломжтой. Bootstrap 4 нь танил боловч арай өөр аргыг санал болгодог.
Одоо загварчлалыг Sass хувьсагч, Sass газрын зураг, захиалгат CSS ашиглан хийж байна. Тусгай зориулалтын загварын хуудас байхгүй; Үүний оронд та градиент, сүүдэр болон бусад зүйлийг нэмэхийн тулд суурилуулсан загварыг идэвхжүүлж болно.
Хувьсагч, газрын зураг, холимог гэх мэт давуу талыг ашиглахын тулд манай эх сурвалж Sass файлуудыг ашиглаарай.
Боломжтой бол Bootstrap-ийн үндсэн файлуудыг өөрчлөхөөс зайлсхий. Sass-ийн хувьд энэ нь Bootstrap-г импортлох өөрийн загварын хүснэгтийг үүсгэснээр та үүнийг өөрчилж, өргөтгөх боломжтой гэсэн үг юм. Хэрэв та npm шиг багц менежер ашиглаж байна гэж үзвэл танд дараах файлын бүтэц бий болно.
Хэрэв та манай эх файлуудыг татаж аваад багц менежер ашиглаагүй бол Bootstrap-ийн эх файлуудыг өөрөөсөө тусад нь байлгахын тулд уг бүтэцтэй төстэй зүйлийг гараар тохируулахыг хүсэх болно.
Таны custom.scss
, та Bootstrap-ийн эх сурвалж Sass файлуудыг импортлох болно. Танд хоёр сонголт байна: бүх Bootstrap-г оруулах эсвэл хэрэгтэй хэсгүүдээ сонгох. Хэдийгээр манай бүрэлдэхүүн хэсгүүдэд зарим шаардлага, хамаарал байдгийг анхаараарай. Та мөн манай залгаасуудад зориулж JavaScript оруулах шаардлагатай болно.
Энэ тохиргоог хийснээр та өөрийн custom.scss
. Та шаардлагатай бол Bootstrap-ийн хэсгүүдийг тухайн хэсгийн доор нэмж эхэлж болно // Optional
. Манай bootstrap.scss
файлын бүрэн импортын стекийг эхлэх цэг болгон ашиглахыг бид санал болгож байна.
Bootstrap 4-ийн Sass хувьсагч бүр нь !default
Bootstrap-ийн эх кодыг өөрчлөхгүйгээр өөрийн Sass дээрх хувьсагчийн өгөгдмөл утгыг дарах боломжийг олгодог тугийг агуулдаг. Шаардлагатай бол хувьсагчдыг хуулж, буулгаж, утгыг нь өөрчилж, !default
тугийг устгана уу. Хэрэв хувьсагч аль хэдийн томилогдсон бол Bootstrap дээрх өгөгдмөл утгуудаар дахин хуваарилагдахгүй.
Нэг Sass файл доторх хувьсагчийг дарж бичих нь анхдагч хувьсагчийн өмнө болон хойно ирж болно. Гэсэн хэдий ч, Sass файлууд дээр дарж бичихдээ Bootstrap-ийн Sass файлуудыг импортлохоос өмнө таны хүчингүй болсон тэмдэг ирэх ёстой.
Bootstrap-г npm-ээр дамжуулан импортлох, эмхэтгэх үед background-color
болон color
-г өөрчилдөг жишээ энд байна :<body>
Доорх глобал сонголтуудыг оруулаад Bootstrap дээрх аливаа хувьсагчдад шаардлагатай бол давт.
Bootstrap 4 нь CSS-ийн гэр бүлүүдийг үүсгэхэд хялбар болгодог цөөн тооны Sass газрын зураг, гол утгын хосуудыг агуулдаг. Бид өнгө, сүлжээний таслах цэг болон бусад зүйлд Sass газрын зургийг ашигладаг. Яг л Sass хувьсагчтай адил бүх Sass газрын зурагт !default
туг багтдаг бөгөөд үүнийг дарж, өргөтгөх боломжтой.
Манай зарим Sass газрын зургийг анхдагч байдлаар хоосон газрын зураг болгон нэгтгэдэг. Энэ нь өгөгдсөн Sass газрын зургийг хялбархан өргөжүүлэхийн тулд хийгдсэн боловч газрын зургаас зүйлийг арилгахад арай илүү төвөгтэй болгодог.
Манай $theme-colors
газрын зураг дээрх одоо байгаа өнгийг өөрчлөхийн тулд Sass файлдаа дараахь зүйлийг нэмнэ үү.
-д шинэ өнгө $theme-colors
нэмэхийн тулд шинэ түлхүүр болон утгыг нэмнэ үү:
$theme-colors
эсвэл өөр газрын зургаас өнгийг арилгахын тулд дараахыг ашиглана уу map-remove
:
Bootstrap нь Sass газрын зураг дотор зарим нэг тодорхой түлхүүрүүд байгаа гэж үздэг бөгөөд бид эдгээрийг өөрсдөө ашиглаж, өргөтгөж байна. Оруулсан газрын зургийг өөрчлөх үед та Sass газрын зургийн тодорхой түлхүүрийг ашиглах үед алдаа гарч болзошгүй.
Жишээлбэл, бид primary
, success
, болон danger
товчлууруудыг $theme-colors
холбоос, товчлуур болон маягтын төлөвт ашигладаг. Эдгээр түлхүүрүүдийн утгыг солих нь ямар ч асуудал үүсгэхгүй, гэхдээ тэдгээрийг арилгах нь Sass эмхэтгэлд асуудал үүсгэж болзошгүй. Эдгээр тохиолдолд та эдгээр утгыг ашигладаг Sass кодыг өөрчлөх шаардлагатай болно.
Bootstrap нь хэд хэдэн Sass функцийг ашигладаг боловч зөвхөн дэд багц нь ерөнхий сэдэвт хамаарна. Бид өнгөт газрын зургаас утгыг авах гурван функцийг оруулсан:
Эдгээр нь v3-ийн өнгөт хувьсагчийг хэрхэн ашигладагтай адил Sass газрын зургаас нэг өнгө сонгох боломжийг танд олгоно.
Газрын зургаас тодорхой түвшний өнгө авах өөр функц бидэнд бий $theme-colors
. Сөрөг түвшний утгууд нь өнгийг цайруулж, өндөр түвшин нь бараан өнгөтэй болно.
Практикт та функцийг дуудаж, хоёр параметрийг дамжуулдаг: өнгөний нэр $theme-colors
(жишээлбэл, үндсэн эсвэл аюул) болон тоон түвшин.
Ирээдүйд нэмэлт функцүүд эсвэл өөрийн өөрчлөн Sass-ыг нэмж, нэмэлт Sass газрын зургийн түвшний функцийг, эсвэл илү�� дэлгэрэнгүй байхыг хүсвэл ерөнхий функцийг үүсгэж болно.
Бидний Bootstrap-д оруулсан нэмэлт нэг функц бол өнгөний тодосгогч функц color-yiq
юм. Энэ нь заасан үндсэн өнгө дээр үндэслэн цайвар ( ) эсвэл бараан ( ) тодосгогч өнгийг автоматаар буцаахын тулд YIQ өнгөний орон зайг ашигладаг. Энэ функц нь ялангуяа олон анги үүсгэж байгаа холимог эсвэл гогцоонд хэрэгтэй.#fff
#111
Жишээлбэл, манай $theme-colors
газрын зургаас өнгөт загвар гаргахын тулд:
Үүнийг мөн нэг удаагийн тодосгогч хэрэгцээнд ашиглаж болно:
Та мөн үндсэн өнгийг манай өнгөт газрын зургийн функцээр тодорхойлж болно:
Bootstrap 4-ийг манай суулгасан өөрчлөн хувьсагчийн файлаар тохируулж, дэлхийн CSS тохиргоог шинэ $enable-*
Sass хувьсагчаар хялбархан сольж болно. Хувьсагчийн утгыг дарж, шаардлагатай бол дахин хөрвүүлнэ npm run test
.
_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 газрын зурагт тодорхойлогдсон өнгөний цуваагаар бүтээгдсэн байдаг. Хэд хэдэн дүрмийн багцыг хурдан үүсгэхийн тулд энэ газрын зургийг Сасс руу эргүүлж болно.
scss/_variables.scss
Bootstrap 4-т байгаа бүх өнгийг манай файлд Sass хувьсагч болон Sass газрын зураг хэлбэрээр авах боломжтой . Үүнийг бидний оруулсан саарал өнгийн палитр шиг нэмэлт сүүдэр нэмэхийн тулд дараагийн жижиг хувилбаруудад өргөжүүлэх болно.
Та эдгээрийг Sass дээрээ хэрхэн ашиглаж болохыг эндээс үзнэ үү:
Өнгөний хэрэглээний ангиуд нь мөн тохиргоо color
болон background-color
.
Цаашид бид доорх саарал өнгийн өнгөнүүдийг хийсэн шиг өнгө бүрийн сүүдэрт зориулсан Sass газрын зураг болон хувьсагчдыг өгөхийг зорьж байна.
Бид өнгөний схемийг үүсгэхийн тулд жижиг өнгөт палитр үүсгэхийн тулд бүх өнгөний дэд багцыг ашигладаг бөгөөд үүнийг манай scss/_variables.scss
файлд Sass хувьсагч болон Sass газрын зураг хэлбэрээр авах боломжтой.
Саарал хэмжигдэхүүний өргөн багц ба Sass газрын зураг нь scss/_variables.scss
таны төсөлд тогтвортой саарал өнгийг харуулдаг.
Дотор _variables.scss
нь та манай өнгөт хувьсагч болон Sass газрын зургийг олох болно. $colors
Сасс газрын зургийн жишээ энд байна :
Газрын зураг дээрх утгуудыг нэмэх, хасах эсвэл өөр олон бүрэлдэхүүн хэсгүүдэд хэрхэн ашиглаж байгааг шинэчлэх. Харамсалтай нь энэ үед бүх бүрэлдэхүүн хэсэг нь энэ Сасс газрын зургийг ашигладаггүй. Ирээдүйн шинэчлэлтүүд үүнийг сайжруулахыг хичээх болно. Тэр болтол ${color}
хувьсагч болон энэхүү Сасс газрын зургийг ашиглахаар төлөвлөж байгаарай.
Bootstrap-ийн ихэнх бүрэлдэхүүн хэсгүүд болон хэрэгслүүд нь @each
Sass газрын зураг дээр давтагддаг гогцоонуудаар бүтээгдсэн. Энэ нь ялангуяа манай бүрэлдэхүүн хэсгийн $theme-colors
хувилбаруудыг үүсгэх, таслах цэг бүрт хариу үйлдэл үзүүлэх хувилбаруудыг бий болгоход тустай. Та эдгээр Sass газрын зургийг өөрчилж, дахин эмхэтгэх үед эдгээр гогцоонд тусгагдсан өөрчлөлтүүдээ автоматаар харах болно.
Bootstrap-ийн ихэнх бүрэлдэхүүн хэсгүүд нь үндсэн-өөрчлөгч ангийн арга барилаар бүтээгдсэн. Энэ нь хэв маягийн дийлэнх хэсэг нь үндсэн ангид (жишээ нь, .btn
) агуулагдаж байхад хэв маягийн өөрчлөлтүүд нь өөрчлөх ангиудад (жишээ нь, .btn-danger
) хязгаарлагддаг гэсэн үг юм. Эдгээр хувиргагч ангиудыг $theme-colors
манай өөрчилсөн ангиудын тоо болон нэрийг өөрчлөхийн тулд газрын зургаас бүтээв.
Бүрэлдэхүүн хэсэг болон суурь $theme-colors
хэрэглүүрийг өөрчлөхийн тулд газрын зураг дээр хэрхэн давталт хийдэг тухай хоёр жишээ энд байна ..alert
.bg-*
Эдгээр Сасс гогцоонууд нь өнгөт газрын зургаар хязгаарлагдахгүй. Та мөн өөрийн бүрэлдэхүүн хэсгүүд эсвэл хэрэгслүүдийн хариу үйлдэл үзүүлэх хувилбаруудыг үүсгэж болно. Жишээ нь, бид Sass газрын зургийн @each
гогцоог $grid-breakpoints
медиа асуулгатай хольсон манай responsive text зэрэглэлийн хэрэгслүүдийг авч үзье.
Хэрэв та өөрийн тохиргоог өөрчлөх шаардлагатай бол $grid-breakpoints
таны өөрчлөлт тухайн газрын зураг дээр давтагдах бүх гогцоонд хэрэгжинэ.
Bootstrap 4 нь хөрвүүлсэн CSS-д хорь орчим CSS хувийн шинж чанарыг (хувьсагч) агуулдаг . Эдгээр нь таны хөтчийн Inspector, кодын хамгаалагдсан хязгаарлагдмал орчинд эсвэл ерөнхий загварчлал дээр ажиллах үед манай загварын өнгө, таслах цэг, үндсэн фонтын стек зэрэг түгээмэл хэрэглэгддэг утгуудад хялбар хандах боломжийг олгодог.
Энд бидний оруулсан хувьсагчууд байна ( :root
шаардлагатай гэдгийг анхаарна уу). Тэд манай _root.scss
файлд байрладаг.
CSS хувьсагч нь Sass-ийн хувьсагчтай ижил уян хатан байдлыг санал болгодог боловч хөтчид үйлчлэхээс өмнө эмхэтгэх шаардлагагүй. Жишээлбэл, бид хуудасныхаа фонт болон холбоосын хэв маягийг CSS хувьсагчаар дахин тохируулж байна.
Та мөн манай таслах цэгийн хувьсагчдыг медиа асуулгадаа ашиглаж болно: