زاپچاسلار

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

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

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

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

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

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

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

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

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

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

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

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

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

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

Javascript نى ئېلىڭ »

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

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

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

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

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

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">
  3. ھەرىكەت
  4. <span class = "caret" > </span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <! - تىزىملىك ​​تىزىملىكى ئۇلىنىشى ->
  8. </ul>
  9. </div>

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

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

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

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

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


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

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

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

Size

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

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

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

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > ھەرىكەت </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <! - تىزىملىك ​​تىزىملىكى ئۇلىنىشى ->
  8. </ul>
  9. </div>

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

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

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > تامچە </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <! - تىزىملىك ​​تىزىملىكى ئۇلىنىشى ->
  8. </ul>
  9. </div>

كۆپ بەتلىك بەت

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

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

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

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

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

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

مىساللار

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

Markup

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

  1. <div class = "pagination" >
  2. <ul>
  3. <li> <a href = "#"> ئالدىنقى </a> </li>
  4. <li class = "active" >
  5. <a href = "#"> 1 </a> _
  6. </li>
  7. <li> <a href = "#"> 2 </a> </li>
  8. <li> <a href = "#"> 3 </a> </li>
  9. <li> <a href = "#"> 4 </a> </li>
  10. <li> <a href = "#"> كېيىنكى </a> </li>
  11. </ul>
  12. </div>

Pager ئالدىنقى ۋە كېيىنكى ئۇلىنىشلار ئۈچۈن

Pager ھەققىدە

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

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

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

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

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

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#"> ئالدىنقى </a> _
  4. </li>
  5. <li>
  6. <a href = "#"> كېيىنكى </a> _
  7. </li>
  8. </ul>

ئۇلانمىلار

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

  1. <ul class = "pager" >
  2. <li class = "previous" >
  3. <a href = "#"> & larr ; كونا </a>
  4. </li>
  5. <li class = "next" >
  6. <a href = "#"> يېڭى & rarr ; </a>
  7. </li>
  8. </ul>
Labels Markup
سۈكۈتتىكى <span class="label">Default</span>
مۇۋەپپەقىيەت <span class="label label-success">Success</span>
ئاگاھلاندۇرۇش <span class="label label-warning">Warning</span>
مۇھىم <span class="label label-important">Important</span>
ئۇچۇر <span class="label label-info">Info</span>
ئەكسىچە <span class="label label-inverse">Inverse</span>

ھەققىدە

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

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

ئىسمى مىسال Markup
سۈكۈتتىكى 1 <span class="badge">1</span>
مۇۋەپپەقىيەت 2 <span class="badge badge-success">2</span>
ئاگاھلاندۇرۇش 4 <span class="badge badge-warning">4</span>
مۇھىم 6 <span class="badge badge-important">6</span>
ئۇچۇر 8 <span class="badge badge-info">8</span>
ئەكسىچە 10 <span class="badge badge-inverse">10</span>

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

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

Markup

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

  1. <div class = "قەھرىمان-بىرلىك" >
  2. <h1> ماۋزۇ </ h1>
  3. <p> خەتكۈچ </ p>
  4. <p>
  5. <a class = "btn btn- دەسلەپكى btn-large">
  6. تەپسىلاتى
  7. </a>
  8. </p>
  9. </div>

ياخشىمۇسىز ، دۇنيا!

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

تەپسىلاتى

بەت بېشى

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

  1. <div class = "page-header" >
  2. <h1> مىسال بەت بېشى </h1>
  3. </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.

بەلگە

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

  1. <ul class = "كىچىك كۆرۈنۈش" >
  2. <li class = "span3" >
  3. <a href = "#" class = "thumbnail"> _
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

كىچىك كۆرۈنۈشتىكى HTML مەزمۇنىغا نىسبەتەن ، بەلگە ئازراق ئۆزگىرىدۇ. ھەر قانداق جايدا چەكلەش دەرىجىسىنىڭ مەزمۇنىغا يول قويۇش ئۈچۈن ، بىز <a>بۇنىڭغا <div>ئوخشاش نەرسىلەرنى ئالماشتۇرىمىز:

  1. <ul class = "كىچىك كۆرۈنۈش" >
  2. <li class = "span3" >
  3. <div class = "كىچىك كۆرۈنۈش" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> كىچىك بەلگە </ h5>
  6. <p> كىچىك رەسىمنىڭ ئىزاھاتى بۇ يەردە ... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

تېخىمۇ كۆپ مىساللار

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

يېنىك دەرىجىدىكى سۈكۈتتىكى ھالەت

قايتا يېزىلغان بازا سىنىپى

Bootstrap 2 ئارقىلىق ئاساسى سىنىپنى ئاددىيلاشتۇردۇق: .alertئۇنىڭ ئورنىغا .alert-message. بىز يەنە ئەڭ تۆۋەن تەلەپ قىلىنغان بەلگىنى ئازايتتۇق - <p>سۈكۈتتىكى تەلەپ يوق ، پەقەت تاشقى كۆرۈنۈش <div>.

يەككە ئاگاھلاندۇرۇش ئۇچۇرى

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


Javascript بىلەن ناھايىتى ياخشى ئۆتىدۇ

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

قىستۇرمىنى ئېلىڭ »

مىسال ئاگاھلاندۇرۇشى

ئۇچۇرىڭىزنى ۋە ئىختىيارى تاق سىنبەلگىنى ئاددىي سىنىپ بىلەن div غا ئوراپ بېرىڭ.

ئاگاھلاندۇرۇش! ئەڭ ياخشىسى ئۆزىڭىزنى تەكشۈرۈڭ ، بەك ياخشى كۆرۈنمەيسىز.
  1. <div class = "ئاگاھلاندۇرۇش" >
  2. <button class = "close" data-dismiss = "ئاگاھلاندۇرۇش" > × </button>
  3. <strong> ئاگاھلاندۇرۇش! </ strong> ئەڭ ياخشى تەكشۈرۈڭ ، سىز بەك ياخشى كۆرۈنمەيسىز.
  4. </div>

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

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

ئاگاھلاندۇرۇش!

ئەڭ ياخشىسى ئۆزىڭىزنى تەكشۈرۈڭ ، بەك ياخشى كۆرۈنمەيسىز. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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

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

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

ئاھ! بىر قانچە نەرسىنى ئۆزگەرتىپ قايتا يوللاپ بېقىڭ.
  1. <div class = "ئاگاھلاندۇرۇش ئاگاھلاندۇرۇش-خاتالىق" >
  2. ...
  3. </div>

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

ياخشى! سىز بۇ مۇھىم ئاگاھلاندۇرۇش ئۇچۇرىنى مۇۋەپپەقىيەتلىك ئوقۇدىڭىز.
  1. <div class = "ئاگاھلاندۇرۇش ئاگاھلاندۇرۇشى-مۇۋەپپەقىيەت" >
  2. ...
  3. </div>

ئۇچۇر

Heads up! بۇ ئاگاھلاندۇرۇش سىزنىڭ دىققىتىڭىزگە موھتاج ، ئەمما ئۇ بەك مۇھىم ئەمەس.
  1. <div class = "ئاگاھلاندۇرۇش ئاگاھلاندۇرۇشى" >
  2. ...
  3. </div>

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

Basic

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

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

Striped

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

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

Animated

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

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

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

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

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

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

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

Behavior

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

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

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

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

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

Wells

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

قاراڭ ، مەن بىر قۇدۇقتا!
  1. <div class = "well" >
  2. ...
  3. </div>

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

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

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

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

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