ხარაჩოების თავზე, ძირითადი 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> |
ახვევს აბრევიატურებს და აკრონიმებს, რათა აჩვენოს გაფართოებული ვერსია ჰოვერზე | ჩართეთ სურვილისამებრ title გაფართოებული ტექსტისთვის |
<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>
შეიძლება გამოიყენოთ ტეგი:
აბრევიატურები სტილიზებულია დიდი ტექსტით და მსუბუქი წერტილოვანი ქვედა კონტურით. მათ ასევე აქვთ დამხმარე კურსორი hover-ზე, რათა მომხმარებლებს ჰქონდეთ დამატებითი მითითება, რომ რაღაც გამოჩნდება hover-ზე.
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>
შეფუთეთ კოდის შიდა ნაწყვეტები <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 | მარკო | ოთო | CSS |
2 | იაკობ | თორნტონი | Javascript |
3 | სტუ | დენტი | HTML |
ზებრა-ზოლების დამატებით დაამატეთ თქვენი მაგიდები - უბრალოდ დაამატეთ .table-striped
კლასი.
შენიშვნა: ზოლიანი ცხრილები იყენებს :nth-child
CSS ამომრჩეველს და მიუწვდომელია IE7-IE8-ში.
- <table class = "table table-striped" >
- …
- </table>
# | Სახელი | Გვარი | Ენა |
---|---|---|---|
1 | მარკო | ოთო | CSS |
2 | იაკობ | თორნტონი | Javascript |
3 | სტუ | დენტი | HTML |
დაამატეთ საზღვრები მთელი მაგიდის გარშემო და მომრგვალებული კუთხეები ესთეტიკური მიზნებისთვის.
- <table class = "table table-bordered" >
- …
- </table>
# | Სახელი | Გვარი | Ენა |
---|---|---|---|
1 | მარკ ოტო | CSS | |
2 | იაკობ | თორნტონი | Javascript |
3 | სტუ | დენტი | |
3 | ბროსეფი | სტალინი | HTML |
გახადეთ თქვენი ცხრილები უფრო კომპაქტური .table-condensed
კლასის დამატებით, რათა განახევროთ ცხრილის უჯრედების ბალიშები (8 პიქსელიდან 4 პიქსამდე).
- <table class = "table table-condensed" >
- …
- </table>
# | Სახელი | Გვარი | Ენა |
---|---|---|---|
1 | მარკო | ოთო | CSS |
2 | იაკობ | თორნტონი | Javascript |
3 | სტუ | დენტი | HTML |
თავისუფლად შეგიძლიათ დააკავშიროთ ცხრილის რომელიმე კლასი, რათა მიაღწიოთ განსხვავებულ გარეგნობას ნებისმიერი ხელმისაწვდომი კლასის გამოყენებით.
- <table class = "table table-striped table-bordered table-condensed" >
- ...
- </table>
# | Სახელი | Გვარი | Ენა |
---|---|---|---|
1 | მარკო | ოთო | CSS |
2 | იაკობ | თორნტონი | Javascript |
3 | სტუ | დენტი | HTML |
4 | ბროსეფი | სტალინი | HTML |
Bootstrap-ში ფორმების საუკეთესო ნაწილი არის ის, რომ ყველა თქვენი შეყვანა და კონტროლი მშვენივრად გამოიყურება, მიუხედავად იმისა, თუ როგორ ააშენებთ მათ მარკირებაში. ზედმეტი HTML არ არის საჭირო, მაგრამ ჩვენ ვაძლევთ შაბლონებს მათთვის, ვინც ამას მოითხოვს.
უფრო რთულ განლაგებას მოყვება ლაკონური და მასშტაბირებადი კლასები მარტივი სტილისთვის და ღონისძიების შეკვრისთვის, ასე რომ თქვენ დაფარული ხართ ყოველ ნაბიჯზე.
Bootstrap გააჩნია ოთხი ტიპის ფორმის განლაგების მხარდაჭერა:
სხვადასხვა ტიპის ფორმის განლაგება მოითხოვს გარკვეულ ცვლილებებს მარკირებისას, მაგრამ თავად კონტროლი რჩება და იქცევა იგივე.
Bootstrap-ის ფორმები მოიცავს სტილებს ყველა საბაზისო ფორმის კონტროლისთვის, როგორიცაა შეყვანა, ტექსტური ზონა და აირჩიეთ თქვენთვის სასურველი. მაგრამ მას ასევე გააჩნია მრავალი მორგებული კომპონენტი, როგორიცაა დამატებული და წინასწარ დაყენებული შეყვანები და ჩექმების სიების მხარდაჭერა.
მდგომარეობები, როგორიცაა შეცდომა, გაფრთხილება და წარმატება, შედის ფორმის კონტროლის თითოეული ტიპისთვის. ასევე შედის სტილები გამორთული კონტროლისთვის.
Bootstrap გთავაზობთ მარტივ მარკირებას და სტილებს საერთო ვებ ფორმების ოთხი სტილისთვის.
სახელი | Კლასი | აღწერა |
---|---|---|
ვერტიკალური (ნაგულისხმევი) | .form-vertical (არ არის საჭირო) |
დაწყობილი, მარცხნივ გასწორებული ლეიბლები კონტროლებზე |
Ხაზში | .form-inline |
მარცხნივ გასწორებული ლეიბლი და ბლოკის შიდა კონტროლი კომპაქტური სტილისთვის |
ძიება | .form-search |
დამატებითი მომრგვალებული ტექსტის შეყვანა ტიპიური საძიებო ესთეტიკისთვის |
Ჰორიზონტალური | .form-horizontal |
მოძრავი მარცხნივ, მარჯვნივ გასწორებული ლეიბლები იმავე ხაზზე, როგორც კონტროლი |
v2.0-ით, ჩვენ გვაქვს უფრო მსუბუქი და ჭკვიანი ნაგულისხმევი ნაგულისხმევი ფორმების სტილისთვის. არანაირი დამატებითი მარკირება, უბრალოდ ჩამოაყალიბეთ კონტროლი.
- <form class = "კარგად" >
- <label> ლეიბლის სახელი </label>
- <input type = "text" class = "span3" placeholder = "აკრიფე რამე..." >
- <span class = "help-inline" > ასოცირებული დახმარების ტექსტი! </span>
- <label class = "checkbox" >
- <input type = "checkbox" > შემომხედეთ
- </label>
- <button type = "submit" class = "btn" > გაგზავნა </button>
- </form>
ასახავს ნაგულისხმევ WebKit სტილებს, უბრალოდ დაამატეთ .form-search
დამატებითი მომრგვალებული საძიებო ველები.
- <form class = "კარგად ფორმა-ძიება" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > ძიება </button>
- </form>
შეყვანები დასაწყებად ბლოკის დონეზეა. და .form-inline
, .form-horizontal
ჩვენ ვიყენებთ inline-block-ს.
- <form class = " well form-inline" >
- <input type = "text" class = "input-small" placeholder = "ელფოსტა" >
- <input type = "password" class = "input-small" placeholder = "პაროლი" >
- <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>
მარცხნივ ნაჩვენებია ყველა ნაგულისხმევი ფორმის კონტროლი, რომელსაც ჩვენ ვუჭერთ მხარს. აქ არის ბურთულებიანი სია:
V1.4-მდე, Bootstrap-ის ნაგულისხმევი ფორმის სტილები იყენებდნენ ჰორიზონტალურ განლაგებას. Bootstrap 2-ით, ჩვენ ამოვიღეთ ეს შეზღუდვა, რათა გვქონდეს უფრო ჭკვიანი, უფრო მასშტაბური ნაგულისხმევები ნებისმიერი ფორმისთვის.
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">
შეყვანის ელემენტის შემდეგ.
:after
. დოკუმენტებში ჩვენ ვაჩვენებთ ღია წითელ ფონის ფერს მაუსის დროს, რათა გამოვყოთ ხატის ზომა.
იმის ნაცვლად, რომ ყველა ხატულა დამატებითი მოთხოვნა იყოს, ჩვენ შევკრიბეთ ისინი sprite-ში - სურათების თაიგულები ერთ ფაილში, რომელიც იყენებს CSS-ს სურათების პოზიციონირებისთვის background-position
. ეს არის იგივე მეთოდი, რომელსაც ჩვენ ვიყენებთ Twitter.com-ზე და ის ჩვენთვის კარგად მუშაობდა.
ხატების ყველა კლასს აქვს პრეფიქსი .icon-
შესაბამისი სახელების დაფარვისა და სკუპისთვის, ისევე როგორც ჩვენი სხვა კომპონენტები. ეს ხელს შეუწყობს სხვა ინსტრუმენტებთან კონფლიქტის თავიდან აცილებას.
Glyphicons- მა მოგვცა საშუალება გამოგვეყენებინა Halflings კომპლექტი ჩვენს ღია კოდის ინსტრუმენტთა ნაკრების შემადგენლობაში, სანამ ჩვენ გთავაზობთ ბმულს და კრედიტს აქ დოკუმენტებში. გთხოვთ, იგივე გააკეთოთ თქვენს პროექტებში.
v2.0.1-ით, ჩვენ ავირჩიეთ <i>
ტეგის გამოყენება ყველა ჩვენი ხატისთვის, მაგრამ მათ არ აქვთ ქეისის კლასი — მხოლოდ საერთო პრეფიქსი. გამოსაყენებლად, განათავსეთ შემდეგი კოდი თითქმის ყველგან:
- <i class = "icon-search" ></i>
ასევე ხელმისაწვდომია სტილები ინვერსიული (თეთრი) ხატებისთვის, რომლებიც მზადდება ერთი დამატებითი კლასით:
- <i class = "icon-search icon-white" ></i>
არსებობს 120 კლასი, რომელთაგან შეგიძლიათ აირჩიოთ თქვენი ხატები. უბრალოდ დაამატეთ <i>
ტეგი სწორი კლასებით და მზად იქნებით. თქვენ შეგიძლიათ იპოვოთ სრული სია sprites.less-ში ან პირდაპირ აქ ამ დოკუმენტში.
ხატები შესანიშნავია, მაგრამ სად შეიძლება გამოიყენო ისინი? აქ არის რამდენიმე იდეა:
არსებითად, ყველგან, სადაც შეგიძლიათ განათავსოთ <i>
ტეგი, შეგიძლიათ განათავსოთ ხატი.
გამოიყენეთ ისინი ღილაკებში, ღილაკების ჯგუფებში ხელსაწყოთა ზოლში, ნავიგაციაში ან წინასწარ დაყენებულ ფორმაში.