Сэдэвчилсэн ачаалагч
Bootstrap 4-ийг манай шинэ суурилагдсан Sass хувьсагчаар тохируулж, загварчлал болон бүрэлдэхүүн хэсгүүдийг хялбархан өөрчлөх боломжтой.
Оршил
Bootstrap 3 дээр загварчлалыг голчлон LESS дахь хувьсагч хүчингүй болгох, өөрчлөн тохируулсан CSS болон бидний dist
файлууддаа оруулсан тусдаа загварын загварын хүснэгтээр удирддаг. Зарим хүчин чармайлтаар Bootstrap 3-ын үндсэн файлуудад хүрэлгүйгээр харагдах байдлыг бүрэн өөрчлөх боломжтой. Bootstrap 4 нь танил боловч арай өөр аргыг санал болгодог.
Одоо загварчлалыг Sass хувьсагч, Sass газрын зураг, захиалгат CSS ашиглан хийж байна. Тусгай зориулалтын загварын хуудас байхгүй; Үүний оронд та градиент, сүүдэр болон бусад зүйлийг нэмэхийн тулд суурилуулсан загварыг идэвхжүүлж болно.
Сасс
Хувьсагч, газрын зураг, холимог гэх мэт давуу талыг ашиглахын тулд манай эх сурвалж Sass файлуудыг ашиглаарай. Хөтчийг бөөрөнхийлөхтэй холбоотой асуудлаас урьдчилан сэргийлэхийн тулд бид бүтээхдээ Sass-ийн бөөрөнхийллийн нарийвчлалыг 6 (үндсэндээ 5) болгож нэмэгдүүлсэн.
Файлын бүтэц
Боломжтой бол 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 дээрх өгөгдмөл утгуудаар дахин хуваарилагдахгүй.
Та Bootstrap-ийн хувьсагчийн бүрэн жагсаалтыг эндээс олох болно scss/_variables.scss
. Зарим хувьсагчдыг -аар тохируулсан бөгөөд null
эдгээр хувьсагч нь таны тохиргоонд дарагдаагүй л бол өмчийг гаргахгүй.
Нэг 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
газрын зургаас өнгөт загвар гаргахын тулд:
Үүнийг мөн нэг удаагийн тодосгогч хэрэгцээнд ашиглаж болно:
Та мөн үндсэн өнгийг манай өнгөт газрын зургийн функцээр тодорхойлж болно:
SVG-ээс зугтах
Бид SVG дэвсгэр зургийн , болон тэмдэгтүүдээс escape-svg
зайлсхийх функцийг ашигладаг. IE дээр дэвсгэр зургийг зөв гаргахын тулд эдгээр тэмдэгтүүдээс зугтах шаардлагатай.<
>
#
Нэмэх, хасах функцууд
Бид CSS функцийг боохдоо add
болон функцуудыг ашигладаг . Эдгээр функцүүдийн гол зорилго нь илэрхийлэлд "нэгжгүй" утгыг шилжүүлэхэд алдаа гарахаас зайлсхийх явдал юм. Ийм илэрхийлэл нь математикийн хувьд зөв байсан ч бүх хөтөч дээр алдаа гаргана.subtract
calc
0
calc
calc(10px - 0)
Тооцоолол хүчинтэй байх жишээ:
Тооцоолол хүчингүй болсон жишээ:
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-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 (өгөгдмөл) |
true -д устгахаар төлөвлөж буй хуучирсан холимог болон функцуудыг ашиглах үед анхааруулга харуулахаар тохируулна уу v5 . |
Өнгө
Bootstrap-ийн олон янзын бүрэлдэхүүн хэсгүүд болон хэрэгслүүд нь Sass газрын зурагт тодорхойлогдсон өнгөний цуваагаар бүтээгдсэн байдаг. Хэд хэдэн дүрмийн багцыг хурдан үүсгэхийн тулд энэ газрын зургийг Сасс руу эргүүлж болно.
Бүх өнгө
Bootstrap 4 дээр байгаа бүх өнгийг Sass хувьсагч болон scss/_variables.scss
файл дахь Sass газрын зураг хэлбэрээр авах боломжтой. Үүнийг бидний оруулсан саарал өнгийн палитр шиг нэмэлт сүүдэр нэмэхийн тулд дараагийн жижиг хувилбаруудад өргөжүүлэх болно.
Та эдгээрийг Sass дээрээ хэрхэн ашиглаж болохыг эндээс үзнэ үү:
Өнгөний хэрэглээний ангиуд нь мөн тохиргоо color
болон background-color
.
Цаашид бид доорх саарал өнгийн өнгөнүүдийг хийсэн шиг өнгө бүрийн сүүдэрт зориулсан Sass газрын зураг болон хувьсагчдыг өгөхийг зорьж байна.
Сэдвийн өнгө
Бид өнгөний схемийг үүсгэхийн тулд жижиг өнгөт палитр үүсгэхийн тулд бүх өнгөний дэд багцыг ашигладаг бөгөөд үүнийг Sass хувьсагч болон Bootstrap scss/_variables.scss
файл дахь Sass газрын зураг хэлбэрээр ашиглах боломжтой.
Саарал
Саарал хэмжигдэхүүний өргөн багц ба Sass газрын зураг нь scss/_variables.scss
таны төсөлд тогтвортой саарал өнгийг харуулдаг. Эдгээр нь төвийг сахисан саарал биш харин нарийн хөх өнгөтэй байдаг "сэрүүн саарал" гэдгийг анхаарна уу.
Дотор scss/_variables.scss
нь та Bootstrap-ийн өнгөт хувьсагч болон 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
таны өөрчлөлт тухайн газрын зураг дээр давтагдах бүх гогцоонд хэрэгжинэ.
CSS хувьсагч
Bootstrap 4 нь эмхэтгэсэн CSS-дээ хорь орчим CSS хувийн шинж чанарыг (хувьсагч) агуулдаг . Эдгээр нь таны хөтчийн Inspector, кодын хамгаалагдсан хязгаарлагдмал орчинд эсвэл ерөнхий загварчлал дээр ажиллах үед манай загварын өнгө, таслах цэг, үндсэн фонтын стек зэрэг түгээмэл хэрэглэгддэг утгуудад хялбар хандах боломжийг олгодог.
Боломжтой хувьсагч
Энд бидний оруулсан хувьсагчууд байна ( :root
шаардлагатай гэдгийг анхаарна уу). Тэд манай _root.scss
файлд байрладаг.
Жишээ
CSS хувьсагч нь Sass-ийн хувьсагчтай ижил уян хатан байдлыг санал болгодог боловч хөтчид үйлчлэхээс өмнө эмхэтгэх шаардлагагүй. Жишээлбэл, бид хуудасныхаа фонт болон холбоосын хэв маягийг CSS хувьсагчаар дахин тохируулж байна.
Таслах цэгийн хувьсагчид
Бид анх CSS хувьсагчид (жишээ нь, --breakpoint-md
) таслах цэгүүдийг оруулсан хэдий ч эдгээр нь медиа асуулгад дэмжигддэггүй , гэхдээ тэдгээрийг медиа асуулгад дүрмийн багц дотор ашиглах боломжтой хэвээр байна . Эдгээр таслах цэгийн хувьсагчууд нь JavaScript-ээр ашиглах боломжтой тул буцаах нийцтэй байх үүднээс эмхэтгэсэн CSS-д үлддэг. Тодорхойлолтоос илүү ихийг мэдэж аваарай .
Дэмжигдээгүй зүйлийн жишээ энд байна :
Дэмжигдсэн зүйлийн жишээ энд байна :