Օրինակ

Փոխարկվող, համատեքստային ընտրացանկ՝ հղումների ցուցակները ցուցադրելու համար: Ստեղծվել է ինտերակտիվ 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="divider"></li>
  <li><a tabindex="-1" href="#">Առանձնացված հղում</a></li>
</ul>

Նշում

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

<div class="dropdown">
  <!-- Հղում կամ կոճակ՝ բացվող ցանկը փոխելու համար
  <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="divider"></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="dropdown-submenu">
    <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-toolbar">
  <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="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>

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

Նավի ցանկացած բաղադրիչի համար (ներդիրներ, հաբեր կամ ցուցակ), ավելացրեք .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="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-ում:

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

Վերցրեք հղումների ցանկը և ավելացրեք 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="divider"></li>
  ...
</ul>

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

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

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

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

<div class="tabbable"> <!-- Պահանջվում է միայն ձախ/աջ ներդիրների համար -->
  <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 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

Սկսելու համար, նավագոտիները ստատիկ են (վերևում ամրացված չեն) և ներառում են նախագծի անվան և հիմնական նավիգացիայի աջակցություն: Տեղադրեք մեկը ցանկացած վայրում .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="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>

Ձևաթղթեր

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

    </div>
  </div>
</div>

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

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

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

Օրինակներ

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

<ul class="breadcrumb">
  <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="pagination">
  <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="pagination">
  <ul>
    <li class="disabled"><a href="#">Նախորդ</a></li>
    <li class="active"><a href="#">1</a></li>
    ...
  </ul>
</div>

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

<div class="pagination">
  <ul>
    <li class="disabled"><span>Նախորդ</span></li>
    <li class="active"><span>1</span></li>
    ...
  </ul>
</div>

Չափերը

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

<div class="pagination pagination-large">
  <ul>
    ...
  </ul>
</div>
<div class="pagination">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-small">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-mini">
  <ul>
    ...
  </ul>
</div>

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

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

<div class="pagination pagination-centred">
  ...
</div>

<div class="pagination pagination-right">
  ...
</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>

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

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

<ul class="pager">
  <li class="previous disabled">
    <a href="#">← Ավելի հին</a>
  </li>
  ...
</ul>

Պիտակներ

Պիտակներ

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

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

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

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

<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-header">
  <h1>Էջի վերնագրի օրինակ <small>Ենթատեքստ վերնագրի համար</small></h1>
</div>

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

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

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

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

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

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

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

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

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

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

Նշում

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

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
    </a>
  </li>
  ...
</ul>

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

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

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

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

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

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

<div class="alert">
  <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:

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <h4>Զգուշացում:</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>

Գծավոր

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

<div class="progress progress-striped">
  <div class="bar" style="width: 20%;"></div>
</div>

Անիմացիոն

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

<div class="progress progress-striped active">
  <div class="bar" style="width: 40%;"></div>
</div>

Դարձված

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

<div class="progress">
  <div class="bar bar-success" style="width: 35%;"></div>
  <div class="bar bar-warning" style="width: 20%;"></div>
  <div class="bar bar-danger" style="width: 10%;"></div>
</div>

Ընտրանքներ

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

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

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <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="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <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="media">
  <a class="pull-left" href="#">
    <img class="media-object" data-src="holder.js/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Մեդիա վերնագիր</h4>
    ...

    <!-- Ներդրված մեդիա օբյեկտ -->
    <div class="media">
      ...
    </div>
  </div>
</div>

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

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

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Մեդիա վերնագիր</h4>
      ...

      <!-- Ներդրված մեդիա օբյեկտ -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

Հորեր

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

<div class="լավ">
  ...
</div>

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

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

<div class="well well-large">
  ...
</div>

<div class="well well-small">
  ...
</div>

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

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

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

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

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

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

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

.քաշեք-ձախ

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

class = "pull-left"

.pull-left {
  բոց: ձախ;
}

.քաշել-աջ

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

class = "քաշել-աջ"

.pull-right {
  բոց: աջ;
}

.խլացված

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

class = "խլացված"

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

.պարզել

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

class = "պարզ ֆիքս"

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