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

كۇنۇپكا گۇرۇپپىلىرىنى ئىشلىتىپ كۆپ كۇنۇپكىلارنى بىرلەشتۈرۈڭ. ئۇلارنى بىر يۈرۈش <a>ياكى <button>ئېلېمېنتلار بىلەن قۇرۇپ چىقىڭ.

ئەڭ ياخشى ئۇسۇل

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

• ئوخشاش بىر ئېلېمېنتنى دائىم بىر كۇنۇپكا گۇرۇپپىسىدا ئىشلىتىڭ ، <a>ياكى <button>.
• ئوخشاش بىر كۇنۇپكا گۇرۇپپىسىدا ئوخشىمىغان رەڭدىكى كۇنۇپكىلارنى ئارىلاشتۇرماڭ.
• سىنبەلگە تېكىستنىڭ ئورنىغا ياكى ئورنىغا ئىشلىتىڭ ، ئەمما مۇۋاپىق بولغاندا alt ۋە ماۋزۇ تېكىستىنى جەزملەشتۈرۈڭ.

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

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

HTML لەڭگەر خەتكۈچ كۇنۇپكىسى بىلەن ياسالغان ئۆلچەملىك كۇنۇپكا گۇرۇپپىسىنى قانداق ئىزدەيدۇ:

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

قورالبالدىقى مىسالى

تېخىمۇ مۇرەككەپ زاپچاسلار ئۈچۈن يۈرۈشلۈكلەرنى بىرلەشتۈرۈڭ <div class="btn-group">.<div class="btn-toolbar">

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

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

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

Javascript نى ئېلىڭ »

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

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

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

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

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

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

<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 ئارقىلىق ھەل قىلىشىڭىز كېرەك.

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

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

Size

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

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <! - تىزىملىك ​​تىزىملىكى ئۇلىنىشى ->
  </ul>
</div>

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

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

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

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

تامچە تىزىملىكلەرنى بىۋاسىتە ئاتا-ئانىسىغا بىر سىنىپ قوشۇش ئارقىلىق ئاستىدىن يۇقىرىغا ئالماشتۇرغىلى بولىدۇ .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.

قاچان ئىشلىتىش

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

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

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

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>

قانداق تىزىش

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

رەتلەنگەن بەتكۈچ

• ئۆي
• ئارخىپ
• ئۇچۇرلار

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

ئورالغان دورىلار

• ئۆي
• ئارخىپ
• ئۇچۇرلار

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

مول تىزىملىك ​​ئاسانلاشتى

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

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

تارتما تىزىملىكلەر

• ئۆي
• ياردەم
• Dropdown
  • ھەرىكەت
  • باشقا ھەرىكەت
  • بۇ يەردە باشقا بىر نەرسە
  • ئايرىم ئۇلىنىش

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

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

• ئۆي
• ياردەم
• Dropdown
  • ھەرىكەت
  • باشقا ھەرىكەت
  • بۇ يەردە باشقا بىر نەرسە
  • ئايرىم ئۇلىنىش

<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 غا ئوخشاش يان بالداقتا ئەڭ ياخشى ئىشلىتىلىدۇ.

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

سىنبەلگە بىلەن

يول باشلاش تىزىملىكىمۇ سىنبەلگە بىلەن تەمىنلەش ئاسان. سىنىپقا مۇۋاپىق <i>خەتكۈچ قوشۇڭ ، تەڭشەلدىڭىز.

گورىزونتال بۆلگۈچ

سىنىپ بىلەن قۇرۇق تىزىملىك ​​تۈرىنى قۇرۇش ئارقىلىق گورىزونتال بۆلگۈچ قوشۇڭ .divider:

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

مىسال 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>

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

ئوخشاش مىسال ، ئەمما <i>سىنبەلگە بەلگىسى بار.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#"> _ 
      <i class = "icon-book" > </i> 
      كۈتۈپخانا
    </a>
  </li>
  ...
</ul>

نېمىلەرنى ئۆز ئىچىگە ئالىدۇ

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

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

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

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

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

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

Javascript Get نى ئېلىڭ

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

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

ئوڭ ياكى سولغا توغرىلانغان بەتكۈچلەر ئۈچۈن .nav-tabsۋە ئىچىگە .tab-contentئوراپ بېرىڭ .tabbable.

تۈز سىزىق

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

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

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

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>

Navbar scafolding

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

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "قاچا" > 
      ...
    </div>
  </div>
</div>

مۇقىم يولباشچى

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

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

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

يولباشچىنى چاپلىغاندا ، ئاستىدىكى يوشۇرۇن رايوننى ھېسابلاشنى ئۇنتۇپ قالماڭ. بۇنىڭغا 40px ياكى ئۇنىڭدىن ئارتۇق تاختا قوشۇڭ <body>. بۇنى يادرولۇق Bootstrap CSS دىن كېيىن ۋە ئىختىيارى ئىنكاسچان CSS دىن بۇرۇن قوشۇشقا كاپالەتلىك قىلىڭ.

ماركا ئىسمى

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

<a class = "brand" href = "#"> _  
  تۈر ئىسمى
</a>

يولباشچىدىكى شەكىللەر

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

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
</form>

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

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

ئىختىيارى جاۋاب قايتۇرۇش

ئۈستى بالداقتىكى مەزمۇننىڭ مىقدارىغا ئاساسەن ، سىز جاۋاب قايتۇرۇش تاللانمىلىرىنى يولغا قويسىڭىز بولىدۇ. شۇنداق قىلىش ئۈچۈن ، nav مەزمۇنلىرىڭىزنى ئۆز ئىچىگە ئالغان 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>

يول ئۇلىنىشى

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

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

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

دېڭىز ئارمىيىسى ، ئىزدەش شەكلى ياكى تېكىستنى توغرىلاش ئۈچۈن ، .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 Get نى ئېلىڭ

يولباشچىدىكى تېكىست

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

نىمىشقا ئىشلىتىمىز؟

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

مىساللار

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

• ئۆي

• Home /
• كۈتۈپخانا

• Home /
• كۈتۈپخانا /
• سانلىق مەلۇمات

Markup

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

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

قاچان ئىشلىتىش

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

دۆلەت بەت ئۇلىنىشى

ئۇلانمىلارنى خاسلاشتۇرغىلى بولىدۇ ھەمدە مۇۋاپىق سىنىپ بىلەن بىر قاتار ئەھۋاللاردا ئىشلەيدۇ. .disabledئاچقىلى بولمايدىغان ئۇلىنىش ۋە .activeنۆۋەتتىكى بەت ئۈچۈن.

ئەۋرىشىم توغرىلاش

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

مىساللار

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

Markup

A بىلەن ئورالغان <div>، كىچىكلىتىش پەقەت ئا <ul>.

<div class = "pagination" > 
  <ul>
    <li> <a href = "#"> ئالدىنقى </a> </li> 
    <li class = "active" > 
      <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>

Pager ھەققىدە

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

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

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

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

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

• ئالدىنقى
• كېيىنكى

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

ئۇلانمىلار

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

• ← Older
• يېڭى →

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

ھەققىدە

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

ئىشلەتكىلى بولىدىغان دەرسلەر

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

Markup

مەزمۇنلىرىڭىزنى مۇنداق ئوراپ قويۇڭ div:

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

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

<div class = "page-header" > 
  <h1> مىسال بەت بېشى </h1>
</div>

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

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

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

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

• 

  كىچىك بەلگە

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida eget metus. Nullam id dolor id nibh ئۇلترا ماشىنىلىرى ut id elit.

  ھەرىكەت ھەرىكەت

• 

  كىچىك بەلگە

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida eget metus. Nullam id dolor id nibh ئۇلترا ماشىنىلىرى ut id elit.

  ھەرىكەت ھەرىكەت

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

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

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

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

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

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

بەلگە

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

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

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

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

<div class = "ئاگاھلاندۇرۇش ئاگاھلاندۇرۇش-توسۇش" > 
  <a class = "close" data-dismiss = "alert" href = "#"> × </a> _   
  <h4 class = "ئاگاھلاندۇرۇش-ماۋزۇ" > ئاگاھلاندۇرۇش! </h4> 
  ئەڭ ياخشىسى yo ئۆزىڭىزنى تەكشۈرۈڭ ، سىز ئەمەس ...
</div>

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

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

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

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

ئۇچۇر

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

Basic

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

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

Striped

گرافىك ئىشلىتىپ سىزىقلىق ئۈنۈم ھاسىل قىلىدۇ (IE يوق).

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

Animated

سىزىقلىق مىسالنى ئېلىپ ئۇنى جانلاندۇرىدۇ (IE يوق).

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

قوشۇمچە رەڭلەر

ئىلگىرىلەش بالدىقى ئوخشاش ئۇسلۇبتىكى بەزى كۇنۇپكىلار ۋە ئاگاھلاندۇرۇش سىنىپلىرىنى ئىشلىتىدۇ.

تاياقچە تاياقچە

قاتتىق رەڭلەرگە ئوخشاش ، بىزدە ئوخشىمىغان سىزىقلىق ئىلگىرىلەش بالدىقى بار.

Behavior

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

ئەگەر .activeدەرسنى ئىشلەتسىڭىز ، .progress-stripedئىلگىرىلەش بالدىقىڭىز سولدىن ئوڭغا سىزىقلارنى جانلاندۇرىدۇ.

توركۆرگۈنى قوللاش

ئىلگىرىلەش بالدىقى CSS3 رېشاتكىسى ، ئۆتكۈنچى ۋە كارتون ئارقىلىق بارلىق ئۈنۈملىرىنى قولغا كەلتۈرىدۇ. بۇ ئىقتىدارلار IE7-9 ياكى Firefox نىڭ كونا نەشرىدە قوللىمايدۇ.

Opera ۋە IE بۇ ۋاقىتتا كارتوننى قوللىمايدۇ.

Wells

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

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

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

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

×

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

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

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