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

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

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

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

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

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

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

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

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

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

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

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

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

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

მიიღეთ javascript »

Თავები მაღლა

CSS ღილაკების ჯგუფებისთვის არის ცალკე ფაილში, button-groups.less.

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

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

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

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

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

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

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

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

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

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

<div class = "btn-ჯგუფი" > 
  <a class = "btn" href = "#" > მოქმედება </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <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>ტეგი კლასთან და მზად იქნებით.

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

აიღეთ ბმულების სია და დაამატეთ 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>

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

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

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

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

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

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

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

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

საძიებო ფორმები იღებენ მორგებულ სტილებს .navbar-searchკლასთან ერთად navbar-ში. ჩართეთ .pull-leftან .pull-rightმის formგასასწორებლად.

<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 →

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

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

მაგალითები

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

• მთავარი

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

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

მარკირება

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

<ul class = "პურის ნამსხვრევი" > 
  <li>
    <a href = "#" > მთავარი </a> <span class = "გამყოფი" > / </span>   
  </li>
  <li>
    <a href = "#" > ბიბლიოთეკა </a> <span class = "გამყოფი" > / </span>   
  </li>
  <li class = "აქტიური" > 
    <a href = "#" > მონაცემები </a> 
  </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>

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

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

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

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

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

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

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

მარკირება

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

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

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

<div class = "page-haeder" > 
  <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>

ზოლიანი

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

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

ანიმაციური

იღებს ზოლიან მაგალითს და აცოცხლებს მას.

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

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

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

• .progress-info
• .progress-success
• .progress-danger

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

Მოქმედება

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

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

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

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

Opera არ უჭერს მხარს ანიმაციებს ამ დროისთვის.

ჭალები

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

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

სამკერდე ნიშნები

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

<span class = "ბეჯი" > 3 </div> 

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

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

×

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