Կոճակների խմբեր

Օգտագործեք կոճակների խմբերը մի քանի կոճակներ միացնելու համար որպես մեկ կոմպոզիտային բաղադրիչ: Կառուցեք դրանք մի շարք <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-գործիքադարակ" > 
  <div class = «btn-group» > 
    ...
  </div>
</div>

Checkbox և ռադիո համային տեսականի

Կոճակների խմբերը կարող են նաև գործել որպես ռադիո, որտեղ միայն մեկ կոճակ կարող է ակտիվ լինել, կամ վանդակներ, որտեղ ցանկացած թվով կոճակներ կարող են ակտիվ լինել: Դիտեք Javascript-ի փաստաթղթերը դրա համար:

Ստացեք javascript »

Գլուխները վեր

Կոճակների խմբերի CSS-ը առանձին ֆայլում է՝ button-groups.less:

Կոճակների բացվող ցանկեր

Օգտագործեք ցանկացած կոճակ՝ բացվող ընտրացանկը գործարկելու համար՝ տեղադրելով այն a-ում .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-ով, հղումների ցանկով: Փոխանակեք ներդիրների կամ հաբերի միջև միայն դասի հետ:

Երկու տարբերակներն էլ հիանալի են բովանդակության ենթաբաժինների կամ հարակից բովանդակության էջերի միջև նավարկելու համար:

Հիմնական ներդիրներ

Վերցրեք կանոնավոր <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>

Ինչպես հավաքել դրանք

Քանի որ ներդիրներն ու դեղահաբերը լռելյայն հորիզոնական են, պարզապես ավելացրեք երկրորդ դասը, .nav-stacked, որպեսզի դրանք ուղղահայաց շարված երևան:

Խցանված ներդիրներ

• տուն
• Անձնագիր
• Հաղորդագրություններ

<ul class = «nav nav-tabs nav-stacked» > 
  ...
</ul>

Դրսեւորված հաբեր

• տուն
• Անձնագիր
• Հաղորդագրություններ

<ul class = «nav nav-pills nav-stacked» > 
  ...
</ul>

Հարուստ մենյուները հեշտացված են

Bootstrap ներդիրների և հաբերի բացվող ընտրացանկերը շատ հեշտ են և պահանջում են միայն մի փոքր լրացուցիչ HTML և թեթև jQuery հավելված:

Գնացեք Javascript-ի էջ ՝ Bootstrap- ում բացվող ցանկերի սկզբնավորման վերաբերյալ փաստաթղթերը կարդալու համար :

Բացվող ներդիրներով

• տուն
• Անձնագիր
• Բացվող
  • Գործողություն
  • Մեկ այլ գործողություն
  • Այստեղ այլ բան
  • Առանձնացված հղում

<ul class = «nav nav-tabs» > 
  <li class = «բացվող» > 
    <a class = "dropdown-toggle" 
       data-toggle = «բացվող»
       href = "#" >
        Բացվող
        <b class = «caret» ></b> 
      </a>
    <ul class = «dropdown-menu» > 
      <!-- հղումներ -->
    </ul>
  </li>
</ul>

Դեղահատեր կաթիլներով

• տուն
• Անձնագիր
• Բացվող
  • Գործողություն
  • Մեկ այլ գործողություն
  • Այստեղ այլ բան
  • Առանձնացված հղում

<ul class = «nav nav-pills» > 
  <li class = «բացվող» > 
    <a class = "dropdown-toggle" 
       data-toggle = «բացվող»
       href = "#" >
        Բացվող
        <b class = «caret» ></b> 
      </a>
    <ul class = «dropdown-menu» > 
      <!-- հղումներ -->
    </ul>
  </li>
</ul>

Հավելվածի ոճի նավարկություն

Nav ցուցակները ապահովում են պարզ և հեշտ միջոց՝ ընտրովի վերնագրերով նավի հղումների խմբեր ստեղծելու համար: Դրանք լավագույնս օգտագործվում են կողային տողերում, ինչպիսին է Finder-ը OS X-ում:

Կառուցվածքային առումով, դրանք կառուցված են նույն հիմնական նավի ոճերի վրա, ինչ ներդիրներն ու հաբերը, ուստի օգտագործումը և հարմարեցումը պարզ են:

Սրբապատկերներով

Nav-ների ցուցակները նույնպես հեշտ է համալրել սրբապատկերներով: Ավելացրե՛ք համապատասխան <i>պիտակը դասի հետ և պատրաստ եք:

Նավի ցանկի օրինակ

Վերցրեք հղումների ցանկը և ավելացրեք class="nav nav-list".

<ul class = «nav nav-list» > 
  <li class = «nav-header» > 
    Ցանկի վերնագիր
  </li>
  <li class = «ակտիվ» > 
    <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 հավելված

Բոլոր tabbable ներդիրները սնուցվում են մեր թեթև jQuery հավելվածով: Կարդացեք ավելին այն մասին, թե ինչպես կյանքի կոչել tabbable ներդիրները javascript փաստաթղթերի էջում:

Ստացեք javascript →

Ներքևի ներդիրները

Շրջեք HTML-ի հերթականությունը և ավելացրեք դաս՝ ներդիրները ներքևում տեղադրելու համար:

<div class = "tabbable ներդիրներ-ներքևում" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = «nav nav-tabs» > 
    ...
  </ul>
</div>

Ձախ կողմում գտնվող ներդիրները

Փոխեք դասարանը՝ ձախ կողմում ներդիրները դնելու համար:

<div class = "tabbable Tabs-left" > 
  <ul class = «nav nav-tabs» > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Ներդիրները աջ կողմում

Փոխեք դասարանը՝ աջ կողմում ներդիրները դնելու համար:

<div class = "tabbable tabs-right" > 
  <ul class = «nav nav-tabs» > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Navbar փայտամած

Navbar-ը ստատիկ կամ ֆիքսված ցուցադրման համար այն լավ կառուցվածքի համար պահանջում է ընդամենը մի քանի divs:

<div class = «navbar» > 
  <div դաս =  «navbar-inner» >
    <div դաս =  «կոնտեյներ» >
      ...
    </div>
  </div>
</div>

Որպեսզի նավագոտին ամրացվի տեսադաշտի վերևում, ավելացրեք .navbar-fixed-topամենահեռավոր դիվիզիոնում, .navbar. Ձեր CSS-ում դուք նույնպես պետք է հաշվի առնեք այն համընկնումը, որն այն առաջացնում է՝ ավելացնելով padding-top: 40px;ձեր<body> .

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

Բրենդային անուն

Ձեր ապրանքանիշը կամ նախագծի անունը ցույց տալու պարզ հղումը պահանջում է միայն խարիսխ պիտակ:

<a class = "brand" href = "#" >  
  Նախագծի անուն
</a>

Որոնման ձև

Որոնման ձևերը դասի հետ նավագոտում ստանում են հատուկ ոճեր .navbar-search: Ներառեք .pull-leftկամ .pull-rightդրա վրա՝ formայն հավասարեցնելու համար:

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Որոնում" >   
</form>

Ընտրովի արձագանքող փոփոխություն

Կախված ձեր վերին գծի բովանդակության քանակից, գուցե ցանկանաք կիրառել պատասխանող տարբերակները: Դա անելու համար փաթաթեք ձեր նավի բովանդակությունը պարունակող .nav-collapse.collapsediv-ով և ավելացրեք նավագոտու փոխարկման կոճակը, .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>  
 
      <!-- Այն ամենը, ինչ ցանկանում եք թաքցնել 940px կամ ավելի փոքր չափերով, տեղադրեք այստեղ -->
      <div class = «nav-collapse» > 
        <!-- .nav, .navbar-որոնում, .navbar-form և այլն -->
      </div>
 
    </div>
  </div>
</div>

Նավի հղումներ

Nav-ի տարրերը հեշտ է ավելացնել չպատվիրված ցուցակների միջոցով:

<ul class = «nav» > 
  <li class = «ակտիվ» > 
    <a href = "#" > Գլխավոր </a> 
  </li>
  <li><a href = "#" > Հղում </a></li> 
  <li><a href = "#" > Հղում </a></li> 
</ul>

Բացվող ցանկերի ավելացում

Nav-ի մեջ բացվող ցանկեր ավելացնելը չափազանց պարզ է, բայց պահանջում է մեր Javascript հավելվածի օգտագործումը :

<ul class = «nav» > 
  <li class = «բացվող» > 
    <a href = «#» 
          class = "dropdown-toggle"
          data-toggle = «բացվող» >
          Հաշիվ
          <b class = «caret» ></b> 
    </a>
    <ul class = «dropdown-menu» > 
      ...
    </ul>
  </li>
</ul>

Ստացեք javascript →

Ինչու օգտագործել դրանք

Breadcrumb նավիգացիան օգտագործվում է որպես միջոց՝ օգտվողներին ցույց տալու, թե որտեղ են նրանք գտնվում հավելվածում կամ կայքում, բայց ոչ հիմնական նավիգացիայի համար: Պահպանեք դրանց օգտագործումը նոսր և հակիրճ՝ առավել արդյունավետ լինելու համար:

Օրինակներ

Ցուցադրված մեկ օրինակ, քանի որ այն կարող է ցուցադրվել բազմաթիվ էջերում:

• տուն

• Գլխավոր /
• Գրադարան

• Գլխավոր /
• Գրադարան /
• Տվյալներ

Նշում

HTML-ը ձեր ստանդարտ չդասավորված ցուցակն է՝ հղումներով:

<ul class = «հացի փշուր» > 
  <li>
    <a href = "#" > Գլխավոր </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Գրադարան </a> <span class = "divider" > / </span>   
  </li>
  <li class = «ակտիվ» > 
    <a href = "#" > Տվյալներ </a> 
  </li>
</ul>

Երբ օգտագործել

Չափազանց պարզեցված և նվազագույն ոճով էջադրում, որը ոգեշնչված է Rdio-ից, հիանալի հավելվածների և որոնման արդյունքների համար: Մեծ բլոկը դժվար է բաց թողնել, հեշտությամբ մասշտաբելի և ապահովում է սեղմումների մեծ տարածքներ:

Պետական ​​էջի հղումներ

Հղումները հարմարեցված են և աշխատում են մի շարք հանգամանքներում ճիշտ դասի հետ: .disabledչսեղմվող հղումների և .activeընթացիկ էջի համար:

Ճկուն հավասարեցում

Ավելացրեք երկու կամընտիր դասերից որևէ մեկը՝ էջադրման հղումների հավասարեցումը փոխելու համար. .pagination-centeredև .pagination-right.

Օրինակներ

Լռելյայն էջավորման բաղադրիչը ճկուն է և աշխատում է մի շարք տարբերակներով:

Նշում

Ա-ով փաթաթված <div>, էջադրումը պարզապես մի է <ul>:

<div class = «էջադրում» > 
  <ul>
    <li><a href = "#" > Նախորդ </a></li> 
    <li class = «ակտիվ» > 
      <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>

Փեյջերի մասին

Փեյջեր բաղադրիչը հղումների մի շարք է պարզ էջադրման իրականացման համար՝ թեթև նշագրմամբ և նույնիսկ ավելի թեթև ոճերով: Այն հիանալի է պարզ կայքերի համար, ինչպիսիք են բլոգները կամ ամսագրերը:

Կանխադրված օրինակ

Լռելյայնորեն, փեյջերը կենտրոնացնում է հղումները:

• Նախորդ
• Հաջորդը

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

Կանխադրված մանրապատկերներ

Լռելյայնորեն, Bootstrap-ի մանրապատկերները նախատեսված են ցուցադրելու կապակցված պատկերները նվազագույն պահանջվող նշումներով:

Բարձր կարգավորելի

Մի փոքր լրացուցիչ նշագրման դեպքում հնարավոր է մանրապատկերների մեջ ավելացնել ցանկացած տեսակի HTML բովանդակություն, ինչպիսիք են վերնագրերը, պարբերությունները կամ կոճակները:

• 

  Մանրապատկերի պիտակ

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Գործողություն Գործողություն

• 

  Մանրապատկերի պիտակ

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Գործողություն Գործողություն

Ինչու օգտագործել մանրապատկերներ

Մանրապատկերները (նախկինում .media-gridմինչև v1.4) հիանալի են լուսանկարների կամ տեսանյութերի ցանցերի, պատկերների որոնման արդյունքների, մանրածախ ապրանքների, պորտֆոլիոների և շատ այլ բաների համար: Դրանք կարող են լինել հղումներ կամ ստատիկ բովանդակություն:

Պարզ, ճկուն նշում

Մանրապատկերների նշումը պարզ է . անհրաժեշտ է ulմիայն ցանկացած քանակի liտարրերով: Այն նաև գերճկուն է, որը թույլ է տալիս ցանկացած տեսակի բովանդակություն՝ ընդամենը մի փոքր ավելի մեծ նշագրումով, ձեր բովանդակությունը փաթաթելու համար:

Օգտագործում է ցանցի սյունակների չափերը

Վերջապես, մանրապատկերների բաղադրիչն օգտագործում է ցանցային համակարգի առկա դասերը՝ նման .span2կամ .span3՝ մանրապատկերների չափերը վերահսկելու համար:

Նշում

Ինչպես նշվեց նախկինում, մանրապատկերների համար անհրաժեշտ նշումը թեթև է և պարզ: Ահա կապակցված պատկերների լռելյայն կարգավորումը .

<ul class = «մանրապատկերներ» > 
  <li class = "span3" > 
    <a href = "#" class = "մանրապատկեր" >  
      <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 = "alert-heading" > Զգուշացում: </h4> 
  Լավագույնս ստուգեք ինքներդ ձեզ, դուք չեք ...
</div>

Սխալ կամ վտանգ

<div class = «զգուշացում-սխալ» > 
  ...
</div>

Հաջողություն

<div class = «զգուշացում-հաջողություն» > 
  ...
</div>

Տեղեկություն

<div class = «զգուշացում-տեղեկատվություն» > 
  ...
</div>

Հիմնական

Կանխադրված առաջընթացի գոտի ուղղահայաց գրադիենտով:

<div class = «առաջընթաց» > 
  <div class = «բար» 
       style = " width : 60 %; " ></div> 
</div>

Գծավոր

Օգտագործում է գրադիենտ՝ գծավոր էֆեկտ ստեղծելու համար:

<div class = «առաջընթաց առաջընթաց-տեղեկություն 
     առաջընթաց-գծավոր» >
  <div class = «բար» 
       style = " լայնություն : 20 %; " ></div> 
</div>

Անիմացիոն

Վերցնում է գծավոր օրինակը և կենդանացնում այն:

<div class = «առաջընթաց առաջընթաց-վտանգ 
     առաջընթաց-գծավոր ակտիվ» >
  <div class = «բար» 
       style = " width : 40 %; " ></div> 
</div>

Լրացուցիչ գույներ

Առաջընթացի գծերը օգտագործում են միևնույն դասի անունները որպես կոճակներ և հիշեցումներ նմանատիպ ոճավորման համար:

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

Որպես այլընտրանք, դուք կարող եք հարմարեցնել LESS ֆայլերը և գլորել ձեր սեփական գույներն ու չափերը:

Վարքագիծ

Առաջընթացի գծերը օգտագործում են CSS3 անցումներ, այնպես որ, եթե դինամիկ կերպով կարգավորեք լայնությունը Javascript-ի միջոցով, այն սահուն կերպով կփոխի չափը:

Եթե ​​դուք օգտագործում եք .activeդասը, ձեր .progress-stripedառաջընթացի գծերը կկենդանացնեն ձախից աջ շերտերը:

Բրաուզերի աջակցություն

Առաջընթացի գծերը օգտագործում են CSS3 գրադիենտներ, անցումներ և անիմացիաներ՝ դրանց բոլոր էֆեկտներին հասնելու համար: Այս գործառույթները չեն աջակցվում IE7-8 կամ Firefox-ի ավելի հին տարբերակներում:

Opera-ն այս պահին չի աջակցում անիմացիաներին:

Հորեր

Օգտագործեք ջրհորը որպես պարզ ազդեցություն տարրի վրա՝ դրան ներդիր էֆեկտ տալու համար:

<div class = «լավ» > 
  ...
</div>

Կրծքանշաններ

Օգտագործեք նշան տարրի վրա չկարդացված թվի համար կամ որպես պարզ ցուցիչ:

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

Փակել պատկերակը

Օգտագործեք փակման ընդհանուր պատկերակը բովանդակությունը, օրինակ՝ մոդալները և ծանուցումները մերժելու համար:

×

<a class = "close" > × </a>