ბაზის CSS

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

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

ტიპოგრაფიული მასშტაბი

მთელი ტიპოგრაფიული ბადე ეფუძნება ორ Less ცვლადს ჩვენს variables.less ფაილში: @baseFontSizeდა @baseLineHeight. პირველი არის საბაზისო შრიფტის ზომა, რომელიც გამოიყენება მთელს ტერიტორიაზე და მეორე არის საბაზისო ხაზის სიმაღლე.

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

სხეულის ტექსტის მაგალითი

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.

წამყვანი სხეულის ასლი

გააკეთეთ აბზაცის გამორჩევა დამატებით .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

h1. სათაური 1

h2. სათაური 2

h3. სათაური 3

h4. სათაური 4

h5. სათაური 5
h6. სათაური 6

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

ელემენტი გამოყენება სურვილისამებრ
<strong> ტექსტის ფრაგმენტის მნიშვნელოვანი ხაზგასმისთვის არცერთი
<em> ტექსტის ფრაგმენტზე სტრესით ხაზგასმისთვის არცერთი
<abbr> ახვევს აბრევიატურებს და აკრონიმებს, რათა აჩვენოს გაფართოებული ვერსია ჰოვერზე

ჩართეთ არასავალდებულო titleატრიბუტი გაფართოებული ტექსტისთვის

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

აქცენტის გამოყენება

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
სრული სახელი
[email protected]

აბრევიატურების მაგალითები

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

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

HTML არის საუკეთესო რამ დაჭრილი პურის შემდეგ.

სიტყვის ატრიბუტის აბრევიატურა არის attr .

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

ელემენტი გამოყენება სურვილისამებრ
<blockquote> ბლოკის დონის ელემენტი სხვა წყაროდან კონტენტის ციტირებისთვის

დაამატეთ citeატრიბუტი წყაროს URL-ისთვის

გამოყენება .pull-leftდა .pull-rightკლასები მოძრავი ვარიანტებისთვის
<small> არასავალდებულო ელემენტი მომხმარებლის წინაშე არსებული ციტატის დასამატებლად, როგორც წესი, ავტორი ნაწარმოების სათაურით მოათავსეთ წყაროს <cite>სათაურის ან სახელის ირგვლივ

ბლოკციტატის ჩასართავად, ციტატის სახით შემოიხვიეთ <blockquote>ნებისმიერი HTML . პირდაპირი ციტატებისთვის ჩვენ გირჩევთ <p>.

ჩართეთ არასავალდებულო <small>ელემენტი თქვენი წყაროს მითითებისთვის და მის წინ მიიღებთ ტირეს &mdash;სტილის მიზნებისთვის.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. მთელი რიცხვი posuere erat a ante venenatis. </p>
  3. <small> ვინმე ცნობილი </small>
  4. </blockquote>

ბლოკციტატების მაგალითები

ნაგულისხმევი ბლოკციტატების სტილი ასეა:

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

ვინმე ცნობილი Body of work- ში

თქვენი ბლოკციტატის მარჯვნივ გადასატანად, დაამატეთ class="pull-right":

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

ვინმე ცნობილი Body of work- ში

სიები

შეუკვეთელი

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

ჰორიზონტალური აღწერა

<dl class="dl-horizontal">

აღწერილობის სიები
აღწერის სია შესანიშნავია ტერმინების განსაზღვრისთვის.
ევისმოდი
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.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Თავები მაღლა! ჰორიზონტალური აღწერილობის სიები შეაკვეცებს ტერმინებს, რომლებიც ზედმეტად გრძელია მარცხენა სვეტში შესასწორებლად text-overflow. ვიწრო ხედებში, ისინი შეიცვლება ნაგულისხმევ დაწყობილ განლაგებაზე.

Ხაზში

შეფუთეთ კოდის შიდა ნაწყვეტები <code>.

  1. მაგალითად , <code> განყოფილება < / code > უნდა იყოს შეფუთული როგორც inline .

ძირითადი ბლოკი

გამოიყენეთ <pre>კოდის მრავალი ხაზისთვის. დარწმუნდით, რომ გამორთეთ კოდში ნებისმიერი კუთხის ფრჩხილები სათანადო რენდერისთვის.

<p>ტექსტის ნიმუში აქ...</p>
  1. <წინასწარ>
  2. <p>ტექსტის ნიმუში აქ...</p>
  3. </pre>

შენიშვნა: დარწმუნდით, რომ შეინახეთ კოდი <pre>ტეგებში რაც შეიძლება ახლოს მარცხნივ; ის გამოიტანს ყველა ჩანართს.

სურვილისამებრ შეგიძლიათ დაამატოთ .pre-scrollableკლასი, რომელიც დააყენებს მაქსიმალურ სიმაღლეს 350 პიქსელს და უზრუნველყოფს y-ღერძის გადახვევის ზოლს.

Google Prettify

აიღეთ იგივე <pre>ელემენტი და დაამატეთ ორი არჩევითი კლასი გაუმჯობესებული რენდერისთვის.

  1. <p> ტექსტის ნიმუში აქ... </p>
  1. <pre class = "prettyprint
  2. თეთრეული" >
  3. <p>ტექსტის ნიმუში აქ...</p>
  4. </pre>

ჩამოტვირთეთ google-code-prettify და ნახეთ readme, თუ როგორ გამოიყენოთ.

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

მონიშნეთ აღწერა
<table> შეფუთვის ელემენტი მონაცემების ცხრილის ფორმატში ჩვენებისთვის
<thead> კონტეინერის ელემენტი ცხრილის სათაურის რიგებისთვის ( <tr>) ცხრილის სვეტების ლეიბლისთვის
<tbody> კონტეინერის ელემენტი ცხრილის რიგებისთვის ( <tr>) ცხრილის სხეულში
<tr> კონტეინერის ელემენტი ცხრილის უჯრედების ნაკრებისთვის ( <td>ან <th>), რომელიც გამოჩნდება ერთ მწკრივზე
<td> ცხრილის ნაგულისხმევი უჯრედი
<th> ცხრილის სპეციალური უჯრედი სვეტის (ან მწკრივის, არეალის და განლაგების მიხედვით) ლეიბლებისთვის
უნდა იყოს გამოყენებული<thead>
<caption> ცხრილის აღწერა ან შეჯამება, განსაკუთრებით გამოსადეგია ეკრანის მკითხველებისთვის
  1. <მაგიდა>
  2. <თავი>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

მაგიდის ვარიანტები

სახელი Კლასი აღწერა
ნაგულისხმევი არცერთი სტილის გარეშე, მხოლოდ სვეტები და რიგები
ძირითადი .table მხოლოდ ჰორიზონტალური ხაზები მწკრივებს შორის
შემოსაზღვრული .table-bordered ამრგვალებს კუთხეებს და ამატებს გარე საზღვარს
ზებრა-ზოლი .table-striped ამატებს ღია ნაცრისფერ ფონის ფერს კენტ რიგებს (1, 3, 5 და ა.შ.)
შედედებული .table-condensed ჭრის ვერტიკალურ ბალიშს ნახევრად, 8 პიქსელიდან 4 პიქსამდე, ყველა tdდა thელემენტში

მაგიდების ცხრილები

1. ცხრილის ნაგულისხმევი სტილები

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

  1. <table class = "table" >
  2. </table>
# Სახელი Გვარი მომხმარებლის სახელი
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter

2. ზოლიანი მაგიდა

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

შენიშვნა: ზოლიანი ცხრილები იყენებს :nth-childCSS ამომრჩეველს და მიუწვდომელია IE7-IE8-ში.

  1. <table class = "table table-striped" >
  2. </table>
# Სახელი Გვარი მომხმარებლის სახელი
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter

3. შემოსაზღვრული მაგიდა

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

  1. <table class = "table table-bordered" >
  2. </table>
# Სახელი Გვარი მომხმარებლის სახელი
1 მარკო ოთო @mdo
მარკო ოთო @getbootstrap
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter

4. შედედებული მაგიდა

გახადეთ თქვენი ცხრილები უფრო კომპაქტური .table-condensedკლასის დამატებით, რათა განახევროთ ცხრილის უჯრედების ბალიშები (8 პიქსელიდან 4 პიქსამდე).

  1. <table class = "table table-condensed" >
  2. </table>
# Სახელი Გვარი მომხმარებლის სახელი
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter

5. შეუთავსეთ ისინი ყველა!

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

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
Სრული სახელი
# Სახელი Გვარი მომხმარებლის სახელი
1 მარკო ოთო @mdo
2 იაკობ თორნტონი @ fat
3 ლარი ჩიტი @twitter

მოქნილი HTML და CSS

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

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

შედის ოთხი განლაგება

Bootstrap გააჩნია ოთხი ტიპის ფორმის განლაგების მხარდაჭერა:

  • ვერტიკალური (ნაგულისხმევი)
  • ძიება
  • Ხაზში
  • Ჰორიზონტალური

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

აკონტროლეთ სახელმწიფოები და სხვა

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

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

ოთხი სახის ფორმა

Bootstrap გთავაზობთ მარტივ მარკირებას და სტილებს საერთო ვებ ფორმების ოთხი სტილისთვის.

სახელი Კლასი აღწერა
ვერტიკალური (ნაგულისხმევი) .form-vertical (არ არის საჭირო) დაწყობილი, მარცხნივ გასწორებული ლეიბლები კონტროლებზე
Ხაზში .form-inline მარცხნივ გასწორებული ლეიბლი და ბლოკის შიდა კონტროლი კომპაქტური სტილისთვის
ძიება .form-search დამატებითი მომრგვალებული ტექსტის შეყვანა ტიპიური საძიებო ესთეტიკისთვის
Ჰორიზონტალური .form-horizontal მოძრავი მარცხნივ, მარჯვნივ გასწორებული ლეიბლები იმავე ხაზზე, როგორც კონტროლი

ფორმების მაგალითები მხოლოდ ფორმის კონტროლის გამოყენებით, დამატებითი მარკირების გარეშე

ძირითადი ფორმა

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

ბლოკის დონის დახმარების ტექსტის მაგალითი აქ.

  1. <form class = "კარგად" >
  2. <label> ლეიბლის სახელი </label>
  3. <input type = "text" class = "span3" placeholder = "აკრიფე რამე..." >
  4. <span class = "help-block" > ბლოკის დონის დახმარების ტექსტის მაგალითი აქ. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > შემომხედეთ
  7. </label>
  8. <button type = "submit" class = "btn" > გაგზავნა </button>
  9. </form>

საძიებო ფორმა

დაამატეთ .form-searchფორმაში .search-queryდა input.

  1. <form class = "კარგად ფორმა-ძიება" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > ძიება </button>
  4. </form>

ინლაინ ფორმა

დახვეწას დაამატეთ .form-inlineფორმის კონტროლის ვერტიკალური გასწორება და დაშორება.

  1. <form class = " well form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "ელფოსტა" >
  3. <input type = "password" class = "input-small" placeholder = "პაროლი" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > დამიმახსოვრე
  6. </label>
  7. <button type = "submit" class = "btn" > შედით </button>
  8. </form>

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

მარჯვნივ ნაჩვენებია ყველა ნაგულისხმევი ფორმის კონტროლი, რომელსაც ჩვენ ვუჭერთ მხარს. აქ არის ბურთულებიანი სია:

  • ტექსტის შეყვანა (ტექსტი, პაროლი, ელფოსტა და ა.შ.)
  • ჩამრთველი
  • რადიო
  • აირჩიეთ
  • მრავალჯერადი შერჩევა
  • ფაილის შეყვანა
  • ტექსტური ზონა

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

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

ზემოთ მოყვანილი მაგალითის ფორმის განლაგების გათვალისწინებით, აქ არის მარკირება, რომელიც დაკავშირებულია პირველ შეყვანის და საკონტროლო ჯგუფთან. , .control-group, .control-labelდა .controlsკლასები საჭიროა სტილისთვის.

  1. <form class = "ფორმა-ჰორიზონტალური" >
  2. <fieldset>
  3. <legend> ლეგენდის ტექსტი </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > ტექსტის შეყვანა </label>
  6. <div class = "კონტროლები" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > დამხმარე დახმარების ტექსტი </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

ფორმის კონტროლის ქვეყნები

Bootstrap ახასიათებს სტილებს ბრაუზერის მიერ მხარდაჭერილი ფოკუსირებული და disabledმდგომარეობებისთვის. ჩვენ ვხსნით ნაგულისხმევ Webkit- outlineს და ვიყენებთ box-shadowმის ადგილას :focus.


ფორმის დადასტურება

ის ასევე შეიცავს შეცდომების, გაფრთხილებების და წარმატების ვალიდაციის სტილებს. გამოსაყენებლად დაამატეთ შეცდომის კლასი გარემომცველს .control-group.

  1. <ველების ნაკრები
  2. class = "საკონტროლო ჯგუფის შეცდომა" >
  3. </fieldset>
გარკვეული ღირებულება აქ
შეიძლება რაღაც არასწორედ წარიმართა
გთხოვთ შეასწოროთ შეცდომა
უუუუ!
უუუუ!

ფორმის კონტროლის გაფართოება

შეყვანის დამატება და დამატება

შეყვანის ჯგუფები — დამატებული ან წინასწარ დამაგრებული ტექსტით — გთავაზობთ მარტივ გზას თქვენი შეყვანისთვის მეტი კონტექსტის მისაცემად. შესანიშნავი მაგალითებია @ ნიშანი Twitter-ის მომხმარებლის სახელებისთვის ან $ ფინანსებისთვის.


ჩექმები და რადიოები

1.4-მდე, Bootstrap მოითხოვდა დამატებით მარკირებას ყუთებისა და რადიოების გარშემო მათი დასაწყობად. ახლა, მარტივი საკითხია გამეორება, <label class="checkbox">რომელიც ახვევს <input type="checkbox">.

ასევე მხარდაჭერილია ჩამრთველი ველები და რადიოები. უბრალოდ დაამატეთ .inlineრომელიმე .checkboxან .radioდა დასრულებულია.


ჩასმული ფორმები და მიმაგრება/მიმაგრება

იმისათვის, რომ გამოიყენოთ შეყვანის ან ჩასმული შენატანები ჩასმული ფორმით, დარწმუნდით, რომ მოათავსეთ .add-onდა inputიმავე ხაზზე, ინტერვალის გარეშე.


ჩამოაყალიბეთ დახმარების ტექსტი

თქვენი ფორმის შეყვანისთვის დახმარების ტექსტის დასამატებლად, შეიტანეთ დახმარების ტექსტი <span class="help-inline">ან დახმარების ტექსტის ბლოკი <p class="help-block">შეყვანის ელემენტის შემდეგ.

გამოიყენეთ იგივე .span*კლასები ქსელის სისტემიდან შეყვანის ზომებისთვის.

თქვენ ასევე შეგიძლიათ გამოიყენოთ სტატიკური კლასები, რომლებიც არ ასახავს ქსელს, არ მოერგება პასუხისმგებელ CSS სტილებს ან არ ითვალისწინებს სხვადასხვა ტიპის კონტროლს (მაგ., inputvs. select).

@

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

.00
აქ არის მეტი დახმარების ტექსტი
$ .00

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

ღილაკი კლასი = "" აღწერა
btn სტანდარტული ნაცრისფერი ღილაკი გრადიენტით
btn btn-primary უზრუნველყოფს დამატებით ვიზუალურ წონას და ამოიცნობს ძირითად მოქმედებას ღილაკების კომპლექტში
btn btn-info გამოიყენება როგორც ნაგულისხმევი სტილის ალტერნატივა
btn btn-success მიუთითებს წარმატებულ ან დადებით მოქმედებაზე
btn btn-warning მიუთითებს, რომ სიფრთხილე უნდა იქნას მიღებული ამ ქმედებით
btn btn-danger მიუთითებს საშიშ ან პოტენციურად უარყოფით მოქმედებაზე
btn btn-inverse ალტერნატიული მუქი ნაცრისფერი ღილაკი, რომელიც არ არის მიბმული სემანტიკურ მოქმედებასთან ან გამოყენებასთან

ღილაკები მოქმედებებისთვის

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

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

ჯვარედინი ბრაუზერის თავსებადობა

IE9 არ ჭრის ფონის გრადიენტებს მომრგვალებულ კუთხეებზე, ამიტომ ჩვენ მას ვხსნით. ამასთან, IE9 ათავისუფლებს გამორთული buttonელემენტების, ტექსტს ნაცრისფერს ანიჭებს საზიზღარი ტექსტის ჩრდილით, რომელსაც ჩვენ ვერ გამოვასწორებთ.

მრავალრიცხოვანი ზომები

გსურთ უფრო დიდი თუ პატარა ღილაკები? დაამატეთ .btn-large, .btn-smallან .btn-miniორი დამატებითი ზომისთვის.


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

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

პირველადი ბმული Ბმული

Თავები მაღლა! ჩვენ ვიყენებთ .disabledროგორც სასარგებლო კლასს აქ, ჩვეულებრივი .activeკლასის მსგავსი, ამიტომ პრეფიქსი არ არის საჭირო.

ერთი კლასი, მრავალი ტეგი

გამოიყენეთ .btnკლასი <a>, <button>, ან <input>ელემენტზე.

Ბმული
  1. <a class = "btn" href = "" > ბმული </a>
  2. <button class = "btn" type = "submit" >
  3. ღილაკი
  4. </button>
  5. <input class = "btn" type = "ღილაკი"
  6. მნიშვნელობა = "შეყვანა" >
  7. <input class = "btn" type = "submit"
  8. value = "გაგზავნა" >

როგორც საუკეთესო პრაქტიკა, შეეცადეთ დაამთხვიოთ ელემენტი თქვენთვის კონტექსტში, რათა უზრუნველყოთ ბრაუზერის ჯვარედინი რენდერის შესატყვისი. თუ გაქვთ input, გამოიყენეთ <input type="submit">თქვენი ღილაკისთვის.

  • ხატ-მინა
  • ხატი-მუსიკა
  • ხატის ძებნა
  • ხატი-კონვერტი
  • ხატი-გული
  • ხატ-ვარსკვლავი
  • ხატი-ვარსკვლავი-ცარიელი
  • ხატი-მომხმარებელი
  • ხატი-ფილმი
  • ხატი-დიდი
  • ხატი-ე
  • ხატის სია
  • ხატულა - კარგი
  • ხატის ამოღება
  • icon-zoom-in
  • icon-zoom-out
  • ხატის გამორთვა
  • ხატი-სიგნალი
  • ხატ-ღერძი
  • ხატი-ნაგავი
  • ხატი-სახლი
  • ხატი-ფაილი
  • ხატის დრო
  • ხატი-გზა
  • icon-download-alt
  • ხატის ჩამოტვირთვა
  • ხატის ატვირთვა
  • ხატულა-ინბოქსი
  • ხატი-თამაში-წრე
  • ხატი-გამეორება
  • ხატის განახლება
  • icon-list-alt
  • ხატის დაბლოკვა
  • ხატი-დროშა
  • ხატულა-ყურსასმენები
  • ხატულა-მოცულობის გამორთვა
  • ხატი-მოცულობის შემცირება
  • ხატი-მოცულობის გაზრდა
  • ხატი-qrcode
  • ხატი-შტრიხკოდი
  • ხატი-ტეგი
  • ხატულა-ტეგები
  • ხატ-წიგნი
  • ხატი-სანიშნე
  • ხატის ბეჭდვა
  • ხატი-კამერა
  • ხატი-შრიფტი
  • ხატ-გამბედავი
  • ხატი-დახრილი
  • ხატი-ტექსტი-სიმაღლე
  • ხატი-ტექსტი-სიგანე
  • ხატულა-გასწორება-მარცხნივ
  • icon-align-center
  • ხატულა-გასწორება-მარჯვნივ
  • ხატი-გასწორება-გამართლება
  • ხატების სია
  • ხატულა-შეწევა-მარცხნივ
  • ხატულა-შეწევა-მარჯვნივ
  • ხატი-facetime-ვიდეო
  • ხატი-სურათი
  • ხატი-ფანქარი
  • ხატი-რუქა-მარკერი
  • ხატულა-მორგება
  • ხატი-ელფერით
  • ხატი-რედაქტირება
  • ხატი-გაზიარება
  • ხატის შემოწმება
  • ხატი - გადაადგილება
  • ხატი-ნაბიჯი-უკან
  • ხატულა-სწრაფი-უკან
  • ხატი-უკან
  • ხატ-თამაში
  • ხატი-პაუზა
  • ხატი-გაჩერება
  • ხატი-წინ
  • icon-fast-forward
  • ხატი-ნაბიჯი-წინ
  • ხატის ამოღება
  • ხატი-შევრონი-მარცხნივ
  • ხატი-შევრონი-მარჯვნივ
  • ხატი-პლუს-ნიშანი
  • ხატი-მინუს-ნიშანი
  • icon-remove-sign
  • ხატულა-ok-ნიშანი
  • ხატი-კითხვა-ნიშანი
  • ხატი-ინფორმაცია-ნიშანი
  • ხატულა-სკრინშოტი
  • icon-remove-circle
  • ხატი-ok-წრე
  • ხატი-ბან-წრე
  • ხატულა-ისარი-მარცხნივ
  • ხატი-ისარი-მარჯვნივ
  • ხატი-ისარი-ზემოთ
  • ხატი-ისარი-ქვემო
  • icon-share-alt
  • icon-size-full
  • icon-size-small
  • ხატი-პლუს
  • ხატი-მინუს
  • ხატი-ვარსკვლავი
  • ხატი-ძახილის ნიშანი
  • ხატი-საჩუქარი
  • ხატ-ფოთოლი
  • ხატ-ცეცხლი
  • ხატი-თვალგახელილი
  • ხატი-თვალის დახუჭვა
  • ხატი-გამაფრთხილებელი ნიშანი
  • ხატი-თვითმფრინავი
  • ხატი-კალენდარი
  • ხატი - შემთხვევითი
  • ხატი-კომენტარი
  • ხატი-მაგნიტი
  • ხატი-შევრონი
  • ხატი-შევრონი-ქვემო
  • ხატი-რეტვიტი
  • ხატი-საყიდლების კალათა
  • ხატულა-საქაღალდე-დახურვა
  • ხატულა-საქაღალდე-გახსნა
  • icon-size-ვერტიკალური
  • icon-size-horizontal
  • ხატულა-hdd
  • ხატი-bullhorn
  • ხატი-ზარი
  • ხატი-სერთიფიკატი
  • ხატი-თითები
  • ხატი ცერა ქვევით
  • ხატი-ხელ-მარჯვნივ
  • ხატი-ხელ-მარცხნივ
  • ხატ-ხელი
  • ხატი-ხელ-ქვემო
  • ხატი-წრე-ისარი-მარჯვნივ
  • ხატი-წრე-ისარი-მარცხნივ
  • ხატი-წრე-ისარი-ზემოთ
  • ხატი-წრე-ისარი-ქვემო
  • ხატი-გლობუსი
  • ხატულას გასაღები
  • ხატი-დავალებები
  • ხატულა-ფილტრი
  • ხატი-პორტფელი
  • ხატი სრულ ეკრანზე

აგებულია როგორც სპრაიტი

იმის ნაცვლად, რომ ყველა ხატულა დამატებითი მოთხოვნა იყოს, ჩვენ შევკრიბეთ ისინი sprite-ში - სურათების თაიგულები ერთ ფაილში, რომელიც იყენებს CSS-ს სურათების პოზიციონირებისთვის background-position. ეს არის იგივე მეთოდი, რომელსაც ჩვენ ვიყენებთ Twitter.com-ზე და ის ჩვენთვის კარგად მუშაობდა.

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

Glyphicons- მა მოგვცა საშუალება გამოგვეყენებინა Halflings კომპლექტი ჩვენს ღია კოდის ინსტრუმენტთა ნაკრების შემადგენლობაში, სანამ ჩვენ გთავაზობთ ბმულს და კრედიტს აქ დოკუმენტებში. გთხოვთ, იგივე გააკეთოთ თქვენს პროექტებში.

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

Bootstrap იყენებს <i>ტეგს ყველა ხატისთვის, მაგრამ მათ არ აქვთ ქეისის კლასი — მხოლოდ საერთო პრეფიქსი. გამოსაყენებლად, განათავსეთ შემდეგი კოდი თითქმის ყველგან:

  1. <i class = "icon-search" ></i>

ასევე ხელმისაწვდომია სტილები ინვერსიული (თეთრი) ხატებისთვის, რომლებიც მზადდება ერთი დამატებითი კლასით:

  1. <i class = "icon-search icon-white" ></i>

არსებობს 140 კლასი, რომელთაგან შეგიძლიათ აირჩიოთ თქვენი ხატები. უბრალოდ დაამატეთ <i>ტეგი სწორი კლასებით და მზად იქნებით. თქვენ შეგიძლიათ იპოვოთ სრული სია sprites.less-ში ან პირდაპირ აქ ამ დოკუმენტში.

Თავები მაღლა! ტექსტის სტრიქონების გვერდით გამოყენებისას, როგორც ღილაკებში ან ნავიგ ბმულებში, დარწმუნდით, რომ დატოვეთ სივრცე <i>ტეგის შემდეგ სათანადო ინტერვალისთვის.

გამოიყენეთ შემთხვევები

ხატები შესანიშნავია, მაგრამ სად შეიძლება გამოიყენო ისინი? აქ არის რამდენიმე იდეა:

  • როგორც ვიზუალი თქვენი გვერდითი ზოლის ნავიგაციისთვის
  • წმინდა ხატებზე ორიენტირებული ნავიგაციისთვის
  • ღილაკებისთვის, რომლებიც დაგეხმარებათ მოქმედების მნიშვნელობის გადმოცემაში
  • ბმულებით მომხმარებლის დანიშნულების ადგილის კონტექსტის გასაზიარებლად

არსებითად, ყველგან, სადაც შეგიძლიათ განათავსოთ <i>ტეგი, შეგიძლიათ განათავსოთ ხატი.

მაგალითები

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