Түйме топтары

Бірнеше түймелерді бір құрама құрамдас ретінде біріктіру үшін түймелер топтарын пайдаланыңыз. Оларды бірқатар <a>немесе <button>элементтермен құрастырыңыз.

Сондай-ақ, жиынтықтарды күрделірек жобаларға <div class="btn-group">біріктіруге болады.<div class="btn-toolbar">

Мысал белгілеу

Анкерлік тег түймелерімен құрастырылған стандартты түймелер тобын HTML қалай қарайды:

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

Бірнеше топтарға арналған құралдар тақтасымен:

<div класс = "btn-құралдар тақтасы" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Құсбелгі ұяшығы және радио дәмі

Түйме топтары тек бір түйме белсенді болуы мүмкін радиолар немесе түймелердің кез келген саны белсенді болуы мүмкін құсбелгілер ретінде де жұмыс істей алады. Ол үшін Javascript құжаттарын қараңыз .

JavaScript алыңыз »

Ескерту

Түйме топтарына арналған CSS бөлек файлда, button-groups.less.

Түймелердің ашылмалы тізімдері

Ашылмалы мәзірді ашу үшін кез келген түймені пайдаланып, оны а ішіне орналастырып .btn-group, тиісті мәзір белгілеуін қамтамасыз етіңіз.

Мысал белгілеу

Түймешіктер тобына ұқсас, біздің белгілеуіміз әдеттегі түймелерді белгілеуді пайдаланады, бірақ стильді нақтылау және Bootstrap ашылмалы jQuery плагинін қолдау үшін бірнеше толықтырулармен.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Әрекет
    <span class = "caret" ></span> 
  </a>
  <ul class = "ашылмалы мәзір" > 
    <!-- ашылмалы мәзір сілтемелері -->
  </ul>
</div>

Бөлу түймелерінің ашылмалы тізімдері

Түймешіктер тобының мәнерлері мен белгілеулеріне сүйене отырып, біз бөлу түймешігін оңай жасай аламыз. Бөлу түймелері сол жақта стандартты әрекетті және контекстік сілтемелері бар оң жақта ашылмалы қосқышты көрсетеді.

Мысал белгілеу

Бөлек ашылмалы триггер ретінде жұмыс істейтін екінші түйме әрекетін қамтамасыз ету үшін қалыпты түйме ашылмалы тізімдерін кеңейтеміз.

<div class = "btn-group" > 
  <a class = "btn" href = "#" > Әрекет </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <ul class = "ашылмалы мәзір" > 
    <!-- ашылмалы мәзір сілтемелері -->
  </ul>
</div>

Күшті базалық класс

Мұндағы барлық навигация құрамдастары — қойындылар, таблеткалар және тізімдер — сынып арқылы бірдей негізгі белгілер мен стильдерді ортақ пайдаланады ..nav

Неліктен таблеткалар мен таблеткалар

Bootstrap ішіндегі қойындылар мен таблеткалар <ul>бірдей негізгі HTML, сілтемелер тізімі негізінде жасалған. Тек класы бар қойындылар немесе таблеткалар арасында ауысыңыз.

Екі опция да мазмұнның ішкі бөлімдері немесе қатысты мазмұн беттері арасында шарлау үшін тамаша.

Негізгі қойындылар

<ul>Сілтемелерді тұрақты түрде алыңыз және мыналарды қосыңыз .nav-tabs:

• Үй
• Профиль
• Хабарламалар

<ul class = "nav nav-tabs" > 
  <li класс = "белсенді" > 
    <a href = "#" > Басты </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Негізгі таблеткалар

Дәл сол HTML алыңыз, бірақ .nav-pillsоның орнына пайдаланыңыз:

• Үй
• Профиль
• Хабарламалар

<ul class = "nav nav-pills" > 
  <li класс = "белсенді" > 
    <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 плагинін ғана қажет етеді.

Bootstrap бағдарламасында ашылмалы тізімдерді инициализациялау туралы құжаттарды оқу үшін Javascript бетіне өтіңіз .

Ашылмалы тізімдері бар қойындылар

• Үй
• Профиль
• Түсіп қалу
  • Әрекет
  • Тағы бір әрекет
  • Мұнда тағы бір нәрсе
  • Бөлінген сілтеме

<ul class = "nav nav-tabs" > 
  <li класс = "ашылмалы" > 
    <a класс = «ашылмалы-қосқыш» 
       data-toggle = «ашылмалы тізім»
       href = "#" >
        Түсіп қалу
        <b class = "caret" ></b> 
      </a>
    <ul class = "ашылмалы мәзір" > 
      <!-- сілтемелер -->
    </ul>
  </li>
</ul>

Ашылмалы тізімі бар таблеткалар

• Үй
• Профиль
• Түсіп қалу
  • Әрекет
  • Тағы бір әрекет
  • Мұнда тағы бір нәрсе
  • Бөлінген сілтеме

<ul class = "nav nav-pills" > 
  <li класс = "ашылмалы" > 
    <a класс = «ашылмалы-қосқыш» 
       data-toggle = «ашылмалы тізім»
       href = "#" >
        Түсіп қалу
        <b class = "caret" ></b> 
      </a>
    <ul class = "ашылмалы мәзір" > 
      <!-- сілтемелер -->
    </ul>
  </li>
</ul>

Қолданба стиліндегі шарлау

Навигация тізімдері қосымша тақырыптары бар шарлау сілтемелерінің топтарын құрудың қарапайым және оңай жолын қамтамасыз етеді. Олар OS X жүйесіндегі Finder сияқты бүйірлік тақталарда жақсы қолданылады.

Құрылымдық жағынан олар қойындылар мен таблеткалар сияқты негізгі навигация мәнерлеріне негізделген, сондықтан пайдалану және теңшеу оңай.

Белгішелермен

Навигация тізімдерін белгішелермен жабдықтау да оңай. Тиісті <i>тегті сыныппен қосыңыз және сіз орнаттыңыз.

Мысал шарлау тізімі

Сілтемелер тізімін алып, мынаны қосыңыз class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Тізім тақырыбы
  </li>
  <li класс = "белсенді" > 
    <a href = "#" > Басты </a> 
  </li>
  <li>
    <a href = "#" > Кітапхана </a> 
  </li>
  ...
</ul>

Белгішелері бар мысал

Дәл осындай мысал, бірақ <i>белгішелер үшін тегтермен.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" >> </i> 
      Кітапхана
    </a>
  </li>
  ...
</ul>

Не кіреді

Қойындылар арқылы мазмұн арасында ауысу үшін қарапайым плагин арқылы қойындыларыңызды жандандырыңыз. Bootstrap қойынды қойындыларын төрт стильде біріктіреді: жоғарғы (әдепкі), оң жақ, төменгі және сол жақ.

Олардың арасында өзгерту оңай және тек өте аз белгілерді өзгертуді қажет етеді.

Таблетка үлгісі

Қойындыларды қойындыға айналдыру үшін, .nav-tabsсыныппен басқа div ішіне ораңыз .tabbable.

Арнайы jQuery плагині

Барлық қойынды қойындылары жеңіл jQuery плагинімен жұмыс істейді. JavaScript құжаттары бетінде қойынды қойындыларын қалай жандандыру туралы толығырақ оқыңыз.

Javascript → алыңыз

Төменгі жағындағы қойындылар

HTML тәртібін аударыңыз және төменгі жағында қойындыларды қою үшін сынып қосыңыз.

<div class = "tabbable қойындылары-төменде" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Сол жақтағы қойындылар

Сол жақта қойындыларды қою үшін сыныпты ауыстырыңыз.

<div class = "tabbable қойындылары-сол жақ" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Оң жақтағы қойындылар

Оң жақтағы қойындыларды қою үшін сыныпты ауыстырыңыз.

<div class = "tabbable қойындылары-оң жақ" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Navbar тіреуіші

Шарлау тақтасы оны статикалық немесе бекітілген дисплей үшін жақсы құрылымдау үшін тек бірнеше divs қажет.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "контейнер" > 
      ...
    </div>
  </div>
</div>

Шарлау тақтасын көру терезесінің жоғарғы жағына бекіту .navbar-fixed-topүшін, ең сыртқы div, қосыңыз .navbar. CSS-де сіз padding-top: 40px;өзіңіздің <body>.

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

Бренд атауы

Бренд немесе жоба атауын көрсетуге арналған қарапайым сілтеме тек якорь тегін қажет етеді.

<a класс = "бренд" href = "#" >  
  Жоба атауы
</a>

Іздеу пішіні

Іздеу пішіндері .navbar-searchсыныппен бірге шарлау тақтасында реттелетін мәнерлерді алады. Оны туралау үшін қосыңыз немесе .pull-leftбасыңыз ..pull-rightform

<form class = "navbar-іздеу-солға қарай тарту" > 
  <енгізу түрі = «мәтін» класы = «іздеу-сұрау» толтырғышы = «Іздеу» >   
</form>

Қосымша жауап беретін вариация

Үстіңгі тақтадағы мазмұн көлеміне байланысты жауап беретін опцияларды іске асырғыңыз келуі мүмкін. Ол үшін шарлау мазмұнын div ішіне орап, шарлау тақтасын .nav-collapse.collapseауыстырып қосу түймешігін қосыңыз .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "контейнер" > 
 
      <!-- .btn-navbar жиылған шарлау тақтасының мазмұны үшін ауыстырып-қосқыш ретінде пайдаланылады -->
      <a класс = "btn btn-navbar" data-toggle = "тасалау" 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-форма, т.б. -->
      </div>
 
    </div>
  </div>
</div>

Nav сілтемелері

Nav элементтерін ретсіз тізімдер арқылы қосу оңай.

<ul class = "nav" > 
  <li класс = "белсенді" > 
    <a href = "#" > Басты </a> 
  </li>
  <li><a href = "#" > Сілтеме </a></li> 
  <li><a href = "#" > Сілтеме </a></li> 
</ul>

Ашылмалы тізімдерді қосу

Навигацияға ашылмалы тізімдерді қосу өте қарапайым, бірақ JavaScript плагинін пайдалануды қажет етеді .

<ul class = "nav" > 
  <li класс = "ашылмалы" > 
    <a href = "#" 
          сынып = «ашылмалы-қосқыш»
          data-toggle = «ашылмалы тізім» >
          Есептік жазба
          <b class = "caret" ></b> 
    </a>
    <ul class = "ашылмалы мәзір" > 
      ...
    </ul>
  </li>
</ul>

Javascript → алыңыз

Неліктен оларды пайдалану керек

Breadcrumb шарлауы пайдаланушыларға олардың қолданба немесе сайт ішінде қайда екенін көрсету тәсілі ретінде пайдаланылады, бірақ негізгі шарлау үшін емес. Ең тиімді болу үшін оларды сирек және қысқаша пайдалану керек.

Мысалдар

Бір мысал бірнеше беттерде көрсетілуі мүмкін ретінде көрсетілген.

• Үй

• Басты бет /
• Кітапхана

• Басты бет /
• Кітапхана /
• Деректер

Белгілеу

HTML - сілтемелері бар стандартты ретсіз тізім.

<ul class = "нан үгіндісі" > 
  <li>
    <a href = "#" > Басты </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Кітапхана </a> <span class = "divider" > / </span>   
  </li>
  <li класс = "белсенді" > 
    <a href = "#" > Деректер </a> 
  </li>
</ul>

Қашан пайдалану керек

Rdio шабыттандырылған өте қарапайым және минималды стильді беттеу, қолданбалар мен іздеу нәтижелері үшін тамаша. Үлкен блокты жіберіп алу қиын, оңай масштабталады және үлкен басу аймақтарын қамтамасыз етеді.

Статистикалық бет сілтемелері

Сілтемелер теңшеуге болады және дұрыс сыныппен бірқатар жағдайларда жұмыс істейді. .disabledбасылмайтын сілтемелер және .activeағымдағы бет үшін.

Икемді теңестіру

Беттеу сілтемелерінің туралануын өзгерту үшін екі қосымша сыныптың бірін қосыңыз: .pagination-centeredжәне .pagination-right.

Мысалдар

Әдепкі беттеу компоненті икемді және бірнеше нұсқада жұмыс істейді.

Белгілеу

Орап <div>, беттеу тек бір болып табылады <ul>.

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

Пейджер туралы

Пейджер құрамдас бөлігі жеңіл белгілеулері және одан да жеңіл стильдері бар қарапайым беттеуді жүзеге асыруға арналған сілтемелер жиынтығы болып табылады. Бұл блогтар немесе журналдар сияқты қарапайым сайттар үшін тамаша.

Әдепкі мысал

Әдепкі бойынша, пейджер сілтемелерді ортаға салады.

• Алдыңғы
• Келесі

<ul class = "пейджер" > 
  <li>
    <a href = "#" > Алдыңғы </a> 
  </li>
  <li>
    <a href = "#" > Келесі </a> 
  </li>
</ul>

Тураланған сілтемелер

Немесе әр сілтемені бүйірлеріне туралауға болады:

• ← Үлкенірек
• Жаңарақ →

<ul class = "пейджер" > 
  <li класс = «алдыңғы» > 
    <a href = "#" > ← Үлкенірек </a> 
  </li>
  <li класс = «келесі» > 
    <a href = "#" > Жаңарақ → </a> 
  </li>
</ul>

Әдепкі нобайлар

Әдепкі бойынша, Bootstrap нобайлары ең аз талап етілетін белгілеулері бар байланыстырылған кескіндерді көрсетуге арналған.

Жоғары теңшелетін

Біраз қосымша белгілеу арқылы тақырыптар, абзацтар немесе түймелер сияқты кез келген HTML мазмұнын нобайларға қосуға болады.

• 

  Нобай белгісі

  Cras justo odio, dpibus ac facilisis in, egestas eget quam. Doec id elit non mi porta gravida және eget metus. Идентификатордың идентификаторы жоқ.

  Әрекет Әрекет

• 

  Нобай белгісі

  Cras justo odio, dpibus ac facilisis in, egestas eget quam. Doec id elit non mi porta gravida және eget metus. Идентификатордың идентификаторы жоқ.

  Әрекет Әрекет

Неліктен нобайларды пайдалану керек

Нобайлар (бұрын .media-gridv1.4 нұсқасына дейін) фотосуреттер немесе бейне торлары, кескін іздеу нәтижелері, бөлшек сауда өнімдері, портфолиолар және т.б. үшін тамаша. Олар сілтемелер немесе тұрақты мазмұн болуы мүмкін.

Қарапайым, икемді белгілеу

Нобайды белгілеу қарапайым — элементтердің ulкез келген саны бар liғана қажет. Ол сонымен қатар өте икемді, мазмұнды орау үшін сәл көбірек белгілеулері бар кез келген мазмұн түріне мүмкіндік береді.

Тор баған өлшемдерін пайдаланады

Соңында, нобайлар құрамдас бөлігі нобай өлшемдерін басқару үшін бар тор жүйесінің сыныптарын пайдаланады - сияқты .span2немесе -..span3

Белгілеу

Бұрын айтылғандай, нобайлар үшін қажетті белгілеу жеңіл және қарапайым. Байланыстырылған кескіндер үшін әдепкі орнатуды қараңыз :

<ul class = "нобайлар" > 
  <li класс = "span3" > 
    <a href = "#" класс = "нобай" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Нобайлардағы реттелетін HTML мазмұны үшін белгілеу сәл өзгереді. <a>Блок деңгейіндегі мазмұнға кез келген жерде рұқсат беру үшін біз келесідей мазмұнды ауыстырамыз <div>:

<ul class = "нобайлар" > 
  <li класс = "span3" > 
    <div класс = "нобай" > 
      <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 comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.

Get the plugin »

Example alerts

Wrap your message and an optional close icon in a div with simple class.

<div class="alert">
  <a class="close">×</a>
  <strong>Warning!</strong> Best check yo self, you’re not looking too good.
</div>

Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.

<div class="alert alert-block">
  <a class="close">×</a>
  <h4 class="alert-heading">Warning!</h4>
  Best check yo self, you’re not...
</div>

Error or danger

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

Success

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

Information

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

Basic

Default progress bar with a vertical gradient.

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

Striped

Uses a gradient to create a striped effect.

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

Animated

Takes the striped example and animates it.

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

Additional colors

Progress bars utilize some of the same class names as buttons and alerts for similar styling.

• .progress-info
• .progress-success
• .progress-danger

Alternatively, you can customize the LESS files and roll your own colors and sizes.

Behavior

Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.

If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-8 or older versions of Firefox.

Opera does not support animations at this time.

Wells

Use the well as a simple effect on an element to give it an inset effect.

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

Белгілер

Оқылмаған санау үшін немесе қарапайым көрсеткіш ретінде элементте бейджді пайдаланыңыз.

<span class = "белгісі" > 3 </div> 

Close icon

Use the generic close icon for dismissing content like modals and alerts.

×

<a class="close">&times;</a>