באַזע CSS

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

העאַדינגס & גוף קאָפּיע

טיפּאָגראַפיק וואָג

די גאנצע טיפּאָגראַפיק גריד איז באזירט אויף צוויי ווייניקער וועריאַבאַלז אין אונדזער Variables.less טעקע: @baseFontSizeאון @baseLineHeight. דער ערשטער איז די באַזע שריפֿט גרייס געניצט איבער און די רגע איז די באַזע שורה-הייך.

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

בייַשפּיל גוף טעקסט

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

קאָפּיע פון ​​​​די גוף

מאַכן אַ פּאַראַגראַף שטיין אויס דורך אַדינג .lead.

Vivamus sagittis lacus vel Auge Laoreet Rutrum Faucibus Dolor Actor. Duis mollis, est noncommodo luctus.

h1. קעפל 1

h2. קעפל 2

h3. קעפל 3

h4. קעפל 4

h5. קעפל 5
h6. קעפל 6

טראָפּ, אַדרעס און אַבריווייישאַן

עלעמענט באַניץ אָפּטיאָנאַל
<strong> פֿאַר עמפאַסייזינג אַ סניפּאַט פון טעקסט מיט וויכטיק קיינער
<em> פֿאַר עמפאַסייזינג אַ שטיק פון טעקסט מיט דרוק קיינער
<abbr> ראַפּס אַבריווייישאַנז און אַקראַנימז צו ווייַזן די יקספּאַנדיד ווערסיע אויף האָווער

אַרייַננעמען אַפּשאַנאַל titleאַטריביוט פֿאַר יקספּאַנדיד טעקסט

ניצן .initialismקלאַס פֿאַר אַבריווייישאַנז מיט ופּפּערקאַס.
<address> פֿאַר קאָנטאַקט אינפֿאָרמאַציע פֿאַר זיין ניראַסט אָוועס אָדער די גאנצע גוף פון אַרבעט ופהיטן פאָרמאַטטינג דורך ענדיקן אַלע שורות מיט<br>

ניצן טראָפּ

פוססע דאַפּיבוס , טעללוס אַ היימען קאָממאָדאָ , טאָרטאָר מאַוריס קאָנדימענטום ניבה , און פערמענטום מאַסאַזש נאָר זיצן אויף די רייס. Maecenas faucibus mollis interdum. Nulla vitae elit libero, אַ פאַרעטראַ אַוגוע.

באַמערקונג: פילן פריי צו נוצן <b>און <i>אין HTML5, אָבער זייער באַניץ האט געביטן אַ ביסל. <b>איז מענט צו הויכפּונקט ווערטער אָדער פראַסעס אָן קאַנווייינג נאָך וויכטיקייט בשעת <i>איז מערסטנס פֿאַר קול, טעכניש טערמינען, עטק.

בייַשפּיל אַדרעסעס

דאָ זענען צוויי ביישפילן פון ווי די <address>קוויטל קענען זיין געוויינט:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
גאַנץ נאָמען
[email protected]

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

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

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

HTML איז דער בעסטער זאַך זינט סלייסט ברויט.

אַן אַבריווייישאַן פון דעם וואָרט אַטריביוט איז attr .

בלאָק קוואָטעס

עלעמענט באַניץ אָפּטיאָנאַל
<blockquote> בלאָק-מדרגה עלעמענט פֿאַר ציטירן אינהאַלט פון אן אנדער מקור

לייג citeאַטריביוט פֿאַר מקור URL

ניצן .pull-leftאון .pull-rightקלאסן פֿאַר פלאָוטאַד אָפּציעס
<small> אָפּטיאָנאַל עלעמענט פֿאַר אַדינג אַ באַניצער-פייסינג סייטיישאַן, טיפּיקלי אַ מחבר מיט טיטל פון אַרבעט שטעלן דעם <cite>טיטל אָדער נאָמען פון מקור

צו אַרייַננעמען אַ בלאַקקוואָטע, ייַנוויקלען <blockquote>אַלע HTML ווי די ציטירן. פֿאַר גלייך קוואָטעס מיר רעקאָמענדירן אַ <p>.

אַרייַננעמען אַן אַפּשאַנאַל <small>עלעמענט צו ציטירן דיין מקור און איר וועט באַקומען אַן עמאַיל &mdash;איידער עס פֿאַר סטילינג צוועקן.

  1. <blockquote>
  2. <p> לאָמיר פּסום דאָלאָר זיצן פּאַוערד דורך, קאָנסעקטעטור אַדאַפּיססינג עליט. גאַנץ פּאָוזוער איז געווען אַ אָנהייב. </p>
  3. <קליין> איינער באַרימט </small>
  4. </blockquote>

בייַשפּיל בלאָק קוואָטעס

פעליקייַט בלאַקקוואָטעס זענען סטיילד ווי אַזאַ:

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

איינער באַרימט אין גוף פון אַרבעט

צו לאָזנ שווימען דיין בלאַקקוואָטע צו די רעכט, לייגן class="pull-right":

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

איינער באַרימט אין גוף פון אַרבעט

רשימות

אַנאָרדערד

<ul>

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

ונסטיילד

<ul class="unstyled">

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

באפוילן

<ol>

  1. לאָמיר פּסום דאָלאָר זיצן אַמעט
  2. קאָנסעקטעטור אַדאַפּיססינג עליט
  3. גאַנץ מאָלעסטיעס לערנען אין מאַסאַזש
  4. פאַסיליטיז אין פּריטיום ניסל אַלקוועט
  5. נולל וואָלוטפּאַט אַליקוום וועליט
  6. Faucibus porta lacus fringilla vel
  7. אַנעאַן זיצן אַמעט עראַט נונק
  8. Eget porttitor lorem

באַשרייַבונג

<dl>

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

האָריזאָנטאַל באַשרייַבונג

<dl class="dl-horizontal">

באַשרייַבונג רשימות
א באַשרייַבונג רשימה איז גאנץ פֿאַר דיפיינינג טערמינען.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio Sem nec elit.
דאָנעק יד עליט ניט מיר פּאָרטאַ גראַווידאַ און עגעסט מעטוס.
Malesuada porta
עס איז מעגלעך צו מאַכן זיכער אַז עס איז מעגלעך.
Felis euismod semper ege lacinia
פוססע דאַפּיבוס, טעללוס אַ היימען קאָממאָדאָ, טאָרטאָר מאַוריס קאַנדימאַנטום ניבה, און פערמענטום מאַסאַזש נאָר זיצן אויף די רייס.

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

אין ליניע

ייַנוויקלען ינלינע סניפּפּעץ פון קאָד מיט <code>.

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

יקערדיק בלאָק

ניצן <pre>פֿאַר קייפל שורות פון קאָד. זייט זיכער צו אַנטלויפן קיין ווינקל בראַקאַץ אין די קאָד פֿאַר געהעריק רענדערינג.

<p> מוסטער טעקסט דאָ ...</p>
  1. <פּרע>
  2. <p> מוסטער טעקסט דאָ...</p>
  3. </pre>

באַמערקונג: זייט זיכער צו האַלטן קאָד אין <pre>טאַגס ווי נאָענט צו די לינקס ווי מעגלעך; עס וועט מאַכן אַלע טאַבס.

איר קענט אָפּטיאָנאַללי לייגן די .pre-scrollableקלאַס וואָס וועט שטעלן אַ מאַקסימום הייך פון 350 פּקס און צושטעלן אַ י-אַקס סקראָלבאַר.

גוגל פּריטיפיי

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

  1. <p> מוסטער טעקסט דאָ ... </p>
  1. <pre class = "שיין פּרינט
  2. לינענומס" >
  3. <p> מוסטער טעקסט דאָ...</p>
  4. </pre>

אראפקאפיע google-code-pretify און זען די רעאַדמע פֿאַר ווי צו נוצן.

טיש מאַרקאַפּ

Tag באַשרייַבונג
<table> ראַפּינג עלעמענט פֿאַר ווייַזנדיק דאַטן אין אַ טאַבולאַר פֿאָרמאַט
<thead> קאַנטיינער עלעמענט פֿאַר טיש כעדער ראָוז ( <tr>) צו לייבלינג טיש שפאלטן
<tbody> קאַנטיינער עלעמענט פֿאַר טיש ראָוז ( <tr>) אין די גוף פון די טיש
<tr> קאַנטיינער עלעמענט פֿאַר אַ גאַנג פון טיש סעלז ( <td>אָדער <th>) וואָס איז ארויס אויף אַ איין רודערן
<td> פעליקייַט טיש צעל
<th> ספּעציעלע טיש צעל פֿאַר זייַל (אָדער רודערן, דיפּענדינג אויף פאַרנעם און פּלייסמאַנט) לאַבעלס
מוזן זיין געוויינט אין אַ<thead>
<caption> באַשרייַבונג אָדער קיצער פון וואָס די טיש האלט, ספּעציעל נוציק פֿאַר פאַרשטעלן לייענער
  1. <טיש>
  2. <העאַד>
  3. <tr>
  4. <טה> </טה>
  5. <טה> </טה>
  6. </tr>
  7. </thead>
  8. <טבאָדי>
  9. <tr>
  10. <טד> </td>
  11. <טד> </td>
  12. </tr>
  13. </tbody>
  14. </טיש>

טיש אָפּציעס

נאָמען קלאַס באַשרייַבונג
פעליקייַט קיינער קיין סטיילז, נאָר שפאלטן און ראָוז
באַסיק .table בלויז האָריזאָנטאַל שורות צווישן ראָוז
באָרדערד .table-bordered ראָונדס עקן און מוסיף ויסווייניקסט גרענעץ
זעברע-פּאַס .table-striped מוסיף ליכט גרוי הינטערגרונט פֿאַר מאָדנע ראָוז (1, 3, 5, עטק)
קאַנדענסט .table-condensed שנייַדן ווערטיקאַל וואַטן אין האַלב, פֿון 8 פּקס צו 4 פּקס, אין אַלע tdאון thעלעמענטן

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

1. פעליקייַט טיש סטיילז

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

  1. <טיש קלאַס = "טיש" >
  2. </טיש>
# ערשטע נאמען לעצטע נאמען נאמען
1 מארק אָטאָ @מדאָ
2 יעקב Thornton @פעט
3 לערי די פויגל @טוויטער

2. סטרייפּט טיש

באַקומען אַ ביסל פאַנטאַזיע מיט דיין טישן דורך אַדינג זעבראַ-סטריפּינג - נאָר לייגן די .table-stripedקלאַס.

באַמערקונג: סטרייפּט טישן נוצן די :nth-childCSS סעלעקטאָר און א��ז ניט בנימצא אין IE7-IE8.

  1. <טיש קלאַס = "טיש טיש-סטרייפּט" >
  2. </טיש>
# ערשטע נאמען לעצטע נאמען נאמען
1 מארק אָטאָ @מדאָ
2 יעקב Thornton @פעט
3 לערי די פויגל @טוויטער

3. באָרדערד טיש

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

  1. <טיש קלאַס = "טיש-באָרדערד" >
  2. </טיש>
# ערשטע נאמען לעצטע נאמען נאמען
1 מארק אָטאָ @מדאָ
מארק אָטאָ @getbootstrap
2 יעקב Thornton @פעט
3 לערי די בירד @טוויטער

4. קאַנדענסט טיש

מאַכן דיין טישן מער סאָליד דורך אַדינג די .table-condensedקלאַס צו שנייַדן טיש צעל וואַטן אין האַלב (פון 8 פּקס צו 4 פּקס).

  1. <טיש קלאַס = "טיש טיש קאַנדענסט" >
  2. </טיש>
# ערשטע נאמען לעצטע נאמען נאמען
1 מארק אָטאָ @מדאָ
2 יעקב Thornton @פעט
3 לערי די בירד @טוויטער

5. פאַרבינדן זיי אַלע!

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

  1. <טיש קלאַס = "טיש טיש-סטרייפּט טיש-באָרדערד טיש-קאַנדענסט" >
  2. ...
  3. </טיש>
גאנצע נאמען
# ערשטע נאמען לעצטע נאמען נאמען
1 מארק אָטאָ @מדאָ
2 יעקב Thornton @פעט
3 לערי די בירד @טוויטער

פלעקסאַבאַל HTML און CSS

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

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

פיר לייאַוץ אַרייַנגערעכנט

Bootstrap קומט מיט שטיצן פֿאַר פיר טייפּס פון פאָרעם לייאַוץ:

  • ווערטיקאַל (פעליקייַט)
  • זוכן
  • אין ליניע
  • האָריזאָנטאַל

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

קאָנטראָל שטאַטן און מער

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

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

פיר טייפּס פון פארמען

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

נאָמען קלאַס באַשרייַבונג
ווערטיקאַל (פעליקייַט) .form-vertical (ניט פארלאנגט) סטאַקט, לינקס-אַליינד לאַבעלס איבער קאָנטראָלס
אין ליניע .form-inline לינקס-אַליינד פירמע און ינלינע-בלאָק קאָנטראָלס פֿאַר סאָליד סטיל
זוכן .form-search עקסטרע-ראַונדיד טעקסט אַרייַנשרייַב פֿאַר אַ טיפּיש זוכן עסטעטיש
האָריזאָנטאַל .form-horizontal לאָזנ שווימען לינקס, רעכט-אַליינד לאַבעלס אויף דער זעלביקער שורה ווי קאָנטראָלס

בייַשפּיל פארמען ניצן נאָר פאָרעם קאָנטראָלס, קיין עקסטרע מאַרקאַפּ

יקערדיק פאָרעם

סמאַרט און לייטווייט דיפאָלץ אָן עקסטרע מאַרקאַפּ.

בייַשפּיל בלאָק-מדרגה הילף טעקסט דאָ.

  1. <פאָרם קלאַס = "געזונט" >
  2. <label> פירמע נאָמען </label>
  3. <אינפּוט טיפּ = "טעקסט" class = "span3" אָרטהאָלדער = "טיפּ עפּעס ..." >
  4. <span class = "הילף-בלאָק" > בייַשפּיל בלאָק-מדרגה הילף טעקסט דאָ. </span>
  5. <label class = "טשעקבאָקס" >
  6. <אינפּוט טיפּ = "טשעקבאָקס" > טשעק מיר אויס
  7. </label>
  8. <button type = "submit" class = "btn" > פאָרלייגן </button>
  9. </form>

זוכן פאָרעם

לייג .form-searchצו די פאָרעם און .search-queryצו די input.

  1. <פאָרם קלאַס = "געזונט פאָרעם-זוכן" >
  2. <אינפּוט טיפּ = "טעקסט" קלאַס = "אינפּוט-מיטל זוכן-אָנפֿרעג" >
  3. <button type = "submit" class = "btn" > זוכן </button>
  4. </form>

אָנליין פאָרעם

לייג .form-inlineצו פינעס די ווערטיקאַל אַליינמאַנט און ספּייסינג פון פאָרעם קאָנטראָלס.

  1. <פאָרם קלאַס = "געזונט פאָרעם-ינלינע" >
  2. <אינפּוט טיפּ = "טעקסט" קלאַס = "אינפּוט-קליין" אָרטהאָלדער = "Email" >
  3. <אינפּוט טיפּ = "פּאַראָל" קלאַס = "אַרייַן-קליין" אָרטהאָלדער = "פּאַראָל" >
  4. <label class = "טשעקבאָקס" >
  5. <אינפּוט טיפּ = "טשעקבאָקס" > געדענקט מיר
  6. </label>
  7. <button type = "submit" class = "btn" > צייכן אין </button>
  8. </form>

האָריזאָנטאַל פארמען

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

  • טעקסט ינפּוץ (טעקסט, פּאַראָל, E- בריוו, עטק)
  • טשעקקבאָקס
  • ראַדיאָ
  • אויסקלייַבן
  • קייפל אויסקלייַבן
  • טעקע אַרייַנשרייַב
  • טעקסטאַרעאַ

אין אַדישאַן צו פרעעפאָרם טעקסט, קיין HTML5 טעקסט-באזירט אַרייַנשרייַב איז ווי אַזוי.

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

געגעבן די אויבן בייַשפּיל פאָרעם אויסלייג, דאָ ס די מאַרקאַפּ פֿאַרבונדן מיט דער ערשטער אַרייַנשרייַב און קאָנטראָל גרופּע. די .control-group, .control-label, און .controlsקלאסן זענען אַלע פארלאנגט פֿאַר סטילינג.

  1. <פאָרם קלאַס = "פאָרעם-האָריזאָנטאַל" >
  2. <fieldset>
  3. <לעגענד> לעגענד טעקסט </legend>
  4. <דייוו קלאַס = "קאָנטראָל-גרופּע" >
  5. <label class = "control-label" for = "input01" > טעקסט אַרייַנשרייַב </label>
  6. <דייוו קלאַס = "קאָנטראָלס" >
  7. <אינפּוט טיפּ = "טעקסט" קלאַס = "ינפּוט-קסלאַרגע" שייַן = "ינפּוט01" >
  8. <p class = "help-block" > שטיצן הילף טעקסט </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

פאָרעם קאָנטראָל שטאַטן

באָאָטסטראַפּ פֿעיִקייטן סטיילז פֿאַר בלעטערער-געשטיצט פאָוקיסט און disabledשטאַטן. מיר באַזייַטיקן די פעליקייַט וועבקיט outlineאון צולייגן אַ box-shadowפֿאַר :focus.


פאָרם וואַלאַדיישאַן

עס אויך כולל וואַלאַדיישאַן סטיילז פֿאַר ערראָרס, וואָרנינגז און הצלחה. צו נוצן, לייג די טעות קלאַס צו די אַרומיק .control-group.

  1. <פעלדסעט
  2. class = "קאָנטראָל גרופּע טעות" >
  3. </fieldset>
עטלעכע ווערט דאָ
אפשר איז עפעס געפאלן
ביטע פארריכט דעם טעות
וווהאָאָ!
וווהאָאָ!

יקסטענדינג פאָרעם קאָנטראָלס

פּרעפּענד און צוגעבן ינפּוץ

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


טשעקקבאָקסעס און ראַדיאָס

אַרויף צו וו 1.4, Bootstrap פארלאנגט עקסטרע מאַרקאַפּ אַרום טשעקקבאָקסעס און ראַדיאָס צו אָנלייגן זיי. איצט, עס איז אַ פּשוט ענין פון ריפּיטינג די <label class="checkbox">וואָס ראַפּס די <input type="checkbox">.

ינלינע טשעקקבאָקסעס און ראַדיאָס זענען אויך געשטיצט. נאָר לייגן .inlineצו קיין .checkboxאָדער .radioאון איר ניטאָ געטאן.


ינלינע פארמען און צוגעבן / פּרעפּענד

צו נוצן פּרעפּענד אָדער צוגעבן ינפּוץ אין אַן ינלינע פאָרעם, זיין זיכער צו שטעלן די .add-onאון inputאויף דער זעלביקער שורה, אָן ספּייסאַז.


פאָרעם הילף טעקסט

צו לייגן הילף טעקסט פֿאַר דיין פאָרעם ינפּוץ, אַרייַננעמען ינלינע הילף טעקסט מיט <span class="help-inline">אָדער אַ הילף טעקסט בלאָק מיט <p class="help-block">נאָך די אַרייַנשרייַב עלעמענט.

ניצן די זעלבע .span*קלאסן פון די גריד סיסטעם פֿאַר אַרייַנשרייַב סיזעס.

איר קענט אויך נוצן סטאַטיק קלאסן וואָס טאָן ניט מאַפּס צו די גריד, אַדאַפּט צו די אָפּרופיק CSS סטיילז, אָדער חשבון פֿאַר וועריינג טייפּס פון קאָנטראָלס (למשל, inputווס select.).

@

דאָ ס עטלעכע הילף טעקסט

.00
דאָ ס מער הילף טעקסט
$ .00

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

קנעפּל קלאַס = "" באַשרייַבונג
btn נאָרמאַל גרוי קנעפּל מיט גראַדיענט
btn btn-primary גיט עקסטרע וויזשאַוואַל וואָג און יידענאַפייד די ערשטיק קאַמף אין אַ גאַנג פון קנעפּלעך
btn btn-info געוויינט ווי אַן אָלטערנאַטיוו צו די פעליקייַט סטיילז
btn btn-success ינדיקייץ אַ מצליח אָדער positive קאַמף
btn btn-warning ינדיקייץ וואָרענען זאָל זיין גענומען מיט דעם קאַמף
btn btn-danger ינדיקייץ אַ געפערלעך אָדער פּאַטענטשאַלי נעגאַטיוו קאַמף
btn btn-inverse אַלטערנאַטיווע טונקל גרוי קנעפּל, ניט טייד צו אַ סעמאַנטיק קאַמף אָדער נוצן

קנעפּלעך פֿאַר אַקשאַנז

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

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

קרייַז בלעטערער קאַמפּאַטאַבילאַטי

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

קייפל סיזעס

ליב געהאט גרעסערע אָדער קלענערער קנעפּלעך? לייג .btn-large, .btn-small, אָדער .btn-miniפֿאַר צוויי נאָך סיזעס.


פאַרקריפּלט שטאַט

פֿאַר פאַרקריפּלט קנעפּלעך, לייגן די .disabledקלאַס צו לינקס און די disabledאַטריביוט פֿאַר <button>עלעמענטן.

ערשטיק לינק לינק

קאָפּ אַרויף! מיר נוצן .disabledווי אַ נוצן קלאַס דאָ, ענלעך צו דער פּראָסט .activeקלאַס, אַזוי קיין פּרעפיקס איז פארלאנגט.

איין קלאַס, קייפל טאַגס

ניצן די .btnקלאַס אויף אַן <a>, <button>, אָדער <input>עלעמענט.

לינק
  1. <a class = "btn" href = "" > לינק </a>
  2. <קנעפּל קלאַס = "בטן" טיפּ = "פאָרלייגן" >
  3. קנעפּל
  4. </button>
  5. <אינפּוט קלאַס = "בטן" טיפּ = "קנעפּל"
  6. value = "אינפּוט" >
  7. <ינפּוט קלאַס = "בטן" טיפּ = "פאָרלייגן"
  8. value = "פאָרלייגן" >

ווי אַ בעסטער פיר, פּרוּווט צו גלייַכן דעם עלעמענט פֿאַר דיין קאָנטעקסט צו ענשור וואָס ריכטן קרייַז-בלעטערער רענדערינג. אויב איר האָט אַ input, נוצן אַ <input type="submit">פֿאַר דיין קנעפּל.

  • בילדל-גלאז
  • בילדל-מוזיק
  • בילדל-זוכן
  • בילדל-קאָנווערט
  • בילדל-האַרץ
  • בילדל-שטערן
  • בילדל-שטערן-ליידיק
  • בילדל-באַניצער
  • בילדל-פילם
  • בילדל-טה-גרויס
  • בילדל-טה
  • בילדל-טה-רשימה
  • ייקאַן-גוט
  • בילדל-נעם אַוועק
  • בילדל-זאָאָם-אין
  • בילדל-זאָאָם-אויס
  • בילדל-אַוועק
  • בילדל-סיגנאַל
  • בילדל-קאָג
  • בילדל-אָפּפאַל
  • בילדל-היים
  • בילדל-טעקע
  • בילדל-צייט
  • בילדל-וועג
  • icon-download-alt
  • בילדל אראפקאפיע
  • בילדל-ופּלאָאַד
  • ייקאַן-ינבאָקס
  • בילדל-שפּיל-קרייַז
  • בילדל איבערחזרן
  • בילדל-דערפרישן
  • icon-list-alt
  • בילדל-שלאָס
  • בילדל-פלאַך
  • בילדל-כעדפאָונז
  • בילדל-באַנד-אַוועק
  • בילדל-באַנד-אַראָפּ
  • בילדל-באַנד-אַרויף
  • icon-qrcode
  • בילדל-באַרקאָדע
  • icon-tag
  • ייקאַן-טאַגס
  • בילדל-בוך
  • בילדל-בוקמאַרק
  • בילדל-דרוקן
  • בילדל-אַפּאַראַט
  • בילדל-שריפֿט
  • ייקאַן-דרייסט
  • ייקאַן-יטאַליק
  • בילדל-טעקסט-הייך
  • בילדל-טעקסט-ברייט
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • בילדל-רשימה
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • בילדל-בילד
  • בילדל-בלייַער
  • בילדל-מאַפּע-מאַרקער
  • בילדל-סטרויערן
  • ייקאַן-טינט
  • בילדל-רעדאַגירן
  • בילדל-ייַנטיילן
  • בילדל-טשעק
  • בילדל-מאַך
  • בילדל-שריט-צוריק
  • בילדל-שנעל-צוריק
  • בילדל-צוריק
  • בילדל-שפּיל
  • בילדל פּויזע
  • בילדל-האַלטן
  • בילדל-פאָרויס
  • ייקאַן-שנעל-פאָרויס
  • בילדל-שריט-פאָרויס
  • בילדל אַרויסוואַרפן
  • בילדל-טשעווראָן-לינקס
  • icon-chevron-right
  • בילדל-פּלוס-צייכן
  • בילדל-מינוס-צייכן
  • icon-remove-sign
  • בילדל-גוט-צייכן
  • בילדל-פֿראַגע-צייכן
  • icon-info-sign
  • בילדל-סקרעענשאָט
  • icon-remove-circle
  • בילדל-גוט-קרייַז
  • בילדל-פאַרבאָט-קרייַז
  • בילדל-פייַל-לינקס
  • בילדל-פייַל-רעכט
  • בילדל-פייַל-אַרויף
  • בילדל-פייַל-אַראָפּ
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • ייקאַן-פּלוס
  • בילדל-מינוס
  • בילדל-אַסטעריסק
  • בילדל-יקסקלאַמיישאַן-צייכן
  • בילדל-טאַלאַנט
  • בילדל-בלאַט
  • בילדל-פייַער
  • בילדל-אויג-עפענען
  • בילדל-אויג-נאָענט
  • בילדל-ווארענונג-צייכן
  • ייקאַן פלאַך
  • בילדל-קאַלענדאַר
  • בילדל-ראַנדאָם
  • בילדל-באַמערקונג
  • בילדל-מאַגנעט
  • ייקאַן-טשעווראָן-אַרויף
  • ייקאַן-טשעווראָן-אַראָפּ
  • ייקאַן-רעטוועעט
  • בילדל-שאַפּינג וואָגן
  • ייקאַן-טעקע-נאָענט
  • בילדל-טעקע-עפענען
  • בילדל-רעסיזע-ווערטיקאַל
  • icon-resize-horizontal
  • בילדל-הדד
  • בילדל-בולהאָרן
  • בילדל-גלאָק
  • בילדל-סערטיפיקאַט
  • ייקאַן-טהומבס-אַרויף
  • ייקאַן-טהומבס-אַראָפּ
  • בילדל-האַנט-רעכט
  • בילדל-האַנט-לינקס
  • ייקאַן-האַנט-אַרויף
  • בילדל-האַנט-אַראָפּ
  • icon-circle-arrow-right
  • בילדל-קרייַז-פייַל-לינקס
  • icon-circle-arrow-up
  • בילדל-קרייַז-פייַל-אַראָפּ
  • ייקאַן-גלאָבוס
  • בילדל-מוריק
  • בילדל טאַסקס
  • בילדל-פילטער
  • בילדל-שענק
  • בילדל-פוללסקרעען

געבויט ווי אַ ספּרייט

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

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

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

וויאזוי צו ניצן

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

  1. <i class = "ייקאַן-זוכן" ></i>

עס זענען אויך סטיילז בנימצא פֿאַר ינווערטיד (ווייַס) ייקאַנז, געמאכט גרייט מיט איין עקסטרע קלאַס:

  1. <i class = "ייקאַן-זוכן בילדל-ווייַס" ></i>

עס זענען 140 קלאסן צו קלייַבן פון פֿאַר דיין ייקאַנז. נאָר לייגן אַ <i>קוויטל מיט די רעכט קלאסן און איר זענט באַשטימט. איר קענען געפֿינען די פול רשימה אין sprites.less אָדער רעכט דאָ אין דעם דאָקומענט.

קאָפּ אַרויף! ווען איר נוצן סטרינגס פון טעקסט, ווי אין קנעפּלעך אָדער נאַוו לינקס, זיין זיכער צו לאָזן אַ פּלאַץ נאָך די <i>קוויטל פֿאַר געהעריק ספּייסינג.

ניצן קאַסעס

ייקאַנז זענען גרויס, אָבער ווו וואָלט מען זיי נוצן? דאָ זענען עטלעכע געדאנקען:

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

יסענשאַלי, ערגעץ איר קענען שטעלן אַ <i>קוויטל, איר קענען שטעלן אַ ייקאַן.

ביישפילן

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