ისტორია

Twitter-ის ადრინდელ დღეებში, ინჟინრები იყენებდნენ თითქმის ნებისმიერ ბიბლიოთეკას, რომელსაც იცნობდნენ, წინა მოთხოვნების დასაკმაყოფილებლად. Bootstrap დაიწყო, როგორც პასუხი იმ გამოწვევებზე, რომლებიც წარმოდგენილ იქნა და განვითარება სწრაფად დაჩქარდა Twitter-ის პირველი Hackweek-ის დროს.

Twitter-ის მრავალი ინჟინრის დახმარებითა და გამოხმაურებით, Bootstrap მნიშვნელოვნად გაიზარდა და მოიცავდა არა მხოლოდ ძირითად სტილებს, არამედ უფრო ელეგანტურ და გამძლე წინა დიზაინის ნიმუშებს.

წაიკითხეთ მეტი dev.twitter.com-ზე ›

ბრაუზერის მხარდაჭერა

Bootstrap ტესტირებულია და მხარდაჭერილია ძირითად თანამედროვე ბრაუზერებში, როგორიცაა Chrome, Safari, Internet Explorer და Firefox.

• უახლესი Safari
• უახლესი Google Chrome
• Firefox 4+
• Internet Explorer 7+

რა შედის

Bootstrap მოყვება კომპილირებული CSS, არაკომპილირებული და მაგალითების შაბლონები.

• ყველა ორიგინალური .less ფაილი
• სრულად შედგენილი და მინიფიცირებული CSS
• სტილის სახელმძღვანელოს სრული დოკუმენტაცია
• გვერდის ნიმუშის შაბლონი (მეტი მალე იქნება)

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

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

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

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

<div class="row"> 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> <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.

შენიშვნა: ჯერ კიდევ კარგია HTML5-ში გამოყენება <b>და <i>ტეგები, მაგრამ ისინი აღარ მოყვება თანდაყოლილ სტილებს. <b>მიზნად ისახავს სიტყვების ან ფრაზების ხაზგასმას დამატებითი მნიშვნელობის გადმოცემის გარეშე, ხოლო <i>ძირითადად ხმისთვის, ტექნიკური ტერმინებისთვის და ა.შ.

მისამართები

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

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

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

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

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

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

<blockquote> <p> <small>

როგორ ციტირება

ბლოკციტატის ჩასართავად, შემოახვიეთ <blockquote>და <p>მონიშნეთ <small>. გამოიყენეთ <small>ელემენტი თქვენი წყაროს მოსაყვანად და მის წინ მიიღებთ em ტირე —.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. მთელი რიცხვი posuere erat a ante venenatis dapibus posuere velit aliquet.

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

უწესრიგო<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• მთელი რიცხვი molestie lorem at massa
• გამარტივება პრეტიუმ ნისლ ალიკეტში
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• ენეან იჯდეს ამეთ ერატ ნუნც
• ეგეთი პორტტიტორი ლორემი

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

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• მთელი რიცხვი molestie lorem at massa
• გამარტივება პრეტიუმ ნისლ ალიკეტში
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• ენეან იჯდეს ამეთ ერატ ნუნც
• ეგეთი პორტტიტორი ლორემი

უბრძანა<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. მთელი რიცხვი molestie lorem at massa
4. გამარტივება პრეტიუმ ნისლ ალიკეტში
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
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	სტუ	დენტი	კოდი

შენიშვნა: Zebra-striping არის პროგრესული გაუმჯობესება, რომელიც მიუწვდომელია ძველი ბრაუზერებისთვის, როგორიცაა IE8 და ქვემოთ.

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

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

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

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

<script src="js/jquery/jquery.tablesorter.min.js"></script> 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

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

X-Large შეყვანა

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

ოფციების სია

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

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

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

ღილაკები

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

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

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

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

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

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

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

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

ბმულები

ღილაკები

Რა არის ეს

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

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

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

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

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

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

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

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

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

<ul 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 = "აბი" > 
  <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 = "გვერდები" > 
  <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>

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

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

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

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

მოდალები

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

ინსტრუმენტების რჩევები

Twipsies ძალიან სასარგებლოა დაბნეული მომხმარებლის დასახმარებლად და სწორი მიმართულებით მითითებისთვის.

პოპოვერები

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

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

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

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

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

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "ყველა" />    
<script 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 ); // ოპერა 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 ; 
  ათწილადი : მარცხნივ ;
  სიგანე : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan         - 1 )); 
  ზღვარი - მარცხნივ :  @gridGutterWidth ;
  &: პირველი - შვილი {
    ზღვარი - მარცხნივ :  0 ;
  }
}
. ოფსეტი ( @columnOffset : 1  ) { 
  ზღვარი - მარცხნივ : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! მნიშვნელოვანი ;          
}