Source

רעבאָאָט

רעבאָאָט, אַ זאַמלונג פון עלעמענט-ספּעציפיש 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

דעם 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.

לאָמיר פּסום דאָלאָר זיצן אַמעט
קאָנסעקטעטור אַדאַפּיססינג עליט
גאַנץ מאָלעסטיעס לערנען אין מאַסאַזש
פאַסיליטיז אין פּריטיום ניסל אַלקוועט
נולל וואָלוטפּאַט אַליקוום וועליט
- Phasellus iaculis neque
- פּורוס סאָדאַלעס ולטריסיעס
- וועסטיבולום לאַאָרעעט פּאָרטטיטאָר סעם
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
אַנעאַן זיצן אַמעט עראַט נונק
Eget porttitor lorem

לאָמיר פּסום דאָלאָר זיצן אַמעט
קאָנסעקטעטור אַדאַפּיססינג עליט
גאַנץ מאָלעסטיעס לערנען אין מאַסאַזש
פאַסיליטיז אין פּריטיום ניסל אַלקוועט
נולל וואָלוטפּאַט אַליקוום וועליט
Faucibus porta lacus fringilla vel
אַנעאַן זיצן אַמעט עראַט נונק
Eget porttitor lorem

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

באַשרייַבונג רשימות: א באַשרייַבונג רשימה איז גאנץ פֿאַר דיפיינינג טערמינען.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; דאָנעק יד עליט ניט מיר פּאָרטאַ גראַווידאַ און עגעסט מעטוס.
Malesuada porta: עס איז מעגלעך צו מאַכן זיכער אַז עס איז מעגלעך.

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

דער <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

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

אַדרעס

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