רעבאָאָט

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

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

צוגאַנג

רעבאָאָט איז באזירט אויף נאָרמאַליזע, פּראַוויידינג פילע HTML עלעמענטן מיט אַ ביסל מיינונג סטיילז מיט בלויז עלעמענט סעלעקטאָרס. נאָך סטילינג איז געטאן בלויז מיט קלאסן. פֿאַר בייַשפּיל, מיר רעבאָאָט עטלעכע <table>סטיילז פֿאַר אַ סימפּלער באַסעלינע און שפּעטער צושטעלן .table, .table-bordered, און מער.

דאָ זענען אונדזער גיידליינז און סיבות פֿאַר טשוזינג וואָס צו אָווועררייד אין רעבאָאָט:

דערהייַנטיקן עטלעכע בלעטערער פעליקייַט וואַלועס צו נוצן rems אַנשטאָט פון ems פֿאַר סקאַלאַבלע קאָמפּאָנענט ספּייסינג.
ויסמיידן margin-top. ווערטיקאַל מאַרדזשאַנז קענען ייַנבראָך, יילדינג אומגעריכט רעזולטאַטן. מער ימפּאָרטאַנטלי כאָטש, אַ איין ריכטונג פון marginאיז אַ סימפּלער גייַסטיק מאָדעל.
פֿאַר גרינגער סקיילינג אַריבער מיטל סיזעס, בלאָק עלעמענטן זאָל נוצן rems פֿאַר margins.
האַלטן דעקלאַראַציעס פון fontפֿאַרבונדענע פּראָפּערטיעס צו אַ מינימום, ניצן inheritווען מעגלעך.

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

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

מיט וו5.1.1, מיר סטאַנדערדייזד אונדזער פארלאנגט @importס פֿאַר אַלע אונדזער CSS באַנדאַלז (אַרייַנגערעכנט bootstrap.css, bootstrap-reboot.css, און bootstrap-grid.css) צו אַרייַננעמען _root.scss. דאָס מוסיף :rootמדרגה CSS וועריאַבאַלז צו אַלע באַנדאַלז, ראַגאַרדלאַס פון ווי פילע פון זיי זענען געניצט אין דעם פּעקל. לעסאָף Bootstrap 5 וועט פאָרזעצן צו זען מער CSS וועריאַבאַלז צוגעגעבן איבער צייַט, אין סדר צו צושטעלן מער פאַקטיש-צייט קוסטאָמיזאַטיאָן אָן די נויט צו שטענדיק ריקאָמפּילע Sass. אונדזער צוגאַנג איז צו נעמען אונדזער מקור סאַסס וועריאַבאַלז און יבערמאַכן זיי אין CSS וועריאַבאַלז. אַזוי, אפילו אויב איר טאָן ניט נוצן CSS וועריאַבאַלז, איר נאָך האָבן אַלע די מאַכט פון Sass. דאָס איז נאָך אין פּראָגרעס און וועט נעמען צייט צו גאָר ינסטרומענט.

פֿאַר בייַשפּיל, באַטראַכטן די :rootCSS וועריאַבאַלז פֿאַר פּראָסט <body>סטיילז:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

אין פיר, די וועריאַבאַלז זענען דעמאָלט געווענדט אין רעבאָאָט ווי אַזוי:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

וואָס אַלאַוז איר צו מאַכן פאַקטיש-צייט קוסטאָמיזאַטיאָנס ווי איר ווילט:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

בלאַט דיפאָלץ

די <html>און <body>עלעמענטן זענען דערהייַנטיקט צו צושטעלן בעסער בלאַט-ברייט דיפאָלץ. מער ספּעציעל:

די box-sizingאיז גלאָובאַלי באַשטימט אויף יעדער עלעמענט-אַרייַנגערעכנט *::beforeאון *::after, צו border-box. דעם ינשורז אַז די דערקלערט ברייט פון עלעמענט איז קיינמאָל יקסידיד רעכט צו וואַטן אָדער גרענעץ.
- קיין באַזע font-sizeאיז דערקלערט אויף די <html>, אָבער 16pxאיז אנגענומען (דער בלעטערער פעליקייַט). font-size: 1remאיז געווענדט אויף די <body>פֿאַר גרינג אָפּרופיק טיפּ-סקיילינג דורך מעדיע קוויריז בשעת ריספּעקטינג באַניצער פּרעפֿערענצן און ינשורינג אַ מער צוטריטלעך צוגאַנג. דעם בלעטערער פעליקייַט קענען זיין אָווועררייד דורך מאַדאַפייינג די $font-size-rootבייַטעוודיק.
די <body>אויך שטעלט אַ גלאבאלע font-family, font-weight, line-height, און color. דאָס איז ינכעראַטיד שפּעטער דורך עטלעכע פאָרעם עלעמענטן צו פאַרמייַדן שריפֿט ינגקאַנסיסטענסיז.
פֿאַר זיכערקייַט, די <body>האט אַ דערקלערט background-color, דיפאָלטינג צו #fff.

געבוירן שריפֿט אָנלייגן

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

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

באַמערקונג אַז ווייַל די שריפֿט סטאַק כולל עמאָדזשי פאַנץ, פילע פּראָסט סימבאָל / דינגבאַט אוניקאָד אותיות וועט זיין רענדערד ווי מאַלטיקאַלערד פּיקטאָגראַפס. זייער אויסזען וועט בייַטן, דיפּענדינג אויף די נוסח געניצט אין דעם בלעטערער / פּלאַטפאָרמע ס געבוירן עמאָדזשי שריפֿט, און זיי וועלן נישט זיין אַפעקטאַד דורך קיין CSS colorסטיילז.

דעם font-familyאיז געווענדט צו די <body>און אויטאָמאַטיש ינכעראַטיד גלאָובאַלי איבער באָאָצטראַפּ. צו באַשטימען די גלאבאלע font-family, דערהייַנטיקן $font-family-baseאון ריקאָמפּילע Bootstrap.

כעדינגז און פּאַראַגראַפס

אַלע כעדינג עלעמענטן - למשל <h1>- און <p>זענען באַשטעטיק צו זיין margin-topאַוועקגענומען. העאַדינגס האָבן margin-bottom: .5remצוגעגעבן און פּאַראַגראַפס margin-bottom: 1remפֿאַר גרינג ספּייסינג.

כעדינג	בייַשפּיל
`<h1></h1>`	h1. באָאָטסטראַפּ כעדינג
`<h2></h2>`	h2. באָאָטסטראַפּ כעדינג
`<h3></h3>`	h3. באָאָטסטראַפּ כעדינג
`<h4></h4>`	h4. באָאָטסטראַפּ כעדינג
`<h5></h5>`	h5. באָאָטסטראַפּ כעדינג
`<h6></h6>`	h6. באָאָטסטראַפּ כעדינג

האָריזאָנטאַל כּללים

דער <hr>עלעמענט איז סימפּלאַפייד. ענלעך צו בלעטערער דיפאָלץ, <hr>s זענען סטיילד דורך border-top, האָבן אַ פעליקייַט opacity: .25, און אויטאָמאַטיש ירשענען זייער border-colorדורך color, אַרייַנגערעכנט ווען colorאיז באַשטימט דורך די פאָטער. זיי קענען זיין מאַדאַפייד מיט טעקסט, גרענעץ און אָופּאַסאַטי יוטילאַטיז.

HTML

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

רשימות

אלע ליסטעס — <ul>, <ol>, און <dl>— האבען זײערע margin-topאראפגענומען און א margin-bottom: 1rem. נעסטעד רשימות האָבן קיין margin-bottom. מיר האָבן אויך באַשטעטיק די padding-leftאויף <ul>און <ol>עלעמענטן.

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

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

פֿאַר סימפּלער סטילינג, קלאָר כייעראַרקי און בעסער ספּייסינג, באַשרייַבונג רשימות האָבן דערהייַנטיקט margins. <dd>ס באַשטעטיק margin-leftצו 0און לייגן margin-bottom: .5rem. <dt>ס זענען דרייסט .

באַשרייַבונג רשימות: א באַשרייַבונג רשימה איז גאנץ פֿאַר דיפיינינג טערמינען.
טערמין: דעפֿיניציע פֿאַר דעם טערמין.; א צווייטע דעפֿיניציע פֿאַר דער זעלביקער טערמין.
אן אנדער טערמין: דעפֿיניציע פֿאַר דעם אנדערע טערמין.

ינלינע קאָד

ייַנוויקלען ינלינע סניפּפּעץ פון קאָד מיט <code>. זייט זיכער צו אַנטלויפן HTML ווינקל בראַקאַץ.

פֿאַר בייַשפּיל, <section>זאָל זיין אלנגעוויקלט ווי ינלינע.

HTML

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

קאָד בלאַקס

ניצן <pre>s פֿאַר קייפל שורות פון קאָד. אַמאָל ווידער, זיין זיכער צו אַנטלויפן קיין ווינקל בראַקאַץ אין די קאָד פֿאַר געהעריק רענדערינג. דער <pre>עלעמענט איז באַשטעטיק צו באַזייַטיקן margin-topאון נוצן remוניץ פֿאַר זיין margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

HTML

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

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

פֿאַר ינדאַקייטינג וועריאַבאַלז נוצן די <var>קוויטל.

י = מ רענטגענ + ב

HTML

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

באַניצער אַרייַנשרייַב

ניצן די <kbd>צו אָנווייַזן אַרייַנשרייַב וואָס איז טיפּיקלי אריין דורך קלאַוויאַטור.

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

HTML

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

מוסטער רעזולטאַט

פֿאַר ינדאַקייטינג מוסטער רעזולטאַט פון אַ פּראָגראַם נוצן די <samp>קוויטל.

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

HTML

<samp>This text is meant to be treated as sample output from a computer program.</samp>

טישן

טישן זענען אַ ביסל אַדזשאַסטיד צו סטיל <caption>s, ייַנבראָך געמארקן, און ענשור קאָנסיסטענט text-alignאיבער. נאָך ענדערונגען פֿאַר געמארקן, וואַטן און מער קומען מיט די .tableקלאַס .

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

HTML

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

Forms

פאַרשידן פאָרעם עלעמענטן זענען רעבאָאָטעד פֿאַר סימפּלער באַזע סטיילז. דאָ זענען עטלעכע פון די מערסט נאָוטאַבאַל ענדערונגען:

<fieldset>ס האָבן קיין געמארקן, וואַטן אָדער גרענעץ אַזוי זיי קענען זיין לייכט געניצט ווי ראַפּערז פֿאַר יחיד ינפּוץ אָדער גרופּעס פון ינפּוץ.
<legend>s, ווי fieldsets, האָבן אויך ריסטילד צו זיין געוויזן ווי אַ כעדינג פון סאָרץ.
<label>s זענען באַשטימט צו display: inline-blockלאָזן marginצו זיין געווענדט.
<input>s, <select>s, <textarea>s, און <button>s זענען מערסטנס גערעדט דורך נאָרמאַלייז, אָבער רעבאָאָט רימוווז זייער marginאון שטעלט line-height: inheritאויך.
<textarea>s זענען מאַדאַפייד צו זיין ווערטיקלי ריסיזאַבאַל ווייַל האָריזאָנטאַל רעסיזינג אָפט "ברייקס" בלאַט אויסלייג.
<button>s און <input>קנעפּל עלעמענטן האָבן cursor: pointerווען :not(:disabled).

די ענדערונגען, און מער, זענען דעמאַנסטרייטיד אונטן.

בייַשפּיל לעגענדע

בייַשפּיל אַרייַנשרייַב

בייַשפּיל email

בייַשפּיל טעלעפאָן

בייַשפּיל URL

בייַשפּיל נומער

בייַשפּיל זוכן

בייַשפּיל קייט

בייַשפּיל טעקע אַרייַנשרייַב

בייַשפּיל אויסקלייַבן

קוק דעם טשעקקבאָקס

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

בייַשפּיל טעקסט שטח

בייַשפּיל טאָג

בייַשפּיל צייט

בייַשפּיל פּאַראָל

בייַשפּיל דאַטעטימע-לאָקאַל

בייַשפּיל וואָך

בייַשפּיל חודש

בייַשפּיל קאָליר

בייַשפּיל רעזולטאַט 100

שטיצן פֿאַר דאַטע און קאָלירן אַרייַנשרייַב

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

פּוינטערז אויף קנעפּלעך

רעבאָאָט כולל אַ ענכאַנסמאַנט פֿאַר role="button"צו טוישן די פעליקייַט לויפֿער צו pointer. לייג דעם אַטריביוט צו עלעמענטן צו העלפן אָנווייַזן אַז עלעמענטן זענען ינטעראַקטיוו. די ראָלע איז ניט נויטיק פֿאַר <button>עלעמענטן וואָס באַקומען זייער אייגענע cursorענדערונגען.

ניט-קנעפּל עלעמענט קנעפּל

HTML

<span role="button" tabindex="0">Non-button element button</span>

פאַרשידענע עלעמענטן

אַדרעס

דער <address>עלעמענט איז דערהייַנטיקט צו באַשטעטיק דעם בלעטערער פעליקייַט font-styleפון italicצו normal. line-heightאיז אויך איצט ירושה, און margin-bottom: 1remאיז צוגעלייגט. <address>ס זענען פֿאַר פּריזענטינג קאָנטאַקט אינפֿאָרמאַציע פֿאַר די ניראַסט אָוועס (אָדער אַ גאַנץ גוף פון אַרבעט). ופהיטן פאָרמאַטטינג דורך ענדיקן שורות מיט <br>.

טוויטטער, ינק.
1355 מאַרקעט סט, סוויט 900
סאַן פֿראַנסיסקאָ, CA 94103
פּ: (123) 456-7890

גאַנץ נאָמען
[email protected]

Blockquote

די פעליקייַט marginאויף בלאַקקוואָטעס איז 1em 40px, אַזוי מיר באַשטעטיק דאָס 0 0 1remפֿאַר עפּעס מער קאָנסיסטענט מיט אנדערע עלעמענטן.

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

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

אינלינע עלעמענטן

דער <abbr>עלעמענט נעמט יקערדיק סטילינג צו מאַכן עס שטיין אויס צווישן פּאַראַגראַף טעקסט.

די HTML אַבריווייישאַן עלעמענט.

קיצער

די פעליקייַט cursorאויף קיצער איז text, אַזוי מיר באַשטעטיק דעם צו pointerצו קאַנוויי אַז די עלעמענט קענען זיין ינטעראַקטיד דורך געבן אַ קליק אויף עס.

עטלעכע פרטים

מער אינפֿאָרמאַציע וועגן די דעטאַילס.

אפילו מער פרטים

דאָ זענען אפילו מער דעטאַילס וועגן די דעטאַילס.

HTML5 `[hidden]`אַטריביוט

HTML5 מוסיף אַ נייַע גלאבאלע אַטריביוט געהייסן[hidden] , וואָס איז סטיילד ווי display: noneפעליקייַט. באַראָוינג אַ געדאַנק פון PureCSS , מיר פֿאַרבעסערן דעם פעליקייַט דורך מאַכן עס [hidden] { display: none !important; }צו פאַרמייַדן זיין displayאַקסאַדענאַלי אָווועררייטיד.

<input type="text" hidden>

דזשקווערי ינקאַמפּאַטאַבילאַטי

[hidden]איז נישט קאַמפּאַטאַבאַל מיט jQuery ס $(...).hide()און $(...).show()מעטהאָדס. דעריבער, מיר טאָן ניט ספּעציעל שטיצן [hidden]אנדערע טעקניקס פֿאַר אָנפירונג displayפון עלעמענטן.

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

רעבאָאָט

צוגאַנג

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

בלאַט דיפאָלץ

געבוירן שריפֿט אָנלייגן

כעדינגז און פּאַראַגראַפס

האָריזאָנטאַל כּללים

רשימות

ינלינע קאָד

קאָד בלאַקס

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

באַניצער אַרייַנשרייַב

מוסטער רעזולטאַט

טישן

Forms

שטיצן פֿאַר דאַטע און קאָלירן אַרייַנשרייַב

פּוינטערז אויף קנעפּלעך

פאַרשידענע עלעמענטן

אַדרעס

Blockquote

אינלינע עלעמענטן

קיצער

HTML5 [hidden]אַטריביוט

דזשקווערי ינקאַמפּאַטאַבילאַטי

HTML5 `[hidden]`אַטריביוט