Օրինակ

Փոխարկվող, համատեքստային ընտրացանկ՝ հղումների ցուցակները ցուցադրելու համար: Ստեղծվել է ինտերակտիվ JavaScript-ի բացվող հավելվածով :

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Գործողություն </a></li>  
  <li><a tabindex = "-1" href = "#" > Մեկ այլ գործողություն </a></li>  
  <li><a tabindex = "-1" href = "#" > Այստեղ այլ բան </a></li>  
  <li class = «բաժանարար» ></li> 
  <li><a tabindex = "-1" href = "#" > Առանձնացված հղում </a></li>  
</ul>

Նշում

Նայելով միայն բացվող մենյուին, ահա անհրաժեշտ HTML-ը: Դուք պետք է փաթեթավորեք բացվող ցանկի գործարկիչը և բացվող ընտրացանկը .dropdownկամ մեկ այլ տարր, որը հայտարարում է position: relative;. Այնուհետև պարզապես ստեղծեք ընտրացանկը:

<div class = «բացվող» > 
  <!-- Հղում կամ կոճակ՝ բացվող ցանկը փոխելու համար
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Գործողություն </a></li>  
    <li><a tabindex = "-1" href = "#" > Մեկ այլ գործողություն </a></li>  
    <li><a tabindex = "-1" href = "#" > Այստեղ այլ բան </a></li>  
    <li class = «բաժանարար» ></li> 
    <li><a tabindex = "-1" href = "#" > Առանձնացված հղում </a></li>  
  </ul>
</div>

Ընտրանքներ

Հավասարեցրեք ընտրացանկերը դեպի աջ և ավելացրեք՝ ներառելով բացվող ցանկերի լրացուցիչ մակարդակներ:

Մենյուների հավասարեցում

Ավելացնել .pull-righta-ին .dropdown-menuդեպի աջ հավասարեցնել բացվող ընտրացանկը:

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Անջատված ընտրացանկի ընտրանքներ

Ավելացրեք .disableda- <li>ին բացվող ցանկում՝ հղումն անջատելու համար:

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Կանոնավոր հղում </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Անջատված հղում </a></li>   
  <li><a tabindex = "-1" href = "#" > Մեկ այլ հղում </a></li>  
</ul>

Ենթացանկերը բացվող ցանկերում

Ավելացրեք բացվող ընտրացանկերի լրացուցիչ մակարդակ, որոնք կհայտնվեն սավառնողների վրա, ինչպես OS X-ը, որոշ պարզ նշագծման հավելումներով: Ավտոմատ ոճավորելու համար գոյություն ունեցող բացվող ընտրացանկում ավելացրեք .dropdown-submenuորևէ մեկին :li

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = «բացվող-ենթացանկ» > 
    <a tabindex = "-1" href = "#" > Լրացուցիչ ընտրանքներ </a>  
    <ul class = «dropdown-menu» > 
      ...
    </ul>
  </li>
</ul>

Օրինակներ

Երկու հիմնական տարբերակ, երկու ավելի կոնկրետ տատանումների հետ միասին:

Մեկ կոճակով խումբ

Փաթեթավորեք մի շարք կոճակներ ներսով .btn:.btn-group

<div class = "btn-group" > 
  <button class = "btn" > Ձախ </button> 
  <button class = "btn" > Միջին </button> 
  <button class = "btn" > Աջ </button> 
</div>

Բազմաթիվ կոճակների խմբեր

Կոմպլեկտները միացրեք <div class="btn-group">ավելի <div class="btn-toolbar">բարդ բաղադրիչների համար:

<div class = "btn-գործիքադարակ" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Ուղղահայաց կոճակների խմբեր

Դարձրեք կոճակների հավաքածուն ուղղահայաց շարված, այլ ոչ թե հորիզոնական:

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

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

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

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

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

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

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

<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-ով:

Պառակտման կոճակների բացվող ցանկեր

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

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

Չափերը

Օգտագործեք լրացուցիչ կոճակների դասերը .btn-mini, .btn-smallկամ .btn-largeչափագրման համար:

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Գործողություն </button> 
  <button class = "btn btn-mini 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

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

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

Հաշմանդամ վիճակ

Նավի ցանկացած բաղադրիչի համար (ներդիրներ, հաբեր կամ ցուցակ) ավելացրեք .disabledմոխրագույն հղումներ և առանց սավառնող էֆեկտների : Հղումները, սակայն, կմնան սեղմելի, եթե չհեռացնեք hrefհատկանիշը: Որպես այլընտրանք, դուք կարող եք կիրառել հատուկ JavaScript՝ այդ սեղմումները կանխելու համար:

<ul class = «nav nav-pills» > 
  ...
  <li class = "disabled" ><a href = "#" > Գլխավոր </a></li>  
  ...
</ul>

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

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

Stackable

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

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

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

Դրսից հաբեր

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

Բացվող պատուհաններ

Ավելացրեք բացվող ընտրացանկերը մի փոքր լրացուցիչ HTML-ով և բացվող JavaScript հավելվածով :

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

<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-ում:

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

Վերցրեք հղումների ցանկը և ավելացրեք 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>

ՆշումՆավի ցանկում բույն դնելու համար ներառեք class="nav nav-list"ցանկացած ներդիր <ul>:

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

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

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

Տաբատային նավարկություն

Կյանքի կոչեք ձեր ներդիրները ներդիրների միջոցով բովանդակության միջև փոխարկելու պարզ հավելվածի միջոցով: Bootstrap-ը ինտեգրում է ներդիրների ներդիրները չորս ոճերում՝ վերև (կանխադրված), աջ, ներքև և ձախ:

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

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

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

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

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

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

Բոլոր tabbable ներդիրները սնուցվում են մեր թեթև jQuery հավելվածով: Կարդացեք ավելին այն մասին, թե ինչպես կյանքի կոչել ներդիրների ներդիրները 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

Սկսելու համար, նավագոտիները ստատիկ են (վերևում ամրացված չեն) և ներառում են նախագծի անվան և հիմնական նավիգացիայի աջակցություն: Տեղադրեք մեկը ցանկացած վայրում .container, որը սահմանում է ձեր կայքի և բովանդակության լայնությունը:

<div class = «navbar» > 
  <div class = «navbar-inner» > 
    <a class = "brand" href = "#" > Վերնագիր </a>  
    <ul class = «nav» > 
      <li class = "active" ><a href = "#" > Գլխավոր </a></li>  
      <li><a href = "#" > Հղում </a></li> 
      <li><a href = "#" > Հղում </a></li> 
    </ul>
  </div>
</div>

Navbar բաղադրիչներ

Ապրանքանիշը

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

<a class = "brand" href = "#" > Ծրագրի անվանումը </a>  

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

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>

Ձևաթղթեր

Ձևը նավագոտում ճիշտ ձևավորելու և տեղադրելու համար ավելացրեք համապատասխան դասերը, ինչպես ցույց է տրված ստորև: Լռելյայն ձևի համար ներառեք .navbar-formև կամ .pull-leftկամ .pull-rightպատշաճ կերպով հավասարեցրեք այն:

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Ներկայացնել </button>  
</form>

Որոնման ձև

Ավելի հարմարեցված որոնման ձևի համար ավելացրեք նավագոտում մասնագիտացված ոճերի մուտքագրում և .navbar-searchմուտքագրում form:.search-query

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

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

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

Օգտագործելով բացվող պատուհաններ

Ավելացրե՛ք բացվող և բացվող ցուցակներ նավի մեջ մի փոքր նշագրումով և բացվող JavaScript հավելվածով :

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

Այցելեք JavaScript-ի բացվող փաստաթղթերը ՝ լրացուցիչ նշագրման և զանգերի բացվող ցանկերի մասին տեղեկությունների համար:

Տեքստ

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

Ցուցադրման ընտրովի տատանումներ

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

Ամրացված է վերևում

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

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

Ամրագրված է ներքևում

.navbar-fixed-bottomՓոխարենը ավելացրեք :

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

Ստատիկ վերին նավարկիչ

Ստեղծեք ամբողջ լայնությամբ նավագոտի, որը հեռանում է էջից՝ ավելացնելով .navbar-static-top: Ի տարբերություն .navbar-fixed-topդասի, դուք կարիք չունեք որևէ լիցք փոխել body.

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

Պատասխանատու նավարկիչ

Փլվող արձագանքող նավագոտի իրականացնելու համար ձեր նավագոտու բովանդակությունը փաթաթեք պարունակող div-ով .nav-collapse.collapseև ավելացրեք նավագոտու փոխարկման կոճակը, .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 collapse" > 
        <!-- .nav, .navbar-որոնում, .navbar-form և այլն -->
      </div>
 
    </div>
  </div>
</div>

Շրջված տատանումներ

Փոփոխեք navbar-ի տեսքը՝ ավելացնելով .navbar-inverse:

<div class = "navbar navbar-inverse" > 
  ...
</div>

Օրինակներ

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

<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-ից, հիանալի հավելվածների և որոնման արդյունքների համար: Մեծ բլոկը դժվար է բաց թողնել, հեշտությամբ մասշտաբելի և ապահովում է սեղմումների մեծ տարածքներ:

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

Ընտրանքներ

Հաշմանդամ և ակտիվ վիճակներ

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

<div class = «էջադրում» > 
  <ul>
    <li class = "disabled" ><a href = "#" > « </a></li>  
    <li class = "ակտիվ" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Դուք կարող եք կամայականորեն փոխել ակտիվ կամ անջատված խարիսխները բացվածքների համար՝ հեռացնելով սեղմումների գործառույթը՝ պահպանելով նախատեսված ոճերը:

<div class = «էջադրում» > 
  <ul>
    <li class = «հաշմանդամ» ><span> « </span></li> 
    <li class = «ակտիվ» ><span> 1 </span></li> 
    ...
  </ul>
</div>

Չափերը

Ցանկանում եք ավելի մեծ, թե փոքր էջադրում: Ավելացնել .pagination-large, .pagination-smallկամ .pagination-miniլրացուցիչ չափերի համար:

<div class = «էջերի էջավորում-մեծ» > 
  <ul>
    ...
  </ul>
</div>
<div class = «էջադրում» > 
  <ul>
    ...
  </ul>
</div>
<div class = «էջադրում-փոքր» > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Հավասարեցում

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

<div class = «էջադրման էջադրման կենտրոնացված» > 
  ...
</div>

<div class = "էջադրում-էջադրում-աջ" > 
  ...
</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>

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

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

<ul class = «փեյջեր» > 
  <li class = «նախորդ հաշմանդամ» > 
    <a href = "#" > ← Ավելի հին </a> 
  </li>
  ...
</ul>

Պիտակներ

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

Հեշտությամբ ծալվող

Հեշտ իրականացման համար պիտակները և կրծքանշանները պարզապես կփլուզվեն (CSS-ի :emptyընտրիչի միջոցով), երբ ներսում որևէ բովանդակություն չկա:

Հերոսի միավոր

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

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

Էջի վերնագիր

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

<div class = «էջ-վերնագիր» > 
  <h1> Էջի վերնագրի օրինակ <small> Ենթատեքստ վերնագրի համար </small></h1>
</div>

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

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

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

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

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

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

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

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

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

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

Նշում

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

<ul class = «մանրապատկերներ» > 
  <li class = "span4" > 
    <a href = "#" class = "մանրապատկեր" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = «մանրապատկերներ» > 
  <li class = "span4" > 
    <div class = «մանրապատկեր» > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Մանրապատկերի պիտակ </h3>
      <p> Մանրապատկերի վերնագիր... </p>
    </div>
  </li>
  ...
</ul>

Ավելի շատ օրինակներ

Բացահայտեք ձեր բոլոր տարբերակները՝ ձեզ հասանելի տարբեր ցանցային դասերի միջոցով: Կարող եք նաև խառնել և համապատասխանեցնել տարբեր չափսեր:

Կանխադրված ահազանգ

Փաթեթավորեք ցանկացած տեքստ և կամընտիր անջատման կոճակը՝ .alertհիմնական նախազգուշացման ազդանշանի հաղորդագրության համար:

<div class = «զգուշացում» > 
  <button type = "button" class = "close" data-dismiss = "զգուշացում" > × </button>   
  <strong> Զգուշացում. </strong> Լավագույնը համոզվեք, որ դուք այնքան էլ լավ տեսք չունեք:
</div>

Անտեսել կոճակները

Mobile Safari և Mobile Opera բրաուզերները, ի լրումն data-dismiss="alert"հատկանիշի, պահանջում են պիտակ href="#"օգտագործելիս զգուշացումների անջատում:<a>

<a href = "#" class = "close" data-dismiss = "զգուշացում" > × </a>   

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

<button type = "button" class = "close" data-dismiss = "զգուշացում" > × </button>   

Անտեսել ծանուցումները JavaScript-ի միջոցով

Օգտագործեք ծանուցումների jQuery հավելվածը ՝ ահազանգերը արագ և հեշտ հեռացնելու համար:

Ընտրանքներ

Ավելի երկար հաղորդագրությունների համար ավելացրեք ազդանշանային փաթեթի վերևի և ներքևի ծածկը՝ ավելացնելով .alert-block:

<div class = «զգուշացումների բլոկ» > 
  <button type = "button" class = "close" data-dismiss = "զգուշացում" > × </button>   
  <h4> Զգուշացում. </h4>
  Լավագույնս ստուգեք ինքներդ ձեզ, դուք չեք ...
</div>

Համատեքստային այլընտրանքներ

Ավելացրեք կամընտիր դասեր՝ ազդանշանի ենթատեքստը փոխելու համար:

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

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

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

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

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

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

Օրինակներ և նշումներ

Հիմնական

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

<div class = «առաջընթաց» > 
  <div class = "bar" style = " լայնությունը : 60 %; " </div>   
</div>

Գծավոր

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

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

Անիմացիոն

Ավելացրե՛ք .active՝ .progress-stripedգծերն աջից ձախ շարժելու համար: Հասանելի չէ IE-ի բոլոր տարբերակներում:

<div class = "progress progress-striped active" > 
  <div class = "bar" style = " լայնությունը : 40 %; " </div>   
</div>

Դարձված

Տեղադրեք մի քանի ձողեր միևնույն մեջ՝ .progressդրանք կուտակելու համար:

<div class = «առաջընթաց» > 
  <div class = "bar bar-success" style = " width : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " </div>   
  <div class = "bar bar-danger" style = " լայնությունը : 10 %; " </div>   
</div>

Ընտրանքներ

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

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

<div class = «առաջընթացի մասին տեղեկատվություն» > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = «առաջընթաց առաջընթաց-հաջողություն» > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = «առաջընթացի առաջընթաց-նախազգուշացում» > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = «առաջընթաց առաջընթաց-վտանգ» > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Գծավոր ձողեր

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = «առաջընթաց առաջընթաց-հաջողություն առաջընթաց-գծավոր» > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = «առաջընթաց առաջընթաց-նախազգուշացում առաջընթաց-գծավոր» > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = «առաջընթաց առաջընթաց-վտանգ առաջընթաց-գծավոր» > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

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

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

Internet Explorer 10-ից և Opera 12-ից ավելի վաղ տարբերակները չեն աջակցում անիմացիաներ:

Վերացական օբյեկտների ոճեր՝ տարբեր տեսակի բաղադրիչներ ստեղծելու համար (օրինակ՝ բլոգի մեկնաբանությունները, թվիթերը և այլն), որոնք տեքստային բովանդակության հետ մեկտեղ ցուցադրում են ձախ կամ աջ հարթեցված պատկեր:

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

Լռելյայն մեդիան թույլ է տալիս լողալ մեդիա օբյեկտը (պատկերներ, տեսանյութեր, աուդիո) բովանդակության բլոկի ձախ կամ աջ կողմում:

Մեդիա վերնագիր

Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:

Մեդիա վերնագիր

Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:

Մեդիա վերնագիր

Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:

<div class = «մեդիա» > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = «մեդիա մարմին» > 
    <h4 class = "media-heading" > Մեդիա վերնագիր </h4> 
    ...
 
    <!-- Ներդրված մեդիա օբյեկտ -->
    <div class = «մեդիա» > 
      ...
    </div>
  </div>
</div>

ԶԼՄ-ների ցանկ

Մի փոքր լրացուցիչ նշագրման դեպքում դուք կարող եք օգտագործել մեդիա ցանկի ներսում (օգտակար մեկնաբանությունների թեմաների կամ հոդվածների ցուցակների համար):

<ul class = «մեդիա ցուցակ» > 
  <li class = «մեդիա» > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = «մեդիա մարմին» > 
      <h4 class = "media-heading" > Մեդիա վերնագիր </h4> 
      ...
 
      <!-- Ներդրված մեդիա օբյեկտ -->
      <div class = «մեդիա» > 
        ...
     </div>
    </div>
  </li>
</ul>

Հորեր

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

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

Ընտրովի պարապմունքներ

Կառավարեք լիցքավորումը և կլորացված անկյունները երկու կամընտիր մոդիֆիկատորների դասերով:

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

<div class = «լավ լավ-փոքր» > 
  ...
</div>

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

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

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

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

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

Օգնական դասեր

Պարզ, կենտրոնացված դասեր փոքր ցուցադրման կամ վարքագծի ճշգրտումների համար:

.քաշեք-ձախ

Ձախ թողեք տարրը

class = «ձախ-ձախ»

. քաշել - ձախ {
  բոց : ձախ ;
}

.քաշել-աջ

Լողալ տարրը աջ

class = «քաշել-աջ»

. քաշեք - աջ {
  բոց : աջ ;
}

.խլացված

Փոխել տարրի գույնը#999

class = «խլացված»

. խլացված {
  գույնը ՝ #999; 
}

.պարզել

Մաքրել floatցանկացած տարրի վրա

class = «պարզեցնել»

. մաքրել {
  * Մեծացում ՝ 1 ; 
  &: առաջ ,
  &: { հետո
    ցուցադրում : աղյուսակ ;
    բովանդակությունը ՝ "" ; 
  }
  &: { հետո
    պարզ . երկուսն էլ ;
  }
}