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

הרשת הטיפוגרפית כולה מבוססת על שני משתני 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 ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

שימוש בהדגשה

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>ניתן להשתמש בתג:

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

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

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

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

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

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

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. מספר שלם פוסק לפני הלידה. </p>
  <small> מישהו מפורסם </small>
</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.

בשורה

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

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

בלוק בסיסי

השתמש <pre>עבור שורות קוד מרובות. הקפד להפוך את כל הסמלים לתווי ה-unicode שלהם לעיבוד נכון.

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

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

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

Google Pretify

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<table class = "שולחן עם פסים של שולחן עם גבול שולחן מעובה" > 
  ...
</table>

HTML ו-CSS גמישים

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

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

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

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

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

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

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

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

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

עם v2.0, יש לנו ברירות מחדל קלות וחכמות יותר עבור סגנונות טפסים. אין סימון נוסף, רק פקדי טופס.

משקף סגנונות WebKit המוגדרים כברירת מחדל, פשוט הוסף .form-searchעבור שדות חיפוש מעוגלים נוספים.

הכניסות הן ברמת בלוק כדי להתחיל. עבור .form-inlineו .form-horizontal, אנו משתמשים ב-inline-block.

מה נכלל

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

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

ברירות מחדל חדשות עם v2.0

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

מצבי דפדפן שעוצבו מחדש

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

אימות טופס

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

<fieldset
  class = "שגיאת קבוצת בקרה" >
  …
</fieldset>

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

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

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

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

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

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

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

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

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

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

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

עבור עוגנים וצורות

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

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

מספר גדלים

בא לכם על כפתורים גדולים או קטנים יותר? יש בזה!

פעולה ראשית פעולה

פעולה ראשית פעולה

מצב נכה

עבור כפתורים מושבתים, השתמש .btn-disabledעבור קישורים :disabledועבור <button>אלמנטים.

פעולה ראשית פעולה

פעולה ראשית פעולה

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

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

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

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

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

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

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

איך להישתמש

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

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

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

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

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

מקרי שימוש

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

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

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

לְרַעֲנֵן לבדוק לִמְחוֹק

תגובה הגדרות עוד מידע