ღილაკების ჯგუფები

გამოიყენეთ ღილაკების ჯგუფები მრავალი ღილაკის შეერთებისთვის, როგორც ერთი კომპოზიტური კომპონენტი. ააშენეთ ისინი სერიით <a>ან <button>ელემენტებით.

საუკეთესო პრაქტიკა

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

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

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

ნაგულისხმევი მაგალითი

აი, როგორ ეძებს HTML სტანდარტული ღილაკების ჯგუფს, რომელიც აგებულია წამყვანის ტეგის ღილაკებით:

<div class = "btn-ჯგუფი" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

ხელსაწყოთა ზოლის მაგალითი

შეუთავსეთ კომპლექტები <div class="btn-group">უფრო <div class="btn-toolbar">რთული კომპონენტებისთვის.

<div class = "btn-toolbar" > 
  <div class = "btn-ჯგუფი" > 
    ...
  </div>
</div>

Checkbox და რადიო არომატები

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

მიიღეთ javascript »

ჩამოსაშლელები ღილაკების ჯგუფებში

Თავები მაღლა! ჩამოსაშლელი ღილაკები ცალ-ცალკე უნდა იყოს შეფუთული საკუთარ .btn-groupთავში .btn-toolbarსათანადო რენდერისთვის.

მიმოხილვა და მაგალითები

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

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

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

<div class = "btn-ჯგუფი" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    მოქმედება
    <span class = "caret" ></span> 
  </a>
  <ul class = "ჩამოშლილი მენიუ" > 
    <!-- ჩამოსაშლელი მენიუს ბმულები -->
  </ul>
</div>

მუშაობს ყველა ზომის ღილაკზე

ღილაკების ჩამოსაშლელები მუშაობს ნებისმიერ ზომაზე. თქვენი ღილაკების ზომებია .btn-large, .btn-smallან .btn-mini.

მოითხოვს ჯავასკრიპტს

ღილაკების ჩამოსაშლელი ჩანაწერები საჭიროებს Bootstrap ჩამოსაშლელ დანამატს ფუნქციონირებისთვის.

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

მიმოხილვა და მაგალითები

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

ზომები

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

<div class = "btn-ჯგუფი" > 
  ...
  <ul class = "ჩამოშლილი მენიუ pull-right" > 
    <!-- ჩამოსაშლელი მენიუს ბმულები -->
  </ul>
</div>

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

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

<div class = "btn-ჯგუფი" > 
  <button class = "btn" > მოქმედება </button> 
  <button class = "btn dropdown-toggle" data-toggle = "ჩამოშლილი" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "ჩამოშლილი მენიუ" > 
    <!-- ჩამოსაშლელი მენიუს ბმულები -->
  </ul>
</div>

ჩამოსაშლელი მენიუები

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

<div class = "btn-group dropup" > 
  <button class = "btn" > ჩამოსაშლელი </button> 
  <button class = "btn dropdown-toggle" data-toggle = "ჩამოშლილი" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "ჩამოშლილი მენიუ" > 
    <!-- ჩამოსაშლელი მენიუს ბმულები -->
  </ul>
</div>

ძლიერი საბაზისო კლასი

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

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

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

კომპონენტის გასწორება

ნავიგაციის ბმულების გასასწორებლად გამოიყენეთ .pull-leftან .pull-rightსასარგებლო კლასები. ორივე კლასი დაამატებს CSS float-ს მითითებული მიმართულებით.

ძირითადი ჩანართები

აიღეთ რეგულარული <ul>ბმულები და დაამატეთ .nav-tabs:

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

<ul class = "nav nav-tabs" > 
  <li class = "აქტიური" > 
    <a href = "#" > მთავარი </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

ძირითადი აბები

აიღეთ იგივე HTML, მაგრამ .nav-pillsამის ნაცვლად გამოიყენეთ:

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

<ul class = "nav nav-pills" > 
  <li class = "აქტიური" > 
    <a href = "#" > მთავარი </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

როგორ დავაწყოთ ისინი

ვინაიდან ჩანართები და აბები ნაგულისხმევად ჰორიზონტალურია, უბრალოდ დაამატეთ მეორე კლასი, .nav-stacked, რათა ისინი ვერტიკალურად დაწყობილი გამოჩნდნენ.

დაწყობილი ჩანართები

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

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

დაწყობილი აბები

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

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

მდიდარი მენიუები მარტივია

Bootstrap ჩანართებსა და აბებში ჩამოსაშლელი მენიუები ძალიან მარტივია და მოითხოვს მხოლოდ ცოტა დამატებით HTML-ს და მსუბუქ jQuery დანამატს.

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

ჩანართები ჩამოსაშლელი ღილაკებით

• მთავარი
• დახმარება
• Ძირს დაგდება
  • მოქმედება
  • კიდევ ერთი ქმედება
  • რაღაც სხვა აქ
  • გამოყოფილი ბმული
• ჩაშვება
  • მოქმედება
  • კიდევ ერთი ქმედება
  • რაღაც სხვა აქ
  • გამოყოფილი ბმული

<ul class = "nav nav-tabs" > 
  <li class = "ჩამოშლილი" > 
    <a class = "Dropdown-toggle" 
       data-toggle = "ჩამოშლილი"
       href = "#" >
        Ძირს დაგდება
        <b class = "caret" ></b> 
      </a>
    <ul class = "ჩამოშლილი მენიუ" > 
      <!-- ბმულები -->
    </ul>
  </li>
</ul>

აბები წვეთებით

• მთავარი
• დახმარება
• Ძირს დაგდება
  • მოქმედება
  • კიდევ ერთი ქმედება
  • რაღაც სხვა აქ
  • გამოყოფილი ბმული
• ჩაშვება
  • მოქმედება
  • კიდევ ერთი ქმედება
  • რაღაც სხვა აქ
  • გამოყოფილი ბმული

<ul class = "nav nav-pills" > 
  <li class = "ჩამოშლილი" > 
    <a class = "Dropdown-toggle" 
       data-toggle = "ჩამოშლილი"
       href = "#" >
        Ძირს დაგდება
        <b class = "caret" ></b> 
      </a>
    <ul class = "ჩამოშლილი მენიუ" > 
      <!-- ბმულები -->
    </ul>
  </li>
</ul>

აპლიკაციის სტილის ნავიგაცია

Nav სიები გთავაზობთ მარტივ და მარტივ გზას ნავი ბმულების ჯგუფების შესაქმნელად არჩევითი სათაურებით. ისინი საუკეთესოდ გამოიყენება გვერდით ზოლებში, როგორიცაა Finder OS X-ში.

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

ხატებით

ნავი სიები ასევე მარტივია ხატებით აღჭურვა. დაამატეთ შესაბამისი <i>ტეგი კლასთან და მზად იქნებით.

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

დაამატეთ ჰორიზონტალური გამყოფი კლასთან ერთად ცარიელი სიის ელემენტის შექმნით .divider, მაგალითად:

<ul class = "nav nav-list" > 
  ...
  <li class = "გამყოფი" </li> 
  ...
</ul>

ნავიგაციის სიის მაგალითი

აიღეთ ბმულების სია და დაამატეთ class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    სიის სათაური
  </li>
  <li class = "აქტიური" > 
    <a href = "#" > მთავარი </a> 
  </li>
  <li>
    <a href = "#" > ბიბლიოთეკა </a> 
  </li>
  ...
</ul>

მაგალითი ხატებით

იგივე მაგალითი, მაგრამ <i>ტეგებით ხატებისთვის.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      ბიბლიოთეკა
    </a>
  </li>
  ...
</ul>

რა შედის

გააცოცხლეთ თქვენი ჩანართები მარტივი დანამატით, რომ გადართოთ შინაარსს შორის ჩანართების საშუალებით. Bootstrap აერთიანებს tabbable ჩანართებს ოთხ სტილში: ზედა (ნაგულისხმევი), მარჯვენა, ქვედა და მარცხენა.

მათ შორის შეცვლა მარტივია და მხოლოდ ძალიან მცირე მარკირების შეცვლას მოითხოვს.

ჩანართის მაგალითი

ჩანართების ჩანართი რომ გახადოთ, გადაიტანეთ ჩანართები სხვა დივში .nav-tabsკლასით .tabbable.

მორგებული jQuery მოდული

ყველა tabbable ჩანართი იკვებება ჩვენი მსუბუქი jQuery მოდულით. წაიკითხეთ მეტი იმის შესახებ, თუ როგორ უნდა გააცოცხლოთ tabbable ჩანართები Javascript docs გვერდზე.

მიიღეთ Javascript →

ჩანართები ბოლოში

გადაატრიალეთ HTML-ის თანმიმდევრობა და დაამატეთ კლასი ჩანართების ბოლოში დასაყენებლად.

<div class = "tabable ჩანართები-ქვემოთ" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

ჩანართები მარცხნივ

შეცვალეთ კლასი მარცხნივ ჩანართების დასაყენებლად.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

ჩანართები მარჯვნივ

შეცვალეთ კლასი, რომ დააყენოთ ჩანართები მარჯვნივ.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

ნავბარის ხარაჩოები

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

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "კონტეინერი" > 
      ...
    </div>
  </div>
</div>

დაფიქსირდა ნავიბარი

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

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

ნავი ზოლის დამაგრებისას გახსოვდეთ ფარული არე ქვევით. დაამატეთ 40 პიქსელი ან მეტი დამატება <body>. დარწმუნდით, რომ დაამატეთ ეს ძირითადი Bootstrap CSS-ის შემდეგ და სურვილისამებრ საპასუხო CSS-მდე.

Ბრენდის სახელი

მარტივი ბმული თქვენი ბრენდის ან პროექტის სახელის საჩვენებლად მხოლოდ წამყვან ტეგს მოითხოვს.

<a class = "ბრენდი" href = "#" >  
  Პროექტის სახელი
</a>

ფორმები ნავიბარში

ფორმის სწორად სტილისთვისა და განლაგების მიზნით, დაამატეთ შესაბამისი კლასები, როგორც ეს ნაჩვენებია ქვემოთ. ნაგულისხმევი ფორმისთვის, ჩართეთ .navbar-formან .pull-leftან .pull-rightსწორად გასწორება.

<form class = "navbar-form pull-left" > 
  <შეყვანის ტიპი = "ტექსტი" class = "span2" >  
</form>

უფრო მორგებული საძიებო ფორმისთვის, დაამატეთ .navbar-searchკლასი, რომ მიიღოთ სპეციალიზებული სტილები navbar-ში.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "ძებნა" >   
</form>

არჩევითი საპასუხო ვარიაცია

თქვენი ზედა ზოლის შინაარსის ოდენობიდან გამომდინარე, შეიძლება დაგჭირდეთ საპასუხო ვარიანტების დანერგვა. ამისათვის ჩაალაგეთ თქვენი ნავიგაციის კონტენტი შემცველი div-ში .nav-collapse.collapse, და დაამატეთ ნავიბარის გადართვის ღილაკი, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "კონტეინერი" > 
 
      <!-- .btn-navbar გამოიყენება როგორც გადამრთველი ჩაკეცილი ნავიბარის კონტენტისთვის -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- აუცილებლად დატოვეთ ბრენდი, თუ გინდათ, რომ ის გამოჩნდეს -->
      <a class = "brand" href = "#" > პროექტის სახელი </a>  
 
      <!-- ყველაფერი, რაც გსურთ დამალული იყოს 940 პიქსელზე ან ნაკლები, მოათავსეთ აქ -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form და ა.შ. -->
      </div>
 
    </div>
  </div>
</div>

ნავიგაციის ბმულები

Nav-ის ელემენტების დამატება მარტივია შეუკვეთავი სიების მეშვეობით.

<ul class = "nav" > 
  <li class = "აქტიური" > 
    <a href = "#" > მთავარი </a> 
  </li>
  <li><a href = "#" > ბმული </a></li> 
  <li><a href = "#" > ბმული </a></li> 
</ul>

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

<ul class = "nav" > 
  ...
  <li class = "გამყოფი-ვერტიკალური" </li> 
  ...
</ul>

კომპონენტის გასწორება

ნავიგაციის, საძიებო ფორმის ან ტექსტის გასასწორებლად გამოიყენეთ .pull-leftან .pull-rightსასარგებლო კლასები. ორივე კლასი დაამატებს CSS float-ს მითითებული მიმართულებით.

ჩამოსაშლელი მენიუების დამატება

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

<ul class = "nav" > 
  <li class = "ჩამოშლილი" > 
    <a href = "#" 
          class = "ჩამოშლილი გადართვა"
          data-toggle = "ჩამოშლილი" >
          ანგარიში
          <b class = "caret" ></b> 
    </a>
    <ul class = "ჩამოშლილი მენიუ" > 
      ...
    </ul>
  </li>
</ul>

მიიღეთ Javascript →

ტექსტი ნავიგბარში

გადაიტანეთ ტექსტის სტრიქონები <p>ტეგში სწორი წამყვანისა და ფერის მისაღებად.

რატომ გამოიყენოთ ისინი

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

მაგალითები

ერთი მაგალითი ნაჩვენებია, როგორც ის შეიძლება იყოს ნაჩვენები მრავალ გვერდზე.

• მთავარი

• მთავარი /
• ბიბლიოთეკა

• მთავარი /
• ბიბლიოთეკა /
• მონაცემები

მარკირება

HTML არის თქვენი სტანდარტული შეუკვეთავი სია ბმულებით.

<ul class = "პურის ნამსხვრევი" > 
  <li>
    <a href = "#" > მთავარი </a> <span class = "გამყოფი" > / </span>   
  </li>
  <li>
    <a href = "#" > ბიბლიოთეკა </a> <span class = "გამყოფი" > / </span>   
  </li>
  <li class = "active" > მონაცემები </li> 
</ul>

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

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

სახელმწიფო გვერდის ბმულები

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

მოქნილი განლაგება

დაამატეთ ორი არჩევითი კლასიდან რომელიმე, რათა შეცვალოთ პაგინაციის ბმულების გასწორება: .pagination-centeredდა .pagination-right.

მაგალითები

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

მარკირება

შეფუთული <div>, პაგინაცია არის მხოლოდ <ul>.

<div class = "გვერდები" > 
  <ul>
    <li><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 = "#" > შემდეგი </a></li> 
  </ul>
</div>

პეიჯერის შესახებ

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

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

პეიჯერის ბმულები ასევე იყენებენ ზოგად .disabledკლასს პაგინაციიდან.

ნაგულისხმევი მაგალითი

ნაგულისხმევად, პეიჯერის ცენტრებში ბმულები.

• წინა
• შემდეგი

<ul class = "პეიჯერ" > 
  <li>
    <a href = "#" > წინა </a> 
  </li>
  <li>
    <a href = "#" > შემდეგი </a> 
  </li>
</ul>

გასწორებული ბმულები

ალტერნატიულად, თქვენ შეგიძლიათ გაასწოროთ თითოეული ბმული გვერდებზე:

• ← უფრო ძველი
• უფრო ახალი →

<ul class = "პეიჯერ" > 
  <li class = "წინა" > 
    <a href = "#" > ← უფრო ძველი </a> 
  </li>
  <li class = "შემდეგი" > 
    <a href = "#" > უფრო ახალი → </a> 
  </li>
</ul>

შესახებ

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

ხელმისაწვდომი კლასები

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

მარკირება

შეფუთეთ თქვენი შინაარსი divლაიქით ასე:

<div class = "გმირი-ერთეული" > 
  <h1> სათაური </h1>
  <p> სლოგანი </p>
  <p>
    <a class = "btn btn-ძირითადი btn-large" > 
      Გაიგე მეტი
    </a>
  </p>
</div>

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

<div class = "გვერდის სათაური" > 
  <h1> გვერდის სათაურის მაგალითი </h1>
</div>

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

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

მაღალი კონფიგურირებადი

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

• 

  მინიატურების ეტიკეტი

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultrices vehicula ut id elit.

  მოქმედება მოქმედება

• 

  მინიატურების ეტიკეტი

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultrices vehicula ut id elit.

  მოქმედება მოქმედება

რატომ გამოვიყენოთ ესკიზები

ესკიზები (ადრე .media-grid1.4-მდე) შესანიშნავია ფოტოების ან ვიდეოების ბადეებისთვის, სურათების ძიების შედეგებისთვის, საცალო ვაჭრობის პროდუქტებისთვის, პორტფოლიოებისთვის და მრავალი სხვა. ისინი შეიძლება იყოს ბმულები ან სტატიკური შინაარსი.

მარტივი, მოქნილი მარკირება

მინიატურების მარკირება მარტივია - ulნებისმიერი რაოდენობის liელემენტებით არის ყველაფერი რაც საჭიროა. ის ასევე არის სუპერ მოქნილი, რაც საშუალებას გაძლევთ მიიღოთ ნებისმიერი ტიპის კონტენტი ცოტა მეტი მარკირებით თქვენი შინაარსის შესაფუთად.

იყენებს ბადის სვეტის ზომებს

და ბოლოს, მინიატურების კომპონენტი იყენებს ქსელის სისტემის არსებულ კლასებს, როგორიცაა .span2ან .span3— ესკიზების ზომების გასაკონტროლებლად.

მარკირება

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

<ul class = "მინიატურები" > 
  <li class = "span3" > 
    <a href = "#" class = "მინიატურა" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

ესკიზებში მორგებული HTML შინაარსისთვის, მარკირება ოდნავ იცვლება. ბლოკის დონის შინაარსის სადმე დასაშვებად, ჩვენ ვცვლით <a>მსგავსს <div>ასე:

<ul class = "მინიატურები" > 
  <li class = "span3" > 
    <div class = "მინიატურა" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> მინიატურების ლეიბლი </h5>
      <p> ესკიზის წარწერა სწორედ აქ... </p>
    </div>
  </li>
  ...
</ul>

მეტი მაგალითები

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

გადაწერილი საბაზისო კლასი

Bootstrap 2-ით ჩვენ გავამარტივეთ საბაზისო კლასი: .alertნაცვლად .alert-message. ჩვენ ასევე შევამცირეთ მინიმალური საჭირო მარკირება — <p>ნაგულისხმევად არაა საჭირო, მხოლოდ გარე <div>.

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

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

შესანიშნავად უხდება JavaScript-ს

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

მიიღეთ დანამატი »

გაფრთხილების მაგალითები

შეფუთეთ თქვენი შეტყობინება და სურვილისამებრ დახურვის ხატულა div-ში მარტივი კლასით.

<div class = "გაფრთხილება" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <strong> გაფრთხილება! </strong> საუკეთესოდ შეამოწმეთ საკუთარი თავი, არც თუ ისე კარგად გამოიყურებით.
</div>

მარტივად გააფართოვეთ სტანდარტული გაფრთხილების შეტყობინება ორი სურვილისამებრ კლასით: .alert-blockმეტი padding და ტექსტური კონტროლისთვის და .alert-headingშესაბამისი სათაურისთვის.

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <h4 class = "alert-heading" > გაფრთხილება! </h4> 
  საუკეთესოდ შეამოწმე შენი თავი, შენ არ ხარ...
</div>

შეცდომა ან საფრთხე

<div class = "გაფრთხილების გაფრთხილება-შეცდომა" > 
  ...
</div>

წარმატებები

<div class = "გაფრთხილება-წარმატება" > 
  ...
</div>

ინფორმაცია

<div class = "alert alert-info" > 
  ...
</div>

ძირითადი

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

<div class = "პროგრესი" > 
  <div class = "ბარი" 
       style = " სიგანე : 60 %; " </div> 
</div>

ზოლიანი

იყენებს გრადიენტს ზოლიანი ეფექტის შესაქმნელად (IE არ არის).

<div class = "პროგრესი პროგრესი-ზოლიანი" > 
  <div class = "ბარი" 
       style = " სიგანე : 20 %; " </div> 
</div>

ანიმაციური

იღებს ზოლიან მაგალითს და ანიმირებს მას (IE არ არის).

<div class = "პროგრესი პროგრესი-ზოლიანი 
     აქტიური" >
  <div class = "ბარი" 
       style = " სიგანე : 40 %; " </div> 
</div>

დამატებითი ფერები

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

ზოლიანი ზოლები

მყარი ფერების მსგავსად, ჩვენ გვაქვს მრავალფეროვანი ზოლიანი პროგრესის ზოლები.

Მოქმედება

პროგრესის ზოლები იყენებს CSS3 გადასვლებს, ასე რომ, თუ დინამიურად დაარეგულირებთ სიგანეს Javascript-ის საშუალებით, ის შეუფერხებლად შეიცვლის ზომას.

თუ იყენებთ .activeკლასს, თქვენი .progress-stripedპროგრესის ზოლები აცოცხლებს ზოლებს მარცხნიდან მარჯვნივ.

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

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

Opera და IE ამჯერად ანიმაციებს არ უჭერს მხარს.

ჭალები

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

<div class = "კარგად" > 
  ...
</div>

დახურვის ხატულა

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

×

<a class = "დახურვა" > × </a>