Компонентлар

Навигация, хәбәрләр, поповерлар һәм башкаларны тәэмин итү өчен Bootstrap эчендә дистәләгән кабат кулланыла торган компонентлар төзелгән.

Кнопка төркемнәре

Бер составлы компонент буларак берничә төймәгә кушылу өчен төймә төркемнәрен кулланыгыз. <a>Аларны бер-бер артлы яки <button>элементлар белән төзегез .

Иң яхшы тәҗрибәләр

Без төймә төркемнәрен һәм кораллар тактасын куллану өчен түбәндәге күрсәтмәләрне тәкъдим итәбез:

  • Buttonәрвакыт бер төймә төркемендә бер үк элементны кулланыгыз, <a>яки <button>.
  • Бер үк төймә төркемендә төрле төстәге төймәләрне кушмагыз.
  • Текстка яисә аның урынына иконалар кулланыгыз, ләкин кирәк булганда alt һәм титул текстын кертегез.

Бәйләнешле төймә төркемнәре тамчылары белән (аста карагыз) аерым чакырылырга һәм максатчан тәртипне күрсәтү өчен һәрвакыт тамчы каретны кертергә тиеш.

Килешенгән мисал

HTML ничек анкор тегү төймәләре белән төзелгән стандарт төймә төркемен эзли:

  1. <div class = "btn-group" >
  2. <төймә класс = "btn" > 1 </button>
  3. <төймә класс = "btn" > 2 </button>
  4. <төймә класс = "btn" > 3 </button>
  5. </div>

Кораллар аскысы

Катлаулы компонентларга комплектларны берләштерегез <div class="btn-group">.<div class="btn-toolbar">

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

Такталар һәм радио тәмләре

Кнопка төркемнәре шулай ук ​​радио булып эшли ала, анда бер генә төймә актив булырга мөмкин, яисә теләсә нинди төймә актив булган пункт. Моның өчен Javascript документларын карагыз .

Javascript алыгыз »

Кнопка төркемнәрендәге тамчылар

Идарә итә! Төшү төймәләре дөрес күрсәтү өчен .btn-groupиндивидуаль рәвештә үзләренә төрелергә тиеш ..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. <төймә класс = "btn" > Эш </button>
  3. <төймә класс = "btn тамчы-күчү" мәгълүмат-күчү = "төшү" >
  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. <төймә класс = "btn" > Тамчы </button>
  3. <төймә класс = "btn тамчы-күчү" мәгълүмат-күчү = "төшү" >
  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 = "pagination" >
  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 = "#"> & larr ; Олы </a>
  4. </li>
  5. <li класс = "киләсе" >
  6. <a href = "#"> Яңа & rarr ; </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 кебек электрон почта клиентларында яки мобиль кушымталарда табыла.

Мөмкин класслар

Исем Мисал Билгеләү
Килешү 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 class = "герой-берәмлек" >
  2. <h1> Башлам </h1>
  3. <p> Теглар </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large">
  6. Тулырак
  7. </a>
  8. </p>
  9. </div>

Сәлам, Дөнья!

Бу гади герой берәмлеге, үзенчәлекле эчтәлеккә яки мәгълүматка өстәмә игътибарны җәлеп итү өчен гади джумботрон стилендәге компонент.

Тулырак

Бит башы

h1Биттәге эчтәлекнең сегмент бүлекләрен урынлы урнаштыру өчен гади кабык . Ул күпчелек компонентларны (өстәмә стильләр белән) h1куллана ала.small

  1. <div class = "page-header" >
  2. <h1> Мисал бит башы </h1>
  3. </div>

Килешү эскизлар

Килешү буенча, Bootstrap эскизлары минималь кирәкле билгеләр белән бәйләнгән рәсемнәрне күрсәтү өчен эшләнгән.

Бик югары көйләнә

Бераз өстәмә билгеләр белән, баш символлар, параграфлар яки төймәләр кебек HTML эчтәлеген өстәргә мөмкин.

  • Эскиз этикеткасы

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida eget metus. Nullam id dolor id nibh ultricies транспорт чарасы.

    Эш Эш

  • Эскиз этикеткасы

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida eget metus. Nullam id dolor id nibh ultricies транспорт чарасы.

    Эш Эш

Ни өчен эскизларны кулланырга

Эскизлар (моңа .media-gridкадәр v1.4 кадәр) фото яки видео челтәрләре, рәсем эзләү нәтиҗәләре, ваклап сату продуктлары, портфолио һәм башкалар өчен бик яхшы. Алар сылтамалар яки статик эчтәлек булырга мөмкин.

Гади, сыгылмалы билгеләр

Эскизны билгеләү гади - ulтеләсә нинди liэлементлар белән кирәк. Бу шулай ук ​​супер сыгылучан, эчтәлекне төрү өчен бераз күбрәк маркалы эчтәлек төренә мөмкинлек бирә.

Челтәр баганасы зурлыкларын куллана

Ниһаять, эскизлар компоненты булган челтәр системасы классларын куллана, .span2яки .span3эскиз үлчәмнәрен контрольдә тоту өчен.

Билгеләү

Алда әйтелгәнчә, эскизлар өчен кирәкле билгеләр җиңел һәм туры. Менә бәйләнгән рәсемнәр өчен килешенгән көйләүгә күз салу :

  1. <ul class = "эскизлар" >
  2. <li класс = "span3" >
  3. <a href = "#" class = "thumbnail"> _
  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 class = "эскиз" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Эскиз этикеткасы </h5>
  6. <p> Эскиз язуы монда ... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Күбрәк мисаллар

Төрле челтәр класслары белән сезнең барлык вариантларыгызны өйрәнегез. Сез шулай ук ​​төрле зурлыкларны кушып, туры китерә аласыз.

Lightиңел дефолтлар

Яңа класс

Bootstrap 2 ярдәмендә без төп классны гадиләштердек: .alertурынына .alert-message. Без шулай ук ​​минималь таләпләрне киметтек <p>- килешү буенча юк, тышкы яктан гына <div>.

Бердәнбер хәбәр

Аз кодлы тагын да ныграк компонент өчен, без блок сигнализацияләрен, дифференциаль күренешне бетердек, күбрәк паддинг һәм гадәттә күбрәк текст белән килгән хәбәрләр. Класс шулай ук ​​үзгәрде .alert-block.


Javascript белән бик яхшы бара

Bootstrap зур jQuery плагины белән килә, алар уяу хәбәрләрне хуплый, аларны тиз һәм җиңел җибәрә.

Плагин алыгыз »

Мисал хәбәрләре

Хәбәрегезне һәм өстәмә ябык иконаны гади класс белән бүлегез.

Кисәтү! Иң яхшы тикшерү, сез бик яхшы күренмисез.
  1. <div class = "уяу" >
  2. <төймә классы = "ябу" мәгълүмат-кире кагу = "уяу" > × </button>
  3. <strong> Кисәтү! </strong> Иң яхшы тикшерү, сез бик яхшы күренмисез.
  4. </div>

Идарә итә! iOS җайланмалары href="#"хәбәрләрне кире кагуны таләп итә. Аны һәм якорь иконалары өчен мәгълүмат атрибутын кертегез. Альтернатив рәвештә, сез <button>безнең документлар өчен сайлаган мәгълүмат атрибуты булган элементны куллана аласыз. Кулланганда <button>сез кертергә тиеш, type="button"яисә формаларыгыз җибәрелмәскә мөмкин.

Ике факультатив класс белән стандарт кисәтү хәбәрен җиңел генә киңәйтегез: .alert-blockкүбрәк паддинг һәм текст контроле .alert-headingөчен һәм туры килгән башлам өчен.

Кисәтү!

Иң яхшы тикшерү, сез бик яхшы күренмисез. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur һ.б.

  1. <div class = "уяулык-блок" >
  2. <a class = "close" data-dismiss = "alert" href = "#"> × </a> _
  3. <h4 класс = "уяу-баш" > Кисәтү! </h4>
  4. Иң яхшы тикшерү, син түгел ...
  5. </div>

Контекстуаль альтернатива Сигналның мәгънәсен үзгәртү өчен өстәмә класслар өстәгез

Хата яки куркыныч

Әй! Берничә әйберне үзгәртегез һәм яңадан җибәрергә тырышыгыз.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Уңыш

Афәрин! Сез бу мөһим хәбәрне уңышлы укыйсыз.
  1. <div class = "уяу уяу-уңыш" >
  2. ...
  3. </div>

Мәгълүмат

Идарә итә! Бу кисәтү сезнең игътибарыгызга мохтаҗ, ләкин бу бик мөһим түгел.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Мисаллар һәм билгеләр

Төп

Вертикаль градиент белән алга китеш сызыгы.

  1. <div class = "алгарыш" >
  2. <div class = "bar"
  3. style = " width : 60 %; " > </div>
  4. </div>

Сызылган

Сызылган эффект булдыру өчен градиент куллана (IE юк).

  1. <div class = "прогресс-сызыклы" >
  2. <div class = "bar"
  3. стиль = " киңлек : 20 %; " > </div>
  4. </div>

Анимация

Сызылган мисалны ала һәм анимацияли (IE юк).

  1. <div class = "прогресс сызыклы
  2. актив " >
  3. <div class = "bar"
  4. стиль = " киңлек : 40 %; " > </div>
  5. </div>

Вариантлар һәм браузер ярдәме

Өстәмә төсләр

Прогресс барлары бер үк төймә һәм эзлекле стильләр өчен кисәтү классларын кулланалар.

Сызыклы барлар

Каты төсләргә охшаган, бездә төрле сызыклы прогресс барлары бар.

Тәртип

Прогресс барлары CSS3 күчешләрен кулланалар, шуңа күрә javascript аша киңлекне динамик көйләсәгез, ул шома үзгәрәчәк.

.activeӘгәр дә сез классны куллансагыз, .progress-stripedпрогресс барларыгыз сулдан уңга сызыкларны җанландырачак.

Браузер ярдәме

Прогресс барлары барлык эффектларына ирешү өчен CSS3 градиентларын, күчешләрен, анимацияләрен кулланалар. Бу функцияләр IE7-9 яки Firefox'ның иске версияләрендә булышмый.

Опера һәм IE бу вакытта анимацияләрне хупламыйлар.

Скважиналар

Элементка гади эффект кебек үк, эффект кертү өчен кулланыгыз.

Менә мин коеда!
  1. <div class = "әйбәт" >
  2. ...
  3. </div>

Икона

Модаль һәм сигнализация кебек эчтәлекне кире кагу өчен гомуми якын иконаны кулланыгыз.

  1. <төймә класс = "ябык" > & вакыт; </button>

iOS җайланмалары, анкор куллансагыз, басу вакыйгалары өчен href = "#" таләп итә.

  1. <a class = "close" href = "#"> & times ; </a>