მაგალითი

გადამრთველი, კონტექსტური მენიუ ბმულების სიების საჩვენებლად. გაფორმებულია ინტერაქტიული ჩამოსაშლელი 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.

<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-ის თანმიმდევრობა და დაამატეთ კლასი ჩანართების ბოლოში დასაყენებლად.

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

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

დასაწყისისთვის, ნავიგაციის ზოლები სტატიკურია (ზემოდან არ არის დაფიქსირებული) და მოიცავს პროექტის სახელს და ძირითად ნავიგაციის მხარდაჭერას. განათავსეთ ერთი სადმე შიგნით .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>

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

შეცვალეთ 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>

ეტიკეტები

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

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

მარტივი განხორციელებისთვის, ლეიბლები და სამკერდე ნიშნები უბრალოდ იშლება (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 შინაარსის დამატება, როგორიცაა სათაურები, აბზაცები ან ღილაკები ესკიზებში.

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

ესკიზები (ადრე .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.

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

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

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.

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

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>

მედიის სია

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

<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

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

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

.clearfix

Clear the float on any element

class="clearfix"

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}