האָפּקען צו הויפּט אינהאַלט האָפּקען צו דאָקס נאַוויגאַציע
Check
in English

קאַרדס

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

אויף דעם בלאַט

וועגן

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

בייַשפּיל

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

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

Placeholder Image cap
קאָרט טיטל

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

גיין ערגעץ
HTML 
<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. ניצן עס ווען איר דאַרפֿן אַ פּאַדיד אָפּטיילונג אין אַ קאָרט.

דאָס איז עטלעכע טעקסט אין אַ קאָרט גוף.
HTML 
<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נומער, די קאָרט טיטל און סאַבטייטאַל זענען נייסלי אַליינד.

קאָרט טיטל
קאָרט סאַבטייטאַל

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

קאָרט לינק אן אנדער לינק
HTML 
<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 טאַגס.

Placeholder Image cap

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

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>

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

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

  • אַ נומער
  • א צװײט ן נומער
  • א דריטער נומער
HTML 
<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>
פיטשערד
  • אַ נומער
  • א צװײט ן נומער
  • א דריטער נומער
HTML 
<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>
  • אַ נומער
  • א צװײט ן נומער
  • א דריטער נומער
קאָרט פוטער
HTML 
<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>

קאך סינק

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

Placeholder Image cap
קאָרט טיטל

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

  • אַ נומער
  • א צװײט ן נומער
  • א דריטער נומער
קאָרט לינק אן אנדער לינק
HTML 
<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>

לייג אַן אַפּשאַנאַל כעדער און / אָדער פוטער אין אַ קאָרט.

פיטשערד
ספּעציעלע טיטל באַהאַנדלונג

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

גיין ערגעץ
HTML 
<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*>עלעמענטן.

פיטשערד
ספּעציעלע טיטל באַהאַנדלונג

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

גיין ערגעץ
HTML 
<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>
ציטירן

א באקאנטע ציטאט, איינגעהאלטן אין א בלאקקוואט עלעמענט.

איינער באַרימט אין מקור טיטל
HTML 
<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>
פיטשערד
ספּעציעלע טיטל באַהאַנדלונג

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

גיין ערגעץ
2 טעג צוריק
HTML 
<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, גריד קלאסן, גריד סאַס מיקסינס אָדער יוטילאַטיז.

ניצן גריד מאַרקאַפּ

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

ספּעציעלע טיטל באַהאַנדלונג

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

גיין ערגעץ
ספּעציעלע טיטל באַהאַנדלונג

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

גיין ערגעץ
HTML 
<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>

ניצן יוטילאַטיז

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

קאָרט טיטל

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

קנעפּל
קאָרט טיטל

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

קנעפּל
HTML 
<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 אין דיין סטילעשעעץ אָדער ווי ינלינע סטיילז צו שטעלן אַ ברייט.

ספּעציעלע טיטל באַהאַנדלונג

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

גיין ערגעץ
HTML 
<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>

טעקסט אַליינמאַנט

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

ספּעציעלע טיטל באַהאַנדלונג

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

גיין ערגעץ
ספּעציעלע טיטל באַהאַנדלונג

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

גיין ערגעץ
ספּעציעלע טיטל באַהאַנדלונג

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

גיין ערגעץ
HTML 
<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 ס נאַוו קאַמפּאָונאַנץ .

ספּעציעלע טיטל באַהאַנדלונג

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

גיין ערגעץ
HTML 
<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>
ספּעציעלע טיטל באַהאַנדלונג

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

גיין ערגעץ
HTML 
<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>

בילדער

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

בילד קאַפּס

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

Placeholder Image cap
קאָרט טיטל

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

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

קאָרט טיטל

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

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

Placeholder Image cap
HTML 
<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>

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

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

Placeholder Card image
קאָרט טיטל

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

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

HTML 
<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
באַמערקונג אַז די אינהאַלט זאָל נישט זיין גרעסער ווי די הייך פון די בילד. אויב אינהאַלט איז גרעסער ווי די בילד, דער אינהאַלט וועט זיין געוויזן אַרויס די בילד.

האָריזאָנטאַל

מיט אַ קאָמבינאַציע פון ​​​​גריד און נוצן קלאסן, קאַרדס קענען זיין געמאכט האָריזאָנטאַל אויף אַ רירעוודיק-פרייַנדלעך און אָפּרופיק וועג. אין דעם ביישפּיל אונטן, מיר באַזייַטיקן די גריד גאַטערז מיט .g-0און נוצן .col-md-*קלאסן צו מאַכן די קאָרט האָריזאָנטאַל אין די mdברייקפּוינט. נאָך אַדזשאַסטמאַנץ קען זיין דארף דיפּענדינג אויף דיין קאָרט אינהאַלט.

Placeholder Image
קאָרט טיטל

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

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

HTML 
<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>

קאָרט סטיילז

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

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

צוגעגעבן אין וו5.2.0

שטעלן אַ background-colorמיט קאַנטראַסטינג פאָרגראַונד colorמיט אונדזער .text-bg-{color}העלפּערס . ביז אַהער, עס איז געווען פארלאנגט צו מאַניואַלי פּאָר דיין ברירה פון .text-{color}און .bg-{color}יוטילאַטיז פֿאַר סטילינג, וואָס איר נאָך קען נוצן אויב איר בעסער וועלן.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML 
<div class="card text-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-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-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-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-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-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-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-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אָדער אַ סאַבסעט פון די אינהאַלט פון די קאָרט ווי געוויזן אונטן.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML 
<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.

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

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

פוטער
HTML 
<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ברייקפּוינט.

Placeholder Image cap
קאָרט טיטל

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

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

Placeholder Image cap
קאָרט טיטל

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

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

Placeholder Image cap
קאָרט טיטל

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

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

HTML 
<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>

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

Placeholder Image cap
קאָרט טיטל

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

לעצטע דערהייַנטיקט 3 מינוט צוריק
Placeholder Image cap
קאָרט טיטל

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

לעצטע דערהייַנטיקט 3 מינוט צוריק
Placeholder Image cap
קאָרט טיטל

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

לעצטע דערהייַנטיקט 3 מינוט צוריק
HTML 
<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>

גריד קאַרדס

ניצן די באָאָטסטראַפּ גריד סיסטעם און זייַן .row-colsקלאסן צו קאָנטראָלירן ווי פילע גריד שפאלטן (אלנגעוויקלט אַרום דיין קאַרדס) איר ווייַזן פּער רודערן. פֿאַר בייַשפּיל, דאָ ס .row-cols-1ארויפלייגן די קאַרדס אויף איין זייַל, און .row-cols-md-2ספּליטינג פיר קאַרדס צו גלייַך ברייט אַריבער קייפל ראָוז, פֿון די מיטל ברייקפּוינט אַרויף.

Placeholder Image cap
קאָרט טיטל

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

Placeholder Image cap
קאָרט טיטל

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

Placeholder Image cap
קאָרט טיטל

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

Placeholder Image cap
קאָרט טיטל

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

HTML 
<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און איר וועט זען די פערט קאָרט ייַנוויקלען.

Placeholder Image cap
קאָרט טיטל

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

Placeholder Image cap
קאָרט טיטל

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

Placeholder Image cap
קאָרט טיטל

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

Placeholder Image cap
קאָרט טיטל

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

HTML 
<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.

Placeholder Image cap
קאָרט טיטל

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

Placeholder Image cap
קאָרט טיטל

דאָס איז אַ קורץ קאָרט.

Placeholder Image cap
קאָרט טיטל

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

Placeholder Image cap
קאָרט טיטל

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

HTML 
<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>

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

Placeholder Image cap
קאָרט טיטל

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

לעצטע דערהייַנטיקט 3 מינוט צוריק
Placeholder Image cap
קאָרט טיטל

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

לעצטע דערהייַנטיקט 3 מינוט צוריק
Placeholder Image cap
קאָרט טיטל

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

לעצטע דערהייַנטיקט 3 מינוט צוריק
HTML 
<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 , אָבער מיר האָבן געמאכט אַ דעמאָ ביישפּיל צו העלפן איר אָנהייבן.

CSS

וועריאַבאַלז

צוגעגעבן אין וו5.2.0

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

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

סאָס וועריאַבאַלז

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$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;