LESS-ის გამოყენება Bootstrap-ით

დააკონფიგურირეთ და გააფართოვეთ Bootstrap LESS- ით, CSS წინასწარი პროცესორით, რათა ისარგებლოთ Bootstrap-ის CSS-ის შესაქმნელად გამოყენებული ცვლადებით, მიქსინებით და სხვა.

რატომ ნაკლები?

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`	60 პიქსელი
`@gridGutterWidth`	20 პიქსელი
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

ტიპოგრაფია

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	მენლო, მონაკო, "Courier New", მონოსპეისი
`@baseFontSize`	13 პიქსელი	პიქსელი უნდა იყოს
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18 პიქსელი	პიქსელი უნდა იყოს
`@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

ნავიბარი

`@navbarHeight`	40 პიქსელი
`@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()`	არცერთი	გააკეთეთ ელემენტი 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`	დააყენეთ შრიფტის ოჯახი monospace-ზე და აკონტროლეთ ზომა, წონა და წამყვანი

ბადის სისტემა

შეურიეთ	Პარამეტრები	გამოყენება
`.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 რომელიმე ამ მეთოდით.

ინსტრუმენტები შედგენისთვის

კვანძი მაკიაფილით

დააინსტალირეთ LESS ბრძანების ხაზის შემდგენელი, JSHint, Recess და uglify-js გლობალურად npm-ით შემდეგი ბრძანების გაშვებით:

$ npm install -g ნაკლები jshint recess uglify-js

ინსტალაციის შემდეგ უბრალოდ გაუშვით makeთქვენი bootstrap დირექტორიას ძირიდან და ყველაფერი მზად ხართ.

გარდა ამისა, თუ თქვენ დაინსტალირებული გაქვთ watchr , თქვენ შეგიძლიათ აწარმოოთ make watchbootstrap ავტომატურად ხელახლა აშენება ყოველ ჯერზე, როდესაც თქვენ შეცვლით ფაილს bootstrap lib-ში (ეს არ არის საჭირო, უბრალოდ მოსახერხებელი მეთოდია).

ბრძანების ხაზი

დააინსტალირეთ LESS ბრძანების ხაზის ინსტრუმენტი Node-ის მეშვეობით და გაუშვით შემდეგი ბრძანება:

$ 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 ფაილის ყოველი შენახვის შემდეგ.

თუ გსურთ, შეგიძლიათ გადართოთ აპის პრეფერენციები ავტომატური მინიფიკაციისთვის და რომელ დირექტორიაში მთავრდება შედგენილი ფაილები.

აშენებულია LESS-ით

რატომ ნაკლები?

რა შედის?

Გაიგე მეტი

ცვლადები

მიქსინები

Ოპერაციები

Bootstrap ცვლადები LESS ცვლადები, მათი მნიშვნელობები და გამოყენების ინსტრუქციები

ხარაჩოები და ლინკები

ბადის სისტემა

ტიპოგრაფია

მაგიდები

ნაცრისფერი ფერები

აქცენტის ფერები

კომპონენტები

ღილაკები

ფორმები

ჩამოაყალიბეთ სახელმწიფოები და გაფრთხილებები

ნავიბარი

ჩამოსაშლელები

გმირის ერთეული

Bootstrap მიქსები

მიქსების შესახებ

ძირითადი მიქსები

პარამეტრული მიქსები

მარტივად დაამატეთ საკუთარი

მოყვება მიქსები

კომუნალური მომსახურება

ფორმები

ტიპოგრაფია

ბადის სისტემა

CSS3 თვისებები

ფონი და გრადიენტები

Bootstrap-ის შედგენა LESS-ით

ინსტრუმენტები შედგენისთვის

კვანძი მაკიაფილით

ბრძანების ხაზი

Javascript

არაოფიციალური Mac აპლიკაცია

მეტი Mac აპი

კრუნჩხვა

CodeKit

უბრალო