Source

קאַרדס

Bootstrap ס קאַרדס צושטעלן אַ פלעקסאַבאַל און עקסטענסיבלע אינהאַלט קאַנטיינער מיט קייפל וועריאַנץ און אָפּציעס.

וועגן

א קאָרט איז אַ פלעקסאַבאַל און עקסטענסיבלע אינהאַלט קאַנטיינער. עס כולל אָפּציעס פֿאַר כעדערז און פאָאָטערס, אַ ברייט פאַרשיידנקייַט פון אינהאַלט, קאָנטעקסטואַל הינטערגרונט פֿאַרבן און שטאַרק אַרויסווייַזן אָפּציעס. אויב איר זענט באַקאַנט מיט Bootstrap 3, קאַרדס פאַרבייַטן אונדזער אַלט פּאַנאַלז, וועלז און טהומבנאַילס. ענלעך פאַנגקשאַנאַליטי צו די קאַמפּאָונאַנץ איז בנימצא ווי מאָדיפיער קלאסן פֿאַר קאַרדס.

בייַשפּיל

קאַרדס זענען געבויט מיט ווי קליין מאַרקאַפּ און סטיילז ווי מעגלעך, אָבער נאָך קענען צושטעלן אַ פּלאַץ פון קאָנטראָל און קוסטאָמיזאַטיאָן. געבויט מיט פלעקסבאָקס, זיי פאָרשלאָגן גרינג אַליינמאַנט און מישן געזונט מיט אנדערע באָאָצטראַפּ קאַמפּאָונאַנץ. זיי האָבן קיין marginפעליקייַט, אַזוי נוצן ספּייסינג יוטילאַטיז ווי דארף.

ונטער איז אַ ביישפּיל פון אַ יקערדיק קאָרט מיט געמישט אינהאַלט און אַ פאַרפעסטיקט ברייט. קאַרדס האָבן קיין פאַרפעסטיקט ברייט צו אָנהייבן, אַזוי זיי וועלן געוויינטלעך פּלאָמבירן די פול ברייט פון זיין פאָטער עלעמענט. דאָס איז לייכט קאַסטאַמייזד מיט אונדזער פאַרשידן סייזינג אָפּציעס .

100% קס 180
קאָרט טיטל

עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.

גיין ערגעץ
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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 טאַגס.

בילד היטל [100% x180]

עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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>

רשימה גרופּעס

שאַפֿן רשימות פון אינהאַלט אין אַ קאָרט מיט אַ גלייַך רשימה גרופּע.

  • כ'האב אמאל געהערט
  • Dapibus ac facilisis in
  • וועסטיבולום און עראָס
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
פיטשערד
  • כ'האב אמאל געהערט
  • Dapibus ac facilisis in
  • וועסטיבולום און עראָס
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

קאך סינק

מישן און גלייַכן קייפל אינהאַלט טייפּס צו שאַפֿן די קאָרט איר דאַרפֿן, אָדער וואַרפן אַלץ אין עס. געוויזן אונטן זענען בילד סטיילז, בלאַקס, טעקסט סטיילז און אַ רשימה גרופּע - אַלע אלנגעוויקלט אין אַ פאַרפעסטיקט-ברייט קאָרט.

בילד היטל [100% x180]
קאָרט טיטל

עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.

  • כ'האב אמאל געהערט
  • Dapibus ac facilisis in
  • וועסטיבולום און עראָס
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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-right" 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" 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" href="#">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" href="#">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>

בילדער

קאַרדס אַרייַננעמען אַ ביסל אָפּציעס פֿאַר ארבעטן מיט בילדער. קלייַבן פון אַדינג "בילד קאַפּס" אין יעדער סוף פון אַ קאָרט, אָוווערלייינג בילדער מיט קאָרט אינהאַלט, אָדער פשוט עמבעדדינג די בילד אין אַ קאָרט.

בילד קאַפּס

ענלעך צו כעדערז און פאָאָטערס, קאַרדס קענען אַרייַננעמען שפּיץ און דנאָ "בילד קאַפּס" - בילדער אין די שפּיץ אָדער דנאָ פון אַ קאָרט.

100% קס 180
קאָרט טיטל

דאָס איז אַ ברייטערער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.

לעצטע דערהייַנטיקט 3 מינוט צוריק

קאָרט טיטל

דאָס איז אַ ברייטערער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.

לעצטע דערהייַנטיקט 3 מינוט צוריק

100% קס 180
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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 class="card-img-bottom" src="..." alt="Card image cap">
</div>

בילד אָוווערלייז

קער אַ בילד אין אַ קאָרט הינטערגרונט און אָוווערליי דיין קאָרט ס טעקסט. דעפּענדינג אויף די בילד, איר קען אָדער קען נישט דאַרפֿן נאָך סטיילז אָדער יוטילאַטיז.

100% x270
קאָרט טיטל

דאָס איז אַ ברייטערער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.

לעצטע דערהייַנטיקט 3 מינוט צוריק

<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <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>

קאָרט סטיילז

קאַרדס אַרייַננעמען פאַרשידן אָפּציעס פֿאַר קאַסטאַמייזינג זייער באַקגראַונדז, געמארקן און קאָלירן.

הינטערגרונט און קאָליר

ניצן טעקסט און הינטערגרונט יוטילאַטיז צו טוישן די אויסזען פון אַ קאָרט.

כעדער
ערשטיק קאָרט טיטל

עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.

כעדער
צווייטיק קאָרט טיטל

עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.

כעדער
הצלחה קאָרט טיטל

עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.

כעדער
געפאַר קאָרט טיטל

עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.

כעדער
ווארענונג קאָרט טיטל

עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.

כעדער
אינפֿאָרמאַציע קאָרט טיטל

עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.

כעדער
ליכט קאָרט טיטל

עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.

כעדער
טונקל קאָרט טיטל

עטלעכע שנעל בייַשפּיל טעקסט צו בויען אויף די קאָרט טיטל און מאַכן די פאַרנעם פון די קאָרט ס אינהאַלט.

<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-white 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-white 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 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>
קאַנווייינג טייַטש צו אַסיסטיוו טעקנאַלאַדזשיז

ניצן קאָליר צו לייגן טייַטש בלויז גיט אַ וויזשאַוואַל אָנווייַז, וואָס וועט נישט זיין קאַנווייד צו יוזערז פון אַסיסטיוו טעקנאַלאַדזשיז - אַזאַ ווי פאַרשטעלן לייענער. פאַרזיכערן אַז אינפֿאָרמאַציע דינאָוטיד דורך די קאָליר איז קלאָר ווי דער טאָג פון די אינהאַלט זיך (למשל די קענטיק טעקסט), אָדער איז אַרייַנגערעכנט דורך אָלטערנאַטיוו מיטל, אַזאַ ווי נאָך טעקסט פאַרבאָרגן מיט די .sr-onlyקלאַס.

גרענעץ

ניצן גרענעץ יוטילאַטיז צו טוישן נאָר די 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 text-warning">
    <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 text-info">
    <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;צו דערגרייכן זייער מונדיר סייזינג.

100% קס 180
קאָרט טיטל

דאָס איז אַ ברייטערער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.

לעצטע דערהייַנטיקט 3 מינוט צוריק

100% קס 180
קאָרט טיטל

דער קאָרט האט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט.

לעצטע דערהייַנטיקט 3 מינוט צוריק

100% קס 180
קאָרט טיטל

דאָס איז אַ ברייטערער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער קאָרט האט אפילו מער אינהאַלט ווי דער ערשטער צו ווייַזן די גלייך הייך קאַמף.

לעצטע דערהייַנטיקט 3 מינוט צוריק

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

ווען ניצן קאָרט גרופּעס מיט פאָאָטערס, זייער אינהאַלט וועט אויטאָמאַטיש שורה אַרויף.

100% קס 180
קאָרט טיטל

דאָס איז אַ ברייטערער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.

100% קס 180
קאָרט טיטל

דער קאָרט האט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט.

100% קס 180
קאָרט טיטל

דאָס איז אַ ברייטערער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער קאָרט האט אפילו מער אינהאַלט ווי דער ערשטער צו ווייַזן די גלייך הייך קאַמף.

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

קאָרט דעקס

דאַרפֿן אַ סכום פון גלייך ברייט און הייך קאַרדס וואָס זענען נישט אַטאַטשט צו איינער דעם אנדערן? ניצן קאָרט דעקס.

100% קס 200
קאָרט טיטל

דאָס איז אַ מער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.

לעצטע דערהייַנטיקט 3 מינוט צוריק

100% קס 200
קאָרט טיטל

דער קאָרט האט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט.

לעצטע דערהייַנטיקט 3 מינוט צוריק

100% קס 200
קאָרט טיטל

דאָס איז אַ ברייטערער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער קאָרט האט אפילו מער אינהאַלט ווי דער ערשטער צו ווייַזן די גלייך הייך קאַמף.

לעצטע דערהייַנטיקט 3 מינוט צוריק

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

פּונקט ווי מיט קאָרט גרופּעס, קאָרט פאָאָטערס אין דעקס וועט אויטאָמאַטיש שורה אַרויף.

100% קס 180
קאָרט טיטל

דאָס איז אַ ברייטערער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.

100% קס 180
קאָרט טיטל

דער קאָרט האט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט.

100% קס 180
קאָרט טיטל

דאָס איז אַ ברייטערער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער קאָרט האט אפילו מער אינהאַלט ווי דער ערשטער צו ווייַזן די גלייך הייך קאַמף.

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

קאָרט שפאלטן

קאַרדס קענען זיין אָרגאַניזירט אין מאַסאָנרי -ווי שפאלטן מיט בלויז CSS דורך ראַפּינג זיי אין .card-columns. קאַרדס זענען געבויט מיט CSS columnפּראָפּערטיעס אַנשטאָט פון פלעקסבאָקס פֿאַר גרינגער אַליינמאַנט. קאַרדס זענען אָרדערד פון שפּיץ צו דנאָ און לינקס צו רעכט.

קאָפּ אַרויף! דיין מיילידזש מיט קאָרט שפאלטן קען בייַטן. צו פאַרמייַדן קאַרדס ברעכן אַריבער שפאלטן, מיר מוזן שטעלן זיי צו display: inline-blockווי עס column-break-inside: avoidאיז נישט אַ קוילפּראָאָף לייזונג נאָך.

100% x160
קאָרט טיטל וואָס ראַפּס צו אַ נייַע שורה

דאָס איז אַ מער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט. דער אינהאַלט איז אַ ביסל מער.

לאָמיר פּסום דאָלאָר זיצן אַמעט, קאָנסעקטעטור אַדאַפּיססינג עליט. גאַנץ פּאָזוערע וועט זיין אַן אַנטי.

איינער באַרימט אין מקור טיטל
100% x160
קאָרט טיטל

דער קאָרט האט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט.

לעצטע דערהייַנטיקט 3 מינוט צוריק

לאָמיר פּסום דאָלאָר זיצן אַמעט, קאָנסעקטעטור אַדאַפּיססינג עליט. גאַנץ צייט.

איינער באַרימט אין מקור טיטל
קאָרט טיטל

דער קאָרט האט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן-אין צו נאָך אינהאַלט.

לעצטע דערהייַנטיקט 3 מינוט צוריק

100% x260

לאָמיר פּסום דאָלאָר זיצן אַמעט, קאָנסעקטעטור אַדאַפּיססינג עליט. גאַנץ פּאָזוערע וועט זיין אַן אַנטי.

איינער באַרימט אין מקור טיטל
קאָרט טיטל

דאָס איז אַ ברייטערער קאָרט מיט שטיצן טעקסט אונטן ווי אַ נאַטירלעך פירן צו נאָך אינהאַלט. דער קאָרט האט אפילו מער אינהאַלט ווי דער ערשטער צו ווייַזן די גלייך הייך קאַמף.

לעצטע דערהייַנטיקט 3 מינוט צוריק

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</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 class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <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 class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </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 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>

קאָרט שפאלטן קענען אויך זיין עקסטענדעד און קאַסטאַמייזד מיט עטלעכע נאָך קאָד. געוויזן אונטן איז אַ פאַרלענגערונג פון די .card-columnsקלאַס ניצן די זעלבע CSS מיר נוצן - CSS שפאלטן - צו דזשענערייט אַ סכום פון אָפּרופיק טיערס פֿאַר טשאַנגינג די נומער פון שפאלטן.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}