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

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

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

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

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

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

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

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

Әдепкі мысал

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

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

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

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

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

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

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

JavaScript алыңыз »

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

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

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

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

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

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

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

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Әрекет
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "ашылмалы мәзір" >
  7. <!-- ашылмалы мәзір сілтемелері -->
  8. </ul>
  9. </div>

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

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

JavaScript қажет

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

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


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

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

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

Өлшемдері

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

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

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

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > Әрекет </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "ашылатын тізім" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "ашылмалы мәзір" >
  7. <!-- ашылмалы мәзір сілтемелері -->
  8. </ul>
  9. </div>

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

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

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Ашылмалы терезе </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "ашылатын тізім" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "ашылмалы мәзір" >
  7. <!-- ашылмалы мәзір сілтемелері -->
  8. </ul>
  9. </div>

Көптік бетті беттеу

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

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

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

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

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

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

Мысалдар

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

Белгілеу

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

  1. <div class = "беттеу" >
  2. <ul>
  3. <li><a href = "#" > Алдыңғы </a></li>
  4. <li класс = "белсенді" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Келесі </a></li>
  11. </ul>
  12. </div>

Пейжер Алдыңғы және келесі жылдам сілтемелер үшін

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

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

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

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

Әдепкі мысал

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

  1. <ul class = "пейджер" >
  2. <li>
  3. <a href = "#" > Алдыңғы </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Келесі </a>
  7. </li>
  8. </ul>

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

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

  1. <ul class = "пейджер" >
  2. <li класс = «алдыңғы» >
  3. <a href = "#" > Үлкенірек </a>
  4. </li>
  5. <li класс = «келесі» >
  6. <a href = "#" > Жаңарақ → </a>
  7. </li>
  8. </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>

туралы

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

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

Аты Мысал Белгілеу
Әдепкі 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>

Батыр бірлігі

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

Белгілеу

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

  1. <div класс = "қаһарман-бірлік" >
  2. <h1> Тақырып </h1>
  3. <p> Тақырып </p>
  4. <p>
  5. <a класс = "btn btn-primary btn-large" >
  6. Көбірек білу үшін
  7. </a>
  8. </p>
  9. </div>

Сәлем Әлем!

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

Көбірек білу үшін

Бет тақырыбы

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

  1. <div class = "бет тақырыбы" >
  2. <h1> Мысал бет тақырыбы </h1>
  3. </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

Белгілеу

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

  1. <ul class = "нобайлар" >
  2. <li класс = "span3" >
  3. <a href = "#" класс = "нобай" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul class = "нобайлар" >
  2. <li класс = "span3" >
  3. <div класс = "нобай" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Нобай белгісі </h5>
  6. <p> Нобай жазуы дәл осы жерде... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Қосымша мысалдар

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

Жеңіл әдепкі мәндер

Қайта жазылған негізгі класс

Bootstrap 2 көмегімен біз негізгі классты жеңілдеттік: .alertорнына .alert-message. Біз сондай-ақ қажетті ең төменгі түзетуді азайттық <p>— әдепкі бойынша жоқ талап етілмейді, тек сыртқы <div>.

Бірыңғай ескерту хабары

Коды азырақ берік құрамдас үшін біз блоктық ескертулер, көбірек толтыру және әдетте көбірек мәтінмен келетін хабарлар үшін сараланған көріністі алып тастадық. Сынып та өзгерді .alert-block.


JavaScript-пен тамаша үйлеседі

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

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

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

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

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

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

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

Ескерту!

Өзіңізді тексеріңіз, сіз тым жақсы көрінбейсіз. Nulla vitae elit libero, pharetra augue. Commodo cursus magna, немесе scelerisque nisl consectetur et.

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

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

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

О, шап! Бірнеше нәрсені өзгертіп, қайта жіберіп көріңіз.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Жетістік

Жарайсың! Сіз осы маңызды ескерту хабарын сәтті оқыдыңыз.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

ақпарат

Ескерту! Бұл ескерту назарыңызды қажет етеді, бірақ бұл өте маңызды емес.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Мысалдар және белгілеу

Негізгі

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

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

Жолақты

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

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

Анимациялық

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

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

Опциялар және шолғышты қолдау

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

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

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

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

Мінез-құлық

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

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

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

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

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

Ұңғымалар

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

Қараңдар, мен құдықта жатырмын!
  1. <div класс = «жақсы» >
  2. ...
  3. </div>

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

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

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

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

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