Карты Bootstrap забяспечваюць гнуткі і пашыраемы кантэйнер кантэнту з мноствам варыянтаў і опцый.
Аб
Картка - гэта гнуткі і пашыраемы кантэйнер змесціва. Ён уключае параметры для верхніх і ніжніх калонтытулаў, шырокі выбар кантэнту, кантэкстныя колеры фону і магутныя параметры адлюстравання. Калі вы знаёмыя з Bootstrap 3, карты замяняюць нашы старыя панэлі, калодзежы і мініяцюры. Функцыянальнасць, падобная да гэтых кампанентаў, даступная ў якасці класаў-мадыфікатараў для карт.
Прыклад
Карткі ствараюцца з мінімальнай колькасцю разметкі і стыляў, але пры гэтым забяспечваюць масу кантролю і наладкі. Пабудаваныя з дапамогай flexbox, яны забяспечваюць лёгкае выраўноўванне і добра спалучаюцца з іншымі кампанентамі Bootstrap. 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таксама можна стылізаваць з дапамогай стандартных тэгаў HTML.
Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.
Спіс груп
Стварыце спісы змесціва на картцы з групай спісаў для змывання.
Cras justo odio
Dapibus ac facilisis in
Вестыбулум і эрас
Рэкамендаваны
Cras justo odio
Dapibus ac facilisis in
Вестыбулум і эрас
Cras justo odio
Dapibus ac facilisis in
Вестыбулум і эрас
Кухонная ракавіна
Змяшайце і спалучайце некалькі тыпаў змесціва, каб стварыць патрэбную картку, або дадайце туды ўсё. Ніжэй паказаны стылі выявы, блокі, стылі тэксту і група спісаў — усё гэта загорнута ў карту фіксаванай шырыні.
Назва карты
Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.
Карткі не прадугледжваюць асаблівага widthпачатку, таму яны будуць мець шырыню на 100%, калі не пазначана іншае. Вы можаце змяніць гэта пры неабходнасці з дапамогай карыстальніцкага CSS, класаў сеткі, міксінаў сеткі Sass або ўтыліт.
Выкарыстанне разметкі сеткі
Выкарыстоўваючы сетку, абгарніце карты ў слупкі і радкі па меры неабходнасці.
Спецыяльны рэжым тытула
З дапаможным тэкстам ніжэй у якасці натуральнага ўводу да дадатковага кантэнту.
Карткі ўключаюць у сябе некалькі варыянтаў працы з малюнкамі. Дадавайце «шапкі малюнкаў» на любы канец карты, накладвайце выявы на змесціва карткі або проста ўстаўляйце выяву ў картку.
Шапкі малюнкаў
Падобна верхнім і ніжнім калонтытулам, карты могуць уключаць верхнія і ніжнія «шапкі відарысаў» — выявы ўверсе або ўнізе карты.
Назва карты
Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.
Апошняе абнаўленне 3 хвіліны таму
Назва карты
Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.
Апошняе абнаўленне 3 хвіліны таму
Накладання малюнкаў
Ператварыце малюнак у фон карткі і накладзеце тэкст вашай карткі. У залежнасці ад выявы вам могуць спатрэбіцца дадатковыя стылі ці ўтыліты, а могуць і не спатрэбіцца.
Назва карты
Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.
Апошняе абнаўленне 3 хвіліны таму
Звярніце ўвагу, што змест не павінен перавышаць вышыню выявы. Калі змесціва большае за выяву, змесціва будзе адлюстроўвацца па-за выявай.
Гарызантальны
Выкарыстоўваючы камбінацыю сетак і карысных класаў, карты можна зрабіць гарызантальнымі ў мабільным і спагадным спосабе. У прыведзеным ніжэй прыкладзе мы выдаляем жолабы сеткі .no-guttersі выкарыстоўваем .col-md-*класы, каб зрабіць карту гарызантальнай у mdкропцы перапынку. У залежнасці ад змесціва карты могуць спатрэбіцца дадатковыя карэкціроўкі.
Назва карты
Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.
Апошняе абнаўленне 3 хвіліны таму
Стылі картак
Карткі ўключаюць у сябе розныя параметры для налады фону, межаў і колеру.
Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.
Загаловак
Загаловак другаснай карты
Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.
Загаловак
Назва карты поспеху
Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.
Загаловак
Назва карты небяспекі
Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.
Загаловак
Назва карткі з папярэджаннем
Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.
Загаловак
Назва інфармацыйнай карты
Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.
Загаловак
Светлая назва карты
Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.
Загаловак
Цёмная назва карты
Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.
Перадача значэння дапаможных тэхналогій
Выкарыстанне колеру для дадання сэнсу забяспечвае толькі візуальную індыкацыю, якая не будзе перададзена карыстальнікам дапаможных тэхналогій, такіх як праграмы чытання з экрана. Пераканайцеся, што інфармацыя, пазначаная колерам, альбо відавочная з самага змесціва (напрыклад, бачнага тэксту), альбо ўключана з дапамогай альтэрнатыўных сродкаў, такіх як дадатковы тэкст, схаваны разам з .sr-onlyкласам.
Граніца
Каб змяніць толькі карту, выкарыстоўвайце памежныя ўтыліты . border-colorЗвярніце ўвагу, што вы можаце размясціць .text-{color}класы для бацькоўскага .cardабо падмноства змесціва карты, як паказана ніжэй.
Загаловак
Назва асноўнай карты
Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.
Загаловак
Загаловак другаснай карты
Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.
Загаловак
Назва карты поспеху
Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.
Загаловак
Назва карты небяспекі
Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.
Загаловак
Назва карткі з папярэджаннем
Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.
Загаловак
Назва інфармацыйнай карты
Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.
Загаловак
Светлая назва карты
Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.
Загаловак
Цёмная назва карты
Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.
Утыліты Mixins
Вы таксама можаце змяніць рамкі верхняга і ніжняга калонтытулаў карты пры неабходнасці і нават выдаліць іх background-colorз дапамогай .bg-transparent.
Загаловак
Назва карты поспеху
Некалькі кароткіх прыкладаў тэксту, які будзе грунтавацца на назве карткі і складзе асноўную частку змесціва карткі.
Макет карты
У дадатак да стылізацыі змесціва ў картах, Bootstrap уключае некалькі варыянтаў размяшчэння серыі картак. На дадзены момант гэтыя параметры макета яшчэ не адаптыўныя .
Групы карт
Выкарыстоўвайце групы картак, каб візуалізаваць карты як адзіны далучаны элемент са слупкамі роўнай шырыні і вышыні. Групы карт пачынаюць складаць у стос і выкарыстоўваць display: flex;для прымацавання з аднолькавымі памерамі, пачынаючы з smпункту разрыву.
Назва карты
Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.
Апошняе абнаўленне 3 хвіліны таму
Назва карты
Гэтая картка мае дапаможны тэкст унізе як натуральнае ўвядзенне да дадатковага кантэнту.
Апошняе абнаўленне 3 хвіліны таму
Назва карты
Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэтая картка мае яшчэ большы змест, чым першая, якая паказвае дзеянне роўнай вышыні.
Апошняе абнаўленне 3 хвіліны таму
Пры выкарыстанні груп картак з ніжнімі калонтытуламі іх змесціва будзе аўтаматычна выстройвацца.
Назва карты
Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.
Назва карты
Гэтая картка мае дапаможны тэкст унізе як натуральнае ўвядзенне да дадатковага кантэнту.
Назва карты
Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэтая картка мае яшчэ большы змест, чым першая, якая паказвае дзеянне роўнай вышыні.
Калоды карт
Патрэбен набор карт аднолькавай шырыні і вышыні, якія не прымацаваныя адна да адной? Выкарыстоўвайце калоды карт.
Назва карты
Гэта больш доўгая картка з дапаможным тэкстам унізе ў якасці натуральнага ўводу да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.
Апошняе абнаўленне 3 хвіліны таму
Назва карты
Гэтая картка мае дапаможны тэкст унізе як натуральнае ўвядзенне да дадатковага кантэнту.
Апошняе абнаўленне 3 хвіліны таму
Назва карты
Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэтая картка мае яшчэ большы змест, чым першая, якая паказвае дзеянне роўнай вышыні.
Апошняе абнаўленне 3 хвіліны таму
Гэтак жа, як і ў выпадку з групамі карт, ніжнія калонтытулы карт у калодах будуць выстройвацца аўтаматычна.
Назва карты
Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.
Назва карты
Гэтая картка мае дапаможны тэкст унізе як натуральнае ўвядзенне да дадатковага кантэнту.
Назва карты
Гэта больш шырокая картка з дапаможным тэкстам унізе як натуральнае ўвядзенне да дадатковага кантэнту. Гэтая картка мае яшчэ большы змест, чым першая, якая паказвае дзеянне роўнай вышыні.
Карты сеткі
Выкарыстоўвайце сеткавую сістэму Bootstrap і яе .row-colsкласы , каб кантраляваць, колькі слупкоў сеткі (абгорнутых вакол вашых картак) вы паказваеце ў радку. Напрыклад, вось .row-cols-1выкладванне карт у адзін слупок і .row-cols-md-2раздзяленне чатырох карт на аднолькавую шырыню ў некалькіх радках, ад сярэдняй кропкі разрыву ўверх.
Назва карты
Гэта больш доўгая картка з дапаможным тэкстам унізе ў якасці натуральнага ўводу да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.
Назва карты
Гэта больш доўгая картка з дапаможным тэкстам унізе ў якасці натуральнага ўводу да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.
Назва карты
Гэта больш доўгая картка з дапаможным тэкстам унізе ў якасці натуральнага ўводу да дадатковага кантэнту.
Назва карты
Гэта больш доўгая картка з дапаможным тэкстам унізе ў якасці натуральнага ўводу да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.
Зменіце яго на, .row-cols-3і вы ўбачыце чацвёртую абгортку карты.
Назва карты
Гэта больш доўгая картка з дапаможным тэкстам унізе ў якасці натуральнага ўводу да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.
Назва карты
Гэта больш доўгая картка з дапаможным тэкстам унізе ў якасці натуральнага ўводу да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.
Назва карты
Гэта больш доўгая картка з дапаможным тэкстам унізе ў якасці натуральнага ўводу да дадатковага кантэнту.
Назва карты
Гэта больш доўгая картка з дапаможным тэкстам унізе ў якасці натуральнага ўводу да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.
Калі патрэбна роўная вышыня, дадайце .h-100да карт. Калі вы жадаеце мець аднолькавыя вышыні па змаўчанні, вы можаце ўсталяваць $card-height: 100%у Sass.
Назва карты
Гэта больш доўгая картка з дапаможным тэкстам унізе ў якасці натуральнага ўводу да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.
Назва карты
Гэта кароткая карта.
Назва карты
Гэта больш доўгая картка з дапаможным тэкстам унізе ў якасці натуральнага ўводу да дадатковага кантэнту.
Назва карты
Гэта больш доўгая картка з дапаможным тэкстам унізе ў якасці натуральнага ўводу да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.
Слупкі карт
Карткі можна арганізаваць у слупкі, падобныя на Masonry.card-columns , з дапамогай толькі CSS, загарнуўшы іх у . Карткі створаны з columnуласцівасцямі CSS замест flexbox для палягчэння выраўноўвання. Карты размешчаны зверху ўніз і злева направа.
Галаву ўверх! Ваш прабег са слупкамі карты можа адрознівацца. Каб карты не разбіваліся па слупках, мы павінны наладзіць іх display: inline-blockтак column-break-inside: avoid, што гэта яшчэ не куленепрабівальнае рашэнне.
Назва карткі, якая пераходзіць на новы радок
Гэта больш доўгая картка з дапаможным тэкстам унізе ў якасці натуральнага ўводу да дадатковага кантэнту. Гэты кантэнт крыху даўжэйшы.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цэлы лік posuere erat a ante.
Назва карты
Гэтая картка мае дапаможны тэкст унізе як натуральнае ўвядзенне да дадатковага кантэнту.
Апошняе абнаўленне 3 хвіліны таму
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цэлы posuere erat.
Назва карты
Гэтая карта мае звычайны загаловак і кароткі абзац тэксту пад ім.
Апошняе абнаўленне 3 хвіліны таму
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цэлы лік posuere erat a ante.
Назва карты
Гэта яшчэ адна карта з назвай і дапаможным тэкстам ніжэй. Гэтая карта мае дадатковы кантэнт, каб зрабіць яе крыху вышэйшай у цэлым.
Апошняе абнаўленне 3 хвіліны таму
Слупкі карт таксама можна пашырыць і наладзіць з дапамогай дадатковага кода. Ніжэй паказана пашырэнне .card-columnsкласа з выкарыстаннем таго ж CSS, які мы выкарыстоўваем — слупкоў CSS — для стварэння набору адаптыўных узроўняў для змены колькасці слупкоў.