רעבאָאָט

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

צוגאַנג

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

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

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

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

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

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

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

די פעליקייַט וועב פאַנץ (Helvetica Neue, Helvetica און Arial) זענען דראַפּט אין Bootstrap 4 און ריפּלייסט מיט אַ "געבוירן שריפֿט אָנלייגן" פֿאַר אָפּטימום טעקסט רענדערינג אויף יעדער מיטל און אַס. לייענען מער וועגן געבוירן שריפֿט סטאַקס אין דעם סמאַשינג מאַגאַזין אַרטיקל .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // 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. באָאָטסטראַפּ כעדינג

רשימות

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

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

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

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

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

פּרעפאָרמאַטטעד טעקסט

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

.example-element {
  גרענעץ-דנאָ: 1רעם;
}

טישן

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Nulla atr vitae elit libero, a pharetra augue.

קיצער

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

עטלעכע פרטים

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

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

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

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

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

<input type="text" hidden>

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

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

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