כותרות

כל כותרות HTML, <h1>דרך <h6>זמינות.

h1. מכוון ל 1

h2. כותרת 2

h3. כותרת 3

h4. כותרת 4

h5. כותרת 5

h6. כותרת 6

העתק גוף

ברירת המחדל העולמית של Bootstrap היא font-size14px , עם 20px . זה מוחל על כל הפסקאות. בנוסף, (פסקאות) מקבלים שוליים תחתונים של מחצית מגובה השורה שלהם (10 פיקסלים כברירת מחדל).line-height<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

עותק גוף עופרת

הבלוט פסקה על ידי הוספת .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class = "lead" > ... </p>

נבנה עם פחות

הסולם הטיפוגרפי מבוסס על שני משתנים פחות ב- variables.less : @baseFontSizeו @baseLineHeight. הראשון הוא גודל הגופן הבסיסי המשמש לכל אורכו והשני הוא גובה קו הבסיס. אנו משתמשים במשתנים אלו ובמתמטיקה פשוטה כדי ליצור את השוליים, הריפודים וגבהי הקו של כל הסוג שלנו ועוד. התאם אישית אותם ו-Bootstrap יתאימו.

דָגֵשׁ

השתמש בתגיות ברירת המחדל של HTML עם סגנונות קלים.

`<small>`

לביטול הדגשה מוטבע או בלוקים של טקסט, השתמש בתג הקטן.

שורת טקסט זו אמורה להתייחס כאותיות קטנות.

<p> <small> שורת טקסט זו אמורה להתייחס לאותיות קטנות. </small> </p>

נוֹעָז

להדגשת קטע טקסט עם משקל גופן כבד יותר.

קטע הטקסט הבא מוצג כטקסט מודגש .

<strong> מוצג כטקסט מודגש </strong>

אוֹתִיוֹת מוּטוֹת

להדגשת קטע טקסט עם נטוי.

קטע הטקסט הבא מוצג כטקסט נטוי .

<em> מוצג כטקסט נטוי </em>

שימו לב!אל תהסס להשתמש <b>וב- <i>HTML5. <b>נועד להדגיש מילים או ביטויים מבלי לשדר חשיבות נוספת בעוד <i>הוא מיועד בעיקר לקול, למונחים טכניים וכו'.

שיעורי יישור

יישר מחדש בקלות טקסט לרכיבים עם מחלקות יישור טקסט.

טקסט מיושר לשמאל.

טקסט מיושר למרכז.

טקסט מיושר לימין.

<p class = "text-left" > טקסט מיושר לשמאל. </p> 
<p class = "text-center" > טקסט מיושר למרכז. </p> 
<p class = "text-right" > טקסט מיושר לימין. </p>

שיעורי דגש

העבירו משמעות באמצעות צבע עם קומץ שיעורי דגש.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class = "מושתק" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

קיצורי מילים

הטמעה מסוגננת של <abbr>אלמנט HTML עבור קיצורים וראשי תיבות כדי להציג את הגרסה המורחבת ברחף. לקיצורים עם titleתכונה יש גבול תחתון מנוקד בהיר וסמן עזרה בעת ריחוף, המספקים הקשר נוסף בעת ריחוף.

`<abbr>`

לטקסט מורחב על ריחוף ארוך של קיצור, כלול את titleהתכונה.

קיצור של המילה תכונה הוא attr .

<abbr title = "attribute" > attr </abbr>

`<abbr class="initialism">`

הוסף .initialismלקיצור עבור גודל גופן מעט קטן יותר.

HTML הוא הדבר הטוב ביותר מאז לחם פרוס.

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

כתובות

הצג מידע ליצירת קשר עבור האב הקדמון הקרוב או כל גוף העבודה.

`<address>`

שמור את העיצוב על ידי סיום כל השורות ב- <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

שם מלא
[email protected]

<כתובת>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  San Francisco, CA 94107 <br>
  <abbr title = "טלפון" > P: </abbr> (123) 456-7890 
</address>
 
<כתובת>
  <strong> שם מלא </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</address>

ציטוטים בלוק

לציטוט בלוקים של תוכן ממקור אחר בתוך המסמך שלך.

ציטוט ברירת מחדל

עטוף <blockquote>סביב כל HTML בתור הציטוט. להצעות מחיר ישרות אנו ממליצים על <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוזיותר אנטה.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוזיותר אנטה. </p>
</blockquote>

אפשרויות Blockquote

שינויים בסגנון ותוכן עבור וריאציות פשוטות על ציטוט סטנדרטי.

מתן שם למקור

הוסף <small>תג לזיהוי המקור. עטפו את שם עבודת המקור ב- <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוזיותר אנטה.
מישהו מפורסם בכותרת המקור

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוזיותר אנטה. </p>
  <small> מישהו מפורסם <cite title = "כותרת המקור" > כותרת המקור </cite></small> 
</blockquote>

תצוגות חלופיות

השתמש .pull-rightעבור ציטוט מרחף, מיושר ימינה.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוזיותר אנטה.
מישהו מפורסם בכותרת המקור

<blockquote class = "משוך ימינה" > 
  ...
</blockquote>

רשימות

לא מסודר

רשימה של פריטים שבהם הסדר אינו משנה במפורש.

Lorem ipsum dolor sit amet
Consectetur adipiscing עלית
הוראה שלם במאסה
Facilisis ב-Pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul>
  <li> ... </li>
</ul>

הוזמן

רשימה של פריטים שבהם יש חשיבות מפורשת לסדר.

Lorem ipsum dolor sit amet
Consectetur adipiscing עלית
הוראה שלם במאסה
Facilisis ב-Pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li> ... </li>
</ol>

לא מעוצב

הסר את ברירת המחדל list-styleוהריפוד השמאלי על פריטי רשימה (ילדים מיידיים בלבד).

Lorem ipsum dolor sit amet
Consectetur adipiscing עלית
הוראה שלם במאסה
Facilisis ב-Pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class = "unstyled" > 
  <li> ... </li>
</ul>

בשורה

הנח את כל פריטי הרשימה בשורה אחת עם inline-blockריפוד קל.

לורם איפסום
Phasellus iaculis
Nulla volutpat

<ul class = "inline" > 
  <li> ... </li>
</ul>

תיאור

רשימה של מונחים עם התיאורים המשויכים אליהם.

רשימות תיאורים: רשימת תיאורים מושלמת להגדרת מונחים.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

תיאור אופקי

צור מונחים ותיאורים <dl>בשורה זה לצד זה.

רשימות תיאורים: רשימת תיאורים מושלמת להגדרת מונחים.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class = "dl-horizontal" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

שימו לב!רשימות תיאור אופקיות יקצצו מונחים ארוכים מכדי להתאים לתיקון העמודה השמאלית text-overflow. ביציאות תצוגה צרות יותר, הם ישתנו לפריסת ברירת המחדל הנערמת.

בשורה

עטוף קטעי קוד מוטבעים עם <code>.

לדוגמה, <section>צריך להיות עטוף בתור מוטבע.

לדוגמה , <code > & lt ; סעיף & gt ;</ code > צריך להיות עטוף בתור מוטבע .

בלוק בסיסי

השתמש <pre>עבור שורות קוד מרובות. הקפד לברוח מכל סוגריים זווית בקוד לצורך עיבוד תקין.

<p>טקסט לדוגמה כאן...</p>

<pre>
  <p>טקסט לדוגמה כאן...</p>
</pre>

שימו לב!הקפד לשמור את הקוד בתוך <pre>התגים קרוב ככל האפשר לשמאל; זה יציג את כל הכרטיסיות.

אתה יכול להוסיף את .pre-scrollableהמחלקה באופן אופציונלי שתגדיר גובה מקסימלי של 350 פיקסלים ותספק פס גלילה בציר Y.

סגנונות ברירת מחדל

לעיצוב בסיסי - ריפוד קל ורק חוצצים אופקיים - הוסף את מחלקת הבסיס .tableלכל <table>.

#	שם פרטי	שם משפחה	שם משתמש
1	סימן	אוטוטו	@mdo
2	יעקב	תורנטון	@שמן
3	לארי	הציפור	@טוויטר

<table class = "table" > 
  …
</table>

שיעורים אופציונליים

הוסף כל אחת מהמחלקות הבאות .tableלמחלקה הבסיסית.

`.table-striped`

מוסיף פסי זברה לכל שורת טבלה בתוך בורר <tbody>ה- :nth-childCSS (לא זמין ב-IE7-8).

#	שם פרטי	שם משפחה	שם משתמש
1	סימן	אוטוטו	@mdo
2	יעקב	תורנטון	@שמן
3	לארי	הציפור	@טוויטר

< מחלקה טבלה = "מפוספס שולחן" > 
  …
</table>

`.table-bordered`

הוסף גבולות ופינות מעוגלות לשולחן.

#	שם פרטי	שם משפחה	שם משתמש
1	סימן	אוטוטו	@mdo
1	סימן	אוטוטו	@getbootstrap
2	יעקב	תורנטון	@שמן
3	לארי הציפור		@טוויטר

<table class = "משולבת שולחן" > 
  …
</table>

`.table-hover`

אפשר מצב ריחוף בשורות טבלה בתוך <tbody>.

#	שם פרטי	שם משפחה	שם משתמש
1	סימן	אוטוטו	@mdo
2	יעקב	תורנטון	@שמן
3	לארי הציפור		@טוויטר

<table class = "table table-hover" > 
  …
</table>

`.table-condensed`

הופך את השולחנות לקומפקטי יותר על ידי חיתוך ריפוד התא לשניים.

#	שם פרטי	שם משפחה	שם משתמש
1	סימן	אוטוטו	@mdo
2	יעקב	תורנטון	@שמן
3	לארי הציפור		@טוויטר

< מחלקה טבלה = "ממצה טבלה" > 
  …
</table>

שיעורי שורות אופציונליים

השתמש במחלקות הקשריות כדי לצבוע שורות בטבלה.

מעמד	תיאור
`.success`	מעיד על פעולה מוצלחת או חיובית.
`.error`	מציין פעולה מסוכנת או שעלולה להיות שלילית.
`.warning`	מציין אזהרה שעשויה להזדקק להתייחסות.
`.info`	משמש כחלופה לסגנונות ברירת המחדל.

#	מוצר	תשלום נלקח	סטָטוּס
1	שחפת - חודשית	01/04/2012	אושר
2	שחפת - חודשית	02/04/2012	נדחה
3	שחפת - חודשית	03/04/2012	ממתין ל
4	שחפת - חודשית	04/04/2012	התקשר לאשר

...
  < tr class = "הצלחה" >
    <td> 1 < /td>
    <td>TB - חודשי</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>אושר</ td >
  </ tr >
...

סימון טבלה נתמך

רשימה של רכיבי HTML נתמכים בטבלה וכיצד יש להשתמש בהם.

תָג	תיאור
`<table>`	אלמנט גלישה להצגת נתונים בפורמט טבלאי
`<thead>`	רכיב מיכל עבור שורות כותרות טבלה ( `<tr>`) לתיוג עמודות טבלה
`<tbody>`	רכיב מיכל עבור שורות טבלה ( `<tr>`) בגוף הטבלה
`<tr>`	רכיב מכיל עבור קבוצה של תאי טבלה ( `<td>`או `<th>`) המופיעים בשורה אחת
`<td>`	תא ברירת מחדל בטבלה
`<th>`	תא טבלה מיוחד עבור תוויות עמודות (או שורה, בהתאם להיקף ולמיקום).
`<caption>`	תיאור או סיכום של מה הטבלה מכילה, שימושי במיוחד עבור קוראי מסך

<טבלה>
  <caption> ... </caption>
  <thead>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

סגנונות ברירת מחדל

פקדי טפסים בודדים מקבלים סגנון, אך ללא כל דרגת בסיס נדרשת על <form>השינויים הגדולים בסימון. תוצאות מוערמות של תוויות מיושרות לשמאל על גבי פקדי הטפסים.

<טופס>
  <fieldset>
    <legend> מקרא </legend>
    <label> שם תווית </label>
    <input type = "text" placeholder = "הקלד משהו..." >  
    <span class = "help-block" > דוגמה לטקסט עזרה ברמת הבלוק כאן. </span> 
    <label class = "checkbox" > 
      <input type = "checkbox" > בדוק אותי 
    </label>
    <button type = "submit" class = "btn" > שלח </button>  
  </fieldset>
</form>

פריסות אופציונליות

כלול ב-Bootstrap שלוש פריסות טפסים אופציונליות למקרי שימוש נפוצים.

טופס חיפוש

הוסף .form-searchלטופס ואל .search-queryלקלט <input>טקסט מעוגל במיוחד.

<form class = "form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > חיפוש </button>  
</form>

טופס מוטבע

הוסף .form-inlineעבור תוויות מיושרות לשמאל ובקרות בלוק מוטבע לפריסה קומפקטית.

<form class = "form-inline" > 
  <input type = "text" class = "input-small" מציין מיקום = "אימייל" >   
  <input type = "password" class = "input-small" מציין מיקום = "סיסמה" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > זכור אותי 
  </label>
  <button type = "submit" class = "btn" > היכנס </button>  
</form>

צורה אופקית

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

הוסף .form-horizontalלטופס
עטוף בתוכו תוויות ופקדים.control-group
הוסף .control-labelלתווית
עטוף את כל הפקדים הקשורים פנימה .controlsלצורך יישור נכון

<form class = "form-horizontal" > 
  <div class = "קבוצת בקרה" > 
    <label class = "control-label" for = "inputEmail" > דוא"ל </label>  
    <div class = "פקדים" > 
      <input type = "text" id = "inputEmail" מציין מיקום = "אימייל" >   
    </div>
  </div>
  <div class = "קבוצת בקרה" > 
    <label class = "control-label" for = "inputPassword" > סיסמה </label>  
    <div class = "פקדים" > 
      <input type = "password" id = "inputPassword" מציין מיקום = "סיסמה" >   
    </div>
  </div>
  <div class = "קבוצת בקרה" > 
    <div class = "פקדים" > 
      <label class = "checkbox" > 
        <input type = "checkbox" > זכור אותי 
      </label>
      <button type = "submit" class = "btn" > היכנס </button>  
    </div>
  </div>
</form>

פקדי טפסים נתמכים

דוגמאות לפקדי טופס סטנדרטיים הנתמכים בפריסת טופס לדוגמה.

תשומות

בקרת הטפסים הנפוצה ביותר, שדות קלט מבוססי טקסט. כולל תמיכה בכל סוגי HTML5: טקסט, סיסמה, תאריך שעה, תאריך ושעה-מקומי, תאריך, חודש, שעה, שבוע, מספר, דואר אלקטרוני, כתובת אתר, חיפוש, טלפון וצבע.

מחייב שימוש בנתון שצוין typeבכל עת.

<input type = "text" placeholder = "קלט טקסט" >

Textarea

בקרת טופס התומך במספר שורות טקסט. שנה rowsתכונה לפי הצורך.

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

תיבות סימון ומכשירי רדיו

תיבות סימון מיועדות לבחירת אפשרות אחת או מספר אפשרויות ברשימה ואילו מכשירי רדיו מיועדים לבחירת אפשרות אחת מתוך רבות.

ברירת מחדל (ערימה)

<label class = "checkbox" > 
  <input type = "checkbox" value = "" >  
  אפשרות ראשונה היא זה וזה - הקפד לכלול למה זה נהדר
</label>
 
<label class = "radio" > 
  < type input = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" מסומן >     
  אפשרות ראשונה היא זה וזה - הקפד לכלול למה זה נהדר
</label>
<label class = "radio" > 
  < type input = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  אפשרות שניה יכולה להיות משהו אחר ובחירה בה תבטל את הבחירה באפשרות אחת
</label>

תיבות סימון מוטבעות

הוסף את .inlineהכיתה לסדרה של תיבות סימון או מכשירי רדיו כדי שפקדים יופיעו באותה שורה.

<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
</label>

בוחר

השתמש באפשרות ברירת המחדל או ציין multiple="multiple"כדי להציג אפשרויות מרובות בו-זמנית.

<בחר>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
<בחר מרובה = "מרובה" > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>

הרחבת בקרות טפסים

הוספה על פקדי הדפדפן הקיימים, Bootstrap כוללת רכיבי טופס שימושיים אחרים.

כניסות מוכנות ומצורפות

הוסף טקסט או לחצנים לפני או אחרי כל קלט מבוסס טקסט. שים לב selectשאלמנטים אינם נתמכים כאן.

אפשרויות ברירת מחדל

עטוף את המחלקה .add-onואת inputאחת משתי מחלקות כדי להוסיף או להוסיף טקסט לקלט.

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput " type = "text" placeholder = "שם משתמש" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput" type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

מְשׁוּלָב

השתמש גם במחלקות וגם בשני מופעים של .add-onכדי להוסיף ולהוסיף קלט.

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput" type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

כפתורים במקום טקסט

במקום <span>עם טקסט, השתמש ב- .btnכדי לצרף כפתור (או שניים) לקלט.

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton" type = "text" >   
  <button class = "btn" type = "button" > קדימה! </button>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons" type = "text" >   
  <button class = "btn" type = "button" > חיפוש </button>  
  <button class = "btn" type = "button" > אפשרויות </button>  
</div>

כפתורים נפתחים

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton" type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      פעולה
      <span class = "caret" ></span> 
    </button>
    <ul class = "תפריט נפתח" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      פעולה
      <span class = "caret" ></span> 
    </button>
    <ul class = "תפריט נפתח" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton " type = "text" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      פעולה
      <span class = "caret" ></span> 
    </button>
    <ul class = "תפריט נפתח" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton" type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      פעולה
      <span class = "caret" ></span> 
    </button>
    <ul class = "תפריט נפתח" > 
      ...
    </ul>
  </div>
</div>

קבוצות נפתחות מפולחות

<טופס>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    < סוג קלט = "טקסט" > 
  </div>
  <div class = "input-append" > 
    < סוג קלט = "טקסט" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

טופס חיפוש

<form class = "form-search" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > חיפוש </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > חיפוש </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</form>

שליטה בגודל

השתמש במחלקות גודל יחסי כמו .input-largeאו התאם את התשומות שלך לגדלים של עמודות הרשת באמצעות .span*מחלקות.

כניסות ברמת בלוק

לגרום לכל אלמנט <input>או <textarea>אלמנט להתנהג כמו אלמנט ברמת בלוק.

<input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

גודל יחסי

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

שימו לב!בגרסאות עתידיות, נשנה את השימוש במחלקות הקלט היחסיות הללו כדי להתאים לגדלי הכפתורים שלנו. לדוגמה, .input-largeיגדיל את הריפוד ואת גודל הגופן של קלט.

גודל רשת

השתמש ב- .span1כדי .span12לקלט התואמים את אותם גדלים של עמודות הרשת.

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
<select class = "span1" > 
  ...
</select>
<select class = "span2" > 
  ...
</select>
<select class = "span3" > 
  ...
</select>

עבור כניסות רשת מרובות בכל שורה, השתמש .controls-rowבמחלקת השינוי למרווח מתאים . זה מרחף את הכניסות כדי למוטט את הרווח הלבן, מגדיר את השוליים המתאימים ומנקה את הציפה.

<div class = "פקדים" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "controls controls-row" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

כניסות בלתי ניתנות לעריכה

הצג נתונים בטופס שאינו ניתן לעריכה ללא שימוש בסימון טופס בפועל.

<span class = "input-xlarge uneditable-input" > ערך מסוים כאן </span>

טופס פעולות

סיים טופס בקבוצת פעולות (כפתורים). כאשר הלחצנים ממוקמים בתוך .form-actions, הלחצנים ייכנסו באופן אוטומטי כדי ליישר קו עם פקדי הטופס.

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > שמור שינויים </button>  
  <button type = "button" class = "btn" > בטל </button>  
</div>

טקסט עזרה

תמיכה בשורה וברמת חסימה עבור טקסט עזרה המופיע סביב פקדי טופס.

עזרה מוטבעת

<input type = "text" ><span class = "help-inline" > טקסט עזרה מוטבע </span>

חסום עזרה

<input type = "text" ><span class = "help-block" > בלוק ארוך יותר של טקסט עזרה שמתפרץ לשורה חדשה ועשוי לעבור מעבר לשורה אחת. </span>

מצבי בקרת טופס

ספק משוב למשתמשים או מבקרים עם מצבי משוב בסיסיים על בקרי טפסים ותוויות.

מיקוד קלט

אנו מסירים את outlineסגנונות ברירת המחדל בפקדי טופס מסוימים ומחילים box-shadowבמקומו a עבור :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "זה ממוקד..." >

קלט לא חוקי

כניסות סגנון באמצעות פונקציונליות ברירת המחדל של דפדפן עם :invalid. ציין type, הוסף את requiredהתכונה אם השדה אינו אופציונלי, ו(אם רלוונטי) ציין pattern.

זה אינו זמין בגירסאות של Internet Explorer 7-9 עקב חוסר תמיכה בבוררי פסאודו של CSS.

<input class = "span3" type = "email" required >

כניסות מושבתות

הוסף את disabledהתכונה בקלט כדי למנוע קלט משתמש ולהפעיל מראה מעט שונה.

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "הקלט כאן מושבת..." מושבת >

מצבי אימות

Bootstrap כולל סגנונות אימות להודעות שגיאה, אזהרה, מידע והצלחה. כדי להשתמש, הוסף את המחלקה המתאימה לסביבה .control-group.

<div class = "אזהרת קבוצת בקרה" > 
  <label class = "control-label" for = "inputWarning" > קלט עם אזהרה </label>  
  <div class = "פקדים" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > ייתכן שמשהו השתבש </span> 
  </div>
</div>
 
<div class = "שגיאת קבוצת בקרה" > 
  <label class = "control-label" for = "inputError" > קלט עם שגיאה </label>  
  <div class = "פקדים" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > תקן את השגיאה </span> 
  </div>
</div>
 
<div class = "מידע על קבוצת בקרה" > 
  <label class = "control-label" for = "inputInfo" > קלט עם מידע </label>  
  <div class = "פקדים" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > שם המשתמש כבר תפוס </span> 
  </div>
</div>
 
<div class = "הצלחה של קבוצת בקרה" > 
  <label class = "control-label" for = "inputSuccess" > קלט בהצלחה </label>  
  <div class = "פקדים" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > וואו! </span> 
  </div>
</div>

לחצני ברירת מחדל

ניתן להחיל סגנונות כפתורים על כל דבר .btnכשהמחלקה מיושמת. עם זאת, בדרך כלל תרצה להחיל אותם רק על אלמנטים <a>ורכיבים <button>לעיבוד הטוב ביותר.

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

תאימות בין דפדפנים

IE9 לא חותך מעברי רקע בפינות מעוגלות, אז אנחנו מסירים אותו. קשור, IE9 דוחף buttonאלמנטים מושבתים, והופך את הטקסט לאפור עם צל טקסט מגעיל שאיננו יכולים לתקן.

גדלי כפתורים

בא לכם על כפתורים גדולים או קטנים יותר? הוסף .btn-large, .btn-small, או .btn-miniלגדלים נוספים.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > לחצן גדול </button>  
  <button class = "btn btn-large" type = "button" > לחצן גדול </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > לחצן ברירת מחדל </button>  
  <button class = "btn" type = "button" > לחצן ברירת מחדל </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > לחצן קטן </button>  
  <button class = "btn btn-small" type = "button" > לחצן קטן </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > לחצן מיני </button>  
  <button class = "btn btn-mini" type = "button" > לחצן מיני </button>  
</p>

צור לחצנים ברמת הבלוק - אלה המשתרעים על כל הרוחב של הורה - על ידי הוספת .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > לחצן רמת חסימה </button>  
<button class = "btn btn-large btn-block" type = "button" > לחצן רמת בלוק </button>

מצב נכה

גרמו ללחצנים להיראות בלתי ניתנים ללחיצה על ידי דהייתם לאחור ב-50%.

אלמנט עוגן

הוסף את .disabledהכיתה <a>לכפתורים.

קישור ראשי קישור

<a href = "#" class = "btn btn-large btn-primary disabled" > קישור ראשי </a>  
<a href = "#" class = "btn btn-large disabled" > קישור </a>

שימו לב!אנו משתמשים .disabledכאן כמחלקת עזר, בדומה .activeלמחלקה הנפוצה, כך שאין צורך בקידומת. כמו כן, שיעור זה מיועד רק לאסתטיקה; עליך להשתמש ב-JavaScript מותאם אישית כדי להשבית קישורים כאן.

אלמנט כפתור

הוסף את disabledהתכונה <button>ללחצנים.

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > לחצן ראשי </button>   
<button type = "button" class = "btn btn-large" מושבת > לחצן </button>

מחלקה אחת, מספר תגים

השתמש .btnבכיתה על <a>, <button>, או <input>אלמנט.

<a class = "btn" href = "" > קישור </a>  
<button class = "btn" type = "submit" > לחצן </button>  
<input class = "btn" type = "button" value = "Input" >   
<input class = "btn" type = "submit" value = "Submit" >

כשיטת עבודה מומלצת, נסה להתאים את האלמנט להקשר שלך כדי להבטיח התאמה בין דפדפנים. אם יש לך input, השתמש <input type="submit">בכפתור שלך.

הוסף שיעורים <img>לאלמנט כדי לעצב בקלות תמונות בכל פרויקט.

<img src = "..." class = "img-rounded" >  
<img src = "..." class = "img-circle" >  
<img src = "..." class = "img-polaroid" >

שימו לב! .img-roundedואינם .img-circleעובדים ב-IE7-8 עקב חוסר border-radiusתמיכה.

גליפים של סמלים

140 אייקונים בצורת ספרייט, זמינים באפור כהה (ברירת מחדל) ולבן, מסופקים על ידי Glyphicons .

אייקון-זכוכית
אייקון-מוזיקה
אייקונים-חיפוש
סמל-מעטפה
אייקון-לב
אייקון-כוכב
סמל-כוכב-ריק
סמל-משתמש
אייקון-סרט
סמל-th-גדול
סמל-ה
סמל הרשימה
סמל-בסדר
סמל-הסר
סמל-זום-אין
סמל-זום-אאוט
סמל כבוי
סמל-אות
אייקון-גלגל שיניים
אייקון-אשפה
אייקון-בית
קובץ סמל
סמל-זמן
אייקון-כביש
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-facetime-video
אייקון-תמונה
אייקון-עיפרון
icon-map-marker
סמל-התאם
סמל-גוון
סמל-עריכה
שיתוף אייקונים
בדיקת סמלים
icon-move
אייקון-צעד-אחורה
סמל-מהיר-אחורה
סמל לאחור
סמל-משחק
סמל-השהייה
icon-stop
סמל קדימה
אייקון-מהיר קדימה
אייקון-צעד-קדימה
סמל-הוצאה
אייקון-שברון-שמאל
אייקון-שברון-ימין
סמל-פלוס-סימן
סמל-מינוס-סימן
סמל-הסר-סימן
סמל-אישור-סימן
אייקון-שאלה-סימן
סמל-מידע-סימן
צילום מסך
סמל-הסר-מעגל
סמל-אישור-מעגל
מעגל-אייקון
סמל-חץ-שמאלה
סמל-חץ-ימינה
סמל-חץ למעלה
סמל-חץ למטה
icon-share-alt
סמל-שנה גודל-מלא
סמל-שנה גודל-קטן
סמל פלוס
אייקון-מינוס
סמל-כוכבית
סמל-קריאה-סימן
אייקון-מתנה
אייקון-עלה
אייקון-אש
סמל-פקוח עיניים
סמל-עין-קרוב
סמל-אזהרה-סימן
אייקון-מטוס
סמל-לוח שנה
סמל אקראי
סמל-תגובה
אייקון-מגנט
אייקון-שברון-אפ
אייקון-שברון-מטה
אייקון-ציוץ מחדש
אייקון-עגלת קניות
סמל-תיקיה-סגור
סמל-תיקיה-פתוח
סמל-שינוי גודל-אנכי
סמל-שינוי גודל-אופקי
סמל-hdd
אייקון-שורר
סמל-פעמון
סמל-תעודה
סמל-אגודל למעלה
סמל-אגודל-למטה
אייקון-יד-ימין
סמל-יד-שמאל
סמל-יד למעלה
סמל-יד למטה
סמל-מעגל-חץ-ימינה
סמל-מעגל-חץ-שמאלה
סמל-מעגל-חץ למעלה
סמל-מעגל-חץ למטה
אייקון-גלובוס
סמל-ברגים
סמל-משימות
סמל-מסנן
סמל-תיק
סמל-מסך מלא

ייחוס גליפיקונים

Glyphicons Halflings בדרך כלל אינם זמינים בחינם, אך הסדר בין Bootstrap ליוצרי Glyphicons איפשר זאת ללא עלות עבורכם כמפתחים. כתודה, אנו מבקשים ממך לכלול קישור אופציונלי חזרה ל- Glyphicons בכל עת מעשי.

איך להישתמש

כל הסמלים דורשים <i>תג עם מחלקה ייחודית, עם קידומת icon-. כדי להשתמש, מקם את הקוד הבא כמעט בכל מקום:

<i class = "icon-search" ></i>

ישנם גם סגנונות זמינים עבור סמלים הפוכים (לבנים), שהוכנו עם מחלקה נוספת אחת. אנו נאכף באופן ספציפי מחלקה זו על מצבי ריחוף ופעילים עבור קישורי ניווט ותפריט נפתח.

<i class = "icon-search icon-white" ></i>

שימו לב!בעת שימוש לצד מחרוזות של טקסט, כמו בכפתורים או קישורי ניווט, הקפד להשאיר רווח אחרי <i>התג לרווח מתאים.

דוגמאות לסמלים

השתמש בהם בלחצנים, קבוצות לחצנים עבור סרגל כלים, ניווט, או קלט טפסים מוכנים.

כפתורים

קבוצת כפתורים בסרגל כלים של כפתורים

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

תפריט נפתח בקבוצת כפתורים

מִשׁתַמֵשׁ

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> משתמש </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "תפריט נפתח" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> ערוך </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> מחק </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> חסום </a></li>  
    <li class = "מחלק" ></li> 
    <li><a href = "#" ><i class = "i" ></i> הפוך למנהל </a></li>  
  </ul>
</div>

גדלי כפתורים

כוכב כוכב כוכב

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> כוכב </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> כוכב </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> כוכב </a>

ניווט

<ul class = "nav nav-list" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> דף הבית </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> ספריה </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> יישומים </a></li>  
  <li><a href = "#" ><i class = "i" ></i> שונות </a></li>  
</ul>

שדות טופס

<div class = "קבוצת בקרה" > 
  <label class = "control-label" for = "inputIcon" > כתובת דואר אלקטרוני </label>  
  <div class = "פקדים" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

טיפוגרפיה

כותרות

h1. מכוון ל 1

h2. כותרת 2

h3. כותרת 3

h4. כותרת 4

h5. כותרת 5

h6. כותרת 6

העתק גוף

עותק גוף עופרת

נבנה עם פחות

דָגֵשׁ

<small>

נוֹעָז

אוֹתִיוֹת מוּטוֹת

שיעורי יישור

שיעורי דגש

קיצורי מילים

<abbr>

<abbr class="initialism">

כתובות

<address>

ציטוטים בלוק

ציטוט ברירת מחדל

אפשרויות Blockquote

מתן שם למקור

תצוגות חלופיות

רשימות

לא מסודר

הוזמן

לא מעוצב

בשורה

תיאור

תיאור אופקי

קוד

בשורה

בלוק בסיסי

טבלאות

סגנונות ברירת מחדל

שיעורים אופציונליים

.table-striped

.table-bordered

.table-hover

.table-condensed

שיעורי שורות אופציונליים

סימון טבלה נתמך

טפסים

סגנונות ברירת מחדל

פריסות אופציונליות

טופס חיפוש

טופס מוטבע

צורה אופקית

פקדי טפסים נתמכים

תשומות

Textarea

תיבות סימון ומכשירי רדיו

ברירת מחדל (ערימה)

תיבות סימון מוטבעות

בוחר

הרחבת בקרות טפסים

כניסות מוכנות ומצורפות

אפשרויות ברירת מחדל

מְשׁוּלָב

כפתורים במקום טקסט

כפתורים נפתחים

קבוצות נפתחות מפולחות

טופס חיפוש

שליטה בגודל

כניסות ברמת בלוק

גודל יחסי

גודל רשת

כניסות בלתי ניתנות לעריכה

טופס פעולות

טקסט עזרה

עזרה מוטבעת

חסום עזרה

מצבי בקרת טופס

מיקוד קלט

קלט לא חוקי

כניסות מושבתות

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`