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

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

Үздік тәжірибелер

Түймешіктер топтары мен құралдар тақталарын пайдалану үшін келесі нұсқауларды ұсынамыз:

• Әрқашан бір элементті бір түймелер тобында пайдаланыңыз <a>немесе <button>.
• Бір түймелер тобында әртүрлі түсті түймелерді араластырмаңыз.
• Мәтінге қосымша немесе оның орнына белгішелерді пайдаланыңыз, бірақ қажет болған жағдайда alt және тақырып мәтінін қосуды ұмытпаңыз.

Ашылмалы тізімдері бар қатысты түймелер топтары (төменде қараңыз) бөлек шақырылуы керек және әрқашан жоспарланған әрекетті көрсету үшін ашылмалы каретканы қамтуы керек.

Әдепкі мысал

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

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Құралдар тақтасының мысалы

Күрделі құрамдас бөліктер үшін <div class="btn-group">a жиынын біріктіріңіз .<div class="btn-toolbar">

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

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

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

JavaScript алыңыз »

Түйме топтарындағы ашылмалы тізімдер

Ескерту! Ашылмалы тізімі бар түймелер дұрыс көрсету үшін .btn-groupa ішінде жеке оралуы керек ..btn-toolbar

Шолу және мысалдар

Ашылмалы мәзірді ашу үшін кез келген түймені пайдаланып, оны а ішіне орналастырып .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>

Барлық түйме өлшемдерімен жұмыс істейді

Түймелердің ашылмалы тізімдері кез келген өлшемде жұмыс істейді. түймелердің өлшемдері .btn-large, .btn-small, немесе .btn-mini.

JavaScript қажет

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

Кейбір жағдайларда, мысалы, мобильді — ашылмалы мәзірлер қарау терезесінің сыртында кеңейтіледі. Сіз теңестіруді қолмен немесе реттелетін JavaScript көмегімен шешуіңіз керек.

Шолу және мысалдар

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

Өлшемдері

Қосымша түйме сыныптарын .btn-mini, .btn-smallнемесе .btn-largeөлшемдер үшін пайдаланыңыз.

<div class = "btn-group" > 
  ...
  <ul class = "ашылмалы мәзірді оңға қарай тарту" > 
    <!-- ашылмалы мәзір сілтемелері -->
  </ul>
</div>

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

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

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

Ашылмалы мәзірлер

Ашылмалы мәзірлерді тікелей ата-анасына бір сыныпты қосу арқылы төменнен жоғары ауыстыруға болады .dropdown-menu. Ол .caretжоғарыдан төменге емес, төменнен жоғарыға жылжыту үшін мәзірдің бағытын аударады және оның орнын ауыстырады.

<div class = "btn-group dropup" > 
  <button class = "btn" > Ашылмалы терезе </button> 
  <button class = "btn dropdown-toggle" data-toggle = "ашылатын тізім" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "ашылмалы мәзір" > 
    <!-- ашылмалы мәзір сілтемелері -->
  </ul>
</div>

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

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

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

Қойындылар мен таблеткалар мазмұн бөлімдері немесе қатысты мазмұн беттері арасында шарлау үшін тамаша.

Құрамдас бөліктерді туралау

Шарлау сілтемелерін туралау үшін .pull-leftнемесе .pull-rightутилита сыныптарын пайдаланыңыз. Екі сыныпта көрсетілген бағытта CSS қалқымалы қосылады.

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

Тұрақты <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>тегті сыныппен қосыңыз және сіз орнаттыңыз.

Көлденең бөлгіштер

Сыныппен бос тізім элементін жасау арқылы көлденең бөлгішті қосыңыз .divider, мысалы:

<ul class = "nav nav-list" > 
  ...
  <li класс = "бөлгіш" ></li> 
  ...
</ul>

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

Сілтемелер тізімін алып, мынаны қосыңыз 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 қойынды қойындыларын төрт стильде біріктіреді: жоғарғы (әдепкі), оң жақ, төменгі және сол жақ.

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

Қойындыларда өшеді

Қойындыларды өшіру .fadeүшін әрқайсысына қосыңыз .tab-pane.

jQuery плагинін қажет етеді

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

Javascript → алыңыз

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

Қойындыларды қойындыға айналдыру .tab-paneүшін әрбір қойынды үшін бірегей идентификаторды жасап, оларды ішіне ораңыз .tab-content.

Оңға немесе солға тураланған қойындылар үшін .nav-tabsжәне .tab-contentішіне ораңыз .tabbable.

Тікелей белгілеу

Қойынды қойындыларды пайдалану орау div, қойындылар жинағын және мазмұнның қойынды тақталарының жиынын қажет етеді.

<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 класс = "қойынды тақтасы белсенді" id = "tab1" >  
      <p> Мен 1-бөлімдемін. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Сәлеметсіз бе, мен 2-бөлімдемін. </p>
    </div>
  </div>
</div>

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

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>

Бекітілген шарлау тақтасы

Шарлау тақтасын көру терезесінің жоғарғы немесе төменгі жағына ең шеткі div, қосымша сыныппен бекітіңіз .navbar.

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

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

Шарлау тақтасын бекіткен кезде, астындағы жасырын аумақты есепке алуды ұмытпаңыз. 40px немесе одан көп толтырғыш қосыңыз <body>. Мұны негізгі Bootstrap CSS-тен кейін және қосымша жауап беретін CSS-тен бұрын қосуды ұмытпаңыз.

Бренд атауы

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

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

Шарлау тақтасындағы пішіндер

Шарлау тақтасында пішінді дұрыс стильдеу және орналастыру үшін төменде көрсетілгендей сәйкес сыныптарды қосыңыз. Әдепкі пішін үшін оны дұрыс туралау үшін .navbar-formжәне немесе біреуін .pull-leftқосыңыз ..pull-right

<форма класы = "navbar-form pull-left" > 
  <енгізу түрі = «мәтін» класы = «span2» >  
</form>

Неғұрлым теңшелген іздеу пішіні үшін шарлау тақтасындағы арнайы мәнерлер үшін енгізуге .navbar-searchжәне formқосыңыз ..search-query

<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 элементтерін ретсіз тізімдер арқылы қосу оңай.

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

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

<ul class = "nav" > 
  ...
  <li класс = "бөлгіш-вертикаль" ></li> 
  ...
</ul>

Құрамдас бөліктерді туралау

Шарлауды, іздеу пішінін немесе мәтінді туралау үшін .pull-leftнемесе .pull-rightутилита сыныптарын пайдаланыңыз. Екі сыныпта көрсетілген бағытта CSS қалқымалы қосылады.

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

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

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

Javascript → алыңыз

Шарлау тақтасындағы мәтін

Мәтін жолдарын <.navbar-text>, әдетте <p>тиісті жетекші және түс үшін тегке ораңыз.

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

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

Мысалдар

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

• Үй

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

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

Белгілеу

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

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

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

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

Қосымша өшірілген күй

Пейджерлік сілтемелер беттеудегі жалпы .disabledклассты да пайдаланады.

Әдепкі мысал

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

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

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

туралы

Бейдждер - индикаторды немесе қандай да бір санды көрсетуге арналған шағын, қарапайым құрамдас бөліктер. Олар әдетте Mail.app сияқты электрондық пошта клиенттерінде немесе push хабарландыруларына арналған мобильді қолданбаларда кездеседі.

Қол жетімді сабақтар

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

Белгілеу

Мазмұныңызды келесідей divетіп ораңыз:

<div класс = "қаһарман-бірлік" > 
  <h1> Тақырып </h1>
  <p> Тақырып </p>
  <p>
    <a класс = "btn btn-primary btn-large" > 
      Көбірек білу үшін
    </a>
  </p>
</div>

h1Беттегі мазмұн бөлімдерін дұрыс бөлуге және сегменттеуге арналған қарапайым қабық . Ол h1әдепкі small, элементін, сондай-ақ көптеген басқа компоненттерді (қосымша мәнерлермен) пайдалана алады.

<div class = "бет тақырыбы" > 
  <h1> Мысал бет тақырыбы </h1>
</div>

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

Әдепкі бойынша, 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кез келген саны бар a 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 ескерту хабарларын қолдайтын тамаша jQuery плагинімен бірге келеді, бұл оларды тез әрі оңай өшіруге мүмкіндік береді.

Плагинді алыңыз »

Мысал ескертулер

Хабарламаңызды және қосымша жабу белгішесін қарапайым класы бар div ішіне ораңыз.

<div класс = "ескерту" > 
  <button class = "close" data-dississ = "alert" > × </button>  
  <strong> Ескерту! </strong> Өзіңізді тексеріңіз, сіз тым жақсы көрінбейсіз.
</div>

Ескерту! iOS құрылғылары href="#"ескертулерді өшіруді талап етеді. Оны және якорьді жабу белгішелеріне арналған деректер төлсипатын қосуды ұмытпаңыз. Сонымен қатар, сіз деректер төлсипаты бар элементті пайдалана аласыз button, оны біз құжаттарымыз үшін жасауды таңдадық.

Стандартты ескерту хабарын екі қосымша сыныппен оңай кеңейтіңіз: .alert-blockқосымша толтыру және мәтінді басқару элементтері және .alert-headingсәйкес тақырып үшін.

<div class = "alert alert-block" > 
  <a class = "close" data-dississ = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > Ескерту! </h4> 
  Өзіңізді тексерген дұрыс, сіз...
</div>

Қате немесе қауіп

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

Жетістік

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

ақпарат

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

Негізгі

Тік градиенті бар әдепкі орындалу жолағы.

<div класс = "прогресс" > 
  <div класс = «бар» 
       style = " ені : 60 %; " ></div> 
</div>

Жолақты

Жолақты әсер жасау үшін градиентті пайдаланады (IE жоқ).

<div class = "прогресс-жолақты прогресс" > 
  <div класс = «бар» 
       style = " ені : 20 %; " ></div> 
</div>

Анимациялық

Жолақты мысалды алып, оны жандандырады (IE жоқ).

<div class = "прогресс-жолақ 
     белсенді» >
  <div класс = «бар» 
       style = " ені : 40 %; " ></div> 
</div>

Қосымша түстер

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

Жолақты жолақтар

Қатты түстерге ұқсас, бізде әртүрлі жолақты прогресс жолақтары бар.

Мінез-құлық

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

Егер сіз .activeсыныпты пайдалансаңыз, .progress-stripedүлгерім жолақтары жолақтарды солдан оңға қарай жандандырады.

Браузерді қолдау

Прогресс жолақтары олардың барлық әсерлеріне жету үшін CSS3 градиенттерін, ауысуларын және анимацияларын пайдаланады. Бұл мүмкіндіктерге IE7-9 немесе Firefox-тың ескі нұсқаларында қолдау көрсетілмейді.

Қазіргі уақытта Opera және IE анимацияларды қолдамайды.

Ұңғымалар

Шұңқырды элементке кірістірілген әсер беру үшін қарапайым әсер ретінде пайдаланыңыз.

<div класс = «жақсы» > 
  ...
</div>

Жабу белгішесі

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

×

<button class = "жабу" > × </button> 

Егер зәкірді пайдалансаңыз, iOS құрылғылары басу оқиғалары үшін href="#" белгісін талап етеді.

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