Боотстрап картице пружају флексибилан и проширив контејнер садржаја са више варијанти и опција.
О томе
Картица је флексибилан и проширив контејнер садржаја . Укључује опције за заглавља и подножја, широк избор садржаја, контекстуалне боје позадине и моћне опције приказа. Ако сте упознати са Боотстрап 3, картице замењују наше старе панеле, бунаре и сличице. Слична функционалност овим компонентама доступна је као модификаторске класе за картице.
Пример
Картице су направљене са што мање ознака и стилова, али ипак успевају да испоруче тону контроле и прилагођавања. Направљени са флексбоксом, нуде лако поравнање и добро се мешају са другим Боотстрап компонентама. marginПодразумевано немају , па користите услужне програме за размак по потреби.
Испод је пример основне картице са мешовитим садржајем и фиксном ширином. Картице немају фиксну ширину за почетак, тако да ће природно испунити пуну ширину свог родитељског елемента. Ово се лако прилагођава нашим различитим опцијама величине .
Наслов картице
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Картице подржавају широк спектар садржаја, укључујући слике, текст, групе листа, везе и још много тога. Испод су примери онога што је подржано.
Тело
Грађевински блок картице је .card-body. Користите га кад год вам затреба подстављени део унутар картице.
Ово је неки текст унутар тела картице.
Наслови, текст и везе
Наслови картица се користе додавањем .card-titleу <h*>ознаку. На исти начин, везе се додају и постављају једна поред друге додавањем .card-linkу <a>ознаку.
Титлови се користе додавањем а .card-subtitleу <h*>ознаку. Ако су .card-titleи .card-subtitleставке постављене у .card-bodyставку, наслов картице и поднаслов су добро усклађени.
Наслов картице
Поднаслов картице
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
.card-img-topпоставља слику на врх картице. Помоћу .card-text, текст се може додати на картицу. Текст унутар .card-textсе такође може стилизовати са стандардним ХТМЛ ознакама.
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Листа група
Креирајте листе садржаја на картици са групом листе за испирање.
Црас јусто одио
Дапибус ац фацилисис ин
Вестибулум у еросу
Изабран
Црас јусто одио
Дапибус ац фацилисис ин
Вестибулум у еросу
Црас јусто одио
Дапибус ац фацилисис ин
Вестибулум у еросу
Судопера
Мешајте и упарите више типова садржаја да бисте направили картицу која вам је потребна или ставите све тамо. Доле су приказани стилови слика, блокови, стилови текста и група листе—све умотано у картицу фиксне ширине.
Наслов картице
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Картице претпостављају да нема специфичности widthза почетак, тако да ће бити 100% широке осим ако није другачије наведено. Ово можете променити по потреби помоћу прилагођеног ЦСС-а, грид класа, грид Сасс миксина или услужних програма.
Коришћење мрежних ознака
Користећи мрежу, умотајте картице у колоне и редове по потреби.
Посебан насловни третман
Са пратећим текстом испод као природним уводом у додатни садржај.
Картице укључују неколико опција за рад са сликама. Изаберите између додавања „капа слика“ на оба краја картице, преклапања слика са садржајем картице или једноставног уграђивања слике у картицу.
Имаге цапс
Слично као заглавља и подножја, картице могу да садрже горње и доње „капе слика“—слике на врху или дну картице.
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Последњи пут ажурирано пре 3 минута
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Последњи пут ажурирано пре 3 минута
Прекривања слика
Претворите слику у позадину картице и прекријте текст картице. У зависности од слике, можда ће вам требати или не морају бити додатни стилови или услужни програми.
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Последњи пут ажурирано пре 3 минута
Имајте на уму да садржај не би требало да буде већи од висине слике. Ако је садржај већи од слике, садржај ће бити приказан изван слике.
Хоризонтално
Користећи комбинацију мрежних и услужних класа, картице се могу поставити хоризонтално на начин који је прилагођен мобилним уређајима и који реагује. У примеру испод, уклањамо решеткасте олуке са .no-guttersи користимо .col-md-*класе да бисмо картицу учинили хоризонталном на mdтачки прекида. Можда ће бити потребна даља подешавања у зависности од садржаја ваше картице.
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Последњи пут ажурирано пре 3 минута
Стилови картица
Картице садрже различите опције за прилагођавање њихове позадине, ивица и боје.
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Хеадер
Наслов секундарне картице
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Хеадер
Наслов картице успеха
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Хеадер
Назив картице опасности
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Хеадер
Наслов картице упозорења
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Хеадер
Наслов инфо картице
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Хеадер
Лагани наслов картице
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Хеадер
Тамни наслов картице
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Преношење значења помоћним технологијама
Коришћење боје за додавање значења пружа само визуелну индикацију, која се неће пренети корисницима помоћних технологија – као што су читачи екрана. Уверите се да су информације означене бојом или очигледне из самог садржаја (нпр. видљиви текст), или су укључене путем алтернативних средстава, као што је додатни текст скривен .sr-onlyкласом.
Граница
Користите граничне услужне програме да промените само border-colorкартицу. Имајте на уму да можете ставити .text-{color}класе на родитељ .cardили подскуп садржаја картице као што је приказано испод.
Хеадер
Наслов примарне картице
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Хеадер
Наслов секундарне картице
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Хеадер
Наслов картице успеха
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Хеадер
Назив картице опасности
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Хеадер
Наслов картице упозорења
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Хеадер
Наслов инфо картице
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Хеадер
Лагани наслов картице
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Хеадер
Тамни наслов картице
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Микинс утилитиес
Такође можете да промените границе у заглављу и подножју картице по потреби, па чак и да их уклоните background-colorпомоћу .bg-transparent.
Хеадер
Наслов картице успеха
Неки брзи пример текста који треба да се надогради на наслов картице и да чини већи део садржаја картице.
Изглед картице
Поред стилизовања садржаја унутар картица, Боотстрап укључује неколико опција за постављање серије картица. За сада, ове опције распореда још увек не реагују .
Групе картица
Користите групе картица да бисте приказали картице као један, причвршћени елемент са колонама једнаке ширине и висине. Групе карата почињу наслагане и користе display: flex;се за спајање са уједначеним димензијама почевши од smтачке прекида.
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Последњи пут ажурирано пре 3 минута
Наслов картице
Ова картица има пратећи текст испод као природни увод у додатни садржај.
Последњи пут ажурирано пре 3 минута
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Ова картица има још дужи садржај од прве која показује акцију једнаке висине.
Последњи пут ажурирано пре 3 минута
Када користите групе картица са подножјима, њихов садржај ће се аутоматски поравнати.
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Наслов картице
Ова картица има пратећи текст испод као природни увод у додатни садржај.
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Ова картица има још дужи садржај од прве која показује акцију једнаке висине.
Шпилови карата
Треба вам сет картица једнаке ширине и висине које нису причвршћене једна за другу? Користите шпилове карата.
Наслов картице
Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Последњи пут ажурирано пре 3 минута
Наслов картице
Ова картица има пратећи текст испод као природни увод у додатни садржај.
Последњи пут ажурирано пре 3 минута
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Ова картица има још дужи садржај од прве која показује акцију једнаке висине.
Последњи пут ажурирано пре 3 минута
Као и код група карата, подножја карата у шпилу ће се аутоматски поравнати.
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Наслов картице
Ова картица има пратећи текст испод као природни увод у додатни садржај.
Наслов картице
Ово је шира картица са пратећим текстом испод као природни увод у додатни садржај. Ова картица има још дужи садржај од прве која показује акцију једнаке висине.
Мрежне картице
Користите Боотстрап систем мреже и његове .row-colsкласе да контролишете колико колона мреже (умотаних око ваших картица) приказујете по реду. На пример, ево .row-cols-1постављања картица на једну колону и .row-cols-md-2раздвајања четири картице на једнаку ширину у више редова, од средње тачке прекида нагоре.
Наслов картице
Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Наслов картице
Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Наслов картице
Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај.
Наслов картице
Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Промените је у .row-cols-3и видећете четврту картицу.
Наслов картице
Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Наслов картице
Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Наслов картице
Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај.
Наслов картице
Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Када вам треба једнака висина, додајте .h-100на картице. Ако желите једнаке висине подразумевано, можете да подесите $card-height: 100%у Сасс-у.
Наслов картице
Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Наслов картице
Ово је кратка картица.
Наслов картице
Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај.
Наслов картице
Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Колоне са картицама
Картице се могу организовати у колоне налик на масонерију са само ЦСС-ом тако што ћете их умотати у .card-columns. Картице су направљене са ЦСС columnсвојствима уместо флексбокса ради лакшег поравнања. Карте су поређане одозго на доле и са лева на десно.
Главу горе! Ваша километража са колонама картице може да варира. Да бисмо спречили да се картице разбију по колонама, морамо их поставити на display: inline-blockкао што column-break-inside: avoidјош није решење отпорно на метке.
Наслов картице који се премотава у нови ред
Ово је дужа картица са пратећим текстом испод као природни увод у додатни садржај. Овај садржај је мало дужи.
Ово је још једна картица са насловом и пратећим текстом испод. Ова картица има неки додатни садржај да би је у целини учинила мало вишом.
Последњи пут ажурирано пре 3 минута
Колоне картице се такође могу проширити и прилагодити неким додатним кодом. Доле је приказано проширење .card-columnsкласе које користи исти ЦСС који користимо – ЦСС колоне – за генерисање скупа респонзивних нивоа за промену броја колона.