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

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

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

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

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

<div class = "btn-group" > 
  <a class = "btn" href = "#"> 1 </a> _  
  <a class = "btn" href = "#"> 2 </a> _  
  <a class = "btn" href = "#"> 3 </a> _  
</div>

بىر نەچچە گۇرۇپپا قورالبالدىقى بىلەن:

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

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

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

Javascript نى ئېلىڭ »

Heads up

كۇنۇپكا گۇرۇپپىلىرىنىڭ CSS ئايرىم ھۆججەتتە ، كۇنۇپكا-گۇرۇپپىلار.

كۇنۇپكا چۈشۈش

ھەر قانداق كۇنۇپكىنى ئىشلىتىپ تىزىملىك ​​تىزىملىكىنى قوزغىتىپ .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>

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

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

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

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

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

كۈچلۈك ئاساسى سىنىپ

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

نېمە ئۈچۈن بەتكۈچ ۋە دورىلار

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

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

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>خەتكۈچ قوشۇڭ ، تەڭشەلدىڭىز.

مىسال 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 جەدۋەل بەتكۈچلىرىنى تۆت خىل ئۇسلۇبتا بىرلەشتۈرگەن: ئۈستى (سۈكۈتتىكى) ، ئوڭ ، ئاستى ۋە سول.

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

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

بەتكۈچنى جەدۋەل قىلىش ئۈچۈن ، .nav-tabsباشقا بىر بۆلەككە دەرس بىلەن ئوراپ بېرىڭ .tabbable.

ئىختىيارى jQuery قىستۇرمىسى

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

Javascript Get نى ئېلىڭ

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

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-fixed-topئۈچۈن ، سىرتقى div غا قوشۇڭ ، .navbar. CSS دا ، سىز قوشۇش ئارقىلىق كەلتۈرۈپ چىقارغان قاپلىنىشنى ھېسابلىشىڭىز padding-top: 40px;كېرەك <body>.

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

ماركا ئىسمى

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

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

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

.navbar-searchئىزدەش جەدۋىلى دەرسلىك بىلەن يولباشچىدا ئىختىيارى ئۇسلۇبلارنى تاپشۇرۇۋالىدۇ . ئۇنى ئۆز ئىچىگە ئالىدۇ .pull-leftياكى توغرىلاڭ..pull-rightform

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

تامچە قوشۇش

دېڭىز ئارمىيىسىگە تامچە قوشۇش تولىمۇ ئاددىي ، ئەمما بىزنىڭ 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 نى ئېلىڭ

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

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" > 
    <a href = "#"> سانلىق مەلۇمات </a> 
  </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 ھەققىدە

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

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

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

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

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

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

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

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

<div class = "ئاگاھلاندۇرۇش ئاگاھلاندۇرۇش-توسۇش" > 
  <a class = "close"> × </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

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

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

Animated

سىزىقلىق مىسالنى ئېلىپ ئۇنى جانلاندۇرىدۇ.

<div class = "ئىلگىرىلەش-خەتەر 
     progress-striped active " >
  <div class = "bar" 
       style = " width : 40 %; " > </div> 
</div>

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

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

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

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

Behavior

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

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

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

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

ئوپېرا ھازىرچە كارتون فىلىملەرنى قوللىمايدۇ.

Wells

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

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

Badges

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

<span class = "badge" > 3 </div> 

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

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

×

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