ნაგულისხმევი ბადე

ნაგულისხმევი ბადის სისტემა, რომელიც მოცემულია Bootstrap-ის ნაწილად, არის 940 პიქსელი სიგანის 16 სვეტიანი ბადე. ეს არის პოპულარული 960 ბადე სისტემის არომატი, მაგრამ მარცხენა და მარჯვენა მხარეს დამატებითი ზღვრის/შეფუთვის გარეშე.

ქსელის მარკირების მაგალითი

როგორც აქ ნაჩვენებია, ძირითადი განლაგება შეიძლება შეიქმნას ორი "სვეტით", თითოეული მოიცავს 16 ძირითადი სვეტის რაოდენობას, რომელიც ჩვენ განვსაზღვრეთ, როგორც ჩვენი ბადის სისტემის ნაწილი. მეტი ვარიაციებისთვის იხილეთ ქვემოთ მოცემული მაგალითები.

<div class="row">
  <div class = "span6 სვეტები" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

ფიქსირებული განლაგება

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

<სხეული>
  <div class = "კონტეინერი" > 
    ...
  </div>
</body>

სითხის განლაგება

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

<სხეული>
  <div class = "კონტეინერის სითხე" > 
    <div class = "გვერდითი ზოლი" > 
      ...
    </div>
    <div class = "შინაარსი" > 
      ...
    </div>
  </div>
</body>

სათაურები და ასლი

სტანდარტული ტიპოგრაფიული იერარქია თქვენი ვებგვერდების სტრუქტურირებისთვის.

h1. სათაური 1

h2. სათაური 2

h3. სათაური 3

h4. სათაური 4

h5. სათაური 5

h6. სათაური 6

მაგალითი პარაგრაფი

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultrices vehicula ut id elit.

მაგალითის სათაურს აქვს ქვესათაური...

თქვენ ასევე შეგიძლიათ დაამატოთ ქვესათაურები <strong>და<em>

სხვადასხვა ელემენტები

ხაზგასმის, მისამართების და აბრევიატურების გამოყენება

<strong> <em> <address> <abbr>

როდის გამოვიყენოთ

ხაზგასმის ტეგები ( <strong>და <em>) უნდა იქნას გამოყენებული სიტყვას ან ფრაზასა და მის მიმდებარე ასლს შორის ვიზუალური განსხვავებას დასამატებლად. გამოიყენეთ <strong>ძველი ყურადღებისთვის და <em>გლუვი ყურადღებისთვის და სათაურებისთვის.

აქცენტი აბზაცში

Fusce dapibus , telus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.

მისამართები

addressელემენტი გამოიყენება — თქვენ წარმოიდგინეთ! — მიმართავს . აი, როგორ გამოიყურება:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

შენიშვნა: ყოველი სტრიქონი addressუნდა დასრულდეს სტრიქონის წყვეტით ( <br />), რათა სწორად სტრუქტურირდეს შინაარსი, როგორც ის იკითხება რეალურ ცხოვრებაში, ყოველგვარი სტილის გამოყენების გარეშე.

აბრევიატურები

აბრევიატურებისა და აკრონიმებისთვის გამოიყენეთ abbrტეგი ( acronymმოძველებულია HTML5- ში ). ჩასვით სტენოგრამის ფორმა ტეგში და დაასახელეთ სრული სახელი.

ბლოკციტატები

<blockquote> <p> <cite>

დარწმუნდით გადაიტანოთ თქვენი blockquoteგარშემო paragraphდა citetags. წყაროს მოყვანისას გამოიყენეთ citeელემენტი. CSS ავტომატურად წარუდგენს სახელს em ტირეთი (—).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

დოქტორი იულიუს ჰიბერტი

შეუკვეთელი<ul>

• ჯერემი ბიქსბი
• რობერტ დეზურე
• ჯოშ ვაშინგტონი
• ანტონ კაპრეზი
• ჩემი გუნდის თანამოაზრეები
  • ჯორჯ კასტანცა
  • ჯერი საინფელდი
  • კოსმო კრამერი
  • ელეინ ბენისი
  • Ახალი კაცი
• ჯონ იაკობი
• პოლ პირსი
• კევინ გარნეტი

უსტიილი<ul.unstyled>

• ჯერემი ბიქსბი
• რობერტ დეზურე
• ჯოშ ვაშინგტონი
• ანტონ კაპრეზი
• ჩემი გუნდის თანამოაზრეები
  • ჯორჯ კასტანცა
  • ჯერი საინფელდი
  • კოსმო კრამერი
  • ელეინ ბენისი
  • Ახალი კაცი
• ჯონ იაკობი
• პოლ პირსი
• კევინ გარნეტი

უბრძანა<ol>

1. ჯერემი ბიქსბი
2. რობერტ დეზურე
3. ჯოშ ვაშინგტონი
4. ანტონ კაპრეზი
5. ჩემი გუნდის თანამოაზრეები
   1. ჯორჯ კასტანცა
   2. ჯერი საინფელდი
   3. კოსმო კრამერი
   4. ელეინ ბენისი
   5. Ახალი კაცი
6. ჯონ იაკობი
7. პოლ პირსი
8. კევინ გარნეტი

აღწერაdl

აღწერილობის სიები

აღწერის სია შესანიშნავია ტერმინების განსაზღვრისთვის.

ევისმოდი

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

მაგიდების აგება

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

მაგიდები შესანიშნავია - ბევრი რამისთვის. თუმცა, დიდ ცხრილებს სჭირდებათ მარკირების სიყვარული, რომ იყოს სასარგებლო, მასშტაბური და წაკითხული (კოდის დონეზე). აქ მოცემულია რამდენიმე რჩევა დასახმარებლად.

ყოველთვის გადააფარეთ თქვენი სვეტის სათაურები ისე, theadრომ იერარქია იყოს thead> tr> th.

სვეტების სათაურების მსგავსად, თქვენი ცხრილის მთელი შინაარსი უნდა იყოს შეფუთული tbodyისე, რომ თქვენი იერარქია იყოს tbody> tr> td.

მაგალითი: ცხრილის ნაგულისხმევი სტილები

ყველა ცხრილი ავტომატურად იქნება სტილიზებული მხოლოდ ძირითადი საზღვრებით, რათა უზრუნველყოს წაკითხვა და შეინარჩუნოს სტრუქტურა. არ არის საჭირო დამატებითი კლასების ან ატრიბუტების დამატება.

#	Სახელი	Გვარი	Ენა
1	Ზოგიერთი	ერთი	ინგლისური
2	ჯო	Ექვსი შეკვრა	ინგლისური
3	სტუ	დენტი	კოდი

<table class="common-table"> class = "common-table" >
  ...
</table>

მაგალითი: ზებრა ზოლიანი

ზებრა-ზოლების დამატებით დაამატეთ თქვენი მაგიდები - უბრალოდ დაამატეთ .zebra-stripedკლასი.

#	Სახელი	Გვარი	Ენა
1	Ზოგიერთი	ერთი	ინგლისური
2	ჯო	Ექვსი შეკვრა	ინგლისური
3	სტუ	დენტი	კოდი

<table class="common-table zebra-striped"> class = "საერთო მაგიდის ზებრა-ზოლიანი" >
...
</table>

მაგალითი: Zebra-striped w/ TableSorter.js

წინა მაგალითის გათვალისწინებით, ჩვენ ვაუმჯობესებთ ჩვენი ცხრილების სარგებლიანობას jQuery- ისა და Tablesorter მოდულის მეშვეობით დახარისხების ფუნქციების უზრუნველყოფით . დააწკაპუნეთ ნებისმიერი სვეტის სათაურზე დალაგების შესაცვლელად.

#	Სახელი	Გვარი	Ენა
1	შენი	ერთი	ინგლისური
2	ჯო	Ექვსი შეკვრა	ინგლისური
3	სტუ	დენტი	კოდი

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" </script> 
<სკრიპტის ტიპი = "ტექსტი/ჯავასკრიპტი" > 
  $ ( დოკუმენტი ). მზად ( ფუნქცია () { 
    $ ( "table# sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "common-table zebra-striped" > 
  ...
</table>

ნაგულისხმევი სტილები

ყველა ფორმას ეძლევა ნაგულისხმევი სტილი, რათა წარმოადგინონ ისინი წაკითხული და მასშტაბური გზით. სტილები მოწოდებულია ტექსტის შეყვანისთვის, სიების შერჩევისთვის, ტექსტური ზონებისთვის, რადიო ღილაკებისთვის და მოსანიშნი ველებისთვის და ღილაკებისთვის.

ლეგენდის ფორმის მაგალითი

X-Large შეყვანა

აირჩიეთ

1 2 3 4 5

აირჩიეთ

1 2 3 4 5

არარედაქტირებადი შეყვანა

ზოგიერთი ღირებულება აქ

გამორთულია შეყვანა

X-Large შეყვანა

დახმარების ტექსტის მცირე ფრაგმენტი

ლეგენდის ფორმის მაგალითი

წინასწარ მომზადებული ტექსტი

@

წინასწარ ჩანიშნული ველი

დამატებულია მოსანიშნი ველი

ფაილის შეყვანა

ლეგენდის ფორმის მაგალითი

ოფციების სია

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

შენიშვნა: ეტიკეტები აკრავს ყველა ვარიანტს ბევრად უფრო დიდი დაწკაპუნების არეებისთვის და უფრო გამოსაყენებელი ფორმისთვის.

თარიღის დიაპაზონი

რომ ყველა დრო ნაჩვენებია წყნარი ოკეანის სტანდარტული დროით (GMT -08:00).

ტექსტარეა

საჭიროების შემთხვევაში, დახმარების ტექსტის ბლოკი ზემოთ ველის აღსაწერად.

ოფციების სია

• პირველი ვარიანტი არის ეს და ეს - აუცილებლად მიუთითეთ, რატომ არის ეს შესანიშნავი
• მეორე ვარიანტი ასევე შეიძლება შემოწმდეს და ჩაერთოს ფორმის შედეგებში

Ცვლილებების შენახვა გაუქმება

დაწყობილი ფორმები

დაამატეთ .form-stackedთქვენი ფორმის HTML-ში და გექნებათ ლეიბლები მათი ველების ზემოთ, მარცხნივ. ეს მშვენივრად მუშაობს, თუ თქვენი ფორმები მოკლეა ან გაქვთ შეყვანის ორი სვეტი უფრო მძიმე ფორმებისთვის.

ლეგენდის ფორმის მაგალითი

X-Large შეყვანა

აირჩიეთ

1 2 3 4 5

ლეგენდის ფორმის მაგალითი

ოფციების სია

• პირველი ვარიანტი არის ეს და ეს - აუცილებლად მიუთითეთ, რატომ არის ეს შესანიშნავი
• მეორე ვარიანტი ასევე შეიძლება შემოწმდეს და ჩაერთოს ფორმის შედეგებში

შენიშვნა: ეტიკეტები აკრავს ყველა ვარიანტს ბევრად უფრო დიდი დაწკაპუნების არეებისთვის და უფრო გამოსაყენებელი ფორმისთვის.

Ცვლილებების შენახვა გაუქმება

ღილაკები

როგორც წესი, ღილაკები გამოიყენება მოქმედებებისთვის, ხოლო ბმულები გამოიყენება ობიექტებისთვის. მაგალითად, "ჩამოტვირთვა" შეიძლება იყოს ღილაკი და "ბოლო აქტივობა" შეიძლება იყოს ბმული.

ყველა ღილაკზე ნაგულისხმევად არის ღია ნაცრისფერი სტილი, მაგრამ ლურჯი .primaryკლასი ხელმისაწვდომია. გარდა ამისა, საკუთარი სტილის მოძრავი მარტივია.

ღილაკების მაგალითი

ღილაკების სტილები შეიძლება გამოყენებულ იქნას ნებისმიერზე .btn. როგორც წესი, თქვენ გსურთ გამოიყენოთ ისინი მხოლოდ a, buttonდა აირჩიეთ inputელემენტებზე. აი, როგორ გამოიყურება:

ალტერნატიული ზომები

გსურთ უფრო დიდი თუ პატარა ღილაკები? მიიღეთ ეს!

ინვალიდი მდგომარეობა

ღილაკებისთვის, რომლებიც არ არის აქტიური ან გამორთულია აპის მიერ ამა თუ იმ მიზეზით, გამოიყენეთ გამორთული მდგომარეობა. ეს არის .disabledბმულებისთვის და :disabledელემენტებისთვის button.

ბმულები

ღილაკები

Რა არის ეს

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

დააკონფიგურიროთ

შიგნით არსებული ყველა ელემენტი, ისევე როგორც მთელი ზედა ზოლი, არჩევითია. თქვენ შეგიძლიათ აირჩიოთ ლოგო/სახელი, ნავიგაცია, ძიება და მეორადი ნავი, ან მათი ნებისმიერი კომბინაცია.

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

როგორც ძირითადი ნავიგაციის ნაწილი, ჩვენ ჩავრთეთ შესაძლებლობა, დაამატოთ ჩამოსაშლელი ფაილები თქვენს ნავიგაციაში. შეამოწმეთ მეორადი ნავიგაცია ზემოთ (მარჯვნივ გასწორებული), რათა ნახოთ, როგორ კეთდება ეს.

ტაბლეტები და აბები

შექმენით მარტივი მეორადი ნავიგაცია ul. შეცვალეთ ჩანართებს ან აბებს შორის შესაბამისი კლასის დამატებით.

შესანიშნავია კონტენტის ქვესექციებისთვის, როგორიცაა ჩვენი ანგარიშის პარამეტრების გვერდები და მომხმარებლის ვადები მსგავსი შინაარსის გვერდებს შორის გადართვისთვის. ხელმისაწვდომია ჩანართის ან აბების სტილში.

• მთავარი
• პროფილი
• შეტყობინებები
• პარამეტრები
• კონტაქტი

<ul class="tabs"> class = "ჩანართები" >
  <li class = "active" ><a href = "" > მთავარი </a></li>  
  <li><a href = "" > პროფილი </a></li> 
  <li><a href = "" > შეტყობინებები </a></li> 
  <li><a href = "" > პარამეტრები </a></li> 
  <li><a href = "" > კონტაქტი </a></li> 
</ul>

• მთავარი
• პროფილი
• შეტყობინებები
• პარამეტრები
• კონტაქტი

<ul class="pills"> class = "აბი" >
  <li class = "active" ><a href = "" > მთავარი </a></li>  
  <li><a href = "" > პროფილი </a></li> 
  <li><a href = "" > შეტყობინებები </a></li> 
  <li><a href = "" > პარამეტრები </a></li> 
  <li><a href = "" > კონტაქტი </a></li> 
</ul>

პაგირება

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

<div class="pagination"> class = "პაგირება" >
  <ul>
    <li class = "წინა გამორთულია" ><a href = "" > ← წინა </a></li>  
    <li class = "აქტიური" ><a href = "" > 1 </a></li>  
    <li><a href = "" > 2 </a></li> 
    <li><a href = "" > 3 </a></li> 
    <li><a href = "" > 4 ​​</a></li> 
    <li><a href = "" > 5 </a></li> 
    <li class = "შემდეგი" ><a href = "" > შემდეგი → </a></li>  
  </ul>
</div>

ძირითადი გაფრთხილებები

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

შეტყობინებების დაბლოკვა

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

მოდალები

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

პოპოვერები

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

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

შეამოწმეთ, როგორ გამოვიყენეთ Preboot Bootstrap-ში და როგორ შეგიძლიათ გამოიყენოთ იგი, თუ აირჩევთ Less-ის გაშვებას თქვენს შემდეგ პროექტზე.

Როგორ გამოვიყენოთ ის

გამოიყენეთ ეს ოფცია Bootstrap-ის Less ცვლადების, მიქსინებისა და CSS-ში ჩადგმის სრულად გამოსაყენებლად თქვენს ბრაუზერში Javascript-ის საშუალებით.

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "ყველა" />    
<script type = "text/javascript" src = "js/less-1.0.41.min.js" </script>  

არ გრძნობთ .js გადაწყვეტას? სცადეთ Less Mac აპი ან გამოიყენეთ Node.js კომპილაციისთვის, როდესაც თქვენ განათავსებთ თქვენს კოდს.

რა შედის

აქ არის რამოდენიმე მნიშვნელოვანი წერტილი, რაც შედის Twitter Bootstrap-ში, როგორც Bootstrap-ის ნაწილი. გადადით Bootstrap ვებსაიტზე ან Github პროექტის გვერდზე, რომ ჩამოტვირთოთ და გაიგოთ მეტი.

ფერის ცვლადები

Less-ში ცვლადები შესანიშნავია თქვენი CSS თავის ტკივილის შესანარჩუნებლად და განახლებისთვის. როდესაც გსურთ შეცვალოთ ფერის მნიშვნელობა ან ხშირად გამოყენებული მნიშვნელობა, განაახლეთ იგი ერთ ადგილზე და მზად ხართ.

// ბმულები
@linkColor : #8b59c2;         
@linkColorHover :     ჩაბნელება ( @linkColor , 10 ); 
// ნაცრისფერი
@შავი : #000;             
@grayDark :           გაღიავება ( @შავი , 25 %); 
@grey :               გაღიავება ( @შავი , 50 %); 
@grayLight :          გაღიავება ( @შავი , 70 %); 
@grayLighter :        გაღიავება ( @შავი , 90 %); 
@white : #fff;             
// აქცენტი ფერები
@ლურჯი : #08b5fb ;              
@მწვანე : #46a546 ;             
@red : #9d261d;               
@ყვითელი : #ffc40d ;            
@ნარინჯისფერი : #f89406 ;            
@pink : #c3325f;              
@იისფერი : #7a43b6 ;            
// საბაზისო
@baseline : 20px ;          

კომენტირება

Less ასევე გთავაზობთ კომენტარების სხვა სტილს CSS-ის ნორმალური /* ... */სინტაქსის გარდა.

// ეს არის კომენტარი
/* ესეც კომენტარია */

ურევს ვაზოს

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

შრიფტის დასტა

#შრიფტი {
  . სტენოგრამა ( @weight : ნორმალური , @size : 14px , @lineheight : 20px ) {     
    შრიფტის ზომა : @size ; _ 
    font - weight : @weight ; 
    ხაზი - სიმაღლე : @lineHeight ; 
  }
  . sans - serif ( @weight : ნორმალური , @size : 14px , @lineსიმაღლე : 20px ) {     
    font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    შრიფტის ზომა : @size ; _ 
    font - weight : @weight ; 
    ხაზი - სიმაღლე : @lineHeight ; 
  }
  . serif ( @weight : ნორმალური , @size : 14px , @lineსიმაღლე : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    შრიფტის ზომა : @size ; _ 
    font - weight : @weight ; 
    ხაზი - სიმაღლე : @lineHeight ; 
  }
  . monospace ( @weight : ნორმალური , @size : 12px , @lineheight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
    შრიფტის ზომა : @size ; _ 
    font - weight : @weight ; 
    ხაზი - სიმაღლე : @lineHeight ; 
  }
}

გრადიენტები

#გრადიენტი {
  . ჰორიზონტალური ( @startColor : #555, @endColor: #333) { 
    ფონი - ფერი : @endColor ; 
    ფონი - გამეორება : გამეორება - x ;
    ფონი - სურათი : - khtml - გრადიენტი ( წრფივი , მარცხნივ ზედა , მარჯვენა ზევით , ( @startColor ), ( @endColor ) - მდე ); // დამპყრობელი   
    ფონი - სურათი : - moz - ხაზოვანი - გრადიენტი ( მარცხნივ , @startColor , @endColor ); // FF 3.6+    
    ფონი - სურათი : - ms - ხაზოვანი - გრადიენტი ( მარცხნივ , @startColor , @endColor ); // IE10    
    ფონი - სურათი : - webkit - გრადიენტი ( წრფივი , მარცხენა ზედა , მარჯვენა ზედა , ფერი - გაჩერება ( 0 %, @startColor ), ფერი - გაჩერება ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    ფონი - სურათი : - webkit - ხაზოვანი - გრადიენტი ( მარცხნივ , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    ფონი - სურათი : - o - წრფივი - გრადიენტი ( მარცხნივ , @startColor , @endColor ); // Opera 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 და IE7 
    ფონი - სურათი : ხაზოვანი - გრადიენტი ( მარცხნივ , @startColor , @endColor ); // ლე სტანდარტი   
  }
  . ვერტიკალური ( @startColor : #555, @endColor: #333) { 
    ფონი - ფერი : @endColor ; 
    ფონი - გამეორება : გამეორება - x ;
    ფონი - სურათი : - khtml - გრადიენტი ( წრფივი , მარცხნივ ზედა , მარცხნივ ქვემოდან , ( @startColor ), ( @endColor ) - მდე ); // დამპყრობელი   
    ფონი - სურათი : - moz - ხაზოვანი - გრადიენტი ( @startColor , @endColor ); // FF 3.6+   
    ფონი - სურათი : - ms - ხაზოვანი - გრადიენტი ( @startColor , @endColor ); // IE10   
    ფონი - სურათი : - webkit - გრადიენტი ( წრფივი , მარცხნივ ზედა , მარცხენა ქვედა , ფერი - გაჩერება ( 0 %, @startColor ), ფერი - გაჩერება ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    ფონი - სურათი : - webkit - ხაზოვანი - გრადიენტი ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    ფონი - სურათი : - o - წრფივი - გრადიენტი ( @startColor , @endColor ); // Opera 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 და IE7 
    ფონი - სურათი : ხაზოვანი - გრადიენტი ( @startColor , @endColor ); // Სტანდარტი  
  }
  . მიმართულების ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . ვერტიკალური - სამი - ფერები ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

ოპერაციები და ქსელის სისტემა

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

//გრიდიტუდი
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// ბადის სისტემა
. კონტეინერი {
  სიგანე : @siteWidth ; 
  ზღვარი : 0 ავტო ;  
  . გარკვევა ();
}
. სვეტები ( @columnSpan : 1 ) {  
  ჩვენება : inline ; 
  float : მარცხნივ ;
  სიგანე : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  ზღვარი - მარცხენა : @gridGutterWidth ; 
  &: პირველი - შვილი {
    ზღვარი - მარცხნივ : 0 ; 
  }
}
. ოფსეტი ( @columnOffset : 1 ) {  
  ზღვარი - მარცხნივ : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! მნიშვნელოვანი ;          
}