Bootstrap ашиглан LESS ашиглах
Bootstrap-ийн CSS-ийг бүтээхэд ашигладаг хувьсагч, холигч болон бусад зүйлсийн давуу талыг ашиглахын тулд Bootstrap-г CSS-ийн урьдчилсан процессор LESS- ээр тохируулж, өргөтгөнө үү.
БАГААР барьсан
Яагаад БАГА гэж?
Bootstrap нь бидний сайн найз Алексис Селлиерийн бүтээсэн динамик загварын хэл болох LESS-ээр хийгдсэн . Энэ нь системд суурилсан CSS-ийг илүү хурдан, хялбар, хөгжилтэй болгодог.
Юу багтсан бэ?
CSS-ийн өргөтгөл болох LESS нь хувьсагч, дахин ашиглах боломжтой кодын хэсэгчилсэн хольц, энгийн математикийн үйлдлүүд, үүрлэх, бүр өнгөт функцуудыг агуулдаг.
Хувьсагч
CSS-ийн өнгө, пикселийн утгыг удирдах нь ихэвчлэн хуулж, буулгахад бага зэрэг зовлонтой байдаг. LESS-тэй биш - өнгө эсвэл пикселийн утгыг хувьсагч болгон оноож, нэг удаа өөрчил.
Холимог
Эдгээр гурван хилийн радиусын мэдэгдлийг та ердийн CSS дээр хийх ёстой юу? Одоо тэд хаана ч дахин ашиглах боломжтой кодын хэсэг болох холимогуудын тусламжтайгаар нэг мөр болж байна.
Үйл ажиллагаа
Тооцооллын дагуу үйлдлээр тооцоогоо хийснээр сүлжээгээ, тэргүүлэгч, илүү уян хатан болго. Үржүүлэх, хуваах, нэмэх, хасах замаар CSS-ийн эрүүл ухаанд хүрэх боломжтой.
Bootstrap хувьсагч LESS хувьсагч, тэдгээрийн утга, ашиглалтын заавар
Гипер холбоосууд
@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 |
Navbar
@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-blockIE7 дэмжлэг авахын тулд ердийнхөөс гадна ашиглаарай |
.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() |
аль нь ч биш | Агуулгаа хадгалах хэвтээ төвтэй сав үүсгээрэй |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
n багана, x пикселийн өргөнтэй суваг бүхий пикселийн сүлжээ (контейнер, мөр, багана) үүсгэх |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
n багана, x % өргөн суваг бүхий урьдчилсан сүлжээний системийг үүсгэнэ |
CSS3 шинж чанарууд
| Холимог | Параметрүүд | Хэрэглээ |
|---|---|---|
.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 ашиглан Bootstrap-ийг эмхэтгэж байна
Эмхэтгэх хэрэгслүүд
Makefile бүхий зангилаа
LESS командын мөр хөрвүүлэгч болон uglify-js-ийг дэлхий даяар npm ашиглан дараах тушаалыг ажиллуулна уу.
$ npm суулгах -g бага uglify-js
Суулгасны дараа makebootstrap лавлахын үндсэн хэсгээс ажиллуулаад бүх зүйл бэлэн болно.
Нэмж хэлэхэд, хэрэв танд watchr суулгасан make watchбол bootstrap lib доторх файлыг засварлах бүртээ bootstrap-ийг автоматаар дахин бүтээхээр ажиллаж болно (энэ нь шаардлагагүй, зүгээр л хялбар арга юм).
Тушаалын мөр
Зангилаагаар дамжуулан LESS командын мөрийн хэрэгслийг суулгаад дараах тушаалыг ажиллуулна уу:
$ lessc ./lib/bootstrap.less > bootstrap.css
--compressХэрэв та хэдэн байт хадгалах гэж байгаа бол энэ командыг оруулахаа мартуузай !
Javascript
Хамгийн сүүлийн үеийн Less.js-г татаж аваад түүнд хүрэх замыг (болон Bootstrap) дотор <head>.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
.less файлуудыг дахин эмхэтгэхийн тулд тэдгээрийг хадгалаад хуудсыг дахин ачааллахад л болно. Less.js тэдгээрийг эмхэтгэж, дотоод санах ойд хадгалдаг.
Албан бус Mac програм
Албан бус Mac програм нь .less файлуудын лавлахуудыг үзэж, үзсэн .less файлыг хадгалсны дараа кодыг дотоод файлууд руу хөрвүүлдэг.
Хэрэв та хүсвэл програмын тохиргоог автоматаар жижигрүүлэх, хөрвүүлсэн файлууд аль директорт орохыг өөрчлөх боломжтой.
Бусад Mac програмууд
Шаржигнуур
Crunch бол Adobe Air дээр бүтээгдсэн LESS засварлагч, хөрвүүлэгч юм.
CodeKit
Албан бус Mac программтай нэг залуугийн бүтээсэн CodeKit нь LESS, SASS, Stylus, CoffeeScript-ийг нэгтгэдэг Mac програм юм.
Энгийн
Mac, Linux болон PC-ийн програмууд нь чирж, буулгах горимд БАГА файлуудыг эмхэтгэхэд зориулагдсан. Дээрээс нь эх код нь GitHub дээр байна.