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

Օգտագործեք կոճակների խմբերը մի քանի կոճակներ միացնելու համար որպես մեկ կոմպոզիտային բաղադրիչ: Կառուցեք դրանք մի շարք <a>կամ <button>տարրերով:

Լավագույն փորձը

Կոճակների խմբերի և գործիքների տողերի օգտագործման համար խորհուրդ ենք տալիս հետևյալ ուղեցույցները.

• Միշտ օգտագործեք նույն տարրը մեկ կոճակի խմբում <a>կամ <button>.
• Մի խառնեք տարբեր գույների կոճակները նույն կոճակների խմբում:
• Օգտագործեք պատկերակներ՝ ի լրումն կամ տեքստի փոխարեն, բայց համոզվեք, որ անհրաժեշտության դեպքում ներառեք alt և վերնագրի տեքստը:

Առնչվող կոճակների խմբերը բացվող ցանկերով (տե՛ս ստորև) պետք է կանչվեն առանձին և միշտ ներառեն իջնող զետեղում՝ նախատեսված վարքագիծը ցույց տալու համար:

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

Ահա թե ինչպես է 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-group">ավելի <div class="btn-toolbar">բարդ բաղադրիչների համար:

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

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

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

Ստացեք javascript »

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

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

Կոճակների բացվող պատուհաններ

Օգտագործեք ցանկացած կոճակ՝ բացվող ընտրացանկը գործարկելու համար՝ տեղադրելով այն a-ում .btn-groupև ապահովելով մենյուի համապատասխան նշում:

Գլուխը վեր Կոճակների բացման համար պահանջվում է Bootstrap բացվող հավելվածը գործելու համար:

Նշման օրինակ

Կոճակների խմբի նման, մեր նշագրումը օգտագործում է կոճակի կանոնավոր նշում, բայց մի քանի հավելումներով՝ ոճը ճշգրտելու և 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

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

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

Բաղադրիչների հավասարեցում

Նավի հղումները հավասարեցնելու համար օգտագործեք .pull-leftկամ .pull-rightօգտակար դասերը: Երկու դասերն էլ կավելացնեն CSS float նշված ուղղությամբ:

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

Վերցրեք կանոնավոր <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- ում բացվող ցանկերի սկզբնավորման վերաբերյալ փաստաթղթերը կարդալու համար :

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

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

<ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Բացվող
        <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="#">
        Բացվող
        <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="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 հավելված

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

Ստացեք javascript →

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

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

<div class="tabbable tabs-below">
  <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 class="navbar-inner">
    <div class="container">
      ...
    </div>
  </div>
</div>

Ֆիքսված նավարկղ

Որպեսզի նավագոտին ամրացվի տեսադաշտի վերևում, ավելացրեք .navbar-fixed-topամենահեռավոր դիվիզիոնում, .navbar.

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

Ձեր CSS-ում դուք նաև պետք է հաշվի առնեք դրա առաջացրած համընկնումը՝ ավելացնելով 40px կամ ավելի լցոնում ձեր <body>. Համոզվեք, որ սա ավելացրե՛ք հիմնական Bootstrap CSS-ից հետո և կամընտիր արձագանքող CSS-ից հետո:

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

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

<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="container">

      <!-- .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="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>

Բաղադրիչների հավասարեցում

Nav, որոնման ձևը կամ տեքստը հավասարեցնելու համար օգտագործեք .pull-leftկամ .pull-rightօգտակար դասերը: Երկու դասերն էլ կավելացնեն CSS float նշված ուղղությամբ:

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

Nav-ի մեջ բացվող ցանկեր ավելացնելը չափազանց պարզ է, բայց պահանջում է մեր 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 →

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

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

Օրինակներ

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

• տուն

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

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

Նշում

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.

Օրինակներ

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

Նշում

Ա-ով փաթաթված <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>

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

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

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

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

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

<ul class="pager">
  <li>
    <a href="#">Նախորդը</a>
  </li>
  <li>
    <a href="#">Հաջորդը</a>
  </li>
</ul>

Հավասարեցված հղումներ

Որպես այլընտրանք, դուք կարող եք հավասարեցնել յուրաքանչյուր հղումը կողմերին.

• ← Ավելի հին
• Ավելի նոր →

<ul class="pager">
  <li class="previous">
    <a href="#">← Ավելի հին</a>
  </li>
  <li class="next">
    <a href="#">Ավելի նոր →</a>
  </li>
</ul>

Bootstrap-ն ապահովում է թեթև, ճկուն բաղադրիչ, որը կոչվում է հերոսի միավոր՝ ձեր կայքում բովանդակությունը ցուցադրելու համար: Այն լավ է աշխատում մարքեթինգային և բովանդակությամբ ծանր կայքերում:

Նշում

Փաթաթեք ձեր բովանդակությունը divնման կերպ.

<div class="hero-unit">
  <h1>Վերնագիր</h1>
  <p>Նշագիր</p>
  <p>
    <a class="btn btn-primary btn-large">
      Իմացեք ավելին
    </a>
  </p>
</div>

Պարզ կեղև h1՝ էջի վրա բովանդակության հատվածները պատշաճ կերպով տարածելու և հատվածավորելու համար: Այն կարող է օգտագործել h1լռելյայն small, տարրը, ինչպես նաև այլ բաղադրիչների մեծ մասը (լրացուցիչ ոճերով):

<div class="page-haeder">
  <h1>Էջի վերնագրի օրինակ</h1>
</div>

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

Լռելյայնորեն, 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="thumbnails">
  <li class="span3">
    <a href="#" class="thumbnail">
      <img src="https://placehold.it/260x180" alt="">
    </a>
  </li>
  ...
</ul>

Մանրապատկերներում հատուկ HTML բովանդակության համար նշումը փոքր-ինչ փոխվում է: Բլոկի մակարդակի բովանդակությունը ցանկացած վայրում թույլատրելու համար մենք փոխում ենք նմանակը հետևյալ <a>կերպ <div>.

<ul class="thumbnails">
  <li class="span3">
    <div class="thumbnail">
      <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="alert">
  <a class="close" data-dismiss="alert">×</a>
  <strong>Զգուշացում</strong> Լավագույնս ստուգեք, որ դուք այնքան էլ լավ տեսք չունեք:
</div>

Հեշտությամբ երկարացրեք ստանդարտ նախազգուշացման հաղորդագրությունը երկու կամընտիր դասերով՝ .alert-blockլրացուցիչ ներդիրների և տեքստային կառավարումների և .alert-headingհամապատասխան վերնագրի համար:

<div class="alert alert-block">
  <a class="close" data-dismiss="alert">×</a>
  <h4 class="alert-heading">Զգուշացում:</h4>
  Լավագույնս ստուգեք ինքներդ ձեզ, դուք չեք ...
</div>

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

<div class="alert alert-error">
  ...
</div>

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

<div class="alert alert-success">
  ...
</div>

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

<div class="alert alert-info">
  ...
</div>

Հիմնական

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

<div class="progress">
  <div class="bar"
       style="width: 60%;"></div>
</div>

Գծավոր

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

<div class="progress progress-info
     առաջընթաց-գծավոր»>
  <div class="bar"
       style="width: 20%;"></div>
</div>

Անիմացիոն

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

<div class="առաջընթաց առաջընթաց-վտանգ
     առաջընթաց-գծավոր ակտիվ»>
  <div class="bar"
       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="badge">3</div>

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

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

×

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