ხარაჩოების თავზე, ძირითადი 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 ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
| ელემენტი | გამოყენება | სურვილისამებრ |
|---|---|---|
<strong> |
ტექსტის ფრაგმენტის მნიშვნელოვანი ხაზგასმისთვის | არცერთი |
<em> |
ტექსტის ფრაგმენტზე სტრესით ხაზგასმისთვის | არცერთი |
<abbr> |
ახვევს აბრევიატურებს და აკრონიმებს, რათა აჩვენოს გაფართოებული ვერსია ჰოვერზე | ჩართეთ არასავალდებულო .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>შეიძლება გამოიყენოთ ტეგი:
ატრიბუტის მქონე აბრევიატურებს titleაქვთ მსუბუქი წერტილოვანი ქვედა საზღვარი და დამხმარე კურსორი მავალზე. ეს აძლევს მომხმარებლებს დამატებით მითითებას, რომ რაღაც ნაჩვენები იქნება გადასატანად.
დაამატეთ initialismკლასი აბრევიატურაში, რათა გაზარდოთ ტიპოგრაფიული ჰარმონია ტექსტის ოდნავ მცირე ზომის მიცემით.
HTML არის საუკეთესო რამ დაჭრილი პურის შემდეგ.
სიტყვის ატრიბუტის აბრევიატურა არის attr .
| ელემენტი | გამოყენება | სურვილისამებრ |
|---|---|---|
<blockquote> |
ბლოკის დონის ელემენტი სხვა წყაროდან კონტენტის ციტირებისთვის | დაამატეთ .pull-leftდა .pull-rightკლასები მოძრავი ვარიანტებისთვის |
<small> |
არასავალდებულო ელემენტი მომხმარებლის წინაშე არსებული ციტატის დასამატებლად, როგორც წესი, ავტორი ნაწარმოების სათაურით | მოათავსეთ წყაროს <cite>სათაურის ან სახელის ირგვლივ |
ბლოკციტატის ჩასართავად, ციტატის სახით შემოიხვიეთ <blockquote>ნებისმიერი HTML . პირდაპირი ციტატებისთვის ჩვენ გირჩევთ <p>.
ჩართეთ არასავალდებულო <small>ელემენტი თქვენი წყაროს მითითებისთვის და მის წინ მიიღებთ ტირეს —სტილის მიზნებისთვის.
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. მთელი რიცხვი posuere erat a ante venenatis. </p>
- <small> ვინმე ცნობილი </small>
- </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>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Თავები მაღლა! ჰორიზონტალური აღწერილობის სიები შეაკვეცებს ტერმინებს, რომლებიც ზედმეტად გრძელია მარცხენა სვეტში შესასწორებლად text-overflow. ვიწრო ხედებში, ისინი შეიცვლება ნაგულისხმევ დაწყობილ განლაგებაზე.
შეფუთეთ კოდის შიდა ნაწყვეტები <code>.
- მაგალითად , <code> განყოფილება < / code > უნდა იყოს შეფუთული როგორც inline .
გამოიყენეთ <pre>კოდის მრავალი ხაზისთვის. დარწმუნდით, რომ გამორთეთ კოდში ნებისმიერი კუთხის ფრჩხილები სათანადო რენდერისთვის.
<p>ტექსტის ნიმუში აქ...</p>
- <წინასწარ>
- <p>ტექსტის ნიმუში აქ...</p>
- </pre>
შენიშვნა: დარწმუნდით, რომ შეინახეთ კოდი <pre>ტეგებში რაც შეიძლება ახლოს მარცხნივ; ის გამოიტანს ყველა ჩანართს.
სურვილისამებრ შეგიძლიათ დაამატოთ .pre-scrollableკლასი, რომელიც დააყენებს მაქსიმალურ სიმაღლეს 350 პიქსელს და უზრუნველყოფს y-ღერძის გადახვევის ზოლს.
აიღეთ იგივე <pre>ელემენტი და დაამატეთ ორი არჩევითი კლასი გაუმჯობესებული რენდერისთვის.
- <p> ტექსტის ნიმუში აქ... </p>
- <pre class = "prettyprint
- თეთრეული" >
- <p>ტექსტის ნიმუში აქ...</p>
- </pre>
ჩამოტვირთეთ google-code-prettify და ნახეთ readme, თუ როგორ გამოიყენოთ.
| მონიშნეთ | აღწერა |
|---|---|
<table> |
შეფუთვის ელემენტი მონაცემების ცხრილის ფორმატში ჩვენებისთვის |
<thead> |
კონტეინერის ელემენტი ცხრილის სათაურის რიგებისთვის ( <tr>) ცხრილის სვეტების ლეიბლისთვის |
<tbody> |
კონტეინერის ელემენტი ცხრილის რიგებისთვის ( <tr>) ცხრილის სხეულში |
<tr> |
კონტეინერის ელემენტი ცხრილის უჯრედების ნაკრებისთვის ( <td>ან <th>), რომელიც გამოჩნდება ერთ მწკრივზე |
<td> |
ცხრილის ნაგულისხმევი უჯრედი |
<th> |
ცხრილის სპეციალური უჯრედი სვეტის (ან მწკრივის, არეალის და განლაგების მიხედვით) ლეიბლებისთვის უნდა იყოს გამოყენებული <thead> |
<caption> |
ცხრილის აღწერა ან შეჯამება, განსაკუთრებით გამოსადეგია ეკრანის მკითხველებისთვის |
- <მაგიდა>
- <თავი>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| სახელი | Კლასი | აღწერა |
|---|---|---|
| ნაგულისხმევი | არცერთი | სტილის გარეშე, მხოლოდ სვეტები და რიგები |
| ძირითადი | .table |
მხოლოდ ჰორიზონტალური ხაზები მწკრივებს შორის |
| შემოსაზღვრული | .table-bordered |
ამრგვალებს კუთხეებს და ამატებს გარე საზღვარს |
| ზებრა-ზოლი | .table-striped |
ამატებს ღია ნაცრისფერ ფონის ფერს კენტ რიგებს (1, 3, 5 და ა.შ.) |
| შედედებული | .table-condensed |
ჭრის ვერტიკალურ ბალიშს ნახევრად, 8 პიქსელიდან 4 პიქსამდე, ყველა tdდა thელემენტში |
ცხრილები ავტომატურად არის სტილიზებული მხოლოდ რამდენიმე საზღვრით, რათა უზრუნველყოს წაკითხვა და შეინარჩუნოს სტრუქტურა. 2.0-ით, .tableკლასი სავალდებულოა.
- <table class = "table" >
- …
- </table>
| # | Სახელი | Გვარი | მომხმარებლის სახელი |
|---|---|---|---|
| 1 | მარკო | ოთო | @mdo |
| 2 | იაკობ | თორნტონი | @ fat |
| 3 | ლარი | ჩიტი |
ზებრა-ზოლების დამატებით დაამატეთ თქვენი მაგიდები - უბრალოდ დაამატეთ .table-stripedკლასი.
შენიშვნა: ზოლიანი ცხრილები იყენებს :nth-childCSS ამომრჩეველს და მიუწვდომელია IE7-IE8-ში.
- <table class = "table table-striped" >
- …
- </table>
| # | Სახელი | Გვარი | მომხმარებლის სახელი |
|---|---|---|---|
| 1 | მარკო | ოთო | @mdo |
| 2 | იაკობ | თორნტონი | @ fat |
| 3 | ლარი | ჩიტი |
დაამატეთ საზღვრები მთელი მაგიდის გარშემო და მომრგვალებული კუთხეები ესთეტიკური მიზნებისთვის.
- <table class = "table table-bordered" >
- …
- </table>
| # | Სახელი | Გვარი | მომხმარებლის სახელი |
|---|---|---|---|
| 1 | მარკო | ოთო | @mdo |
| მარკო | ოთო | @getbootstrap | |
| 2 | იაკობ | თორნტონი | @ fat |
| 3 | ლარი ჩიტი | ||
გახადეთ თქვენი ცხრილები უფრო კომპაქტური .table-condensedკლასის დამატებით, რათა განახევროთ ცხრილის უჯრედების ბალიშები (8 პიქსელიდან 4 პიქსამდე).
- <table class = "table table-condensed" >
- …
- </table>
| # | Სახელი | Გვარი | მომხმარებლის სახელი |
|---|---|---|---|
| 1 | მარკო | ოთო | @mdo |
| 2 | იაკობ | თორნტონი | @ fat |
| 3 | ლარი ჩიტი | ||
თავისუფლად შეგიძლიათ დააკავშიროთ ცხრილის რომელიმე კლასი, რათა მიაღწიოთ განსხვავებულ გარეგნობას ნებისმიერი ხელმისაწვდომი კლასის გამოყენებით.
- <table class = "table table-striped table-bordered table-condensed" >
- ...
- </table>
| Სრული სახელი | |||
|---|---|---|---|
| # | Სახელი | Გვარი | მომხმარებლის სახელი |
| 1 | მარკო | ოთო | @mdo |
| 2 | იაკობ | თორნტონი | @ fat |
| 3 | ლარი ჩიტი | ||
Bootstrap-ში ფორმების საუკეთესო ნაწილი არის ის, რომ ყველა თქვენი შეყვანა და კონტროლი მშვენივრად გამოიყურება, მიუხედავად იმისა, თუ როგორ ააშენებთ მათ მარკირებაში. ზედმეტი HTML არ არის საჭირო, მაგრამ ჩვენ ვაძლევთ შაბლონებს მათთვის, ვინც ამას მოითხოვს.
უფრო რთულ განლაგებას მოყვება ლაკონური და მასშტაბირებადი კლასები მარტივი სტილისთვის და ღონისძიების შეკვრისთვის, ასე რომ თქვენ დაფარული ხართ ყოველ ნაბიჯზე.
Bootstrap გააჩნია ოთხი ტიპის ფორმის განლაგების მხარდაჭერა:
სხვადასხვა ტიპის ფორმის განლაგება მოითხოვს გარკვეულ ცვლილებებს მარკირებისას, მაგრამ თავად კონტროლი რჩება და იქცევა იგივე.
Bootstrap-ის ფორმები მოიცავს სტილებს ყველა საბაზისო ფორმის კონტროლისთვის, როგორიცაა შეყვანა, ტექსტური ზონა და აირჩიეთ თქვენთვის სასურველი. მაგრამ მას ასევე გააჩნია მრავალი მორგებული კომპონენტი, როგორიცაა დამატებული და წინასწარ დაყენებული შეყვანები და ჩექმების სიების მხარდაჭერა.
მდგომარეობები, როგორიცაა შეცდომა, გაფრთხილება და წარმატება, შედის ფორმის კონტროლის თითოეული ტიპისთვის. ასევე შედის სტილები გამორთული კონტროლისთვის.
Bootstrap გთავაზობთ მარტივ მარკირებას და სტილებს საერთო ვებ ფორმების ოთხი სტილისთვის.
| სახელი | Კლასი | აღწერა |
|---|---|---|
| ვერტიკალური (ნაგულისხმევი) | .form-vertical (არ არის საჭირო) |
დაწყობილი, მარცხნივ გასწორებული ლეიბლები კონტროლებზე |
| Ხაზში | .form-inline |
მარცხნივ გასწორებული ლეიბლი და ბლოკის შიდა კონტროლი კომპაქტური სტილისთვის |
| ძიება | .form-search |
დამატებითი მომრგვალებული ტექსტის შეყვანა ტიპიური საძიებო ესთეტიკისთვის |
| Ჰორიზონტალური | .form-horizontal |
მოძრავი მარცხნივ, მარჯვნივ გასწორებული ლეიბლები იმავე ხაზზე, როგორც კონტროლი |
ჭკვიანი და მსუბუქი ნაგულისხმევი პარამეტრები დამატებითი მარკირების გარეშე.
- <form class = "კარგად" >
- <label> ლეიბლის სახელი </label>
- <input type = "text" class = "span3" placeholder = "აკრიფე რამე..." >
- <span class = "help-block" > ბლოკის დონის დახმარების ტექსტის მაგალითი აქ. </span>
- <label class = "checkbox" >
- <input type = "checkbox" > შემომხედეთ
- </label>
- <button type = "submit" class = "btn" > გაგზავნა </button>
- </form>
დაამატეთ .form-searchფორმაში .search-queryდა input.
- <form class = "კარგად ფორმა-ძიება" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > ძიება </button>
- </form>
დახვეწას დაამატეთ .form-inlineფორმის კონტროლის ვერტიკალური გასწორება და დაშორება.
- <form class = " well form-inline" >
- <input type = "text" class = "input-small" placeholder = "ელფოსტა" >
- <input type = "password" class = "input-small" placeholder = "პაროლი" >
- <label class = "checkbox" >
- <input type = "checkbox" > დამიმახსოვრე
- </label>
- <button type = "submit" class = "btn" > შედით </button>
- </form>
მარჯვნივ ნაჩვენებია ყველა ნაგულისხმევი ფორმის კონტროლი, რომელსაც ჩვენ ვუჭერთ მხარს. აქ არის ბურთულებიანი სია:
ზემოთ მოყვანილი მაგალითის ფორმის განლაგების გათვალისწინებით, აქ არის მარკირება, რომელიც დაკავშირებულია პირველ შეყვანის და საკონტროლო ჯგუფთან. , .control-group, .control-labelდა .controlsკლასები საჭიროა სტილისთვის.
- <form class = "ფორმა-ჰორიზონტალური" >
- <fieldset>
- <legend> ლეგენდის ტექსტი </legend>
- <div class = "control-group" >
- <label class = "control-label" for = "input01" > ტექსტის შეყვანა </label>
- <div class = "კონტროლები" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > დამხმარე დახმარების ტექსტი </p>
- </div>
- </div>
- </fieldset>
- </form>
Bootstrap ახასიათებს სტილებს ბრაუზერის მიერ მხარდაჭერილი ფოკუსირებული და disabledმდგომარეობებისთვის. ჩვენ ვხსნით ნაგულისხმევ Webkit- outlineს და ვიყენებთ box-shadowმის ადგილას :focus.
ის ასევე შეიცავს შეცდომების, გაფრთხილებების და წარმატების ვალიდაციის სტილებს. გამოსაყენებლად დაამატეთ შეცდომის კლასი გარემომცველს .control-group.
- <ველების ნაკრები
- class = "საკონტროლო ჯგუფის შეცდომა" >
- …
- </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">შეყვანის ელემენტის შემდეგ.
იმის ნაცვლად, რომ ყველა ხატულა დამატებითი მოთხოვნა იყოს, ჩვენ შევკრიბეთ ისინი სპრაიტში - სურათების თაიგული ერთ ფაილში, რომელიც იყენებს CSS-ს სურათების პოზიციონირებისთვის.background-position . ეს არის იგივე მეთოდი, რომელსაც ჩვენ ვიყენებთ Twitter.com-ზე და ის ჩვენთვის კარგად მუშაობდა.
ხატების ყველა კლასს აქვს პრეფიქსი .icon-შესაბამისი სახელების დაფარვისა და სკუპისთვის, ისევე როგორც ჩვენი სხვა კომპონენტები. ეს ხელს შეუწყობს სხვა ინსტრუმენტებთან კონფლიქტის თავიდან აცილებას.
Glyphicons- მა მოგვცა საშუალება გამოგვეყენებინა Halflings კომპლექტი ჩვენს ღია კოდის ინსტრუმენტთა ნაკრების შემადგენლობაში, სანამ ჩვენ გთავაზობთ ბმულს და კრედიტს აქ დოკუმენტებში. გთხოვთ, იგივე გააკეთოთ თქვენს პროექტებში.
Bootstrap იყენებს <i>ტეგს ყველა ხატისთვის, მაგრამ მათ არ აქვთ ქეისის კლასი — მხოლოდ საერთო პრეფიქსი. გამოსაყენებლად, განათავსეთ შემდეგი კოდი თითქმის ყველგან:
- <i class = "icon-search" ></i>
ასევე ხელმისაწვდომია სტილები ინვერსიული (თეთრი) ხატებისთვის, რომლებიც მზადდება ერთი დამატებითი კლასით:
- <i class = "icon-search icon-white" ></i>
არსებობს 120 კლასი, რომელთაგან შეგიძლიათ აირჩიოთ თქვენი ხატები. უბრალოდ დაამატეთ <i>ტეგი სწორი კლასებით და მზად იქნებით. თქვენ შეგიძლიათ იპოვოთ სრული სია sprites.less-ში ან პირდაპირ აქ ამ დოკუმენტში.
Თავები მაღლა! ტექსტის სტრიქონების გვერდით გამოყენებისას, როგორც ღილაკებში ან ნავიგ ბმულებში, დარწმუნდით, რომ დატოვეთ სივრცე <i>ტეგის შემდეგ სათანადო ინტერვალისთვის.
ხატები შესანიშნავია, მაგრამ სად შეიძლება გამოიყენო ისინი? აქ არის რამდენიმე იდეა:
არსებითად, ყველგან, სადაც შეგიძლიათ განათავსოთ <i>ტეგი, შეგიძლიათ განათავსოთ ხატი.
გამოიყენეთ ისინი ღილაკებში, ღილაკების ჯგუფებში ხელსაწყოთა ზოლში, ნავიგაციაში ან წინასწარ დაყენებულ ფორმაში.