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

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

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

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

Ստացեք javascript »

Բացվող կոճակների խմբերում

Գլուխը վեր Բացվող կոճակները պետք է առանձին-առանձին փաթաթվեն իրենց .btn-groupմեջ .btn-toolbar՝ պատշաճ մատուցման համար:

Ընդհանուր ակնարկ և օրինակներ

Օգտագործեք ցանկացած կոճակ՝ բացվող ընտրացանկը գործարկելու համար՝ տեղադրելով այն 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>

Աշխատում է կոճակների բոլոր չափերի հետ

Կոճակների բացվող պատուհաններն աշխատում են ցանկացած չափի: ձեր կոճակների չափերը մինչև .btn-large, .btn-smallկամ .btn-mini:

Պահանջում է Javascript

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

Որոշ դեպքերում, օրինակ՝ շարժական, բացվող ընտրացանկերը կտարածվեն տեսադաշտից դուրս: Դուք պետք է լուծեք հավասարեցումը ձեռքով կամ հատուկ javascript-ով:

Ընդհանուր ակնարկ և օրինակներ

Հիմնվելով կոճակների խմբի ոճերի և նշագրման վրա՝ մենք կարող ենք հեշտությամբ ստեղծել բաժանման կոճակ: Պառակտման կոճակները ցուցադրում են ստանդարտ գործողություն ձախ կողմում և բացվող անջատիչ՝ աջ կողմում՝ համատեքստային հղումներով:

Չափերը

Օգտագործեք լրացուցիչ կոճակների դասերը .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

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

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

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

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

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

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

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

• տուն
• Օգնություն
• Բացվող
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

• տուն
• Օգնություն
• Բացվող
  • Action
  • Another action
  • Something else here
  • Separated link

<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>պիտակը դասի հետ և պատրաստ եք:

Հորիզոնական բաժանարարներ

Ավելացրե՛ք հորիզոնական բաժանարար՝ ստեղծելով դատարկ ցուցակի տարր դասի հետ .divider, օրինակ՝

<ul class = «nav nav-list» > 
  ...
  <li class = «բաժանարար» ></li> 
  ...
</ul>

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

Վերցրեք հղումների ցանկը և ավելացրեք 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-ը ինտեգրում է ներդիրների ներդիրները չորս ոճերում՝ վերև (կանխադրված), աջ, ներքև և ձախ:

Նրանց միջև փոխելը հեշտ է և պահանջում է միայն շատ քիչ նշագրում փոխել:

Գունաթափվել ներդիրներում

Ներդիրները խամրելու համար ավելացրեք .fadeյուրաքանչյուրին .tab-pane:

Պահանջվում է jQuery plugin

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

Ստացեք javascript →

Աղյուսակային օրինակ

Ներդիրները ներդիրային դարձնելու .tab-paneհամար յուրաքանչյուր ներդիրի համար ստեղծեք եզակի ID և փաթեթավորեք դրանք .tab-content:

Աջ կամ ձախ հավասարեցված ներդիրների համար փաթաթեք .nav-tabsև .tab-contentմեջը .tabbable:

Ուղղակի նշում

Tabbable ներդիրների օգտագործումը պահանջում է փաթաթվող div, մի շարք ներդիրներ և բովանդակության մի շարք ներդիրների վահանակներ:

<div class = "tabable" > <!-- Պահանջվում է միայն ձախ/աջ ներդիրների համար -->  
  <ul class = «nav nav-tabs» > 
    <li դաս  = "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> Ողջույն, ես 2-րդ բաժնում եմ: </p>
    </div>
  </div>
</div>

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

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

<div դաս =  "tabbable ներդիրներ-ներքևում" >
  <div դաս = "tab-content" >
    ...
  </div>
  <ul դաս = «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 = «կոնտեյներ» > 
      ...
    </div>
  </div>
</div>

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

Նավագոտին ամրացրեք տեսադաշտի վերևի կամ ներքևի մասում՝ լրացուցիչ դասակարգով ամենահեռավոր դիվիզի վրա, .navbar.

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

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

Երբ դուք ամրացնում եք navbar-ը, հիշեք, որ հաշվի առնեք տակի թաքնված տարածքը: Ավելացրեք 40px կամ ավելի ներդիրներ <body>. Համոզվեք, որ սա ավելացրե՛ք հիմնական Bootstrap CSS-ից հետո և կամընտիր արձագանքող CSS-ից հետո:

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

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

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

Ձևերը navbar-ում

Ձևը նավագոտում ճիշտ ձևավորելու և տեղադրելու համար ավելացրեք համապատասխան դասերը, ինչպես ցույց է տրված ստորև: Լռելյայն ձևի համար ներառեք .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-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>

Դուք կարող եք հեշտությամբ բաժանարարներ ավելացնել ձեր նավի հղումներին դատարկ ցուցակի տարրի և պարզ դասի միջոցով: Պարզապես ավելացրեք սա հղումների միջև.

<ul class = «nav» > 
  ...
  <li class = «բաժանարար-ուղղահայաց» ></li> 
  ...
</ul>

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

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

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

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 →

Տեքստը navbar-ում

Տեքստի տողերը փաթաթեք տառով <.navbar-text>, սովորաբար <p>պիտակի վրա՝ համապատասխան առաջատարի և գույնի համար:

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

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

Օրինակներ

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

• տուն

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

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

Նշում

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

<ul class = «հացի փշուր» > 
  <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.

Օրինակներ

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

Նշում

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

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

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

Ընտրովի անջատված վիճակ

Փեյջերի հղումներն օգտագործում են նաև .disabledէջագրման ընդհանուր դասը:

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

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

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

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

Մասին

Կրծքանշանները փոքր, պարզ բաղադրիչներ են՝ ինչ-որ ցուցիչ կամ թվաքանակ ցուցադրելու համար: Դրանք սովորաբար հանդիպում են էլփոստի սպասառուներում, ինչպիսիք են Mail.app-ը կամ բջջային հավելվածներում՝ push ծանուցումների համար:

Հասանելի դասեր

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

Նշում

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

<div class = «հերոս-միավոր» > 
  <h1> Վերնագիր </h1>
  <p> Նշագիր </p>
  <p>
    <a class = «btn btn-հիմնական btn-large» > 
      Իմացեք ավելին
    </a>
  </p>
</div>

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

<div class = «էջ-վերնագիր» > 
  <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 = «մանրապատկերներ» > 
  <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 = «զգուշացում» > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> Զգուշացում. </strong> Լավագույնս համոզվեք, որ դուք այնքան էլ լավ տեսք չունեք:
</div>

Գլուխը վեր iOS սարքերը պահանջում են href="#"ծանուցումների անջատում: Համոզվեք, որ ներառեք այն և տվյալների հատկանիշը խարիսխի փակման պատկերակների համար: Որպես այլընտրանք, դուք կարող եք օգտագործել <button>տվյալների հատկանիշով տարր, որը մենք ընտրել ենք մեր փաստաթղթերի համար: Օգտագործելիս <button>դուք պետք է ներառեք, հակառակ type="button"դեպքում ձեր ձևերը կարող են չներկայացնել:

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

<div class = «զգուշացումների բլոկ» > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </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>

Գծավոր

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

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

Անիմացիոն

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

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

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

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

Գծավոր ձողեր

Միաձույլ գույների նման, մենք ունենք զանազան գծավոր առաջընթաց գծեր:

Վարքագիծ

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

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

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

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

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

Հորեր

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

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

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

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

×

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

iOS սարքերը պահանջում են href="#" սեղմումների իրադարձությունների համար, եթե ավելի շուտ խարիսխ եք օգտագործում:

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