Bootstrap ашиглан LESS ашиглах

Bootstrap-ийн CSS-ийг бүтээхэд ашигладаг хувьсагч, холигч болон бусад зүйлсийн давуу талыг ашиглахын тулд Bootstrap-г CSS-ийн урьдчилсан процессор LESS- ээр тохируулж, өргөтгөнө үү.

Яагаад БАГА гэж?

Bootstrap нь бидний сайн найз Алексис Селлиерийн бүтээсэн динамик загварын хэл болох LESS-ээр хийгдсэн . Энэ нь системд суурилсан CSS-ийг илүү хурдан, хялбар, хөгжилтэй болгодог.

Юу багтсан бэ?

CSS-ийн өргөтгөл болох LESS нь хувьсагч, дахин ашиглах боломжтой кодын хэсэгчилсэн хольц, энгийн математикийн үйлдлүүд, үүрлэх, бүр өнгөт функцуудыг агуулдаг.

Илүү их судла

Дэлгэрэнгүй мэдээллийг http://lesscss.org/ албан ёсны вэбсайтад зочилно уу .

Хувьсагч

CSS-ийн өнгө, пикселийн утгыг удирдах нь ихэвчлэн хуулж, буулгахад бага зэрэг зовлонтой байдаг. LESS-тэй биш - өнгө эсвэл пикселийн утгыг хувьсагч болгон оноож, нэг удаа өөрчил.

Холимог

Эдгээр гурван хилийн радиусын мэдэгдлийг та ердийн CSS дээр хийх ёстой юу? Одоо тэд хаана ч дахин ашиглах боломжтой кодын хэсэг болох холимогуудын тусламжтайгаар нэг мөр болж байна.

Үйл ажиллагаа

Тооцооллын дагуу үйлдлээр тооцоогоо хийснээр сүлжээгээ, тэргүүлэгч, илүү уян хатан болго. Үржүүлэх, хуваах, нэмэх, хасах замаар CSS-ийн эрүүл ухаанд хүрэх боломжтой.

Шатны шат ба холбоосууд

`@bodyBackground`	`@white`	Хуудасны дэвсгэр өнгө
`@textColor`	`@grayDark`	Үндсэн текстийн үндсэн өнгө, гарчиг гэх мэт
`@linkColor`	`#08c`	Өгөгдмөл холбоосын текстийн өнгө
`@linkColorHover`	`darken(@linkColor, 15%)`	Өгөгдмөл холбоосын текстийг зөөвөрлөх өнгө

Сүлжээний систем

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

Типографи

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Менло, Монако, "Courier New", monospace
`@baseFontSize`	13px	Пиксел байх ёстой
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Пиксел байх ёстой
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Хүснэгтүүд

`@tableBackground`	`transparent`
`@tableBackgroundAccent`	`#f9f9f9`
`@tableBackgroundHover`	`#f5f5f5`
`@tableBorder`	`ddd`

Саарал өнгийн өнгөнүүд

`@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

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

Товчлуурууд

`@btnBackground`	`@white`
`@btnBackgroundHighlight`	`darken(@white, 10%)`
`@btnBorder`	`darken(@white, 20%)`
`@btnPrimaryBackground`	`@linkColor`
`@btnPrimaryBackgroundHighlight`	`spin(@btnPrimaryBackground, 15%)`
`@btnInfoBackground`	`#5bc0de`
`@btnInfoBackgroundHighlight`	`#2f96b4`
`@btnSuccessBackground`	`#62c462`
`@btnSuccessBackgroundHighlight`	`51a351`
`@btnWarningBackground`	`lighten(@orange, 15%)`
`@btnWarningBackgroundHighlight`	`@orange`
`@btnDangerBackground`	`#ee5f5b`
`@btnDangerBackgroundHighlight`	`#bd362f`
`@btnInverseBackground`	`@gray`
`@btnInverseBackgroundHighlight`	`@grayDarker`

Маягтууд

`@placeholderText`	`@grayLight`
`@inputBackground`	`@white`
`@inputBorder`	`#ccc`
`@inputBorderRadius`	`3px`
`@inputDisabledBackground`	`@grayLighter`
`@formActionsBackground`	`#f5f5f5`

Маягт төлөв болон сэрэмжлүүлэг

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

Navbar

`@navbarHeight`	40px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`
`@navbarLinkColorActive`	`@navbarLinkColorHover`
`@navbarLinkBackgroundHover`	`transparent`
`@navbarLinkBackgroundActive`	`@navbarBackground`
`@navbarSearchBackground`	`lighten(@navbarBackground, 25%)`
`@navbarSearchBackgroundFocus`	`@white`
`@navbarSearchBorder`	`darken(@navbarSearchBackground, 30%)`
`@navbarSearchPlaceholderColor`	`#ccc`
`@navbarBrandColor`	`@navbarLinkColor`

Унтраах цэсүүд

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`
`@@dropdownDividerTop`	`#e5e5e5`
`@@dropdownDividerBottom`	`@white`

Баатар нэгж

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

Холимогуудын тухай

Үндсэн хольцууд

Үндсэн хольц нь үндсэндээ 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 @width`	Нэг мөрөнд өндөр, өргөнийг хурдан тохируулна уу
`.square()`	`@size`	`.size()`Өргөн болон өндрийг ижил утгаар тохируулахын тулд бүтээдэг
`.opacity()`	`@opacity`	Тунгалаг байдлын хувийг бүхэл тоогоор тохируулах (жишээ нь, "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 % өргөн суваг бүхий хувийн сүлжээний системийг үүсгэнэ
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	`input`Элементүүдийн пикселийн сүлжээний системийг үүсгэх, дэвсгэр болон хүрээг тооцоолох
`.makeColumn`	`@columns: 1, @offset: 0`	Аль нэгийг `div`нь ангигүйгээр сүлжээ багана болгон `.span*`хувирга

CSS3 шинж чанарууд

Холимог	Параметрүүд	Хэрэглээ
`.border-radius()`	`@radius`	Элементийн булангуудыг дугуйруулна. Нэг утга эсвэл зайгаар тусгаарлагдсан дөрвөн утга байж болно
`.box-shadow()`	`@shadow`	Элементэд сүүдэр нэмэх
`.transition()`	`@transition`	CSS3 шилжилтийн эффект нэмэх (жишээ нь, `all .2s linear`)
`.rotate()`	`@degrees`	Элементийг n градусаар эргүүлнэ
`.scale()`	`@ratio`	Элементийг анхны хэмжээгээ n дахин өсгөх
`.translate()`	`@x, @y`	Элементийг x ба y хавтгайд шилжүүлэх
`.background-clip()`	`@clip`	Элементийн дэвсгэрийг тайрах (-д хэрэгтэй `border-radius`)
`.background-size()`	`@size`	CSS3 ашиглан дэвсгэр зургийн хэмжээг хянах
`.box-sizing()`	`@boxmodel`	Элементийн хайрцагны загварыг өөрчлөх (жишээ `border-box`нь, бүтэн өргөн `input`)
`.user-select()`	`@select`	Хуудас дээрх текстийн курсорын сонголтыг удирдах
`.backface-visibility()`	`@visibility: visible`	CSS 3D хувиргалтыг ашиглах үед агуулгын анивчихаас сэргийлнэ
`.resizable()`	`@direction: both`	Баруун болон доод талд ямар ч элементийн хэмжээг өөрчлөх боломжтой болгоно
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Аливаа элементийн агуулгыг CSS3 багана ашиглана
`.hyphens()`	`@mode: auto`	Хүссэн үедээ CSS3 зураас (үүнийг багтаасан `word-wrap: break-word`)

Арын дэвсгэр ба градиент

Холимог	Параметрүүд	Хэрэглээ
`#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`	Градиент болон бага зэрэг бараан хүрээ оноох товчлууруудад ашигладаг

Жич: Хэрэв та GitHub-д өөрчилсөн CSS-тэй татах хүсэлт илгээж байгаа бол эдгээр аргуудын аль нэгээр дамжуулан CSS-г дахин эмхэтгэх ёстой .

Эмхэтгэх хэрэгслүүд

Makefile бүхий зангилаа

LESS командын мөр хөрвүүлэгч, JSHint, Recess, uglify-js-ийг дэлхий даяар npm ашиглан дараах тушаалыг ажиллуулж суулгаарай.

$ npm суулгах -g бага jshint завса��лага uglify-js

Суулгасны дараа л ажиллуулmake bootstrap лавлахын үндсэн хэсгээс ажиллуулаад бүх зүйл бэлэн болно.

Нэмж хэлэхэд, хэрэв танд watchr суулгасан make watchбол bootstrap lib доторх файлыг засварлах бүртээ bootstrap-ийг автоматаар дахин бүтээхээр ажиллаж болно (энэ нь шаардлагагүй, зүгээр л хялбар арга юм).

Тушаалын мөр

Зангилаагаар дамжуулан LESS командын мөрийн хэрэгслийг суулгаад дараах тушаалыг ажиллуулна уу:

$ lessc ./less/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 файлыг хадгалсны дараа кодыг дотоод файлууд руу хөрвүүлдэг.

Хэрэв та хүсвэл програмын тохиргоог автоматаар жижигрүүлэх, хөрвүүлсэн файлууд аль директорт орохыг өөрчлөх боломжтой.

БАГААР барьсан

Яагаад БАГА гэж?

Юу багтсан бэ?

Илүү их судла

Хувьсагч

Холимог

Үйл ажиллагаа

Bootstrap хувьсагч LESS хувьсагч, тэдгээрийн утга, ашиглалтын заавар

Шатны шат ба холбоосууд

Сүлжээний систем

Типографи

Хүснэгтүүд

Саарал өнгийн өнгөнүүд

Өргөлтийн өнгө

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

Товчлуурууд

Маягтууд

Маягт төлөв болон сэрэмжлүүлэг

Navbar

Унтраах цэсүүд

Баатар нэгж

Ачаалах холимог

Холимогуудын тухай

Үндсэн хольцууд

Параметрийн холимог

Өөрийгөө хялбархан нэмнэ үү

Холимог агуулсан

Хэрэглээ

Маягтууд

Типографи

Сүлжээний систем

CSS3 шинж чанарууд

Арын дэвсгэр ба градиент

LESS ашиглан Bootstrap-ийг эмхэтгэж байна

Эмхэтгэх хэрэгслүүд

Makefile бүхий зангилаа

Тушаалын мөр

Javascript

Албан бус Mac програм

Бусад Mac програмууд

Шаржигнуур

CodeKit

Энгийн