באָאָטסטראַפּ

באַזע CSS

פונדאַמענטאַל HTML עלעמענטן סטיילד און ימפּרוווד מיט עקסטענסיבלע קלאסן.

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

העאַדינגס

אַלע HTML כעדינגז <h1>זענען <h6>בנימצא.

h1. קעפל 1

h2. קעפל 2

h3. קעפל 3

h4. קעפל 4

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

גוף קאָפּיע

די גלאבאלע פעליקייַט פון Bootstrap font-sizeאיז 14 פּקס , מיט אַ line-heightפון 20 פּקס . דאָס איז געווענדט צו די <body>און אַלע פּאַראַגראַפס. אין אַדישאַן, <p>(פּאַראַגראַפס) באַקומען אַ דנאָ גרענעץ פון האַלב זייער שורה-הייך (10 פּקס דורך פעליקייַט).

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

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

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

<p> ... </p>

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

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

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

<p class = "פירן" > ... </p>

געבויט מיט ווייניקער

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

טראָפּ

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

<small>

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

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

<p> <קליין> די שורה פון טעקסט איז מענט צו זיין באהאנדלט ווי קליין דרוקן. </small> </p>

דרייסט

צו ונטערשטרייַכן אַ טעקסט סניפּאַט מיט אַ כעוויער שריפֿט וואָג.

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

<strong> רענדערד ווי דרייסט טעקסט </strong>

ייטאַליקס

פֿאַר עמפאַסייזינג אַ סניפּאַט פון טעקסט מיט ייטאַליקס.

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

<em> רענדערד ווי ייטאַלייזד טעקסט </em>

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

אַליינמאַנט קלאסן

לייכט ריאַלייז טעקסט צו קאַמפּאָונאַנץ מיט טעקסט אַליינמאַנט קלאסן.

לינקס אַליינד טעקסט.

צענטער אַליינד טעקסט.

רעכט אַליינד טעקסט.

  1. <p class = "טעקסט-לינקס" > לינקס אַליינד טעקסט. </p> 
  2. <p class = "טעקסט-צענטער" > צענטער אַליינד טעקסט. </p> 
  3. <p class = "טעקסט-רעכט" > רעכט אַליינד טעקסט. </p>

טראָפּ קלאסן

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

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

עס איז מעגלעך צו מאַכן זיכער אַז עס איז מעגלעך.

דאָנעק ullamcorper nulla ניט מעטוס לאָקטאָר פרינגיללאַ.

אַענעאַן eu leo ​​quam. פּעללענטעסקווע אָרנאַרע סעם lacinia quam venenatis.

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

  1. <פּ קלאַס = "מוטיד" > פוססע דאַפּיבוס, טאַללס אַ היימען קאָממאָדאָ, טאָרטאָר מאַוריס ניבה. </p> 
  2. <פּ קלאַס = "טעקסט-ווארענונג" > איר וועט האָבן צו מאַכן זיכער אַז עס איז מעגלעך. </p> 
  3. <פּ קלאַס = "טעקסט-טעות" > דאַונלאָוד וללאַמקאָרפּער ניט קיין מעטוס לאָקטאָר פרינגיללאַ. </p> 
  4. <פּ קלאַס = "טעקסט-אינפֿאָרמאַציע" > Aenean eu leo ​​quam. פּעללענטעסקווע אָרנאַרע סעם lacinia quam venenatis. </p> 
  5. <פּ קלאַס = "טעקסט-סאַקסעס" > איר זאָל נישט האָבן אַ גוט רעזולטאַט, עס איז קיין פּאָרטאַטיוו. </p>

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

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

<abbr>

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

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

<abbr title = "אַטריביוט" > אַטר </abbr>

<abbr class="initialism">

לייג .initialismצו אַ אַבריווייישאַן פֿאַר אַ ביסל קלענערער שריפֿט גרייס.

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

<abbr title = "HyperText Markup Language" class = "ינסיטיאַליזם" > HTML </abbr>

ווענדט זיך

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

<address>

ופהיטן פאָרמאַטטינג דורך ענדיקן אַלע שורות מיט <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
גאַנץ נאָמען
[email protected] 
  1. <אַדרעס>
  2.   <strong> טוויטער, ינק. </strong><br>
  3.   795 Folsom Ave, Suite 600 <br>
  4.   סאַן פֿראַנסיסקאָ, CA 94107 <br>
  5.   <abbr title = "טעלעפֿאָן" > פּ: </abbr> (123) 456-7890 
  6. </address>
  7.  
  8. <אַדרעס>
  9.   <strong> גאַנץ נאָמען </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </address>

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

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

פעליקייַט בלאַקקוואָטע

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

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

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

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

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

נאָמען אַ מקור

לייג <small>אַ קוויטל צו ידענטיפיצירן די מקור. ייַנוויקלען די נאָמען פון די מקור אַרבעט אין <cite>.

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

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

אַלטערנאַטיווע דיספּלייז

ניצן .pull-rightפֿאַר אַ פלאָוטאַד, רעכט-אַליינד בלאַקקוואָטע.

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

איינער באַרימט אין מקור טיטל 
  1. <blockquote class = "ציען-רעכט" > 
  2.   ...
  3. </blockquote>

רשימות

אַנאָרדערד

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

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

באפוילן

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

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

ונסטיילד

אַראָפּנעמען די פעליקייַט list-styleאון לינקס וואַטן אויף רשימה זאכן (בלויז קינדער).

  • לאָמיר פּסום דאָלאָר זיצן אַמעט
  • קאָנסעקטעטור אַדאַפּיססינג עליט
  • גאַנץ מאָלעסטיעס לערנען אין מאַסאַזש
  • פאַסיליטיז אין פּריטיום ניסל אַלקוועט
  • נולל וואָלוטפּאַט אַליקוום וועליט
    • Phasellus iaculis neque
    • פּורוס סאָדאַלעס ולטריסיעס
    • וועסטיבולום לאַאָרעעט פּאָרטטיטאָר סעם
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • אַנעאַן זיצן אַמעט עראַט נונק
  • Eget porttitor lorem
  1. <ul class = "אַנסטיילד" > 
  2.   <li> ... </li>
  3. </ul>

אין ליניע

שטעלן אַלע רשימה זאכן אויף אַ איין שורה מיט inline-blockעטלעכע ליכט וואַטן.

  • לייענען אויף
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "inline" > 
  2.   <li> ... </li>
  3. </ul>

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

א רשימה פון טערמינען מיט זייער פֿאַרבונדן דיסקריפּשאַנז.

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

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

מאַכן טערמינען און דיסקריפּשאַנז אין <dl>שורה אַרויף זייַט-ביי-זייַט.

באַשרייַבונג רשימות
א באַשרייַבונג רשימה איז גאנץ פֿאַר דיפיינינג טערמינען.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio Sem nec elit.
דאָנעק יד עליט ניט מיר פּאָרטאַ גראַווידאַ און עגעסט מעטוס.
Malesuada porta
עס איז מעגלעך צו מאַכן זיכער אַז עס איז מעגלעך.
Felis euismod semper ege lacinia
פוססע דאַפּיבוס, טעללוס אַ היימען קאָממאָדאָ, טאָרטאָר מאַוריס קאַנדימאַנטום ניבה, און פערמענטום מאַסאַזש נאָר זיצן אויף די רייס. 
  1. <דל קלאַס = "דל-האָריזאָנטאַל" > 
  2.   <דט> ... </dt>
  3.   <דד> ... </dd>
  4. </dl>

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

קאָד

אין ליניע

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

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

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

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

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

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

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

טישן

פעליקייַט סטיילז

פֿאַר יקערדיק סטילינג - ליכט וואַטן און בלויז האָריזאָנטאַל דיווידערס - לייגן די באַזע קלאַס .tableצו קיין <table>.

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

אָפּטיאָנאַל קלאסן

לייג קיין פון די פאלגענדע קלאסן צו די .tableבאַזע קלאַס.

.table-striped

מוסיף זעבראַ-סטריפּינג צו קיין טיש רודערן אין <tbody>די :nth-childCSS סעלעקטאָר (ניט בנימצא אין IE7-8).

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

.table-bordered

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

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

.table-hover

געבן אַ האָווער שטאַט אויף טיש ראָוז אין אַ <tbody>.

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

.table-condensed

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

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

אָפּטיאָנאַל רודערן קלאסן

ניצן קאָנטעקסטואַל קלאסן צו קאָלירן טיש ראָוז.

קלאַס באַשרייַבונג
.success ינדיקייץ אַ מצליח אָדער positive קאַמף.
.error ינדיקייץ אַ געפערלעך אָדער פּאַטענטשאַלי נעגאַטיוו קאַמף.
.warning ינדיקייץ אַ ווארענונג וואָס קען דאַרפֿן ופמערקזאַמקייַט.
.info געוויינט ווי אַן אָלטערנאַטיוו צו די פעליקייַט סטיילז.
# פּראָדוקט צאָלונג גענומען סטאַטוס
1 טב - כוידעשלעך 01/04/2012 באוויליקט
2 טב - כוידעשלעך 02/04/2012 דיקליינד
3 טב - כוידעשלעך 03/04/2012 פּענדינג
4 טב - כוידעשלעך 04/04/2012 רופן אין צו באַשטעטיקן 
  1. ...
  2.   < טר קלאַס = "הצלחה" >
  3.     <טד> 1 < /טד>
  4.     <td>טב - כוידעשלעך</ td >
  5.     <טד> 01 / 04 / 2012 < /טד>
  6.     <td>באוויליקט</ td >
  7.   </ tr >
  8. ...

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

רשימה פון שטיצט טיש HTML עלעמענטן און ווי זיי זאָל זיין געוויינט.

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

Forms

פעליקייַט סטיילז

יחיד פאָרעם קאָנטראָלס באַקומען סטילינג, אָבער אָן קיין פארלאנגט באַזע קלאַס אויף די <form>אָדער גרויס ענדערונגען אין מאַרקאַפּ. רעזולטאַטן אין סטאַקט, לינקס-אַליינד לאַבעלס אויף שפּיץ פון פאָרעם קאָנטראָלס.

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

אָפּטיאָנאַל לייאַוץ

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

זוכן פאָרעם

לייג .form-searchצו די פאָרעם און .search-queryצו די <input>פֿאַר אַן עקסטרע-ראַונדיד טעקסט אַרייַנשרייַב.

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

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

לייג .form-inlineפֿאַר לינקס-אַליינד לאַבעלס און ינלינע-בלאָק קאָנטראָלס פֿאַר אַ סאָליד אויסלייג.

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

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

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

  • לייג .form-horizontalצו די פאָרעם
  • ייַנוויקלען לאַבעלס און קאָנטראָלס אין.control-group
  • לייג .control-labelצו די פירמע
  • ייַנוויקלען קיין פארבונדן קאָנטראָלס אין .controlsפֿאַר געהעריק אַליינמאַנט
  1. <פאָרם קלאַס = "פאָרעם-האָריזאָנטאַל" > 
  2.   <דייוו קלאַס = "קאָנטראָל-גרופּע" > 
  3.     <label class = "control-label" for = "inputEmail" > בליצפּאָסט </label>  
  4.     <דייוו קלאַס = "קאָנטראָלס" > 
  5.       <ינפּוט טיפּ = "טעקסט" id = "inputEmail" אָרטהאָלדער = "Email" >   
  6.     </div>
  7.   </div>
  8.   <דייוו קלאַס = "קאָנטראָל-גרופּע" > 
  9.     <label class = "control-label" for = "inputPassword" > פּאַראָל </label>  
  10.     <דייוו קלאַס = "קאָנטראָלס" > 
  11.       <ינפּוט טיפּ = "פּאַראָל" id = "ינפּוטפּאַססוואָרד" אָרטהאָלדער = "פּאַראָל" >   
  12.     </div>
  13.   </div>
  14.   <דייוו קלאַס = "קאָנטראָל-גרופּע" > 
  15.     <דייוו קלאַס = "קאָנטראָלס" > 
  16.       <label class = "טשעקבאָקס" > 
  17.         <אינפּוט טיפּ = "טשעקבאָקס" > געדענקט מיר 
  18.       </label>
  19.       <button type = "submit" class = "btn" > צייכן אין </button>  
  20.     </div>
  21.   </div>
  22. </form>

שטיצט פאָרעם קאָנטראָלס

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

ינפּוץ

מערסט פּראָסט פאָרעם קאָנטראָל, טעקסט-באזירט אַרייַנשרייַב פעלדער. ינקלודז שטיצן פֿאַר אַלע HTML5 טייפּס: טעקסט, פּאַראָל, דאַטעטימע, דאַטעטימע-לאָקאַל, דאַטע, חודש, צייט, וואָך, נומער, E- בריוו, URL, זוכן, טעל און קאָליר.

ריקוויירז די נוצן פון אַ ספּעסיפיעד typeאין אַלע צייט.

  1. <אינפּוט טיפּ = "טעקסט" אָרטהאָלדער = "טעקסט אַרייַנשרייַב" >

טעקסטאַרעאַ

פאָרעם קאָנטראָל וואָס שטיצט קייפל שורות פון טעקסט. טוישן rowsאַטריביוט ווי נייטיק.

  1. <textarea rows = "3" ></textarea>

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

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

פעליקייַט (סטאַקט)


  1. <label class = "טשעקבאָקס" > 
  2.   <אינפּוט טיפּ = "טשעקבאָקס" ווערט = "" >  
  3.   אָפּציע איינער איז דאָס און אַז - זיין זיכער צו אַרייַננעמען וואָס עס איז גרויס
  4. </label>
  5.  
  6. <לייבל קלאַס = "ראַדיאָ" > 
  7.   <אינפּוט טיפּ = "ראַדיאָ" נאָמען = "אָפּציעסראַדיאָס" שייַן = "אָפּציעסראַדיאָס1" ווערט = "אָפּציע 1" אָפּגעשטעלט >     
  8.   אָפּציע איינער איז דאָס און אַז - זיין זיכער צו אַרייַננעמען וואָס עס איז גרויס
  9. </label>
  10. <לייבל קלאַס = "ראַדיאָ" > 
  11.   <אינפּוט טיפּ = "ראַדיאָ" נאָמען = "אָפּציעסראַדיאָס" שייַן = "אָפּציעסראַדיאָס2" ווערט = "אָפּציע 2" >    
  12.   אָפּציע צוויי קענען זיין עפּעס אַנדערש און סאַלעקטינג עס וועט דיסעלעקט אָפּציע איינער
  13. </label>

ינלינע טשעקקבאָקסעס

לייג די .inlineקלאַס צו אַ סעריע פון ​​טשעקקבאָקסעס אָדער ראַדיאָס פֿאַר קאָנטראָלס דערשייַנען אויף דער זעלביקער שורה.

  1. <label class = "טשעקבאָקס ינלינע" > 
  2.   <אינפּוט טיפּ = "טשעקבאָקס" id = "inlineCheckbox1" ווערט = "אָפּציע 1" > 1   
  3. </label>
  4. <label class = "טשעקבאָקס ינלינע" > 
  5.   <אינפּוט טיפּ = "טשעקבאָקס" שייַן = "inlineCheckbox2" ווערט = "אָפּטיאָן 2" > 2   
  6. </label>
  7. <label class = "טשעקבאָקס ינלינע" > 
  8.   <ינפּוט טיפּ = "טשעקבאָקס" id = "inlineCheckbox3" ווערט = "אָפּציע3" > 3   
  9. </label>

סאַלעקץ

ניצן די פעליקייַט אָפּציע אָדער ספּעציפיצירן אַ multiple="multiple"צו ווייַזן קייפל אָפּציעס אין אַמאָל.


  1. <סעלעקטירן>
  2.   <אָפּציע> 1 </אָפּציע>
  3.   <אָפּציע> 2 </אָפּציע>
  4.   <אָפּציע> 3 </אָפּציע>
  5.   <אָפּציע> 4 </ אָפּציע>
  6.   <אָפּציע> 5 </אָפּציע>
  7. </סעלעקט>
  8.  
  9. <סעלעקטירן קייפל = "קייפל" > 
  10.   <אָפּציע> 1 </אָפּציע>
  11.   <אָפּציע> 2 </אָפּציע>
  12.   <אָפּציע> 3 </אָפּציע>
  13.   <אָפּציע> 4 </ אָפּציע>
  14.   <אָפּציע> 5 </אָפּציע>
  15. </סעלעקט>

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

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

פּרעפּענדעד און אַפּפּענדעד ינפּוץ

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

פעליקייַט אָפּציעס

ייַנוויקלען אַן .add-onאון אַ inputמיט איינער פון צוויי קלאסן צו פאַרלייגן אָדער צוגעבן טעקסט צו אַ אַרייַנשרייַב.

@

.00 
  1. <דייוו קלאַס = "ינפּוט-פּרעפּענד" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <ינפּוט קלאַס = "ספּאַן2" id = "prependedInput" טיפּ = "טעקסט" אָרטהאָלדער = "באַניצער נאָמען" >    
  4. </div>
  5. <דייוו קלאַס = "ינפּוט-צוגעבן" > 
  6.   <ינפּוט קלאַס = "ספּאַן 2" שייַן = "אַפּענדעד ינפּוט " טיפּ = "טעקסט" >   
  7.   <span class = "add-on" > .00 </span> 
  8. </div>

קאַמביינד

ניצן ביידע קלאסן און צוויי ינסטאַנסיז פון .add-onצו פּרעפּענד און צוגעבן אַן אַרייַנשרייַב.

$ .00 
  1. <דייוו קלאַס = "אַרייַנגאַנג-פּרעפּענד אַרייַנשרייַב-צוגעבן" > 
  2.   <span class = "add-on" > $ </span> 
  3.   <ינפּוט קלאַס = "שפּאַן 2" שייַן = "אַפּענדעד פּרעפּענדעד ינפּוט " טיפּ = "טעקסט" >   
  4.   <span class = "add-on" > .00 </span> 
  5. </div>

קנעפּלעך אַנשטאָט פון טעקסט

אַנשטאָט אַ <span>מיט טעקסט, נוצן אַ .btnצו צוטשעפּען אַ קנעפּל (אָדער צוויי) צו אַ אַרייַנשרייַב.

  1. <דייוו קלאַס = "ינפּוט-צוגעבן" > 
  2.   <ינפּוט קלאַס = "שפּאַן 2" שייַן = "אַפּענדעד ינפּוט קנעפּל " טיפּ = "טעקסט" >   
  3.   <קנעפּל קלאַס = "בטן" טיפּ = "קנעפּל" > גיין! </button>  
  4. </div>
  1. <דייוו קלאַס = "ינפּוט-צוגעבן" > 
  2.   <ינפּוט קלאַס = "ספּאַן2" שייַן = "אַפּענדעד ינפּוט בוטטאָנס " טיפּ = "טעקסט" >   
  3.   <button class = "btn" טיפּ = "קנעפּל" > זוכן </button>  
  4.   <button class = "btn" טיפּ = "קנעפּל" > אָפּציעס </button>  
  5. </div>

קנעפּל דראָפּדאָוונס

  1. <דייוו קלאַס = "ינפּוט-צוגעבן" > 
  2.   <אינפּוט קלאַס = "שפּאַן 2" שייַן = "אַפּענדעד דראָפּדאָוון קנעפּל " טיפּ = "טעקסט" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "דראָפּדאָוון" >  
  5.       קאַמף
  6.       <span class = "קאַרעט" ></span> 
  7.     </button>
  8.     <ul class = "דראָפּדאָוון-מעניו" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <דייוו קלאַס = "ינפּוט-פּרעפּענד" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "דראָפּדאָוון" >  
  4.       קאַמף
  5.       <span class = "קאַרעט" ></span> 
  6.     </button>
  7.     <ul class = "דראָפּדאָוון-מעניו" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <ינפּוט קלאַס = "ספּאַן2" שייַן = "פּרעפּענדעד דראָפּדאָוון קנעפּל" טיפּ = "טעקסט" >   
  12. </div>
  1. <דייוו קלאַס = "אַרייַנגאַנג-פּרעפּענד אַרייַנשרייַב-צוגעבן" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "דראָפּדאָוון" >  
  4.       קאַמף
  5.       <span class = "קאַרעט" ></span> 
  6.     </button>
  7.     <ul class = "דראָפּדאָוון-מעניו" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <ינפּוט קלאַס = "ספּאַן2" id = "אַפּענדעד פּרעפּענדעד דראָפּדאָוון קנעפּל " טיפּ = "טעקסט" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "דראָפּדאָוון" >  
  14.       קאַמף
  15.       <span class = "קאַרעט" ></span> 
  16.     </button>
  17.     <ul class = "דראָפּדאָוון-מעניו" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

סעגמענטעד דראָפּדאָוון גרופּעס

  1. <פאָרם>
  2.   <דייוו קלאַס = "ינפּוט-פּרעפּענד" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <אינפּוט טיפּ = "טעקסט" > 
  5.   </div>
  6.   <דייוו קלאַס = "ינפּוט-צוגעבן" > 
  7.     <אינפּוט טיפּ = "טעקסט" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

זוכן פאָרעם

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

קאָנטראָל סייזינג

ניצן קאָרעוו סייזינג קלאסן ווי .input-largeאָדער גלייַכן דיין ינפּוץ צו די גריד זייַל סיזעס ניצן .span*קלאסן.

פאַרשפּאַרן מדרגה ינפּוץ

מאַכן קיין <input>אָדער <textarea>עלעמענט ביכייוו ווי אַ בלאָק מדרגה עלעמענט.

  1. <אינפּוט קלאַס = "אינפּוט-בלאָק-לעוועל" טיפּ = "טעקסט" אָרטהאָלדער = ".ינפּוט-בלאָק-לעוועל" >

קאָרעוו סייזינג

  1. <ינפּוט קלאַס = "אינפּוט-מיני" טיפּ = "טעקסט" אָרטהאָלדער = ".אינפּוט-מיני" >   
  2. <אינפּוט קלאַס = "אינפּוט-קליין" טיפּ = "טעקסט" אָרטהאָלדער = ".אינפּוט-קליין" >   
  3. <אינפּוט קלאַס = "אינפּוט-מיטל" טיפּ = "טעקסט" אָרטהאָלדער = ".ינפּוט-מיטל" >   
  4. <אינפּוט קלאַס = "אַרייַן-גרויס" טיפּ = "טעקסט" אָרטהאָלדער = ".אַרייַנשרייַב-גרויס" >   
  5. <ינפּוט קלאַס = "ינפּוט-קסלאַרגע" טיפּ = "טעקסט" אָרטהאָלדער = ".ינפּוט-קסלאַרגע" >   
  6. <ינפּוט קלאַס = "ינפּוט-קסקסלאַרגע" טיפּ = "טעקסט" אָרטהאָלדער = ".ינפּוט-קססלאַרגע" >

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

גריד סייזינג

ניצן .span1צו .span12פֿאַר ינפּוץ וואָס גלייַכן די זעלבע סיזעס פון די גריד שפאלטן.

  1. <ינפּוט קלאַס = "ספּאַן1" טיפּ = "טעקסט" אָרטהאָלדער = ".ספּאַן1" >   
  2. <אינפּוט קלאַס = "ספּאַן2" טיפּ = "טעקסט" אָרטהאָלדער = ".ספּאַן2" >   
  3. <אינפּוט קלאַס = "ספּאַן3" טיפּ = "טעקסט" אָרטהאָלדער = ".ספּאַן3" >   
  4. <סעלעקטירן קלאַס = "שפּאַן 1" > 
  5.   ...
  6. </סעלעקט>
  7. <סעלעקטירן קלאַס = "ספּאַן2" > 
  8.   ...
  9. </סעלעקט>
  10. <סעלעקטירן קלאַס = "ספּאַן3" > 
  11.   ...
  12. </סעלעקט>

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

  1. <דייוו קלאַס = "קאָנטראָלס" > 
  2.   <אינפּוט קלאַס = "ספּאַן5" טיפּ = "טעקסט" אָרטהאָלדער = ".ספּאַן5" >   
  3. </div>
  4. <div class = "קאָנטראָלס קאָנטראָלס-רודערן" > 
  5.   <ינפּוט קלאַס = "ספּאַן4" טיפּ = "טעקסט" אָרטהאָלדער = ".ספּאַן4" >   
  6.   <ינפּוט קלאַס = "ספּאַן1" טיפּ = "טעקסט" אָרטהאָלדער = ".ספּאַן1" >   
  7. </div>
  8. ...

ונעדיטאַבלע ינפּוץ

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

עטלעכע ווערט דאָ 
  1. <span class = "input-xlarge uneditable-input" > עטלעכע ווערט דאָ </span>

פאָרעם אַקשאַנז

סוף אַ פאָרעם מיט אַ גרופּע פון ​​אַקשאַנז (קנעפּלעך). ווען געשטעלט אין אַ .form-actions, די קנעפּלעך וועט אויטאָמאַטיש ינדענט צו שורה זיך מיט די פאָרעם קאָנטראָלס.

  1. <דייוו קלאַס = "פאָרעם-אַקשאַנז" > 
  2.   <button type = "submit" class = "btn btn-primary" > היט ענדערונגען </button>  
  3.   <button type = "button" class = "btn" > באָטל מאַכן </button>  
  4. </div>

הילף טעקסט

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

ינלינע הילף

ינלינע הילף טעקסט 
  1. <input type = "text" ><span class = "help-inline" > ינלינע הילף טעקסט </span>

פאַרשפּאַרן הילף

א מער בלאָק פון הילף טעקסט וואָס ברייקס אַנטו אַ נייַע שורה און קען פאַרברייטערן אויסער איין שורה. 
  1. <אינפּוט טיפּ = "טעקסט" ><span class = "הילף-בלאָק" > א מער בלאָק פון הילף טעקסט וואָס ברייקס אַנטו אַ נייַע שורה און קען פאַרברייטערן זיך ווייַטער פון איין שורה. </span>

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

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

אַרייַנשרייַב פאָקוס

מיר באַזייַטיקן די פעליקייַט outlineסטיילז אויף עטלעכע פאָרעם קאָנטראָלס און צולייגן אַ box-shadowאין זיין אָרט פֿאַר :focus.

  1. <input class = "input-xlarge" id = "focusedInput" טיפּ = "טעקסט" ווערט = "דאָס איז פאָוקיסט ..." >

אומגילטיגע איינסן

נוסח ינפּוץ דורך פעליקייַט בלעטערער פאַנגקשאַנאַליטי מיט :invalid. ספּעציפיצירן אַ type, לייגן די requiredאַטריביוט אויב די פעלד איז נישט אַפּשאַנאַל, און (אויב אָנווענדלעך) ספּעציפיצירן אַ pattern.

דאָס איז נישט בנימצא אין ווערסיעס פון Internet Explorer 7-9 ווייַל פון פעלן פון שטיצן פֿאַר CSS פּסעוודאָ סעלעקטאָרס.

  1. <אינפּוט קלאַס = "ספּאַן3" טיפּ = "אימייל " פארלאנגט >

פאַרקריפּלט ינפּוץ

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

  1. <input class = "input-xlarge" id = "disabledInput" טיפּ = "טעקסט" אָרטהאָלדער = "פאַרקריפּלט אַרייַנשרייַב דאָ ..." פאַרקריפּלט >

וואַלאַדיישאַן שטאַטן

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

אפשר איז עפעס געפאלן
ביטע פארריכט דעם טעות
נאמען איז גענומען
וווהאָאָ! 
  1. <div class = "קאָנטראָל-גרופּע ווארענונג" > 
  2.   <label class = "control-label" for = "inputWarning" > אַרייַנשרייַב מיט ווארענונג </label>  
  3.   <דייוו קלאַס = "קאָנטראָלס" > 
  4.     <ינפּוט טיפּ = "טעקסט" שייַן = "ינפּוט ווארענונג" >  
  5.     <span class = "help-inline" > עפּעס קען זיין פאַלש </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "קאָנטראָל-גרופּע טעות" > 
  10.   <label class = "control-label" for = "inputError" > אַרייַנשרייַב מיט טעות </label>  
  11.   <דייוו קלאַס = "קאָנטראָלס" > 
  12.     <ינפּוט טיפּ = "טעקסט" שייַן = "ינפּוטטעות" >  
  13.     <span class = "help-inline" > ביטע פארריכט דעם טעות </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div class = "קאָנטראָל-גרופּע אינפֿאָרמאַציע" > 
  18.   <label class = "control-label" for = "inputInfo" > אַרייַנשרייַב מיט אינפֿאָרמאַציע </label>  
  19.   <דייוו קלאַס = "קאָנטראָלס" > 
  20.     <אינפּוט טיפּ = "טעקסט" שייַן = "אינפֿאָרמאַציע" >  
  21.     <span class = "help-inline" > נאמען איז שוין גענומען </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "קאָנטראָל גרופּע הצלחה" > 
  26.   <label class = "control-label" for = "inputSuccess" > אַרייַנשרייַב מיט הצלחה </label>  
  27.   <דייוו קלאַס = "קאָנטראָלס" > 
  28.     <אינפּוט טיפּ = "טעקסט" שייַן = "אינפּוט סאַקסעס" >  
  29.     <span class = "הילף-ינלינע" > וווהאָאָ! </span> 
  30.   </div>
  31. </div>

קנעפּלעך

פעליקייַט קנעפּלעך

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

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

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

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

קנעפּל סיזעס

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

  1. <p>
  2.   <button class = "btn btn-large btn-primary" טיפּ = "קנעפּל" > גרויס קנעפּל </button>  
  3.   <button class = "btn btn-large" טיפּ = "קנעפּל" > גרויס קנעפּל </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" טיפּ = "קנעפּל" > פעליקייַט קנעפּל </button>  
  7.   <button class = "btn" טיפּ = "קנעפּל" > פעליקייַט קנעפּל </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" טיפּ = "קנעפּל" > קליין קנעפּל </button>  
  11.   <button class = "btn btn-small" טיפּ = "קנעפּל" > קליין קנעפּל </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" טיפּ = "קנעפּל" > מיני קנעפּל </button>  
  15.   <button class = "btn btn-mini" טיפּ = "קנעפּל" > מיני קנעפּל </button>  
  16. </p>

שאַפֿן בלאָק מדרגה קנעפּלעך - די וואָס שפּאַן די פול ברייט פון אַ פאָטער - דורך אַדינג .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" טיפּ = "קנעפּל" > בלאָק מדרגה קנעפּל </button>  
  2. <button class = "btn btn-large btn-block" טיפּ = "קנעפּל" > בלאָק מדרגה קנעפּל </button>

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

מאַכן קנעפּלעך קוקן אַנקליקאַבאַל דורך פאַדינג זיי צוריק 50%.

אַנקער עלעמענט

לייג די .disabledקלאַס צו <a>קנעפּלעך.

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

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > ערשטיק לינק </a>  
  2. <a href = "#" class = "btn btn-large פאַרקריפּלט" > לינק </a>

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

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

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

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "פאַרקריפּלט" > ערשטיק קנעפּל </button>   
  2. <קנעפּל טיפּ = "קנעפּל" קלאַס = "בטן בטנ-גרויס" פאַרקריפּלט > קנעפּל </button>

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

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

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

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

בילדער

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

140x140 140x140 140x140 
  1. <img src = "..." class = "img-ראַונדיד" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." קלאַס = "img-polaroid" >

קאָפּ אַרויף! .img-roundedאון .img-circleטאָן ניט אַרבעט אין IE7-8 רעכט צו פעלן פון border-radiusשטיצן.

ייקאַנז דורך גליפיקאָנס

ייקאַן גליפס

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

  • בילדל-גלאז
  • בילדל-מוזיק
  • בילדל-זוכן
  • בילדל-קאָנווערט
  • בילדל-האַרץ
  • בילדל-שטערן
  • בילדל-שטערן-ליידיק
  • בילדל-באַניצער
  • בילדל-פילם
  • בילדל-טה-גרויס
  • בילדל-טה
  • בילדל-טה-רשימה
  • ייקאַן-גוט
  • בילדל-נעם אַוועק
  • בילדל-זאָאָם-אין
  • בילדל-זאָאָם-אויס
  • בילדל-אַוועק
  • בילדל-סיגנאַל
  • בילדל-קאָג
  • בילדל-אָפּפאַל
  • בילדל-היים
  • בילדל-טעקע
  • בילדל-צייט
  • בילדל-וועג
  • 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
  • בילדל-קרייַז-פייַל-אַראָפּ
  • ייקאַן-גלאָבוס
  • בילדל-מוריק
  • בילדל טאַסקס
  • בילדל-פילטער
  • בילדל-שענק
  • בילדל-פוללסקרעען

אַטריביוץ פון גליפיקאָנס

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

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

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

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

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

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

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

ייקאַן ביישפילן

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

קנעפּלעך

קנעפּל גרופּע אין אַ קנעפּל מכשיר
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
דראָפּדאָוון אין אַ קנעפּל גרופּע
באַניצער 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "ייקאַן-באַניצער בילדל-ווייַס" ></i> באַניצער </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "דראָפּדאָוון-מעניו" > 
  5.     <li><a href = "#" ><i class = "ikon-pencil" ></i> רעדאַגירן </a></li>  
  6.     <li><a href = "#" ><i class = "ייקאַן-אָפּפאַל" ></i> ויסמעקן </a></li>  
  7.     <li><a href = "#" ><i class = "ikon-ban-circle" ></i> פאַרבאָט </a></li>  
  8.     <לי קלאַס = "דיווידער" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> מאַכן אַדמין </a></li>  
  10.   </ul>
  11. </div>
קנעפּל סיזעס
שטערן שטערן שטערן 
  1. <a class = "btn btn-large" href = "#" ><i class = "יקאָן-שטערן" ></i> שטערן </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "יקאָן-שטערן" ></i> שטערן </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "יקאָן-שטערן" ></i> שטערן </a>

נאַוויגאַציע

  1. <ul class = "נאַוו נאַוויג��ַציע רשימה" > 
  2.   <li class = "אַקטיוו" ><a href = "#" ><i class = "ייקאַן-היים בילדל-ווייַס" ></i> היים </a></li>   
  3.   <li><a href = "#" ><i class = "יקאָן-בוך" ></i> ביבליאָטעק </a></li>  
  4.   <li><a href = "#" ><i class = "ikon-pencil" ></i> אַפּפּליקאַטיאָנס </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> אנדערש </a></li>  
  6. </ul>

פאָרעם פעלדער

  1. <דייוו קלאַס = "קאָנטראָל-גרופּע" > 
  2.   <label class = "control-label" for = "inputIcon" > בליצפּאָסט אַדרעס </label>  
  3.   <דייוו קלאַס = "קאָנטראָלס" > 
  4.     <דייוו קלאַס = "ינפּוט-פּרעפּענד" > 
  5.       <span class = "add-on" ><i class = "יקאָן קאָנווערט" ></i></span>  
  6.       <ינפּוט קלאַס = "ספּאַן2" שייַן = "ינפּוטיקאָן" טיפּ = "טעקסט" >   
  7.     </div>
  8.   </div>
  9. </div>