مىسال

ئۇلىنىش تىزىملىكىنى كۆرسىتىدىغان كۆزنەكلىك ، مەزمۇن تىزىملىكى. چۈشۈرۈلگەن 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 = "divider" > </li> 
  <li> <a tabindex = "-1" href = "#"> ئايرىم ئۇلىنىش </a> </li >  
</ul>

Markup

پەقەت چۈشۈش تىزىملىكىگە قارايدىغان بولساق ، بۇ يەردە لازىملىق HTML بار. تامچە قوزغىتىش ۋە قوزغىتىش تىزىملىكى .dropdownياكى باشقا مەلۇم ئېلېمېنتنى ئوراپ قويۇشىڭىز كېرەك position: relative;. ئاندىن تىزىملىك ​​قۇر.

<div class = "dropdown" > 
  <! - ئۇلىنىش ياكى كۇنۇپكىنى تۆۋەنلىتىش ->
  <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 = "divider" > </li> 
    <li> <a tabindex = "-1" href = "#"> ئايرىم ئۇلىنىش </a> </li >  
  </ul>
</div>

تاللانما

تىزىملىكلەرنى ئوڭغا توغرىلاڭ ۋە قوشۇش قوشۇمچە دەرىجىدىكى تۆۋەنلەشلەرنى ئۆز ئىچىگە ئالىدۇ.

تىزىملىكلەرنى توغرىلاش

.pull-rightئوڭغا ئوڭغا قوشۇش .dropdown-menuتىزىملىكى.

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

تىزىملىك ​​تاللانمىلىرىنى چەكلىدى

ئۇلانمىنى چەكلەش ئۈچۈن تامغا بىرنى .disabledقوشۇڭ .<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 = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#"> تېخىمۇ كۆپ تاللاشلار </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

مىساللار

ئىككى خىل ئاساسلىق تاللاش ، يەنە ئىككى خىل ئالاھىدە ئۆزگىرىش بار.

يەككە كۇنۇپكا گۇرۇپپىسى

ئىچىگە بىر يۈرۈش كۇنۇپكىلارنى ئوراپ .btnبېرىڭ .btn-group.

<div class = "btn-group" > 
  <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-group" > 
    ...
  </div>
</div>

تىك كۇنۇپكا گۇرۇپپىلىرى

بىر يۈرۈش كۇنۇپكىلارنى توغرىسىغا ئەمەس تىك ھالەتتە تىزىپ قويۇڭ.

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

تەكشۈرۈش ساندۇقى ۋە رادىئو تەملىرى

كۇنۇپكا گۇرۇپپىلىرى يەنە رادىئو سۈپىتىدە خىزمەت قىلالايدۇ ، بۇ يەردە پەقەت بىرلا كۇنۇپكا ئاكتىپ ياكى تەكشۈرۈش ساندۇقى بولىدۇ ، بۇ يەردە ھەر قانداق كۇنۇپكا ئاكتىپ بولىدۇ. بۇنىڭ ئۈچۈن JavaScript ھۆججىتىنى كۆرۈڭ .

كۇنۇپكا گۇرۇپپىسىدىكى تامچە

Heads up!چۈشۈش كۇنۇپكىسى بار كۇنۇپكىلارنى مۇۋاپىق كۆرسىتىش ئۈچۈن ئايرىم-ئايرىم ھالدا ئۆز-ئارا ئوراپ قويۇش كېرەك .btn-group..btn-toolbar

ئومۇمىي چۈشەنچە ۋە مىساللار

ھەر قانداق كۇنۇپكىنى ئىشلىتىپ تىزىملىك ​​تىزىملىكىنى قوزغىتىپ .btn-groupمۇۋاپىق تىزىملىك ​​بەلگىسى بىلەن تەمىنلەڭ.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    ھەرىكەت
    <span class = "caret" > </span> 
  </a>
  <ul class = "dropdown-menu" > 
    <! - تىزىملىك ​​تىزىملىكى ئۇلىنىشى ->
  </ul>
</div>

بارلىق كۇنۇپكا چوڭلۇقى بىلەن ئىشلەيدۇ

كۇنۇپكا چۈشۈش ھەر قانداق چوڭلۇقتا ئىشلەيدۇ: .btn-large، .btn-smallياكى .btn-mini.

JavaScript تەلەپ قىلىدۇ

كۇنۇپكىلارنىڭ چۈشۈشى Bootstrap چۈشۈش قىستۇرمىسىنىڭ ئىشلىتىلىشىنى تەلەپ قىلىدۇ .

بەزى ئەھۋاللاردا ، مەسىلەن كۆچمە تېلېفونغا ئوخشاش تىزىملىك ​​تىزىملىكى كۆرۈنۈشنىڭ سىرتىغا كېڭىيىدۇ. توغرىلاشنى قولدا ياكى خاس JavaScript ئارقىلىق ھەل قىلىشىڭىز كېرەك.

كۇنۇپكا تاختىسىنى پارچىلاش

كۇنۇپكا گۇرۇپپىسىنىڭ ئۇسلۇبى ۋە بەلگىسىنى ئاساس قىلىپ ، بۆلۈش كۇنۇپكىسىنى ئاسانلا قۇرالايمىز. بۆلۈش كۇنۇپكىلىرى سول تەرەپتە ئۆلچەملىك ھەرىكەت ۋە ئوڭ تەرەپتىكى تۆۋەنگە يۆتكىلىشچان ئۇلىنىش بار.

<div class = "btn-group" > 
  <button class = "btn" > ھەرىكەت </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" > </span> 
  </button>
  <ul class = "dropdown-menu" > 
    <! - تىزىملىك ​​تىزىملىكى ئۇلىنىشى ->
  </ul>
</div>

Size

قوشۇمچە كۇنۇپكا سىنىپىدىن ياكى چوڭ .btn-mini- كىچىكلىكى ئۈچۈن ئىشلىتىڭ..btn-small.btn-large

<div class = "btn-group" > 
  <button class = "btn btn-mini" > ھەرىكەت </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" > </span> 
  </button>
  <ul class = "dropdown-menu" > 
    <! - تىزىملىك ​​تىزىملىكى ئۇلىنىشى ->
  </ul>
</div>

تىزىملىك ​​تىزىملىكى

تامچە تىزىملىكلەرنى بىۋاسىتە ئاتا-ئانىسىغا بىر سىنىپ قوشۇش ئارقىلىق ئاستىدىن يۇقىرىغا ئالماشتۇرغىلى بولىدۇ .dropdown-menu. ئۇ يۆنىلىشنى توغرىلاپ .caret، تىزىملىكنىڭ ئورنىنى ئاستىدىن يۇقىرىغا يۆتكەشنىڭ ئورنىغا يۆتكەيدۇ.

<div class = "btn-group dropup" > 
  <button class = "btn" > تامچە </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" > </span> 
  </button>
  <ul class = "dropdown-menu" > 
    <! - تىزىملىك ​​تىزىملىكى ئۇلىنىشى ->
  </ul>
</div>

يېنىك دەرىجىدىكى ئوخشاش بەلگە ، ئوخشىمىغان تۈرلەر

بۇ يەردىكى بارلىق دېڭىز زاپچاسلىرى - بەتكۈچ ، دورا ۋە تىزىملىك ​​- ئوخشاش بىر بەلگە ۋە ئۇسلۇبنى سىنىپ ئارقىلىق ئورتاقلىشىدۇ .nav.

Basic tabs

دائىملىق <ul>ئۇلىنىشلارنى قوشۇڭ ۋە قوشۇڭ .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "active" > 
    <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 = "active" > 
    <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>

زاپچاسلارنى توغرىلاش

Nav ئۇلانمىلىرىنى توغرىلاش ئۈچۈن ، .pull-leftياكى .pull-rightئىشلىتىدىغان دەرسلەرنى ئىشلىتىڭ. ھەر ئىككى سىنىپ بەلگىلەنگەن يۆنىلىشكە CSS لەيلىمە قوشىدۇ.

Stackable

بەتكۈچ ۋە دورىلار سۈكۈتتىكى ھالەتتە گورىزونتال بولغاچقا ، ئىككىنچى سىنىپنى قوشسىڭىز ، .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 = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Dropdown
        <b class = "caret" > </b> 
      </a>
    <ul class = "dropdown-menu" > 
      <! - ئۇلىنىشلار ->
    </ul>
  </li>
</ul>

تۆۋەنگە چۈشكەن دورىلار

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Dropdown
        <b class = "caret" > </b> 
      </a>
    <ul class = "dropdown-menu" > 
      <! - ئۇلىنىشلار ->
    </ul>
  </li>
</ul>

يول تىزىملىكى

ئىختىيارى ماۋزۇلار بىلەن دېڭىز ئۇلىنىشى گۇرۇپپىسى قۇرۇشنىڭ ئاددىي ۋە ئاسان ئۇسۇلى. ئۇلار OS X دىكى Finder غا ئوخشاش يان بالداقتا ئەڭ ياخشى ئىشلىتىلىدۇ.

مىسال nav تىزىملىكى

ئۇلىنىش تىزىملىكىنى ئېلىپ قوشۇڭ 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 = "divider" > </li> 
  ...
</ul>

Tabbable nav

بەتكۈچ ئارقىلىق مەزمۇننى ئالماشتۇرۇش ئۈچۈن ئاددىي قىستۇرما ئارقىلىق بەتكۈچلىرىڭىزنى ھاياتلىققا ئېرىشتۈرۈڭ. Bootstrap جەدۋەل بەتكۈچلىرىنى تۆت خىل ئۇسلۇبتا بىرلەشتۈرگەن: ئۈستى (سۈكۈتتىكى) ، ئوڭ ، ئاستى ۋە سول.

جەدۋەل مىسالى

بەتكۈچنى جەدۋەلگە ئايلاندۇرۇش .tab-paneئۈچۈن ، ھەر بىر بەتكۈچكە ئۆزگىچە كىملىك ​​بىلەن ئۇلارنى ئوراپ قويۇڭ .tab-content.

<div class = "tabbable" > <! - پەقەت سول / ئوڭ بەتكۈچلەر ئۈچۈنلا تەلەپ قىلىنىدۇ ->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" > <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> Howdy ، مەن 2-بۆلۈمدە. </p>
    </div>
  </div>
</div>

بەتكۈچتە سۇسلاشتى

بەتكۈچلەرنى سۇسلاشتۇرۇش ئۈچۈن ، .fadeھەر بىرىگە قوشۇڭ .tab-pane.

JQuery قىستۇرمىسىنى تەلەپ قىلىدۇ

بارلىق جەدۋەل بەتكۈچلىرى بىزنىڭ يېنىك دەرىجىدىكى jQuery قىستۇرمىسى ئارقىلىق قوزغىتىلغان. JavaScript docs بېتىدىكى جەدۋەل بەتكۈچلىرىنى قانداق قىلىپ ھاياتقا ئېرىشتۈرۈش ھەققىدىكى تەپسىلاتلارنى ئوقۇڭ .

ھەر قانداق يۆنىلىشتىكى جەدۋەل

ئاستىدىكى بەتكۈچ

HTML نىڭ تەرتىپىنى توغرىلاپ ، ئاستىغا بەتكۈچ قويۇش ئۈچۈن دەرس قوشۇڭ.

<div class = "جەدۋەل بەتكۈچ-ئاستىدىكى" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

سول تەرەپتىكى بەتكۈچ

دەرسنى ئالماشتۇرۇپ سول تەرەپكە بەتكۈچ قويۇڭ.

<div class = "جەدۋەل بەتكۈچ-سول" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

ئوڭ تەرەپتىكى بەتكۈچ

ئوڭغا بەتكۈچ قويۇش ئۈچۈن دەرسنى ئالماشتۇرۇڭ.

<div class = "جەدۋەل بەتكۈچ-ئوڭ" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Basic navbar

باشلاش ئۈچۈن ، يولباشچىلار تۇراقلىق (ئۈستىگە مۇقىملاشتۇرۇلمايدۇ) بولۇپ ، تۈر ئىسمى ۋە ئاساسىي يول باشلاشنى قوللايدۇ. .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>  

يول ئۇلىنىشى

يول باشلاش تۈرلىرى تەرتىپسىز تىزىملىك ​​ئارقىلىق قوشۇش ئاددىي.

<ul class = "nav" > 
  <li class = "active" > 
    <a href = "#"> باش بەت </a> 
  </li>
  <li> <a href = "#"> ئۇلىنىش </a> </li> 
  <li> <a href = "#"> ئۇلىنىش </a> </li> 
</ul>

قۇرۇق تىزىملىك ​​تۈرى ۋە ئاددىي دەرسلىك بىلەن دېڭىز ئۇلىنىشىڭىزغا بۆلگۈچلەرنى ئاسانلا قوشالايسىز. بۇنى ئۇلىنىشلار ئارىسىغا قوشۇڭ:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" > </li> 
  ...
</ul>

جەدۋەل

جەدۋەلنى توغرا ئۇسلۇب ۋە ئورۇن بەلگىلەش ئۈچۈن ، تۆۋەندىكىدەك مۇۋاپىق دەرسلەرنى قوشۇڭ. سۈكۈتتىكى جەدۋەل ئۈچۈن ئۇنى ئۆز ئىچىگە ئالىدۇ ياكى .navbar-formمۇۋاپىق توغرىلاڭ..pull-left.pull-right

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <كۇنۇپكا تىپى = "يوللاش" class = "btn" > يوللاش </button>  
</form>

ئىزدەش جەدۋىلى

تېخىمۇ خاسلاشتۇرۇلغان ئىزدەش جەدۋىلى ئۈچۈن ، يولباشچىدىكى ئالاھىدە ئۇسلۇبلارنىڭ .navbar-searchكىرگۈزۈشىگە formۋە .search-queryكىرگۈزۈشكە قوشۇڭ.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "ئىزدەش" >   
</form>

زاپچاسلارنى توغرىلاش

Nav ئۇلىنىشى ، ئىزدەش شەكلى ياكى تېكىستنى توغرىلاڭ ، .pull-leftياكى .pull-rightدەرسلىكلەرنى ئىشلىتىڭ. ھەر ئىككى سىنىپ بەلگىلەنگەن يۆنىلىشكە CSS لەيلىمە قوشىدۇ.

تامچە ئىشلىتىش

بىر ئاز بەلگە ۋە چۈشۈش JavaScript قىستۇرمىسى بىلەن دېڭىزغا تامچە ۋە تامچە قوشۇڭ .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"> _   
      ھېسابات
      <b class = "caret" > </b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

تېخىمۇ كۆپ بەلگە ۋە چاقىرىشتىن چېكىنىش ھەققىدىكى ئۇچۇرلارنى JavaScript تارتما ھۆججىتىنى زىيارەت قىلىڭ .

تېكىست

تېكىستنىڭ تىزمىسىنى ئېلېمېنتقا ئوراپ .navbar-text، ئادەتتە <p>مۇۋاپىق يېتەكلەش ۋە رەڭگىگە بەلگە قويۇڭ.

ئىختىيارى كۆرسىتىش پەرقى

سىرتقى بالداقتىكى قوشۇمچە سىنىپ بىلەن كۆرۈنۈش بالدىقىنىڭ ئۈستى ياكى ئاستى تەرىپىگە توغرىلاڭ .navbar.

ئۈستىگە مۇقىملاشتۇرۇلغان

ئەڭ ئاز دېگەندە 40px نى قوشۇش .navbar-fixed-topئارقىلىق ئۇنىڭ ئاستىدىكى يوشۇرۇن رايوننى ھېسابلاشنى ئۇنتۇپ قالماڭ . بۇنى يادرولۇق Bootstrap CSS دىن كېيىن ۋە ئىختىيارى ئىنكاسچان CSS دىن بۇرۇن قوشۇشقا كاپالەتلىك قىلىڭ.padding<body>

<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 يىمىرىلگەن 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>  
 
      <! - 940px ياكى ئۇنىڭدىنمۇ ئاز يوشۇرۇنغان بارلىق نەرسىلەرنى بۇ يەرگە قويۇڭ ->
      <div class = "nav-collapse" > 
        <! - .nav, .navbar-search, .navbar-form, etc ->
      </div>
 
    </div>
  </div>
</div>

تەتۈر ئۆزگىرىش

قوشۇش ئارقىلىق يولباشچىنىڭ كۆرۈنۈشىنى ئۆزگەرتىڭ .navbar-inverse.

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

مىساللار

ئۇ بىر نەچچە بەتتە كۆرسىتىلىشى مۇمكىن.

<ul class = "breadcrumb" > 
  <li> <a href = "#"> باش بەت </a> <span class = "divider" > / </span> </li>   
  <li> <a href = "#"> كۈتۈپخانا </a> < span class = "divider" > / </span> </li>   
  <li class = "active" > سانلىق مەلۇمات </li> 
</ul>

Standard pagination

Rdio دىن ئىلھام ئالغان ئاددىي تەسۋىر ، ئەپ ۋە ئىزدەش نەتىجىسى ئۈچۈن ناھايىتى ياخشى. چوڭ بۆلەكنى قولدىن بېرىپ قويۇش تەس ، ئاسان كېڭەيتىشكە بولىدۇ ھەمدە چوڭ چېكىش رايونى بىلەن تەمىنلەيدۇ.

<div class = "pagination" > 
  <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 = "pagination" > 
  <ul>
    <li class = "disabled" > <a href = "#"> & laquo; </a> </li>  
    <li class = "active" > <a href = "#"> 1 </a> </li >  
    ...
  </ul>
</div>

كۆزلىگەن ئۇسلۇبلارنى ساقلاپ قالغاندا چېكىش ئىقتىدارىنى ئۆچۈرۈۋەتمەكچى بولسىڭىز ، ئاكتىپ ياكى چەكلەنگەن لەڭگەرلەرنى خالىغانچە ئالماشتۇرالايسىز.

<div class = "pagination" > 
  <ul>
    <li class = "disabled" > <span> & laquo; </span> </li> 
    <li class = "active" > <span> 1 </span> </li> 
    ...
  </ul>
</div>

Size

چوڭراق ياكى كىچىكرەك تەسەۋۋۇرمۇ؟ قوشۇڭ ياكى .pagination-largeقوشۇمچە چوڭلۇقتا..pagination-small.pagination-mini

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

توغرىلاش

ئىككى خىل تاللاش سىنىپىدىن بىرنى قوشۇڭ ، ئۇلانمىلارنىڭ ئۇلىنىشىنى ئۆزگەرتىڭ: .pagination-centeredۋە .pagination-right.

<div class = "pagination pagination-center" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

Pager

يېنىك بەلگە ۋە ئۇسلۇب بىلەن ئاددىي كىچىكلىتىش ئەمەلگە ئاشۇرۇش ئۈچۈن تېز ۋە كېيىنكى ئۇلىنىشلار. بىلوگ ياكى ژۇرنال قاتارلىق ئاددىي تور بېكەتلەر ئۈچۈن ناھايىتى ياخشى.

سۈكۈتتىكى مىسال

سۈكۈتتىكى ھالەتتە ، قەغەز مەركىزى ئۇلىنىدۇ.

<ul class = "pager" > 
  <li> <a href = "#"> ئالدىنقى </a> </li> 
  <li> <a href = "#"> كېيىنكى </a> </li> 
</ul>

ئۇلانمىلار

ئۇنىڭدىن باشقا ، سىز ھەر بىر ئۇلىنىشنى يان تەرەپكە توغرىلىيالايسىز:

<ul class = "pager" > 
  <li class = "previous" > 
    <a href = "#"> & larr ; كونا </a> 
  </li>
  <li class = "next" > 
    <a href = "#"> يېڭى & rarr ; </a> 
  </li>
</ul>

ئىختىيارىي چەكلەنگەن ھالەت

Pager ئۇلانمىلىرى يەنە ئادەتتىكى .disabledئىشلىتىش سىنىپىدىن پايدىلىنىدۇ.

<ul class = "pager" > 
  <li class = "ئالدىنقى چەكلەنگەن" > 
    <a href = "#"> & larr ; كونا </a> 
  </li>
  ...
</ul>

Labels

Badges

ئاسانلا يىمىرىلىدۇ

ئاسان ئەمەلگە ئاشۇرۇش ئۈچۈن ، بەلگە ۋە بەلگە پەقەت :emptyمەزمۇن يوق ۋاقىتتا (CSS تاللىغۇچ ئارقىلىق) يىمىرىلىدۇ.

قەھرىمان بىرلىكى

تور بېتىڭىزدىكى ئاچقۇچلۇق مەزمۇنلارنى كۆرسىتىش ئۈچۈن يېنىك ، جانلىق تەركىب. ئۇ سېتىش ۋە مەزمۇن ئېغىر تور بېكەتلەردە ياخشى ئىشلەيدۇ.

<div class = "قەھرىمان-بىرلىك" > 
  <h1> ماۋزۇ </ h1>
  <p> خەتكۈچ </ p>
  <p>
    <a class = "btn btn- دەسلەپكى btn-large"> 
      تەپسىلاتى
    </a>
  </p>
</div>

بەت بېشى

h1بىر بەتتىكى مۇۋاپىق بوشلۇق ۋە بۆلەك بۆلەكلىرىگە ماس كېلىدىغان ئاددىي قېپى . ئۇ h1سۈكۈتتىكى small، ئېلېمېنت ۋە باشقا نۇرغۇن زاپچاسلارنى ئىشلىتەلەيدۇ (قوشۇمچە ئۇسلۇب بىلەن).

<div class = "page-header" > 
  <h1> ئۈلگە بەت بېشى <small> ماۋزۇنىڭ تارماق تېكىستى </small> </h1>
</div>

سۈكۈتتىكى كىچىك كۆرۈنۈش

سۈكۈتتىكى ھالەتتە ، Bootstrap نىڭ كىچىك كۆرۈنۈشلىرى ئەڭ ئېھتىياجلىق بولغان بەلگە بىلەن ئۇلانغان رەسىملەرنى كۆرسىتىش ئۈچۈن لايىھەلەنگەن.

يۇقىرى دەرىجىدە تەڭشىگىلى بولىدۇ

ئازراق قوشۇمچە بەلگە ئارقىلىق كىچىك رەسىمگە ماۋزۇ ، ئابزاس ياكى كۇنۇپكا قاتارلىق ھەر قانداق HTML مەزمۇنىنى قوشقىلى بولىدۇ.

كىچىك كۆرۈنۈشنى نېمىشقا ئىشلىتىمىز

كىچىك رەسىملەر (ئىلگىرى .media-gridv1.4 غىچە) رەسىم ياكى سىن تورلىرى ، رەسىم ئىزدەش نەتىجىسى ، پارچە سېتىش مەھسۇلاتلىرى ، مەبلەغ يۈرۈشتۈرۈش ئۈسكۈنىلىرى ۋە باشقىلار ئۈچۈن ناھايىتى ياخشى. ئۇلار ئۇلىنىش ياكى تۇراقلىق مەزمۇن بولالايدۇ.

ئاددىي ، جانلىق بەلگە

كىچىك كۆرۈنۈش بەلگىسى ئاددىي - ulھەر خىل liئېلېمېنتلار تەلەپ قىلىنغان نەرسە. ئۇ يەنە دەرىجىدىن تاشقىرى جانلىق بولۇپ ، ھەر قانداق مەزمۇندىكى مەزمۇنلارنى ئوراپ قويسىڭىز بولىدۇ.

كاتەكچە ئىستوننىڭ چوڭ-كىچىكلىكىنى ئىشلىتىدۇ

.span2ئاخىرىدا ، كىچىك كۆرۈنۈش زاپچاسلىرى ھازىرقى تور سىستېمىسى سىنىپىنى ئىشلىتىدۇ.span3 .

Markup

يۇقىرىدا دېيىلگەندەك ، كىچىك كۆرۈنۈشنىڭ لازىملىق بەلگىسى يېنىك ۋە بىۋاسىتە. تۆۋەندىكى رەسىملەرنىڭ سۈكۈتتىكى تەڭشىكىگە قاراڭ :

<ul class = "كىچىك كۆرۈنۈش" > 
  <li class = "span4" > 
    <a href = "#" class = "thumbnail"> _  
      <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 = "ئاگاھلاندۇرۇش" > & times; </button>   
  <strong> ئاگاھلاندۇرۇش! </ strong> ئەڭ ياخشى تەكشۈرۈڭ ، سىز بەك ياخشى كۆرۈنمەيسىز.
</div>

كۇنۇپكىلارنى بىكار قىلىش

كۆچمە Safari ۋە Mobile Opera توركۆرگۈلىرى خاسلىقتىن باشقا ، بەلگە ئىشلەتكەندە ئاگاھلاندۇرۇشنى ئەمەلدىن قالدۇرۇشنى data-dismiss="alert"تەلەپ قىلىدۇ .href="#"<a>

<a href = "#" class = "close" data-dismiss = "alert"> & times ; </a>   

ئۇنىڭدىن باشقا ، سىز <button>سانلىق مەلۇمات خاسلىقى بار ئېلېمېنتنى ئىشلىتىشىڭىز مۇمكىن ، بىز ھۆججەتلىرىمىز ئۈچۈن قىلىشنى تاللىدۇق. ئىشلەتكەندە <button>چوقۇم قوشۇشىڭىز كېرەك type="button"ياكى جەدۋەللىرىڭىز تاپشۇرماسلىقى مۇمكىن.

<button type = "button" class = "close" data-dismiss = "ئاگاھلاندۇرۇش" > & times; </button>   

JavaScript ئارقىلىق ئاگاھلاندۇرۇشنى ئەمەلدىن قالدۇرۇڭ

ئاگاھلاندۇرۇشنى تېز ۋە ئاسان ئەمەلدىن قالدۇرۇش ئۈچۈن jQuery قىستۇرمىسىنى ئىشلىتىڭ .

تاللانما

ئۇزۇنراق ئۇچۇرغا ئېرىشىش ئۈچۈن ئاگاھلاندۇرۇش ئورالمىسىنىڭ ئۈستى ۋە ئاستىدىكى تاختاينى كۆپەيتىڭ .alert-block.

<div class = "ئاگاھلاندۇرۇش ئاگاھلاندۇرۇش-توسۇش" > 
  <button type = "button" class = "close" data-dismiss = "ئاگاھلاندۇرۇش" > & times; </button>   
  <h4> ئاگاھلاندۇرۇش! </h4>
  ئەڭ ياخشىسى yo ئۆزىڭىزنى تەكشۈرۈڭ ، سىز ئەمەس ...
</div>

كونكېرت تاللاش

ئاگاھلاندۇرۇشنىڭ مەزمۇنىنى ئۆزگەرتىش ئۈچۈن ئىختىيارى دەرسلەرنى قوشۇڭ.

خاتالىق ياكى خەتەر

<div class = "ئاگاھلاندۇرۇش ئاگاھلاندۇرۇش-خاتالىق" > 
  ...
</div>

مۇۋەپپەقىيەت

<div class = "ئاگاھلاندۇرۇش ئاگاھلاندۇرۇشى-مۇۋەپپەقىيەت" > 
  ...
</div>

ئۇچۇر

<div class = "ئاگاھلاندۇرۇش ئاگاھلاندۇرۇشى" > 
  ...
</div>

مىسال ۋە بەلگە

Basic

تىك گىرادۇس بىلەن سۈكۈتتىكى ئىلگىرىلەش بالدىقى.

<div class = "ئىلگىرىلەش" > 
  <div class = "bar" style = " width : 60 %; " > </div>   
</div>

Striped

گىرافىك ئىشلىتىپ سىزىقلىق ئۈنۈم ھاسىل قىلىدۇ. IE7-8 دا ئىشلەتكىلى بولمايدۇ.

<div class = "ئىلگىرىلەش-ئىلگىرىلەش" > 
  <div class = "bar" style = " width : 20 %; " > </div>   
</div>

Animated

ئوڭدىن سولغا سىزىقلارنى جانلاندۇرۇش ئۈچۈن .activeقوشۇڭ . .progress-stripedIE نىڭ بارلىق نەشرىدە يوق.

<div class = "ئالغا ئىلگىرىلەش-سىزىقلىق ئاكتىپ" > 
  <div class = "bar" style = " width : 40 %; " > </div>   
</div>

Stacked

ئوخشاش بىر قانچە بالداقنى ئوخشاش .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 = " width : 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 = "ئىلگىرىلەش-ئۇچۇر ئىلگىرىلەش-سىزىق" > 
  <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 دىن بۇرۇنقى نەشىرلەر كارتوننى قوللىمايدۇ.

تېكىست مەزمۇنى بىلەن بىللە سول ياكى ئوڭغا توغرىلانغان رەسىمنى ئۆز ئىچىگە ئالغان ھەر خىل زاپچاسلارنى قۇرۇشنىڭ ئابستراكت ئوبيېكت ئۇسلۇبى (بىلوگ باھالىرى ، Tweets قاتارلىقلار).

سۈكۈتتىكى مىسال

سۈكۈتتىكى مېدىيا مېدىيا ئوبيېكتىنى (رەسىم ، سىن ، ئاۋاز) مەزمۇن چەكلىمىسىنىڭ سول ياكى ئوڭ تەرىپىدە لەيلەشكە يول قويىدۇ.

مېدىيا ماۋزۇسى

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin تاۋار. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

مېدىيا ماۋزۇسى

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin تاۋار. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

مېدىيا ماۋزۇسى

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin تاۋار. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class = "media" > 
  <a class = "pull-left" href = "#"> _  
    <img class = "media-object" data-src = "holder.js / 64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-head" > مېدىيا ماۋزۇسى </h4> 
    ...
 
    <! - ئۇلانغان مېدىيا ئوبيېكتى ->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

مېدىيا تىزىملىكى

ئازراق قوشۇمچە بەلگە ئارقىلىق ، تىزىملىك ​​ئىچىدىكى مېدىيانى ئىشلىتەلەيسىز (باھا تېمىسى ياكى ماقالە تىزىملىكى ئۈچۈن پايدىلىق).

<ul class = "media-list" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#"> _  
      <img class = "media-object" data-src = "holder.js / 64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-head" > مېدىيا ماۋزۇسى </h4> 
      ...
 
      <! - ئۇلانغان مېدىيا ئوبيېكتى ->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

قۇدۇققا ئاددىي تەسىر قىلىپ ، ئېلېمېنتقا ئاددىي ئۈنۈم بېرىدۇ.

<div class = "well" > 
  ...
</div>

ئىختىيارى دەرسلەر

ئىككى تاللاشچان ئۆزگەرتىش سىنىپى بار تاختا ۋە يۇمىلاق بۇلۇڭنى كونترول قىلىڭ.

<div class = "well-large" > 
  ...
</div>

<div class = "well-small" > 
  ...
</div>

سىنبەلگە تاقاش

مودېل ۋە ئاگاھلاندۇرۇش قاتارلىق مەزمۇنلارنى ئەمەلدىن قالدۇرۇش ئۈچۈن ئادەتتىكى تاق سىنبەلگىسىنى ئىشلىتىڭ.

<button class = "close" > & times; </button> 

href="#"ئەگەر لەڭگەر ئىشلەتمەكچى بولسىڭىز ، iOS ئۈسكۈنىلىرى چېكىش ھادىسىلىرىنى تەلەپ قىلىدۇ .

<a class = "close" href = "#"> & times ; </a>  

ياردەمچى دەرسلەر

كىچىك كۆرسىتىش ياكى ھەرىكەت ئۆزگەرتىش ئۈچۈن ئاددىي ، قاراتمىلىقى بولغان دەرسلەر.

.pull-left

بىر ئېلېمېنت قالدى

class = "pull-left"

. تارتىش - سول {
  float : left ;
}

.pull-right

بىر ئېلېمېنتنى توغرىلاڭ

class = "pull-right"

. تارتىش - ئوڭ {
  float : right ;
}

.muted

ئېلېمېنتنىڭ رەڭگىنى ئۆزگەرتىڭ#999

class = "ئاۋازسىز"

. muted {
  color : # 999; 
}

.clearfix

floatھەر قانداق ئېلېمېنتنى تازىلاڭ

class = "clearfix"

. clearfix {
  * zoom : 1 ; 
  &: before ,
  &: after {
    كۆرسىتىش : جەدۋەل ;
    مەزمۇن : "" ; 
  }
  &: after {
    ئېنىق : ھەر ئىككىسى
  }
}