Bootstrap-ийн CSS-ийг бүтээхэд ашигладаг хувьсагч, холигч болон бусад зүйлсийн давуу талыг ашиглахын тулд Bootstrap-г CSS-ийн урьдчилсан процессор LESS- ээр тохируулж, өргөтгөнө үү.
Bootstrap нь бидний сайн найз Алексис Селлиерийн бүтээсэн динамик загварын хэл болох LESS-ээр хийгдсэн . Энэ нь системд суурилсан CSS-ийг илүү хурдан, хялбар, хөгжилтэй болгодог.
CSS-ийн өргөтгөл болох LESS нь хувьсагч, дахин ашиглах боломжтой кодын хэсэгчилсэн хольц, энгийн математикийн үйлдлүүд, үүрлэх, бүр өнгөт функцуудыг агуулдаг.
CSS-ийн өнгө, пикселийн утгыг удирдах нь ихэвчлэн хуулж, буулгахад бага зэрэг зовлонтой байдаг. LESS-тэй биш - өнгө эсвэл пикселийн утгыг хувьсагч болгон оноож, нэг удаа өөрчил.
Эдгээр гурван хилийн радиусын мэдэгдлийг та ердийн CSS дээр хийх ёстой юу? Одоо тэд хаана ч дахин ашиглах боломжтой кодын хэсэг болох холимогуудын тусламжтайгаар нэг мөр болж байна.
Тооцооллын дагуу үйлдлээр тооцоогоо хийснээр сүлжээгээ, тэргүүлэгч, илүү уян хатан болго. Үржүүлэх, хуваах, нэмэх, хасах замаар CSS-ийн эрүүл ухаанд хүрэх боломжтой.
@linkColor |
#08c | Өгөгдмөл холбоосын текстийн өнгө | |
@linkColorHover |
darken(@linkColor, 15%) |
Өгөгдмөл холбоосын текстийг зөөвөрлөх өнгө |
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#ээээ | |
@white |
#fff |
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
@primaryButtonBackground |
@linkColor |
@placeholderText |
@grayLight |
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Үндсэн хольц нь үндсэндээ CSS-ийн хэсэгчилсэн хэсэг юм. Тэдгээр нь яг CSS анги шиг бичигдсэн бөгөөд хаана ч дуудаж болно.
- . элемент {
- . тодорхой засах ();
- }
Параметрийн хольц нь үндсэн хольцтой адил боловч нэмэлт өгөгдмөл утгууд бүхий параметрүүдийг (иймээс нэр) хүлээн авдаг.
- . элемент {
- . хил - радиус ( 4px );
- }
Bootstrap-ийн бараг бүх холимгууд нь mixins.less-д хадгалагддаг бөгөөд энэ нь танд багаж хэрэгслийн .less файлуудын аль нэгэнд mixin ашиглах боломжийг олгодог .less файлын гайхалтай хэрэгсэл юм.
Тиймээс, одоо байгаа зүйлсийг ашиглана уу эсвэл шаардлагатай бол өөрийнхөөрөө нэмж болно.
Холимог | Параметрүүд | Хэрэглээ |
---|---|---|
.clearfix() |
аль нь ч биш | Дотор хөвөгчийг арилгахын тулд дурын эцэг эхэд нэмнэ үү |
.tab-focus() |
аль нь ч биш | Webkit фокусын хэв маягийг хэрэглэж, Firefox-ийн тоймыг дугуйл |
.center-block() |
аль нь ч биш | Блок түвшний элементийг ашиглан автоматаар голлуулахmargin: auto |
.ie7-inline-block() |
аль нь ч биш | display: inline-block IE7 дэмжлэг авахын тулд ердийнхөөс гадна ашиглаарай |
.size() |
@height: 5px, @width: 5px |
Нэг мөрөнд өндөр, өргөнийг хурдан тохируулна уу |
.square() |
@size: 5px |
.size() Өргөн болон өндрийг ижил утгаар тохируулахын тулд бүтээдэг |
.opacity() |
@opacity: 100 |
Тунгалаг байдлын хувийг бүхэл тоогоор тохируулах (жишээ нь, "50" эсвэл "75") |
Холимог | Параметрүүд | Хэрэглээ |
---|---|---|
.placeholder() |
@color: @placeholderText |
placeholder Оролтын текстийн өнгийг тохируулна уу |
Холимог | Параметрүүд | Хэрэглээ |
---|---|---|
#font > #family > .serif() |
аль нь ч биш | Элементийг сериф үсгийн стек ашиглана |
#font > #family > .sans-serif() |
аль нь ч биш | Элементийг sans-serif үсгийн стек ашиглан хийнэ үү |
#font > #family > .monospace() |
аль нь ч биш | Элементийг monospace үсгийн стек ашиглана |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Фонтын хэмжээ, жин, толгойг хялбархан тохируулаарай |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Фонтын бүлгийг serif болгож тохируулж, хэмжээ, жин, толгойг удирдана |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Фонтын бүлгийг sans-serif болгож тохируулж, хэмжээ, жин, толгойг хяна |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Фонтын бүлгийг моно орон зайд тохируулж, хэмжээ, жин, тэргүүлэх чиглэлийг тохируулна уу |
Холимог | Параметрүүд | Хэрэглээ |
---|---|---|
.container-fixed() |
аль нь ч биш | Өөрийн агуулгыг хадгалах зориулалттай тогтмол өргөнтэй (-тай @siteWidth ) савыг өгнө үү |
.columns() |
@columns: 1 |
Дурын тооны баганыг хамарсан сүлжээ багана үүсгэх (өгөгдмөл нь 1 багана) |
.offset() |
@columns: 1 |
Дурын тооны баганыг хамарсан зүүн захтай сүлжээ баганыг офсет |
.gridColumn() |
аль нь ч биш | Элементийг сүлжээ багана шиг хөвөгч болго |
Холимог | Параметрүүд | Хэрэглээ |
---|---|---|
.border-radius() |
@radius: 5px |
Элементийн булангуудыг дугуйруулна. Нэг утга эсвэл зайгаар тусгаарлагдсан дөрвөн утга байж болно |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Элементэд сүүдэр нэмэх |
.transition() |
@transition |
CSS3 шилжилтийн эффект нэмэх (жишээ нь, all .2s linear ) |
.rotate() |
@degrees |
Элементийг n градусаар эргүүлнэ |
.scale() |
@ratio |
Элементийг анхны хэмжээгээ n дахин өсгөх |
.translate() |
@x: 0, @y: 0 |
Элементийг x ба y хавтгайд шилжүүлэх |
.background-clip() |
@clip |
Элементийн дэвсгэрийг тайрах (-д хэрэгтэй border-radius ) |
.background-size() |
@size |
CSS3 ашиглан дэвсгэр зургийн хэмжээг хянах |
.box-sizing() |
@boxmodel |
Элементийн хайрцагны загварыг өөрчлөх (жишээ border-box нь, бүтэн өргөн input ) |
.user-select() |
@select |
Хуудас дээрх текстийн курсорын сонголтыг удирдах |
.resizable() |
@direction: both |
Баруун болон доод талд ямар ч элементийн хэмжээг өөрчлөх боломжтой болгоно |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Аливаа элементийн агуулгыг CSS3 багана ашиглана |
Холимог | Параметрүүд | Хэрэглээ |
---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
Элементэд тунгалаг дэвсгэр өнгө өгнө |
.#translucent > .border() |
@color: @white, @alpha: 1 |
Элементэд тунгалаг хилийн өнгө өгнө |
.#gradient > .vertical() |
@startColor, @endColor |
Хөтөч хоорондын босоо дэвсгэр градиент үүсгэх |
.#gradient > .horizontal() |
@startColor, @endColor |
Хөтөч хоорондын хэвтээ дэвсгэр градиент үүсгэх |
.#gradient > .directional() |
@startColor, @endColor, @deg |
Хөтөч хоорондын чиглэлийн дэвсгэр градиент үүсгэх |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Хөтөч хоорондын гурван өнгийн дэвсгэр градиент үүсгэх |
.#gradient > .radial() |
@innerColor, @outerColor |
Хөтөч хоорондын радиаль дэвсгэр градиент үүсгэх |
.#gradient > .striped() |
@color, @angle |
Хөтөч хоорондын судалтай дэвсгэр градиент үүсгэх |
.#gradientBar() |
@primaryColor, @secondaryColor |
Градиент болон бага зэрэг бараан хүрээ оноох товчлууруудад ашигладаг |
Дараах тушаалыг ажиллуулж LESS командын мөр хөрвүүлэгчийг npm-тэй дэлхий даяар суулгана уу:
$ npm суулгах -g бага
Суулгасны дараа make
bootstrap лавлахын үндсэн хэсгээс ажиллуулаад бүх зүйл бэлэн болно.
Нэмж хэлэхэд, хэрэв танд watchr суулгасан make watch
бол bootstrap lib доторх файлыг засварлах бүртээ bootstrap-ийг автоматаар дахин бүтээхээр ажиллаж болно (энэ нь шаардлагагүй, зүгээр л хялбар арга юм).
Зангилаагаар дамжуулан LESS командын мөрийн хэрэгслийг суулгаад дараах тушаалыг ажиллуулна уу:
$ lessc ./lib/bootstrap.less > bootstrap.css
--compress
Хэрэв та хэдэн байт хадгалах гэж байгаа бол энэ командыг оруулахаа мартуузай !
Хамгийн сүүлийн үеийн Less.js-г татаж аваад түүнд хүрэх замыг (болон Bootstrap) дотор <head>
.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
.less файлуудыг дахин эмхэтгэхийн тулд тэдгээрийг хадгалаад хуудсыг дахин ачааллахад л болно. Less.js тэдгээрийг эмхэтгэж, дотоод санах ойд хадгалдаг.
Албан бус Mac програм нь .less файлуудын лавлахуудыг үзэж, үзсэн .less файлыг хадгалсны дараа кодыг дотоод файлууд руу хөрвүүлдэг.
Хэрэв та хүсвэл програмын тохиргоог автоматаар жижигрүүлэх, хөрвүүлсэн файлууд аль директорт орохыг өөрчлөх боломжтой.
Crunch бол Adobe Air дээр бүтээгдсэн LESS засварлагч, хөрвүүлэгч юм.
Албан бус Mac программтай нэг залуугийн бүтээсэн CodeKit нь LESS, SASS, Stylus, CoffeeScript-ийг нэгтгэдэг Mac програм юм.
Mac, Linux болон PC-ийн програмууд нь чирж, буулгах горимд БАГА файлуудыг эмхэтгэхэд зориулагдсан. Дээрээс нь эх код нь GitHub дээр байна.