მაგალითი

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

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > მოქმედება </a></li>  
  <li><a tabindex = "-1" href = "#" > სხვა მოქმედება </a></li>  
  <li><a tabindex = "-1" href = "#" > რაღაც სხვა აქ </a></li>  
  <li class = "გამყოფი" </li> 
  <li><a tabindex = "-1" href = "#" > გამოყოფილი ბმული </a></li>  
</ul>

მარკირება

მხოლოდ ჩამოსაშლელ მენიუს რომ ვუყურებ, აქ არის საჭირო HTML. თქვენ უნდა შეფუთოთ ჩამოსაშლელი ტრიგერის და ჩამოსაშლელი მენიუს შიგნით .dropdownან სხვა ელემენტში, რომელიც აცხადებს position: relative;. შემდეგ უბრალოდ შექმენით მენიუ.

<div class = "ჩამოშლილი" > 
  <!-- ბმული ან ღილაკი ჩამოსაშლელი მენიუს გადასართავად -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > მოქმედება </a></li>  
    <li><a tabindex = "-1" href = "#" > სხვა მოქმედება </a></li>  
    <li><a tabindex = "-1" href = "#" > რაღაც სხვა აქ </a></li>  
    <li class = "გამყოფი" </li> 
    <li><a tabindex = "-1" href = "#" > გამოყოფილი ბმული </a></li>  
  </ul>
</div>

Პარამეტრები

გაასწორეთ მენიუები მარჯვნივ და დაამატეთ ჩამოსაშლელი მენიუს დამატებითი დონეები.

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

დაამატეთ .pull-righta- .dropdown-menuში მარჯვნივ გასწორება ჩამოსაშლელი მენიუში.

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

მენიუს პარამეტრები გამორთულია

დაამატეთ .disableda- <li>ს ჩამოსაშლელ სიაში ბმულის გასათიშად.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > რეგულარული ბმული </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > გამორთული ბმული </a></li>   
  <li><a tabindex = "-1" href = "#" > სხვა ბმული </a></li>  
</ul>

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

დაამატეთ ჩამოსაშლელი მენიუების დამატებითი დონე, რომლებიც გამოჩნდება ჰოვერზე, როგორც OS X-ში, რამდენიმე მარტივი მარკირების დამატებით. დაამატეთ .dropdown-submenuნებისმიერს liარსებულ ჩამოსაშლელ მენიუში ავტომატური სტილისთვის.

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

ჩაშვება

მარცხენა ქვემენიუ

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "ჩამოშლილი ქვემენიუ" > 
    <a tabindex = "-1" href = "#" > სხვა ვარიანტები </a>  
    <ul class = "ჩამოშლილი მენიუ" > 
      ...
    </ul>
  </li>
</ul>

მაგალითები

ორი ძირითადი ვარიანტი, ორ უფრო კონკრეტულ ვარიაციასთან ერთად.

ჯგუფი ერთი ღილაკით

შემოახვიეთ ღილაკების სერია .btnში .btn-group.

<div class = "btn-ჯგუფი" > 
  <button class = "btn" > მარცხენა </button> 
  <button class = "btn" > შუა </button> 
  <button class = "btn" > მარჯვენა </button> 
</div>

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

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

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

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

ღილაკების ნაკრები გამოჩნდეს ვერტიკალურად დაწყობილი და არა ჰორიზონტალურად.

<div class = "btn-group btn-group-vertical" > 
  ...
</div>

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

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

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

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

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

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

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

საჭიროებს JavaScript-ს

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

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

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

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

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

ზომები

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

<div class = "btn-ჯგუფი" > 
  <button class = "btn btn-mini" > მოქმედება </button> 
  <button class = "btn btn-mini 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.

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

აიღეთ რეგულარული <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>

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

ნავიგაციის ნებისმიერი კომპონენტისთვის (ჩანართები, აბები ან სია), დაამატეთ .disabledნაცრისფერი ბმულები და არ არის მავალი ეფექტები . თუმცა, ბმულები დარჩება დაწკაპუნებადი, თუ არ წაშლით hrefატრიბუტს. ალტერნატიულად, შეგიძლიათ განახორციელოთ მორგებული JavaScript, რომ თავიდან აიცილოთ ეს დაწკაპუნებები.

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

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

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

დაწყობადი

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

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

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

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

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

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

დაამატეთ ჩამოსაშლელი მენიუები ცოტა დამატებითი HTML-ით და ჩამოსაშლელი JavaScript მოდულით .

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

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

ნავიგაციის სიები

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

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

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

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

შენიშვნანავი სიაში ბუდობისთვის, ჩართეთ class="nav nav-list"ნებისმიერ ჩადგმულზე <ul>.

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

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

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

Tabbable Nav

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

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

ჩანართების ჩანართი რომ გახადოთ, შექმენით .tab-paneუნიკალური ID თითოეული ჩანართისთვის და შეფუთეთ ისინი .tab-content.

მე 1 განყოფილებაში ვარ.

გამარჯობა, მე 2 სექციაში ვარ.

გოგო, ეს მე-3 განყოფილებაა.

<div class = "tabbable" > <!-- საჭიროა მხოლოდ მარცხენა/მარჯვენა ჩანართებისთვის -->  
  <ul class = "nav nav-tabs" > 
    <li class = "აქტიური" ><a href = "#tab1" data-toggle = "tab" > სექცია 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > სექცია 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> მე ვარ სექცია 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> გამარჯობა, მე 2 სექციაში ვარ. </p>
    </div>
  </div>
</div>

გაქრება ჩანართებში

ჩანართების გაქრობის მიზნით, დაამატეთ .fadeთითოეულს .tab-pane.

მოითხოვს jQuery დანამატს

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

Tabbable ნებისმიერი მიმართულებით

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

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

მე ვარ განყოფილებაში A.

გამარჯობა, მე B სექციაში ვარ.

გოგო, ეს არის C განყოფილება.

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

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

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

მე ვარ განყოფილებაში A.

გამარჯობა, მე B სექციაში ვარ.

გოგო, ეს არის C განყოფილება.

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

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

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

მე ვარ განყოფილებაში A.

გამარჯობა, მე B სექციაში ვარ.

გოგო, ეს არის C განყოფილება.

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

ძირითადი ნავიგატორი

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

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > სათაური </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > მთავარი </a></li>  
      <li><a href = "#" > ბმული </a></li> 
      <li><a href = "#" > ბმული </a></li> 
    </ul>
  </div>
</div>

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

ბრენდი

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

<a class = "brand" href = "#" > პროექტის სახელი </a>

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

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>

ფორმები

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

<form class = "navbar-form pull-left" > 
  <შეყვანის ტიპი = "ტექსტი" class = "span2" >  
  <button type = "submit" class = "btn" > გაგზავნა </button>  
</form>

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

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

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

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

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

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

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

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

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

ტექსტი

ტექსტის სტრიქონები ელემენტში შეფუთეთ .navbar-text, ჩვეულებრივ <p>ტეგზე სწორი წამყვანის და ფერის მისაღებად.

არჩევითი ჩვენების ვარიაციები

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

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

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

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

დაფიქსირდა ბოლოში

.navbar-fixed-bottomსანაცვლოდ დაამატეთ .

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

სტატიკური ზედა ნავიგატორი

შექმენით სრული სიგანის ნავიგალური ზოლი, რომელიც გვერდის გვერდით შორდება .navbar-static-top. კლასისგან განსხვავ��ბით .navbar-fixed-top, თქვენ არ გჭირდებათ რაიმე ბალიშის შეცვლა body.

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

საპასუხო ნავიგაცია

კოლაფსირებული საპასუხო ნავიგატორის განსახორციელებლად, ჩაალაგეთ თქვენი ნავიბარის კონტენტი შემცველი 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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form და ა.შ. -->
      </div>
 
    </div>
  </div>
</div>

Თავები მაღლა! საპასუხო ნავიბარი მოითხოვს კოლაფსის დანამატს და პასუხისმგებელ Bootstrap CSS ფაილს .

ინვერსიული ვარიაცია

შეცვალეთ navbar-ის გარეგნობა დამატებით .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

მაგალითები

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

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

სტანდარტული პაგინაცია

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

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

Პარამეტრები

ინვალიდი და აქტიური ქვეყნები

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

<div class = "გვერდები" > 
  <ul>
    <li class = "disabled" ><a href = "#" > « </a></li>  
    <li class = "აქტიური" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

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

<div class = "გვერდები" > 
  <ul>
    <li class = "გამორთული" ><span> « </span></li> 
    <li class = "აქტიური" ><span> 1 </span></li> 
    ...
  </ul>
</div>

ზომები

გნებავთ უფრო დიდი თუ პატარა პაგინაცია? დაამატეთ .pagination-large, .pagination-smallან .pagination-miniდამატებითი ზომებისთვის.

<div class = "Pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "გვერდები" > 
  <ul>
    ...
  </ul>
</div>
<div class = "პაგირება პაგინაცია-პატარა" > 
  <ul>
    ...
  </ul>
</div>
<div class = "Pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

გასწორება

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

<div class = "გვერდების პაგირებაზე ორიენტირებული" > 
  ...
</div>

<div class = "გვერდების პაგინაცია-მარჯვნივ" > 
  ...
</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>

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

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

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

ეტიკეტები

ეტიკეტები	მარკირება
ნაგულისხმევი	`<span class="label">Default</span>`
წარმატებები	`<span class="label label-success">Success</span>`
გაფრთხილება	`<span class="label label-warning">Warning</span>`
Მნიშვნელოვანი	`<span class="label label-important">Important</span>`
ინფორმაცია	`<span class="label label-info">Info</span>`
ინვერსიული	`<span class="label label-inverse">Inverse</span>`

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

სახელი	მაგალითი	მარკირება
ნაგულისხმევი	1	`<span class="badge">1</span>`
წარმატებები	2	`<span class="badge badge-success">2</span>`
გაფრთხილება	4	`<span class="badge badge-warning">4</span>`
Მნიშვნელოვანი	6	`<span class="badge badge-important">6</span>`
ინფორმაცია	8	`<span class="badge badge-info">8</span>`
ინვერსიული	10	`<span class="badge badge-inverse">10</span>`

ადვილად იშლება

მარტივი განხორციელებისთვის, ლეიბლები და სამკერდე ნიშნები უბრალოდ იშლება (CSS-ის :emptyამომრჩეველის მეშვეობით), როდესაც მასში შინაარსი არ არის.

გმირის ერთეული

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

Გამარჯობა მსოფლიო!

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

Გაიგე მეტი

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

გვერდის სათაური

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

<div class = "გვერდის სათაური" > 
  <h1> გვერდის სათაურის მაგალითი <small> ქვეტექსტი სათაურისთვის </small></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.

მოქმედება მოქმედება
მინიატურების ეტიკეტი

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 = "span4" > 
    <a href = "#" class = "მინიატურა" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "მინიატურები" > 
  <li class = "span4" > 
    <div class = "მინიატურა" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> მინიატურების ლეიბლი </h3>
      <p> ესკიზის წარწერა... </p>
    </div>
  </li>
  ...
</ul>

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

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

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

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

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

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

ღილაკების გაუქმება

მობილური Safari და Mobile Opera ბრაუზერები, გარდა data-dismiss="alert"ატრიბუტისა, მოითხოვს ტეგის href="#"გამოყენებისას გაფრთხილებების გაუქმებას.<a>

<a href = "#" class = "დახურვა" data-dismiss = "გაფრთხილება" > × </a>

ალტერნატიულად, შეგიძლიათ გამოიყენოთ <button>ელემენტი მონაცემთა ატრიბუტით, რომელიც ჩვენ ავირჩიეთ ჩვენი დოკუმენტებისთვის. გამოყენებისას <button>თქვენ უნდა შეიტანოთ, წინააღმდეგ შემთხვევაში type="button"თქვენი ფორმები შეიძლება არ იყოს წარმოდგენილი.

<button type = "button" class = "close" data-dismiss = "alert" > × </button>

გაფრთხილებების გაუქმება JavaScript-ის საშუალებით

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

Პარამეტრები

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

გაფრთხილება!

საუკეთესოდ შეამოწმეთ საკუთარი თავი, არც თუ ისე კარგად გამოიყურებით. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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

კონტექსტური ალტერნატივები

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

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

ოჰ სნეპი! შეცვალეთ რამდენიმე რამ და სცადეთ ხელახლა გაგზავნა.

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

წარმატებები

კარგად გააკეთე! თქვენ წარმატებით წაიკითხეთ ეს მნიშვნელოვანი გაფრთხილება.

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

ინფორმაცია

Თავები მაღლა! ეს გაფრთხილება საჭიროებს თქვენს ყურადღებას, მაგრამ ეს არ არის ძალიან მნიშვნელოვანი.

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

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

ძირითადი

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

<div class = "პროგრესი" > 
  <div class = "bar" style = " width : 60 %; " </div>   
</div>

ზოლიანი

იყენებს გრადიენტს ზოლიანი ეფექტის შესაქმნელად. მიუწვდომელია IE7-8-ში.

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

ანიმაციური

დაამატეთ ზოლების ანიმაციისთვის მარჯვნივ მარცხნივ .active. .progress-stripedმიუწვდომელია IE-ს ყველა ვერსიაში.

<div class = "progress progress-striped active" > 
  <div class = "bar" style = " სიგანე : 40 %; " </div>   
</div>

დაწყობილი

მოათავსეთ რამდენიმე ზოლი იმავეში, .progressრომ დააწყოთ ისინი.

<div class = "პროგრესი" > 
  <div class = "bar bar-success" style = " width : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " </div>   
  <div class = "bar bar-danger" style = " სიგანე : 10 %; " </div>   
</div>

Პარამეტრები

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

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

<div class = "პროგრესი პროგრესი-ინფორმაცია" > 
  <div class = "bar" style = " width : 20 % " </div>   
</div>
<div class = "პროგრესი პროგრესი-წარმატება" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "პროგრესის პროგრესი-გაფრთხილება" > 
  <div class = "bar" style = " width : 60 % " </div>   
</div>
<div class = "პროგრესი პროგრესი-საფრთხე" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

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

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " </div>   
</div>
<div class = "პროგრესი პროგრესი-წარმატება პროგრესი-ზოლიანი" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "პროგრესი პროგრესი-გაფრთხილება პროგრესი-ზოლიანი" > 
  <div class = "bar" style = " width : 60 % " </div>   
</div>
<div class = "პროგრესი პროგრესი-საშიში პროგრესი-ზოლიანი" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

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

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

Internet Explorer 10-ზე და Opera 12-ზე ადრინდელი ვერსიები არ უჭერს მხარს ანიმაციას.

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

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

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

მედიის სათაური

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

მედიის სათაური

<div class = "მედია" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "მედია-სხეული" > 
    <h4 class = "media-heading" > მედია სათაური </h4> 
    ...
 
    <!-- ჩადგმული მედია ობიექტი -->
    <div class = "მედია" > 
      ...
    </div>
  </div>
</div>

მედიის სია

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

მედიის სათაური

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

ჩადგმული მედია სათაური
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

ჩადგმული მედია სათაური
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

ჩადგმული მედია სათაური
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
მედიის სათაური
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class = "media-list" > 
  <li class = "მედია" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "მედია-სხეული" > 
      <h4 class = "media-heading" > მედია სათაური </h4> 
      ...
 
      <!-- ჩადგმული მედია ობიექტი -->
      <div class = "მედია" > 
        ...
     </div>
    </div>
  </li>
</ul>

ჭალები

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

შეხედე, ჭაში ვარ!

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

არჩევითი კლასები

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

შეხედე, ჭაში ვარ!

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

შეხედე, ჭაში ვარ!

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

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

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

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

iOS მოწყობილობებს სჭირდებათ href="#"დაწკაპუნების ღონისძიებები, თუ გსურთ გამოიყენოთ წამყვანი.

<a class = "close" href = "#" > × </a>

დამხმარე კლასები

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

.წაწიე-მარცხნივ

დაცურეთ ელემენტი მარცხნივ

class = "გაახვიე მარცხნივ"

. გაიყვანე - მარცხნივ {
  float : მარცხნივ ;
}

.გააბრუნეთ-მარჯვნივ

მოძრავი ელემენტი მარჯვნივ

კლასი = "მარჯვნივ დახევა"

. გაიყვანე - მარჯვნივ {
  float : მარჯვნივ ;
}

.დადუმდა

შეცვალეთ ელემენტის ფერი#999

კლასი = "მდუმარე"

. დადუმებული {
  ფერი : #999; 
}

.გაასწორე

გაასუფთავეთ floatნებისმიერ ელემენტზე

class = "გარკვევა"

. გარკვევა {
  * მასშტაბირება : 1 ; 
  &: ადრე ,
  &: შემდეგ {
    ჩვენება : მაგიდა ;
    შინაარსი : "" ; 
  }
  &: შემდეგ {
    ნათელი : ორივე ;
  }
}

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

მაგალითი

მარკირება

Პარამეტრები

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

მენიუს პარამეტრები გამორთულია

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

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

მაგალითები

ჯგუფი ერთი ღილაკით

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

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

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

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

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

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

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

საჭიროებს JavaScript-ს

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

ზომები

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

ნავი: ჩანართები, აბები და სიები

ნაგულისხმევი მსუბუქი წონა იგივე მარკირება, სხვადასხვა კლასები

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

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

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

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

დაწყობადი

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

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

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

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

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

ნავიგაციის სიები

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

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

Tabbable Nav

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

გაქრება ჩანართებში

მოითხოვს jQuery დანამატს

Tabbable ნებისმიერი მიმართულებით

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

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

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

ნავიბარი

ძირითადი ნავიგატორი

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

ბრენდი

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

ფორმები

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

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

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

ტექსტი

არჩევითი ჩვენების ვარიაციები

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

დაფიქსირდა ბოლოში

სტატიკური ზედა ნავიგატორი

საპასუხო ნავიგაცია

ინვერსიული ვარიაცია

პურის ნამსხვრევები

მაგალითები

პაგინაცია შინაარსის მეშვეობით პეიჯინგის ორი ვარიანტი

სტანდარტული პაგინაცია

Პარამეტრები

ინვალიდი და აქტიური ქვეყნები

ზომები

გასწორება

პეიჯერი

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

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

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

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

ეტიკეტები

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

ადვილად იშლება

ტიპოგრაფიული კომპონენტები

გმირის ერთეული

Გამარჯობა მსოფლიო!

გვერდის სათაური