אויף שפּיץ פון די סקאַפאַלדינג, יקערדיק HTML עלעמענטן זענען סטיילד און ימפּרוווד מיט עקסטענסיבלע קלאסן צו צושטעלן אַ פריש, קאָנסיסטענט קוק און פילן.
די גאנצע טיפּאָגראַפיק גריד איז באזירט אויף צוויי ווייניקער וועריאַבאַלז אין אונדזער Variables.less טעקע: @baseFontSizeאון @baseLineHeight. דער ערשטער איז די באַזע שריפֿט גרייס געניצט איבער און די רגע איז די באַזע שורה-הייך.
מיר נוצן די וועריאַבאַלז, און עטלעכע מאַט, צו שאַפֿן די מאַרדזשאַנז, פּאַדדינגז און שורה-כייץ פון אַלע אונדזער טיפּ און מער.
איצט איר וועט זיין ריספּאַנדינג צו די לעאָ. מיט די סאציאלע נאַטאָקווע פּענאַטיבוס און מאַגניס די פּאַרטוריענט מאָנטעס, נאַססעטור רידיקולוס מוס. נוללאַם יד דאָלאָר יד ניבה ולטריסיעס וועהיקולאַ וט יד עליט.
Vivamus sagittis lacus vel Auge Laoreet Rutrum Faucibus Dolor Actor. דויס מאָליס, עס איז ניט קאָממאָדאָ לאַקטוס, עס איז קיין פּאָרטטיטאָר ליגולאַ, לעגאַט לאַסין אָדיאָו ווי ניט עליט. דו זאלסט נישט פאַרגעסן צו קורס דעם שפּיל.
| עלעמענט | באַניץ | אָפּטיאָנאַל |
|---|---|---|
<strong> |
פֿאַר עמפאַסייזינג אַ סניפּאַט פון טעקסט מיט וויכטיק | קיינער |
<em> |
פֿאַר עמפאַסייזינג אַ שטיק פון טעקסט מיט דרוק | קיינער |
<abbr> |
ראַפּס אַבריווייישאַנז און אַקראַנימז צו ווייַזן די יקספּאַנדיד ווערסיע אויף האָווער | אַרייַננעמען אַפּשאַנאַל .initialismקלאַס פֿאַר אַבריווייישאַנז מיט ופּפּערקאַס. |
<address> |
פֿאַר קאָנטאַקט אינפֿאָרמאַציע פֿאַר זיין ניראַסט אָוועס אָדער די גאנצע גוף פון אַרבעט | ופהיטן פאָרמאַטטינג דורך ענדיקן אַלע שורות מיט<br> |
פוססע דאַפּיבוס , טעללוס אַ היימען קאָממאָדאָ , טאָרטאָר מאַוריס קאָנדימענטום ניבה , און פערמענטום מאַסאַזש נאָר זיצן אויף די רייס. Maecenas faucibus mollis interdum. Nulla vitae elit libero, אַ פאַרעטראַ אַוגוע.
באַמערקונג: פילן פריי צו נוצן <b>און <i>אין HTML5, אָבער זייער באַניץ האט געביטן אַ ביסל. <b>איז מענט צו הויכפּונקט ווערטער אָדער פראַסעס אָן קאַנווייינג נאָך וויכטיקייט בשעת <i>איז מערסטנס פֿאַר קול, טעכניש טערמינען, עטק.
דאָ זענען צוויי ביישפילן פון ווי די <address>קוויטל קענען זיין געוויינט:
אַבריווייישאַנז מיט אַ titleאַטריביוט האָבן אַ ליכט דאַטיד דנאָ גרענעץ און אַ הילף לויפֿער אויף האָווער. דאָס גיט יוזערז אַן עקסטרע אָנווייַז אַז עפּעס וועט זיין געוויזן אויף האָווער.
לייג די initialismקלאַס צו אַ אַבריווייישאַן צו פאַרגרעסערן טיפּאָגראַפיק האַרמאָניע דורך געבן עס אַ ביסל קלענערער טעקסט גרייס.
HTML איז דער בעסטער זאַך זינט סלייסט ברויט.
אַן אַבריווייישאַן פון דעם וואָרט אַטריביוט איז attr .
| עלעמענט | באַניץ | אָפּטיאָנאַל |
|---|---|---|
<blockquote> |
בלאָק-מדרגה עלעמענט פֿאַר ציטירן אינהאַלט פון אן אנדער מקור | לייג .pull-leftאון .pull-rightקלאסן פֿאַר פלאָוטאַד אָפּציעס |
<small> |
אָפּטיאָנאַל עלעמענט פֿאַר אַדינג אַ באַניצער-פייסינג סייטיישאַן, טיפּיקלי אַ מחבר מיט טיטל פון אַרבעט | שטעלן דעם <cite>טיטל אָדער נאָמען פון מקור |
צו אַרייַננעמען אַ בלאַקקוואָטע, ייַנוויקלען <blockquote>אַלע HTML ווי די ציטירן. פֿאַר גלייך קוואָטעס מיר רעקאָמענדירן אַ <p>.
אַרייַננעמען אַן אַפּשאַנאַל <small>עלעמענט צו ציטירן דיין מקור און איר וועט באַקומען אַן עמאַיל —איידער עס פֿאַר סטילינג צוועקן.
- <blockquote>
- <p> לאָמיר פּסום דאָלאָר זיצן פּאַוערד דורך, קאָנסעקטעטור אַדאַפּיססינג עליט. גאַנץ פּאָוזוער איז געווען אַ אָנהייב. </p>
- <קליין> איינער באַרימט </small>
- </blockquote>
פעליקייַט בלאַקקוואָטעס זענען סטיילד ווי אַזאַ:
לאָמיר פּסום דאָלאָר זיצן אַמעט, קאָנסעקטעטור אַדאַפּיססינג עליט. גאַנץ פּאָוזוער איז געווען אַ אָנהייב.
איינער באַרימט אין גוף פון אַרבעט
צו לאָזנ שווימען דיין בלאַקקוואָטע צו די רעכט, לייגן class="pull-right":
לאָמיר פּסום דאָלאָר זיצן אַמעט, קאָנסעקטעטור אַדאַפּיססינג עליט. גאַנץ פּאָוזוער איז געווען אַ אָנהייב.
איינער באַרימט אין גוף פון אַרבעט
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
ייַנוויקלען ינלינע סניפּפּעץ פון קאָד מיט <code>.
- פֿאַר בייַשפּיל , <קאָדע> אָפּטיילונג </ קאָד > זאָל זיין אלנגעוויקלט ווי ינלינע .
ניצן <pre>פֿאַר קייפל שורות פון קאָד. זייט זיכער צו אַנטלויפן קיין ווינקל בראַקאַץ אין די קאָד פֿאַר געהעריק רענדערינג.
<p> מוסטער טעקסט דאָ ...</p>
- <פּרע>
- <p> מוסטער טעקסט דאָ...</p>
- </pre>
באַמערקונג: זייט זיכער צו האַלטן קאָד אין <pre>טאַגס ווי נאָענט צו די לינקס ווי מעגלעך; עס וועט מאַכן אַלע טאַבס.
איר קענט אָפּטיאָנאַללי לייגן די .pre-scrollableקלאַס וואָס וועט שטעלן אַ מאַקסימום הייך פון 350 פּקס און צושטעלן אַ י-אַקס סקראָלבאַר.
נעמען די זעלבע <pre>עלעמענט און לייגן צוויי אַפּשאַנאַל קלאסן פֿאַר ימפּרוווד רענדערינג.
- <p> מוסטער טעקסט דאָ ... </p>
- <pre class = "שיין פּרינט
- לינענומס" >
- <p> מוסטער טעקסט דאָ...</p>
- </pre>
אראפקאפיע google-code-pretify און זען די רעאַדמע פֿאַר ווי צו נוצן.
| Tag | באַשרייַבונג |
|---|---|
<table> |
ראַפּינג עלעמענט פֿאַר ווייַזנדיק דאַטן אין אַ טאַבולאַר פֿאָרמאַט |
<thead> |
קאַנטיינער עלעמענט פֿאַר טיש כעדער ראָוז ( <tr>) צו לייבלינג טיש שפאלטן |
<tbody> |
קאַנטיינער עלעמענט פֿאַר טיש ראָוז ( <tr>) אין די גוף פון די טיש |
<tr> |
קאַנטיינער עלעמענט פֿאַר אַ גאַנג פון טיש סעלז ( <td>אָדער <th>) וואָס איז ארויס אויף אַ איין רודערן |
<td> |
פעליקייַט טיש צעל |
<th> |
ספּעציעלע טיש צעל פֿאַר זייַל (אָדער רודערן, דיפּענדינג אויף פאַרנעם און פּלייסמאַנט) לאַבעלס מוזן זיין געוויינט אין אַ <thead> |
<caption> |
באַשרייַבונג אָדער קיצער פון וואָס די טיש האלט, ספּעציעל נוציק פֿאַר פאַרשטעלן לייענער |
- <טיש>
- <העאַד>
- <tr>
- <טה> … </טה>
- <טה> … </טה>
- </tr>
- </thead>
- <טבאָדי>
- <tr>
- <טד> … </td>
- <טד> … </td>
- </tr>
- </tbody>
- </טיש>
| נאָמען | קלאַס | באַשרייַבונג |
|---|---|---|
| פעליקייַט | קיינער | קיין סטיילז, נאָר שפאלטן און ראָוז |
| באַסיק | .table |
בלויז האָריזאָנטאַל שורות צווישן ראָוז |
| באָרדערד | .table-bordered |
ראָונדס עקן און מוסיף ויסווייניקסט גרענעץ |
| זעברע-פּאַס | .table-striped |
מוסיף ליכט גרוי הינטערגרונט פֿאַר מאָדנע ראָוז (1, 3, 5, עטק) |
| קאַנדענסט | .table-condensed |
שנייַדן ווערטיקאַל וואַטן אין האַלב, פֿון 8 פּקס צו 4 פּקס, אין אַלע tdאון thעלעמענטן |
טישן זענען אויטאָמאַטיש סטיילד מיט בלויז אַ ביסל געמארקן צו ענשור רידאַביליטי און טייַנען סטרוקטור. מיט 2.0, די .tableקלאַס איז פארלאנגט.
- <טיש קלאַס = "טיש" >
- …
- </טיש>
| # | ערשטע נאמען | לעצטע נאמען | נאמען |
|---|---|---|---|
| 1 | מארק | אָטאָ | @מדאָ |
| 2 | יעקב | Thornton | @פעט |
| 3 | לערי | די פויגל | @טוויטער |
באַקומען אַ ביסל פאַנטאַזיע מיט דיין טישן דורך אַדינג זעבראַ-סטריפּינג - נאָר לייגן די .table-stripedקלאַס.
באַמערקונג: סטרייפּט טישן נוצן די :nth-childCSS סעלעקטאָר און איז ניט בנימצא אין IE7-IE8.
- <טיש קלאַס = "טיש טיש-סטרייפּט" >
- …
- </טיש>
| # | ערשטע נאמען | לעצטע נאמען | נאמען |
|---|---|---|---|
| 1 | מארק | אָטאָ | @מדאָ |
| 2 | יעקב | Thornton | @פעט |
| 3 | לערי | די פויגל | @טוויטער |
לייג געמארקן אַרום די גאנצע טיש און ראַונדיד עקן פֿאַר עסטעטיש צוועקן.
- <טיש קלאַס = "טיש-באָרדערד" >
- …
- </טיש>
| # | ערשטע נאמען | לעצטע נאמען | נאמען |
|---|---|---|---|
| 1 | מארק | אָטאָ | @מדאָ |
| מארק | אָטאָ | @getbootstrap | |
| 2 | יעקב | Thornton | @פעט |
| 3 | לערי די בירד | @טוויטער | |
מאַכן דיין טישן מער סאָליד דורך אַדינג די .table-condensedקלאַס צו שנייַדן טיש צעל וואַטן אין האַלב (פון 8 פּקס צו 4 פּקס).
- <טיש קלאַס = "טיש טיש קאַנדענסט" >
- …
- </טיש>
| # | ערשטע נאמען | לעצטע נאמען | נאמען |
|---|---|---|---|
| 1 | מארק | אָטאָ | @מדאָ |
| 2 | יעקב | Thornton | @פעט |
| 3 | לערי די בירד | @טוויטער | |
פילן פריי צו פאַרבינדן קיין פון די טיש קלאסן צו דערגרייכן פאַרשידענע קוקן דורך ניצן קיין פון די בנימצא קלאסן.
- <טיש קלאַס = "טיש טיש-סטרייפּט טיש-באָרדערד טיש-קאַנדענסט" >
- ...
- </טיש>
| גאנצע נאמען | |||
|---|---|---|---|
| # | ערשטע נאמען | לעצטע נאמען | נאמען |
| 1 | מארק | אָטאָ | @מדאָ |
| 2 | יעקב | Thornton | @פעט |
| 3 | לערי די בירד | @טוויטער | |
דער בעסטער טייל וועגן פארמען אין באָאָטסטראַפּ איז אַז אַלע דיין ינפּוץ און קאָנטראָלס קוקן גרויס, קיין ענין ווי איר בויען זיי אין דיין מאַרקאַפּ. ניט קיין יבעריק HTML איז פארלאנגט, אָבער מיר צושטעלן די פּאַטערנז פֿאַר די וואס דאַרפן עס.
מער קאָמפּליצירט לייאַוץ קומען מיט סאַמיק און סקאַלאַבלע קלאסן פֿאַר גרינג סטילינג און געשעעניש ביינדינג, אַזוי איר זענט באדעקט ביי יעדער שריט.
Bootstrap קומט מיט שטיצן פֿאַר פיר טייפּס פון פאָרעם לייאַוץ:
פאַרשידענע טייפּס פון פאָרעם לייאַוץ דאַרפן עטלעכע ענדערונגען צו מאַרקאַפּ, אָבער די קאָנטראָלס זיך בלייבן און ביכייווז די זעלבע.
באָאָטסטראַפּ ס פארמען אַרייַננעמען סטיילז פֿאַר אַלע די באַזע פאָרעם קאָנטראָלס ווי אַרייַנשרייַב, טעקסט שטח און סעלעקטירן איר וואָלט דערוואַרטן. אָבער עס אויך קומט מיט אַ נומער פון מנהג קאַמפּאָונאַנץ ווי אַפּפּענדעד און פּרעפּענדעד ינפּוץ און שטיצן פֿאַר רשימות פון טשעקקבאָקסעס.
שטאַטן ווי טעות, ווארענונג און הצלחה זענען אַרייַנגערעכנט פֿאַר יעדער טיפּ פון פאָרעם קאָנטראָל. אויך אַרייַנגערעכנט סטיילז פֿאַר פאַרקריפּלט קאָנטראָלס.
Bootstrap גיט פּשוט מאַרקאַפּ און סטיילז פֿאַר פיר סטיילז פון פּראָסט וועב פארמען.
| נאָמען | קלאַס | באַשרייַבונג |
|---|---|---|
| ווערטיקאַל (פעליקייַט) | .form-vertical (ניט פארלאנגט) |
סטאַקט, לינקס-אַליינד לאַבעלס איבער קאָנטראָלס |
| אין ליניע | .form-inline |
לינקס-אַליינד פירמע און ינלינע-בלאָק קאָנטראָלס פֿאַר סאָליד סטיל |
| זוכן | .form-search |
עקסטרע-ראַונדיד טעקסט אַרייַנשרייַב פֿאַר אַ טיפּיש זוכן עסטעטיש |
| האָריזאָנטאַל | .form-horizontal |
לאָזנ שווימען לינקס, רעכט-אַליינד לאַבעלס אויף דער זעלביקער שורה ווי קאָנטראָלס |
מיט וו2.0, מיר האָבן לייטער און סמאַרטער דיפאָלץ פֿאַר פאָרעם סטיילז. קיין עקסטרע מאַרקאַפּ, נאָר פאָרעם קאָנטראָלס.
- <פאָרם קלאַס = "געזונט" >
- <label> פירמע נאָמען </label>
- <אינפּוט טיפּ = "טעקסט" class = "span3" אָרטהאָלדער = "טיפּ עפּעס ..." >
- <span class = "הילף-ינלינע" > אַססאָסיאַטעד הילף טעקסט! </span>
- <label class = "טשעקבאָקס" >
- <אינפּוט טיפּ = "טשעקבאָקס" > טשעק מיר אויס
- </label>
- <button type = "submit" class = "btn" > פאָרלייגן </button>
- </form>
ריפלעקטינג פעליקייַט וועבקיט סטיילז, נאָר לייגן .form-searchפֿאַר עקסטרע ראַונדיד זוכן פעלדער.
- <פאָרם קלאַס = "געזונט פאָרעם-זוכן" >
- <אינפּוט טיפּ = "טעקסט" קלאַס = "אינפּוט-מיטל זוכן-אָנפֿרעג" >
- <button type = "submit" class = "btn" > זוכן </button>
- </form>
ינפּוץ זענען בלאָק מדרגה צו אָנהייבן. פֿאַר .form-inlineאון .form-horizontal, מיר נוצן ינלינע-בלאָק.
- <פאָרם קלאַס = "געזונט פאָרעם-ינלינע" >
- <אינפּוט טיפּ = "טעקסט" קלאַס = "אינפּוט-קליין" אָרטהאָלדער = "Email" >
- <אינפּוט טיפּ = "פּאַראָל" קלאַס = "אַרייַן-קליין" אָרטהאָלדער = "פּאַראָל" >
- <label class = "טשעקבאָקס" >
- <אינפּוט טיפּ = "טשעקבאָקס" > געדענקט מיר
- </label>
- <button type = "submit" class = "btn" > צייכן אין </button>
- </form>
געגעבן די אויבן בייַשפּיל פאָרעם אויסלייג, דאָ ס די מאַרקאַפּ פֿאַרבונדן מיט דער ערשטער אַרייַנשרייַב און קאָנטראָל גרופּע. די .control-group, .control-label, און .controlsקלאסן זענען אַלע פארלאנגט פֿאַר סטילינג.
- <פאָרם קלאַס = "פאָרעם-האָריזאָנטאַל" >
- <fieldset>
- <לעגענד> לעגענד טעקסט </legend>
- <דייוו קלאַס = "קאָנטראָל-גרופּע" >
- <label class = "control-label" for = "input01" > טעקסט אַרייַנשרייַב </label>
- <דייוו קלאַס = "קאָנטראָלס" >
- <אינפּוט טיפּ = "טעקסט" קלאַס = "ינפּוט-קסלאַרגע" שייַן = "ינפּוט01" >
- <p class = "help-block" > שטיצן הילף טעקסט </p>
- </div>
- </div>
- </fieldset>
- </form>
געוויזן אויף די לינקס זענען אַלע די פעליקייַט פאָרעם קאָנטראָלס וואָס מיר שטיצן. דאָ איז די בוללעטעד רשימה:
אַרויף צו וו 1.4, Bootstrap ס פעליקייַט פאָרעם סטיילז געניצט די האָריזאָנטאַל אויסלייג. מיט Bootstrap 2, מיר אַוועקגענומען דעם באַגרענעצונג צו האָבן סמאַרטער, מער סקאַלאַבלע דיפאָלץ פֿאַר קיין פאָרעם.
באָאָטסטראַפּ פֿעיִקייטן סטיילז פֿאַר בלעטערער-געשטיצט פאָוקיסט און disabledשטאַטן. מיר באַזייַטיקן די פעליקייַט וועבקיט outlineאון צולייגן אַ box-shadowפֿאַר :focus.
עס אויך כולל וואַלאַדיישאַן סטיילז פֿאַר ערראָרס, וואָרנינגז און הצלחה. צו נוצן, לייג די טעות קלאַס צו די אַרומיק .control-group.
- <פעלדסעט
- class = "קאָנטראָל גרופּע טעות" >
- …
- </fieldset>
אַרייַנשרייַב גרופּעס - מיט אַפּפּענדעד אָדער פּרעפּענדעד טעקסט - צושטעלן אַן גרינג וועג צו געבן מער קאָנטעקסט פֿאַר דיין ינפּוץ. גרויס ביישפילן אַרייַננעמען די @ צייכן פֿאַר טוויטטער וסערנאַמעס אָדער $ פֿאַר פיינאַנסיז.
אַרויף צו וו 1.4, Bootstrap פארלאנגט עקסטרע מאַרקאַפּ אַרום טשעקקבאָקסעס און ראַדיאָס צו אָנלייגן זיי. איצט, עס איז אַ פּשוט ענין פון ריפּיטינג די <label class="checkbox">וואָס ראַפּס די <input type="checkbox">.
ינלינע טשעקקבאָקסעס און ראַדיאָס זענען אויך געשטיצט. נאָר לייגן .inlineצו קיין .checkboxאָדער .radioאון איר ניטאָ געטאן.
צו נוצן פּרעפּענד אָדער צוגעבן ינפּוץ אין אַן ינלינע פאָרעם, זיין זיכער צו שטעלן די .add-onאון inputאויף דער זעלביקער שורה, אָן ספּייסאַז.
צו לייגן הילף טעקסט פֿאַר דיין פאָרעם ינפּוץ, אַרייַננעמען ינלינע הילף טעקסט מיט <span class="help-inline">אָדער אַ הילף טעקסט בלאָק מיט <p class="help-block">נאָך די אַרייַנשרייַב עלעמענט.
אַנשטאָט צו מאַכן יעדער ייקאַן אַן עקסטרע בעטן, מיר האָבן קאָמפּילעד זיי אין אַ ספּרייט - אַ בינטל פון בילדער אין איין טעקע וואָס ניצט CSS צו שטעלן די בילדער מיט background-position. דאָס איז דער זעלביקער אופֿן וואָס מיר נוצן אויף Twitter.com און עס האט געארבעט געזונט פֿאַר אונדז.
כל ייקאַנז קלאסן זענען פּרעפיקסעד מיט .icon-פֿאַר געהעריק נאַמעספּאַסינג און סקאָפּינג, פיל ווי אונדזער אנדערע קאַמפּאָונאַנץ. דאָס וועט העלפֿן ויסמיידן קאָנפליקט מיט אנדערע מכשירים.
Glyphicons האָט אונדז דערלויבט די נוצן פון די האַלפלינגס שטעלן אין אונדזער אָפֿן מקור מכשירים אַזוי לאַנג ווי מיר צושטעלן אַ לינק און קרעדיט דאָ אין די דאָקומענטן. ביטע באַטראַכטן טאן די זעלבע אין דיין פּראַדזשעקס.
באָאָטסטראַפּ ניצט אַ <i>קוויטל פֿאַר אַלע ייקאַנז, אָבער זיי האָבן קיין פאַל קלאַס - בלויז אַ שערד פּרעפיקס. צו נוצן, שטעלן די פאלגענדע קאָד כּמעט ערגעץ:
- <i class = "ייקאַן-זוכן" ></i>
עס זענען אויך סטיילז בנימצא פֿאַר ינווערטיד (ווייַס) ייקאַנז, געמאכט גרייט מיט איין עקסטרע קלאַס:
- <i class = "ייקאַן-זוכן בילדל-ווייַס" ></i>
עס זענען 120 קלאסן צו קלייַבן פון פֿאַר דיין ייקאַנז. נאָר לייגן אַ <i>קוויטל מיט די רעכט קלאסן און איר זענט באַשטימט. איר קענען געפֿינען די פול רשימה אין sprites.less אָדער רעכט דאָ אין דעם דאָקומענט.
קאָפּ אַרויף! ווען איר נוצן סטרינגס פון טעקסט, ווי אין קנעפּלעך אָדער נאַוו לינקס, זיין זיכער צו לאָזן אַ פּלאַץ נאָך די <i>קוויטל פֿאַר געהעריק ספּייסינג.
ייקאַנז זענען גרויס, אָבער ווו וואָלט מען זיי נוצן? דאָ זענען עטלעכע געדאנקען:
יסענשאַלי, ערגעץ איר קענען שטעלן אַ <i>קוויטל, איר קענען שטעלן אַ ייקאַן.
ניצן זיי אין קנעפּלעך, קנעפּל גרופּעס פֿאַר אַ מכשיר, נאַוויגאַציע אָדער פּרעפּענדעד פאָרעם ינפּוץ.