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
Vestibulum at eros
Өзгөчөлөнгөн
Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros
Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros
Ашкана раковинасы
Керектүү картаны түзүү үчүн бир нече мазмун түрлөрүн аралаштырып, дал келтириңиз же баарын ошол жерге таштаңыз. Төмөндө сүрөттөлүш стилдери, блоктор, текст стилдери жана тизме тобу – бардыгы белгиленген туурасы картага оролгон.
Карта аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Карталар widthбаштоо үчүн конкреттүү эмес деп эсептейт, андыктан башкасы көрсөтүлбөсө, алар 100% кенен болот. Сиз муну ыңгайлаштырылган CSS, тор класстары, тор Sass аралашмалары же утилиталар менен өзгөртө аласыз.
Тор белгилөө колдонуу
Торду колдонуп, карталарды зарылчылыкка жараша мамычаларга жана саптарга ороңуз.
Атайын дарылоо
Кошумча мазмунга табигый жол катары төмөнкү колдоочу текст менен.
Карталар сүрөттөр менен иштөө үчүн бир нече варианттарды камтыйт. Картанын эки четине "сүрөт капкактарын" кошууну, сүрөттөрдү картанын мазмуну менен жабууну же жөн гана сүрөттү картага кыстарууну тандаңыз.
Сүрөт капкактары
Жогорку жана төмөнкү колонтитулдарга окшоп, карталар үстүңкү жана астыңкы "сүрөттүн капкактарын" камтышы мүмкүн — картанын үстүнкү же астындагы сүрөттөр.
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар кененирээк карта. Бул мазмун бир аз узунураак.
Акыркы жолу 3 мүнөт мурун жаңыртылган
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар кененирээк карта. Бул мазмун бир аз узунураак.
Акыркы жолу 3 мүнөт мурун жаңыртылган
Сүрөттүн катмарлары
Сүрөттү картанын фонуна айлантып, картаңыздын текстин каптаңыз. Сүрөткө жараша, сизге кошумча стилдер же утилиталар керек болушу мүмкүн же кереги жок.
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар кененирээк карта. Бул мазмун бир аз узунураак.
Акыркы жолу 3 мүнөт мурун жаңыртылган
Мазмунду сүрөттүн бийиктигинен чоңураак болбошу керектигин эске алыңыз. Эгер мазмун сүрөттөн чоңураак болсо, мазмун сүрөттөн тышкары көрсөтүлөт.
Горизонталдуу
Тор жана пайдалуу класстардын айкалышын колдонуу менен карталарды мобилдик колдонууга ыңгайлуу жана жооп берүүчү жол менен горизонталдуу кылса болот. Төмөндөгү мисалда биз торчолорду алып салабыз жана картаны үзгүлтүккө учуратуу чекитинде горизонталдуу кылуу үчүн класстарды .no-guttersколдонобуз . Картаңыздын мазмунуна жараша кошумча оңдоолор талап кылынышы мүмкүн..col-md-*md
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар кененирээк карта. Бул мазмун бир аз узунураак.
Акыркы жолу 3 мүнөт мурун жаңыртылган
Карта стилдери
Карталар фондорун, чектерин жана түсүн өзгөчөлөштүрүү үчүн ар кандай варианттарды камтыйт.
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Header
Экинчи картанын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Header
Ийгилик картасынын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Header
Коркунучтуу картанын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Header
Эскертүү картасынын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Header
Маалымат картасынын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Header
Жарык картанын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Header
Караңгы картанын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Көмөкчү технологияларга маани берүү
Маани кошуу үчүн түстү колдонуу визуалдык көрсөткүчтү гана камсыз кылат, ал жардамчы технологиялардын колдонуучуларына – мисалы, экранды окугучтарга жеткирилбейт. Түс менен белгиленген маалымат мазмундун өзүнөн (мисалы, көрүнүүчү текст) ачык-айкын болушун же .sr-onlyкласс менен жашырылган кошумча текст сыяктуу альтернативалуу каражаттар аркылуу камтылганын текшериңиз.
Чек ара
Картаны жөн гана өзгөртүү үчүн чек ара кызматтарын колдонуңуз . border-colorТөмөндө көрсөтүлгөндөй, сиз .text-{color}ата-энеге класстарды .cardже картанын мазмунунун бир бөлүгүн кое аласыз.
Header
Негизги картанын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Header
Экинчи картанын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Header
Ийгилик картасынын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Header
Коркунучтуу картанын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Header
Эскертүү картасынын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Header
Маалымат картасынын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Header
Жарык картанын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Header
Караңгы картанын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Mixins утилиталары
Сиз ошондой эле картанын үстүнкү жана төмөнкү колонтитулдарындагы чектерди зарылчылыкка жараша өзгөртө аласыз, ал тургай background-colorаларды .bg-transparent.
Header
Ийгилик картасынын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Картанын жайгашуусу
Карталардын ичиндеги мазмунду стилдөөдөн тышкары, 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да орното аласыз.
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар узунураак карта. Бул мазмун бир аз узунураак.
Карта аталышы
Бул кыска карта.
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар узунураак карта.
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар узунураак карта. Бул мазмун бир аз узунураак.
Карта мамычалары
Карталарды жөн гана CSS менен масондук сыяктуу мамычаларга ороп, аларды .card-columns. columnКарталар оңой тегиздөө үчүн flexboxтун ордуна CSS касиеттери менен курулган . Карталар жогорудан ылдыйга жана солдон оңго карай иреттелген.
Көңүл бургула! Карта мамычалары менен пробегиңиз ар кандай болушу мүмкүн. Карточкалардын мамычалар аркылуу өтүп кетишине жол бербөө үчүн, аларды азырынча ок өтпөс чечим эмес display: inline-blockдеп коюшубуз керек.column-break-inside: avoid
Жаңы сапка өтүүчү картанын аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар узунураак карта. Бул мазмун бир аз узунураак.
Lorem ipsum dolor sit amet, consectetur adipiscing элит. Integer posuere erat a ante.
Карта аталышы
Бул картада кошумча мазмунга табигый жол катары төмөндө колдоочу текст бар.
Акыркы жолу 3 мүнөт мурун жаңыртылган
Lorem ipsum dolor sit amet, consectetur adipiscing элит. Integer posuere erat.
Карта аталышы
Бул картанын кадимки аталышы жана астында тексттин кыска абзацы бар.
Акыркы жолу 3 мүнөт мурун жаңыртылган
Lorem ipsum dolor sit amet, consectetur adipiscing элит. Integer posuere erat a ante.
Карта аталышы
Бул төмөнкү аталышы жана колдоочу тексти бар дагы бир карта. Бул картада аны жалпысынан бир аз бийик кылуу үчүн кошумча мазмун бар.
Акыркы жолу 3 мүнөт мурун жаңыртылган
Карта мамычалары да кеңейтилип, кээ бир кошумча код менен ыңгайлаштырылышы мүмкүн. Төмөндө .card-columnsбиз колдонгон ошол эле CSS - CSS мамычалары - тилкелердин санын өзгөртүү үчүн жооп берүүчү деңгээлдердин топтомун түзүү үчүн класстын кеңейтүүсү көрсөтүлгөн.