Օրինակ

Փոխարկվող, համատեքստային ընտրացանկ՝ հղումների ցուցակները ցուցադրելու համար: Ստեղծվել է ինտերակտիվ 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>

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

Ավելացրեք բացվող ընտրացանկերի լրացուցիչ մակարդակ, որոնք կհայտնվեն սավառնողների վրա, ինչպես 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" > 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>

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

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

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

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

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

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

Գլուխը վերԲացվող կոճակները պետք է առանձին-առանձին փաթաթված .btn-groupլինեն «a .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:

Ես 1-ին բաժնում եմ:

Բարև, ես 2-րդ բաժնում եմ:

Աղջիկ, սա 3-րդ բաժինն է:

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

Ես A բաժնում եմ:

Բարև, ես Բ բաժնում եմ:

Աղջի՛կ, սա Գ բաժինն է:

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

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

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

Ես A բաժնում եմ:

Բարև, ես Բ բաժնում եմ:

Աղջի՛կ, սա Գ բաժինն է:

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

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

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

Ես A բաժնում եմ:

Բարև, ես Բ բաժնում եմ:

Աղջի՛կ, սա Գ բաժինն է:

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

Գլուխը վեր Պատասխանատու նավագոտին պահանջում է փլուզման հավելում և պատասխանատու Bootstrap CSS ֆայլ :

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

Փոփոխեք 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 = "#" > Հաջորդը </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 = "disabled" ><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>

Պիտակներ

Պիտակներ	Նշում
Կանխադրված	`<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>`

Պիտակներ

Անուն	Օրինակ	Նշում
Կանխադրված	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>`

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

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

Բարեւ աշխարհ!

Սա պարզ հերոսի միավոր է, պարզ jumbotron ոճի բաղադրիչ՝ հատուկ ուշադրություն հրավիրելու համար ներկայացված բովանդակությանը կամ տեղեկատվությանը:

Իմացեք ավելին

<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 բովանդակություն, ինչպիսիք են վերնագրերը, պարբերությունները կամ կոճակները:

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

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.

Գործողություն Գործողություն
Մանրապատկերի պիտակ

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 = "span4" > 
    <a href = "#" class = "մանրապատկեր" >  
      <img src = "https://placehold.it/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

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

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

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

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

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

Զգուշացում. Լավագույնս ստուգեք ինքներդ ձեզ, դուք այնքան էլ լավ տեսք չունեք:

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

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

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

<a href = "#" class = "close" data-dismiss = "alert" > × </a>

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

<button type = "button" class = "close" data-dismiss = "alert" > × </button>

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

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

Ընտրանքներ

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

Զգուշացում.

Լավագույնս ստուգեք ինքներդ ձեզ, դուք այնքան էլ լավ տեսք չունեք: Nulla vitae elit libero, pharetra augue: Praesent commodo cursus Magna, vel scelerisque nisl consectetur et.

<div class = «զգուշացման ազդանշանային արգելափակում» > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </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-ում:

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

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

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

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

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

Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ երեսփոխանական երեսպատում: Cras purus odio, գավիթ vulputate at, tempus viverra turpis:

Ներդրված մեդիա վերնագիր
Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ երեսփոխանական երեսպատում: Cras purus odio, գավիթ vulputate at, tempus viverra turpis:

Ներդրված մեդիա վերնագիր
Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ երեսփոխանական երեսպատում: Cras purus odio, գավիթ vulputate at, tempus viverra turpis:

Ներդրված մեդիա վերնագիր
Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ երեսփոխանական երեսպատում: Cras purus odio, գավիթ vulputate at, tempus viverra turpis:
Մեդիա վերնագիր
Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ երեսփոխանական երեսպատում: Cras purus odio, գավիթ vulputate at, tempus viverra turpis:

<ul class = «մեդիա ցուցակ» > 
  <li class = «մեդիա» > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" src = "https://placehold.it/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 ; 
  &: առաջ ,
  &: { հետո
    ցուցադրում : աղյուսակ ;
    բովանդակությունը ՝ "" ; 
  }
  &: { հետո
    պարզ . երկուսն էլ ;
  }
}

Բացվող ընտրացանկեր

Օրինակ

Նշում

Ընտրանքներ

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

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

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

Օրինակներ

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

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

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

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

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

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

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

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

Պահանջում է JavaScript

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

Չափերը

Բացվող ընտրացանկեր

Նավ. ներդիրներ, հաբեր և ցուցակներ

Թեթև լռելյայններ Նույն նշումը, տարբեր դասեր

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

Հիմնական հաբեր

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

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

Stackable

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

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

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

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

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

Nav ցուցակներ

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

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

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

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

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

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

Ցանկապատված ցանկացած ուղղությամբ

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

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

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

Navbar

Հիմնական navbar

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

Ապրանքանիշը

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

Ձևաթղթեր

Որոնման ձև

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

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

Տեքստ

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

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

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

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

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

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

Հացի փշրանքներ

Օրինակներ

Էջավորում Բովանդակության միջոցով էջերի տեղադրման երկու տարբերակ

Ստանդարտ էջադրում

Ընտրանքներ

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

Չափերը

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

Փեյջեր

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

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

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

Պիտակներ և կրծքանշաններ

Պիտակներ

Պիտակներ

Տպագրական բաղադրիչներ

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

Բարեւ աշխարհ!

Էջի վերնագիր

Էջի վերնագրի օրինակ Ենթատեքստ վերնագրի համար

Մանրապատկերներ Պատկերների, տեսանյութերի, տեքստի և այլնի ցանցեր