קאַרדס
Bootstrap ס קאַרדס צושטעלן אַ פלעקסאַבאַל און עקסטענסיבלע אינהאַלט קאַנטיינער מיט קייפל וועריאַנץ און אָפּציעס.
וועגן
א קאָרט איז אַ פלעקסאַבאַל און עקסטענסיבלע אינהאַלט קאַנטיינער. עס כולל אָפּציעס פֿאַר כעדערז און פאָאָטערס, אַ ברייט פאַרשיידנקייַט פון אינהאַלט, קאָנטעקסטואַל הינטערגרונט פֿאַרבן און שטאַרק אַרויסווייַזן אָפּציעס. אויב איר זענט באַקאַנט מיט Bootstrap 3, קאַרדס פאַרבייַטן אונדזער אַלט פּאַנאַלז, וועלז און טהומבנאַילס. ענלעך פאַנגקשאַנאַליטי צו די קאַמפּאָונאַנץ איז בנימצא ווי מאָדיפיער קלאסן פֿאַר קאַרדס.
בייַשפּיל
קאַרדס זענען געבויט מיט ווי קליין מאַרקאַפּ און סטיילז ווי מעגלעך, אָבער נאָך קענען צושטעלן אַ פּלאַץ פון קאָנטראָל און קוסטאָמיזאַטיאָן. געבויט מיט פלעקסבאָקס, זיי פאָרשלאָגן גרינג אַליינמאַנט און מישן געזונט מיט אנדערע באָאָטסטראַפּ קאַמפּאָונאַנץ. זיי האָבן קיין margin
פעליקייַט, אַזוי נוצן ספּייסינג יוטילאַטיז ווי דארף.
ונטער איז אַ ביישפּיל פון אַ יקערדיק קאָרט מיט געמישט אינהאַלט און אַ פאַרפעסטיקט ברייט. קאַרדס האָבן קיין פאַרפעסטיקט ברייט צו אָנהייבן, אַזוי זיי וועלן געוויינטלעך פּלאָמבירן די פול ברייט פון זיין פאָטער עלעמענט. דאָס איז לייכט קאַסטאַמייזד מיט אונדזער פאַרשידן סייזינג אָפּציעס .
קאָרט טיטל
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
גיין ערגעץ<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
טייפּס פון אינהאַלט
קאַרדס שטיצן אַ ברייט פאַרשיידנקייַט פון אינהאַלט, אַרייַנגערעכנט בילדער, טעקסט, רשימה גרופּעס, לינקס און מער. ונטער זענען ביישפילן פון וואָס איז געשטיצט.
גוף
דער בנין בלאָק פון אַ קאָרט איז די .card-body
. ניצן עס ווען איר דאַרפֿן אַ פּאַדיד אָפּטיילונג אין אַ קאָרט.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
טיטלען, טעקסט און לינקס
קאָרט טיטלען זענען געניצט דורך אַדינג .card-title
צו אַ <h*>
קוויטל. אין דער זעלביקער וועג, לינקס זענען מוסיף און געשטעלט לעבן יעדער אנדערע דורך אַדינג .card-link
צו אַ <a>
קוויטל.
סובטיטלעס זענען געניצט דורך אַדינג אַ .card-subtitle
צו אַ <h*>
קוויטל. אויב די .card-title
און די .card-subtitle
זאכן זענען געשטעלט אין אַ .card-body
נומער, די קאָרט טיטל און סאַבטייטאַל זענען נייסלי אַליינד.
קאָרט טיטל
קאָרט סאַבטייטאַל
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
קאָרט לינק אן אנדער לינק<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
בילדער
.card-img-top
לייגט אַ בילד צו די שפּיץ פון די קאָרט. מיט .card-text
, טעקסט קענען זיין מוסיף צו די קאָרט. טעקסט ין .card-text
קענען אויך זיין סטיילד מיט נאָרמאַל HTML טאַגס.
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
רשימה גרופּעס
שאַפֿן רשימות פון אינהאַלט אין אַ קאָרט מיט אַ גלייַך רשימה גרופּע.
- אַ נומער
- א צװײט ן נומער
- א דריטער נומער
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- אַ נומער
- א צװײט ן נומער
- א דריטער נומער
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- אַ נומער
- א צװײט ן נומער
- א דריטער נומער
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-footer">
Card footer
</div>
</div>
קאך סינק
מישן און גלייַכן קייפל אינהאַלט טייפּס צו שאַפֿן די קאָרט איר דאַרפֿן, אָדער וואַרפן אַלץ אין עס. געוויזן אונטן זענען בילד סטיילז, בלאַקס, טעקסט סטיילז און אַ רשימה גרופּע - אַלע אלנגעוויקלט אין אַ פאַרפעסטיקט-ברייט קאָרט.
קאָרט טיטל
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
- אַ נומער
- א צװײט ן נומער
- א דריטער נומער
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
כעדער און פוטער
לייג אַן אַפּשאַנאַל כעדער און / אָדער פוטער אין אַ קאָרט.
ספּעציעלע טיטל באַהאַנדלונג
מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט.
גיין ערגעץ<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
.card-header
קאָרט כעדערז קענען זיין סטיילד דורך אַדינג <h*>
עלעמענטן.
פיטשערד
ספּעציעלע טיטל באַהאַנדלונג
מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט.
גיין ערגעץ<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
א באקאנטע ציטאט, איינגעהאלטן אין א בלאקקוואט עלעמענט.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
ספּעציעלע טיטל באַהאַנדלונג
מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט.
גיין ערגעץ<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
סייזינג
קאַרדס יבערנעמען קיין ספּעציפיש width
צו אָנהייבן, אַזוי זיי וועט זיין 100% ברייט סייַדן אַנדערש סטייטיד. איר קענען טוישן דעם ווי דארף מיט מנהג CSS, גריד קלאסן, גריד סאַס מיקסינס אָדער יוטילאַטיז.
ניצן גריד מאַרקאַפּ
ניצן די גריד, ייַנוויקלען קאַרדס אין שפאלטן און ראָוז ווי דארף.
ספּעציעלע טיטל באַהאַנדלונג
מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט.
גיין ערגעץספּעציעלע טיטל באַהאַנדלונג
מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט.
גיין ערגעץ<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
ניצן יוטילאַטיז
ניצן אונדזער האַנדפול פון בנימצא סייזינג יוטילאַטיז צו געשווינד שטעלן די ברייט פון אַ קאָרט.
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
ניצן מנהג CSS
ניצן מנהג CSS אין דיין סטילעשעעץ אָדער ווי ינלינע סטיילז צו שטעלן אַ ברייט.
ספּעציעלע טיטל באַהאַנדלונג
מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט.
גיין ערגעץ<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
טעקסט אַליינמאַנט
איר קענען געשווינד טוישן די טעקסט אַליינמאַנט פון קיין קאָרט - אין זיין גאַנץ אָדער ספּעציפיש פּאַרץ - מיט אונדזער טעקסט אַליינמאַנט קלאסן .
ספּעציעלע טיטל באַהאַנדלונג
מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט.
גיין ערגעץספּעציעלע טיטל באַהאַנדלונג
מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט.
גיין ערגעץספּעציעלע טיטל באַהאַנדלונג
מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט.
גיין ערגעץ<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-end" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
נאַוויגאַציע
לייג עטלעכע נאַוויגאַציע צו אַ קאָרט ס כעדער (אָדער בלאָק) מיט Bootstrap ס נאַוו קאַמפּאָונאַנץ .
ספּעציעלע טיטל באַהאַנדלונג
מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט.
גיין ערגעץ<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="true" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
ספּעציעלע טיטל באַהאַנדלונג
מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט.
גיין ערגעץ<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
בילדער
קאַרדס אַרייַננעמען אַ ביסל אָפּציעס פֿאַר ארבעטן מיט בילדער. קלייַבן פון אַדינג "בילד קאַפּס" אין יעדער סוף פון אַ קאָרט, אָוווערלייינג בילדער מיט קאָרט אינהאַלט, אָדער פשוט עמבעדדינג די בילד אין אַ קאָרט.
בילד קאַפּס
ענלעך צו כעדערז און פאָאָטערס, קאַרדס קענען אַרייַננעמען שפּיץ און דנאָ "בילד קאַפּס" - בילדער אין די שפּיץ אָדער דנאָ פון אַ קאָרט.
קאָרט טיטל
דאָס איז אַ ברייטערער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.
לעצטע דערהייַנטיקט 3 מינוט צוריק
קאָרט טיטל
דאָס איז אַ ברייטערער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.
לעצטע דערהייַנטיקט 3 מינוט צוריק
<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-bottom" alt="...">
</div>
בילד אָוווערלייז
קער אַ בילד אין אַ קאָרט הינטערגרונט און אָוווערליי דיין קאָרט ס טעקסט. דעפּענדינג אויף די בילד, איר קען אָדער קען נישט דאַרפֿן נאָך סטיילז אָדער יוטילאַטיז.
<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
האָריזאָנטאַל
מיט אַ קאָמבינאַציע פון גריד און נוצן קלאסן, קאַרדס קענען זיין געמאכט האָריזאָנטאַל אויף אַ רירעוודיק-פרייַנדלעך און אָפּרופיק וועג. אין דעם ביישפּיל אונטן, מיר באַזייַטיקן די גריד גאַטערז מיט .g-0
און נוצן .col-md-*
קלאסן צו מאַכן די קאָרט האָריזאָנטאַל אין די md
ברייקפּוינט. נאָך אַדזשאַסטמאַנץ קען זיין דארף דיפּענדינג אויף דיין קאָרט אינהאַלט.
קאָרט טיטל
דאָס איז אַ ברייטערער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.
לעצטע דערהייַנטיקט 3 מינוט צוריק
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="..." class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
קאָרט סטיילז
קאַרדס אַרייַננעמען פאַרשידן אָפּציעס פֿאַר קאַסטאַמייזינג זייער באַקגראַונדז, געמארקן און קאָלירן.
הינטערגרונט און קאָליר
ניצן טעקסט קאָליר און הינטערגרונט יוטילאַטיז צו טוישן די אויסזען פון אַ קאָרט.
ערשטיק קאָרט טיטל
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
צווייטיק קאָרט טיטל
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
הצלחה קאָרט טיטל
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
געפאַר קאָרט טיטל
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
ווארענונג קאָרט טיטל
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
אינפֿאָרמאַציע קאָרט טיטל
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
ליכט קאָרט טיטל
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
טונקל קאָרט טיטל
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
קאַנווייינג טייַטש צו אַסיסטיוו טעקנאַלאַדזשיז
ניצן קאָליר צו לייגן טייַטש בלויז גיט אַ וויזשאַוואַל אָנווייַז, וואָס וועט נישט זיין קאַנווייד צו יוזערז פון אַסיסטיוו טעקנאַלאַדזשיז - אַזאַ ווי פאַרשטעלן לייענער. פאַרזיכערן אַז אינפֿאָרמאַציע דינאָוטיד דורך די קאָליר איז קלאָר ווי דער טאָג פון די אינהאַלט זיך (למשל די קענטיק טעקסט), אָדער איז אַרייַנגערעכנט דורך אָלטערנאַטיוו מיטל, אַזאַ ווי נאָך טעקסט פאַרבאָרגן מיט די .visually-hidden
קלאַס.
גרענעץ
ניצן גרענעץ יוטילאַטיז צו טוישן נאָר די border-color
קאָרט. באַמערקונג אַז איר קענען שטעלן .text-{color}
קלאסן אויף די פאָטער .card
אָדער אַ סאַבסעט פון די אינהאַלט פון די קאָרט ווי געוויזן אונטן.
ערשטיק קאָרט טיטל
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
צווייטיק קאָרט טיטל
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
הצלחה קאָרט טיטל
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
געפאַר קאָרט טיטל
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
ווארענונג קאָרט טיטל
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
אינפֿאָרמאַציע קאָרט טיטל
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
ליכט קאָרט טיטל
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
טונקל קאָרט טיטל
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
מיקסינס יוטילאַטיז
איר קענען אויך טוישן די געמארקן אויף די קאָרט כעדער און פוטער ווי דארף, און אפילו באַזייַטיקן זיי background-color
מיט .bg-transparent
.
הצלחה קאָרט טיטל
עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>
קאָרט אויסלייג
אין אַדישאַן צו סטילינג די אינהאַלט אין קאַרדס, Bootstrap כולל עטלעכע אָפּציעס פֿאַר ארויפלייגן סעריע פון קאַרדס. דערווייַל, די אויסלייג אָפּציעס זענען נישט אָפּרופיק .
קאָרט גרופּעס
ניצן קאָרט גרופּעס צו מאַכן קאַרדס ווי אַ איין אַטאַטשט עלעמענט מיט גלייַך ברייט און הייך שפאלטן. קאָרט גרופּעס אָנהייבן סטאַקט און נוצן display: flex;
צו זיין אַטאַטשט מיט מונדיר דימענשאַנז סטאַרטינג בייַ די sm
ברייקפּוינט.
קאָרט טיטל
דאָס איז אַ ברייטערער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.
לעצטע דערהייַנטיקט 3 מינוט צוריק
קאָרט טיטל
דער קאָרט האט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט.
לעצטע דערהייַנטיקט 3 מינוט צוריק
קאָרט טיטל
דאָס איז אַ ברייטערער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער קאָרט האט אפילו מער אינהאַלט ווי דער ערשטער צו ווייַזן די גלייך הייך קאַמף.
לעצטע דערהייַנטיקט 3 מינוט צוריק
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
ווען ניצן קאָרט גרופּעס מיט פאָאָטערס, זייער אינהאַלט וועט אויטאָמאַטיש שורה אַרויף.
קאָרט טיטל
דאָס איז אַ ברייטערער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.
קאָרט טיטל
דער קאָרט האט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט.
קאָרט טיטל
דאָס איז אַ ברייטערער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער קאָרט האט אפילו מער אינהאַלט ווי דער ערשטער צו ווייַזן די גלייך הייך קאַמף.
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
גריד קאַרדס
ניצן די Bootstrap גריד סיסטעם און זייַן .row-cols
קלאסן צו קאָנטראָלירן ווי פילע גריד שפאלטן (אלנגעוויקלט אַרום דיין קאַרדס) איר ווייַזן פּער רודערן. פֿאַר בייַשפּיל, דאָ ס .row-cols-1
ארויפלייגן די קאַרדס אויף איין זייַל, און .row-cols-md-2
ספּליטינג פיר קאַרדס צו גלייַך ברייט אַריבער קייפל ראָוז, פֿון די מיטל ברייקפּוינט אַרויף.
קאָרט טיטל
דאָס איז אַ מער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.
קאָרט טיטל
דאָס איז אַ מער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.
קאָרט טיטל
דאָס איז אַ מער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט.
קאָרט טיטל
דאָס איז אַ מער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
טוישן עס צו .row-cols-3
און איר וועט זען די פערט קאָרט ייַנוויקלען.
קאָרט טיטל
דאָס איז אַ מער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.
קאָרט טיטל
דאָס איז אַ מער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.
קאָרט טיטל
דאָס איז אַ מער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט.
קאָרט טיטל
דאָס איז אַ מער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
ווען איר דאַרפֿן גלייַך הייך, לייגן .h-100
צו די קאַרדס. אויב איר ווילן גלייַך כייץ דורך פעליקייַט, איר קענען שטעלן $card-height: 100%
אין Sass.
קאָרט טיטל
דאָס איז אַ מער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.
קאָרט טיטל
דאָס איז אַ קורץ קאָרט.
קאָרט טיטל
דאָס איז אַ מער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט.
קאָרט טיטל
דאָס איז אַ מער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
פּונקט ווי מיט קאָרט גרופּעס, קאָרט פאָאָטערס וועט אויטאָמאַטיש שורה אַרויף.
קאָרט טיטל
דאָס איז אַ ברייטערער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.
קאָרט טיטל
דער קאָרט האט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט.
קאָרט טיטל
דאָס איז אַ ברייטערער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער קאָרט האט אפילו מער אינהאַלט ווי דער ערשטער צו ווייַזן די גלייך הייך קאַמף.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
מאַסאָנרי
אין v4
מיר געוויינט אַ CSS-בלויז טעכניק צו נאָכקרימען די נאַטור פון מאַסאָנרי -ווי שפאלטן, אָבער די טעכניק געקומען מיט אַ פּלאַץ פון פּריקרע זייַט יפעקץ . אויב איר ווילן צו האָבן דעם טיפּ פון אויסלייג אין v5
, איר קענען נאָר נוצן די מאַסאָנרי פּלוגין. מאַסאָנרי איז נישט אַרייַנגערעכנט אין Bootstrap , אָבער מיר האָבן געמאכט אַ דעמאָ ביישפּיל צו העלפן איר אָנהייבן.
סאַס
וועריאַבאַלז
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-color: rgba($black, .125);
$card-border-radius: $border-radius;
$card-box-shadow: null;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
$card-cap-padding-y: $card-spacer-y * .5;
$card-cap-padding-x: $card-spacer-x;
$card-cap-bg: rgba($black, .03);
$card-cap-color: null;
$card-height: null;
$card-color: null;
$card-bg: $white;
$card-img-overlay-padding: $spacer;
$card-group-margin: $grid-gutter-width * .5;