CSS בסיסי

רכיבי HTML בסיסיים מעוצבים ומשופרים עם מחלקות הניתנות להרחבה.

כותרות

כל כותרות ה-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>הוא מיועד בעיקר לקול, למונחים טכניים וכו'.

שיעורי יישור

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

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

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

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

  1. <p class = "text-left" > טקסט מיושר לשמאל. </p>
  2. <p class = "text-center" > טקסט מיושר למרכז. </p>
  3. <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.

  1. <p class = "מושתק" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p>
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p>
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p>
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p>
  5. <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]
  1. <כתובת>
  2. <strong> Twitter, Inc. </strong><br>
  3. 795 Folsom Ave, Suite 600 <br>
  4. San Francisco, CA 94107 <br>
  5. <abbr title = "טלפון" > P: </abbr> (123) 456-7890
  6. </address>
  7.  
  8. <כתובת>
  9. <strong> שם מלא </strong><br>
  10. <a href = "mailto:#" > [email protected] </a>
  11. </address>

ציטוטים בלוק

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

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

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

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

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

אפשרויות Blockquote

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

מתן שם למקור

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

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

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

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

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

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

מישהו מפורסם בכותרת המקור
  1. <blockquote class = "pull-right" >
  2. ...
  3. </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
  1. <ul>
  2. <li> ... </li>
  3. </ul>

הוזמן

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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing עלית
  3. הוראה שלם במאסה
  4. Facilisis ב-Pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2. <li> ... </li>
  3. </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
  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.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
  1. <dl>
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </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.
  1. <dl class = "dl-horizontal" >
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </dl>

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

בשורה

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

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

בלוק בסיסי

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

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

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

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

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

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

# שם פרטי שם משפחה שם משתמש
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
  1. <table class = "table" >
  2. </table>

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

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

.table-striped

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

# שם פרטי שם משפחה שם משתמש
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
  1. < מחלקה טבלה = "מפוספס שולחן" >
  2. </table>

.table-bordered

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

# שם פרטי שם משפחה שם משתמש
1 סימן אוטוטו @mdo
סימן אוטוטו @getbootstrap
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
  1. <table class = "משולבת שולחן" >
  2. </table>

.table-hover

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

# שם פרטי שם משפחה שם משתמש
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
  1. <table class = "table table-hover" >
  2. </table>

.table-condensed

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

# שם פרטי שם משפחה שם משתמש
1 סימן אוטוטו @mdo
2 יעקב תורנטון @שמן
3 לארי הציפור @טוויטר
  1. < מחלקה טבלה = "ממצה טבלה" >
  2. </table>

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

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

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

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

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

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

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

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

אגדה דוגמה לטקסט עזרה ברמת הבלוק כאן.
  1. <טופס>
  2. <fieldset>
  3. <legend> מקרא </legend>
  4. <label> שם תווית </label>
  5. <input type = "text" placeholder = "הקלד משהו..." >
  6. <span class = "help-block" > דוגמה לטקסט עזרה ברמת הבלוק כאן. </span>
  7. <label class = "checkbox" >
  8. <input type = "checkbox" > בדוק אותי
  9. </label>
  10. <button type = "submit" class = "btn" > שלח </button>
  11. </fieldset>
  12. </form>

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

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

טופס חיפוש

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

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

טופס מוטבע

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

  1. <form class = "form-inline" >
  2. <input type = "text" class = "input-small" מציין מיקום = "אימייל" >
  3. <input type = "password" class = "input-small" מציין מיקום = "סיסמה" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > זכור אותי
  6. </label>
  7. <button type = "submit" class = "btn" > היכנס </button>
  8. </form>

צורה אופקית

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

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

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

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

תשומות

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

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

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

Textarea

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

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

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

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

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


  1. <label class = "checkbox" >
  2. <input type = "checkbox" value = "" >
  3. אפשרות ראשונה היא זה וזה - הקפד לכלול למה זה נהדר
  4. </label>
  5.  
  6. <label class = "radio" >
  7. < type input = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" מסומן >
  8. אפשרות ראשונה היא זה וזה - הקפד לכלול למה זה נהדר
  9. </label>
  10. <label class = "radio" >
  11. < type input = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >
  12. אפשרות שניה יכולה להיות משהו אחר ובחירה בה תבטל את הבחירה באפשרות אחת
  13. </label>

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

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

  1. <label class = "checkbox inline" >
  2. <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1
  3. </label>
  4. <label class = "checkbox inline" >
  5. <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2
  6. </label>
  7. <label class = "checkbox inline" >
  8. <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3
  9. </label>

בוחר

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


  1. <בחר>
  2. <option> 1 </option>
  3. <option> 2 </option>
  4. <option> 3 </option>
  5. <option> 4 </option>
  6. <option> 5 </option>
  7. </select>
  8.  
  9. <בחר מרובה = "מרובה" >
  10. <option> 1 </option>
  11. <option> 2 </option>
  12. <option> 3 </option>
  13. <option> 4 </option>
  14. <option> 5 </option>
  15. </select>

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

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

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

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

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

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

@

.00
  1. <div class = "input-prepend" >
  2. <span class = "add-on" > @ </span>
  3. <input class = "span2" id = "prependedInput " type = "text" placeholder = "שם משתמש" >
  4. </div>
  5. <div class = "input-append" >
  6. <input class = "span2" id = "appendedInput" type = "text" >
  7. <span class = "add-on" > .00 </span>
  8. </div>

מְשׁוּלָב

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

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

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

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

  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedInputButton" type = "text" >
  3. <button class = "btn" type = "button" > קדימה! </button>
  4. </div>
  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedInputButtons" type = "text" >
  3. <button class = "btn" type = "button" > חיפוש </button>
  4. <button class = "btn" type = "button" > אפשרויות </button>
  5. </div>

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

  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedDropdownButton" type = "text" >
  3. <div class = "btn-group" >
  4. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  5. פעולה
  6. <span class = "caret" ></span>
  7. </button>
  8. <ul class = "תפריט נפתח" >
  9. ...
  10. </ul>
  11. </div>
  12. </div>
  1. <div class = "input-prepend" >
  2. <div class = "btn-group" >
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. פעולה
  5. <span class = "caret" ></span>
  6. </button>
  7. <ul class = "תפריט נפתח" >
  8. ...
  9. </ul>
  10. </div>
  11. <input class = "span2" id = "prependedDropdownButton " type = "text" >
  12. </div>
  1. <div class = "input-prepend input-append" >
  2. <div class = "btn-group" >
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. פעולה
  5. <span class = "caret" ></span>
  6. </button>
  7. <ul class = "תפריט נפתח" >
  8. ...
  9. </ul>
  10. </div>
  11. <input class = "span2" id = "appendedPrependedDropdownButton" type = "text" >
  12. <div class = "btn-group" >
  13. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  14. פעולה
  15. <span class = "caret" ></span>
  16. </button>
  17. <ul class = "תפריט נפתח" >
  18. ...
  19. </ul>
  20. </div>
  21. </div>

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

  1. <טופס>
  2. <div class = "input-prepend" >
  3. <div class = "btn-group" > ... </div>
  4. < סוג קלט = "טקסט" >
  5. </div>
  6. <div class = "input-append" >
  7. < סוג קלט = "טקסט" >
  8. <div class = "btn-group" > ... </div>
  9. </div>
  10. </form>

טופס חיפוש

  1. <form class = "form-search" >
  2. <div class = "input-append" >
  3. <input type = "text" class = "span2 search-query" >
  4. <button type = "submit" class = "btn" > חיפוש </button>
  5. </div>
  6. <div class = "input-prepend" >
  7. <button type = "submit" class = "btn" > חיפוש </button>
  8. <input type = "text" class = "span2 search-query" >
  9. </div>
  10. </form>

שליטה בגודל

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

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

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

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

גודל יחסי

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >
  3. <קלט class = "input-medium" type = "text" placeholder = ".input-medium" >
  4. <קלט class = "input-large" type = "text" placeholder = ".input-large" >
  5. <קלט class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >
  6. < מעמד קלט = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

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

גודל רשת

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

  1. <input class = "span1" type = "text" placeholder = ".span1" >
  2. <input class = "span2" type = "text" placeholder = ".span2" >
  3. <input class = "span3" type = "text" placeholder = ".span3" >
  4. <select class = "span1" >
  5. ...
  6. </select>
  7. <select class = "span2" >
  8. ...
  9. </select>
  10. <select class = "span3" >
  11. ...
  12. </select>

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

  1. <div class = "פקדים" >
  2. <input class = "span5" type = "text" placeholder = ".span5" >
  3. </div>
  4. <div class = "controls controls-row" >
  5. <input class = "span4" type = "text" placeholder = ".span4" >
  6. <input class = "span1" type = "text" placeholder = ".span1" >
  7. </div>
  8. ...

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

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

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

טופס פעולות

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

  1. <div class = "form-actions" >
  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. <input type = "text" ><span class = "help-block" > בלוק ארוך יותר של טקסט עזרה שמתפרץ לשורה חדשה ועשוי לעבור מעבר לשורה אחת. </span>

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

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

מיקוד קלט

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

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

קלט לא חוקי

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

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

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

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

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

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

מצבי אימות

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

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

  1. <p>
  2. <button class = "btn btn-large btn-primary" type = "button" > לחצן גדול </button>
  3. <button class = "btn btn-large" type = "button" > לחצן גדול </button>
  4. </p>
  5. <p>
  6. <button class = "btn btn-primary" type = "button" > לחצן ברירת מחדל </button>
  7. <button class = "btn" type = "button" > לחצן ברירת מחדל </button>
  8. </p>
  9. <p>
  10. <button class = "btn btn-small btn-primary" type = "button" > לחצן קטן </button>
  11. <button class = "btn btn-small" type = "button" > לחצן קטן </button>
  12. </p>
  13. <p>
  14. <button class = "btn btn-mini btn-primary" type = "button" > לחצן מיני </button>
  15. <button class = "btn btn-mini" type = "button" > לחצן מיני </button>
  16. </p>

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

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

מצב נכה

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

אלמנט עוגן

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

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

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

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

אלמנט כפתור

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

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

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

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

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

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

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

140x140 140x140 140x140
  1. <img src = "..." class = "img-rounded" >
  2. <img src = "..." class = "img-circle" >
  3. <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-. כדי להשתמש, מקם את הקוד הבא כמעט בכל מקום:

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

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

  1. <i class = "icon-search icon-white" ></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 = "icon-user icon-white" ></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 = "icon-pencil" ></i> ערוך </a></li>
  6. <li><a href = "#" ><i class = "icon-trash" ></i> מחק </a></li>
  7. <li><a href = "#" ><i class = "icon-ban-circle" ></i> חסום </a></li>
  8. <li class = "מחלק" ></li>
  9. <li><a href = "#" ><i class = "i" ></i> הפוך למנהל </a></li>
  10. </ul>
  11. </div>
גדלי כפתורים
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> כוכב </a>
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> כוכב </a>
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> כוכב </a>

ניווט

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

שדות טפסים

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