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

მთელი ტიპოგრაფიული ბადე ეფუძნება ორ 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.

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

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>ნებისმიერი 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>

• 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.

Ხაზში

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

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

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

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

<p>ტექსტის ნიმუში აქ...</p>

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

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

Google Prettify

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

<p> ტექსტის ნიმუში აქ... </p>

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

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

<მაგიდა>
  <თავი>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

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

<table class = "table" > 
  …
</table>

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

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

<table class = "table table-striped" > 
  …
</table>

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

<table class = "table table-bordered" > 
  …
</table>

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

<table class = "table table-condensed" > 
  …
</table>

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

<table class = "table table-striped table-bordered table-condensed" > 
  ...
</table>

მოქნილი HTML და CSS

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

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

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

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

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

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

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

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

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

v2.0-ით, ჩვენ გვაქვს უფრო მსუბუქი და ჭკვიანი ნაგულისხმევი ნაგულისხმევი ფორმების სტილისთვის. არანაირი დამატებითი მარკირება, უბრალოდ ჩამოაყალიბეთ კონტროლი.

ასახავს ნაგულისხმევ WebKit სტილებს, უბრალოდ დაამატეთ .form-searchდამატებითი მომრგვალებული საძიებო ველები.

შეყვანები დასაწყებად ბლოკის დონეზეა. და .form-inline, .form-horizontalჩვენ ვიყენებთ inline-block-ს.

რა შედის

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

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

ახალი ნაგულისხმევი v2.0-ით

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">შეყვანის ელემენტის შემდეგ.

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

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

წამყვანებისა და ფორმებისთვის

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

შენიშვნა: ყველა ღილაკი უნდა შეიცავდეს .btnკლასს. ღილაკების სტილები უნდა იყოს გამოყენებული <button>და <a>ელემენტები თანმიმდევრულობისთვის.

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

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

პირველადი მოქმედება მოქმედება

პირველადი მოქმედება მოქმედება

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

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

პირველადი მოქმედება მოქმედება

პირველადი მოქმედება მოქმედება

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

განაახლეთ გადახდა წაშლა

კომენტარი პარამეტრები Მეტი ინფორმაცია