CSS בסיסי

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

כותרות ועותק גוף

קנה מידה טיפוגרפי

הרשת הטיפוגרפית כולה מבוססת על שני משתני Less בקובץ variables.less שלנו: @baseFontSizeו @baseLineHeight. הראשון הוא גודל הגופן הבסיסי המשמש לכל אורכו והשני הוא גובה קו הבסיס.

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

טקסט גוף לדוגמה

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.

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

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

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

h1. מכוון ל 1

h2. כותרת 2

h3. כותרת 3

h4. כותרת 4

h5. כותרת 5
h6. כותרת 6

הדגשה, כתובת וקיצור

אֵלֵמֶנט נוֹהָג אופציונאלי
<strong> להדגשת קטע טקסט עם חשוב אף אחד
<em> להדגשת קטע טקסט בלחץ אף אחד
<abbr> עוטף קיצורים וראשי תיבות כדי להציג את הגרסה המורחבת על ריחוף

כלול titleתכונה אופציונלית עבור טקסט מורחב

השתמש .initialismבמחלקה עבור קיצורים רישיות.
<address> לפרטי התקשרות של האב הקדמון הקרוב ביותר שלו או לכל גוף העבודה שמור את העיצוב על ידי סיום כל השורות עם<br>

שימוש בהדגשה

Fusce dapibus , tellus ac cursus commodo , Tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

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

כתובות לדוגמה

להלן שתי דוגמאות כיצד <address>ניתן להשתמש בתג:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
שם מלא
[email protected]

קיצורים לדוגמה

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

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

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

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

ציטוטים בלוק

אֵלֵמֶנט נוֹהָג אופציונאלי
<blockquote> אלמנט ברמת הבלוק לציטוט תוכן ממקור אחר

הוסף citeתכונה עבור כתובת האתר של המקור

שימוש .pull-leftושיעורים .pull-rightעבור אפשרויות צפות
<small> רכיב אופציונלי להוספת ציטוט הפונה למשתמש, בדרך כלל מחבר עם שם העבודה מקם את <cite>הכותרת סביב הכותרת או שם המקור

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

כלול אלמנט אופציונלי <small>לציטוט המקור שלך ותקבל מקף em &mdash;לפניו למטרות סטיילינג.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוסק לפני הלידה. </p>
  3. <small> מישהו מפורסם </small>
  4. </blockquote>

ציטוטים לדוגמא

ציטוטים ברירת מחדל מעוצבים כך:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוסק לפני הלידה.

מישהו מפורסם בגוף העבודה

כדי להרחיב את הציטוט שלך ימינה, הוסף class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוסק לפני הלידה.

מישהו מפורסם בגוף העבודה

רשימות

לא מסודר

<ul>

  • 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">

  • 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

הוזמן

<ol>

  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

תיאור

<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.

תיאור אופקי

<dl class="dl-horizontal">

רשימות תיאור
רשימת תיאורים מושלמת להגדרת מונחים.
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.

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

בשורה

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

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

בלוק בסיסי

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

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

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

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

Google Pretify

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

  1. <p> טקסט לדוגמה כאן... </p>
  1. <pre class = "prettyprint
  2. linenums" >
  3. <p>טקסט לדוגמה כאן...</p>
  4. </pre>

הורד את google-code-pretify והצג את ה-readme כיצד להשתמש.

סימון טבלה

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

אפשרויות טבלה

שֵׁם מעמד תיאור
בְּרִירַת מֶחדָל אף אחד אין סגנונות, רק עמודות ושורות
בסיסי .table רק קווים אופקיים בין שורות
גבול .table-bordered מעגל פינות ומוסיף גבול חיצוני
פס זברה .table-striped מוסיף צבע רקע אפור בהיר לשורות אי-זוגיות (1, 3, 5 וכו')
מְעוּבֶּה .table-condensed חותך ריפוד אנכי לשניים, מ-8 פיקסלים ל-4 פיקסלים, בתוך כל האלמנטים tdוהאלמנטיםth

טבלאות לדוגמא

1. ברירת מחדל של סגנונות טבלה

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

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

2. שולחן פסים

תהיו קצת מפוארים עם השולחנות שלכם על ידי הוספת פסי זברה - פשוט הוסף את .table-stripedהכיתה.

הערה: טבלאות פסים משתמשות :nth-childבבורר CSS ואינן זמינות ב-IE7-IE8.

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

3. שולחן עם גבול

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

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

4. שולחן מרוכז

הפוך את השולחנות שלך לקומפקטיים יותר על ידי הוספת .table-condensedהמחלקה כדי לחתוך את ריפוד תאי השולחן לשניים (מ-8 פיקסלים ל-4 פיקסלים).

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

5. שלבו את כולם!

אל תהסס לשלב כל אחת משיעורי השולחן כדי להשיג מראה שונה על ידי שימוש בכל אחת מהשיעורים הזמינים.

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

HTML ו-CSS גמישים

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

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

ארבע פריסות כלולים

Bootstrap מגיע עם תמיכה בארבעה סוגים של פריסות טפסים:

  • אנכי (ברירת מחדל)
  • לחפש
  • בשורה
  • אופקי

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

מצבי בקרה ועוד

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

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

ארבעה סוגי צורות

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

שֵׁם מעמד תיאור
אנכי (ברירת מחדל) .form-vertical (לא דרוש) תוויות מוערמות מיושרות לשמאל מעל פקדים
בשורה .form-inline פקדי תווית מיושרים לשמאל ופקדי בלוק מוטבע לסגנון קומפקטי
לחפש .form-search קלט טקסט מעוגל במיוחד עבור אסתטיקת חיפוש טיפוסית
אופקי .form-horizontal הציף תוויות מיושרות לשמאל באותו קו כמו הפקדים

טפסים לדוגמה באמצעות פקדי טופס בלבד, ללא סימון נוסף

טופס בסיסי

ברירות מחדל חכמות וקלות משקל ללא סימון נוסף.

דוגמה לטקסט עזרה ברמת הבלוק כאן.

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

טופס חיפוש

הוסף .form-searchלטופס .search-queryול- input.

  1. <form class = "well 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 = "well 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>

צורות אופקיות

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

  • קלט טקסט (טקסט, סיסמה, דואר אלקטרוני וכו')
  • תיבת סימון
  • רָדִיוֹ
  • בחר
  • בחירה מרובה
  • קלט קובץ
  • אזור טקסט

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

סימון דוגמה

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

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> טקסט מקרא </legend>
  4. <div class = "קבוצת בקרה" >
  5. <label class = "control-label" for = "input01" > קלט טקסט </label>
  6. <div class = "פקדים" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > טקסט עזרה תומך </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

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

disabledBootstrap כולל סגנונות עבור מצבים ממוקדים נתמכי דפדפן . אנו מסירים את ברירת המחדל של Webkit outlineומחילים a box-shadowבמקומו עבור :focus.


אימות טופס

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

  1. <fieldset
  2. class = "שגיאת קבוצת בקרה" >
  3. </fieldset>
קצת ערך כאן
אולי משהו השתבש
אנא תקן את השגיאה
וואו!
וואו!

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

הוסף והוסף כניסות

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


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

עד גרסה 1.4, Bootstrap דרש סימון נוסף סביב תיבות סימון ומכשירי רדיו כדי לערום אותם. עכשיו, זה עניין פשוט של לחזור על <label class="checkbox">זה שעוטף את <input type="checkbox">.

גם תיבות סימון מוטבעות ומכשירי רדיו נתמכים. פשוט הוסף .inlineלכל .checkboxאו .radioותסיים.


טפסים מוטבעים והוסף/הוסף

כדי להשתמש בהקדמה או בהוספה של קלט בצורה מוטבעת, הקפד למקם את ה- .add-onו inputעל אותה שורה, ללא רווחים.


טקסט עזרה בטופס

כדי להוסיף טקסט עזרה עבור קלט הטופס שלך, כלול טקסט עזרה מוטבע עם <span class="help-inline">או בלוק טקסט עזרה עם <p class="help-block">אחרי רכיב הקלט.

השתמש באותן .span*מחלקות ממערכת הרשת עבור גדלי קלט.

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

@

הנה טקסט עזרה

.00
הנה עוד טקסט עזרה
$ .00

הערה: תוויות מקיפות את כל האפשרויות לאזורי קליקים גדולים בהרבה ולצורה שמישה יותר.

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

כפתורים לפעולות

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

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

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

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

מספר גדלים

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


מצב נכה

עבור כפתורים מושבתים, הוסף את .disabledהמחלקה לקישורים ואת disabledהתכונה עבור <button>אלמנטים.

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

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

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

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

קישור
  1. <a class = "btn" href = "" > קישור </a>
  2. <button class = "btn" type = "submit" >
  3. לַחְצָן
  4. </button>
  5. <input class = "btn" type = "button"
  6. value = "קלט" >
  7. <input class = "btn" type = "submit"
  8. value = "שלח" >

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

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

בנוי כמו ספרייט

במקום להפוך כל אייקון לבקשה נוספת, ריכזנו אותם ל-sprite - חבורה של תמונות בקובץ אחד שמשתמש ב-CSS כדי למקם את התמונות עם background-position. זוהי אותה שיטה בה אנו משתמשים ב-Twitter.com והיא עבדה היטב עבורנו.

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

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

איך להישתמש

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

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

ישנם גם סגנונות זמינים עבור סמלים הפוכים (לבנים), שהוכנו עם מחלקה נוספת אחת:

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

יש 140 כיתות לבחירה עבור הסמלים שלך. פשוט הוסף <i>תג עם הכיתות הנכונות ואתה מוכן. אתה יכול למצוא את הרשימה המלאה ב- sprites.less או ממש כאן במסמך זה.

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

מקרי שימוש

סמלים נהדרים, אבל איפה אפשר להשתמש בהם? הנה כמה רעיונות:

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

בעיקרון, בכל מקום שאתה יכול לשים <i>תג, אתה יכול לשים סמל.

דוגמאות

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