נוסף על הפיגומים, רכיבי 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 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.
| אֵלֵמֶנט | נוֹהָג | אופציונאלי |
|---|---|---|
<strong> |
להדגשת קטע טקסט עם חשוב | אף אחד |
<em> |
להדגשת קטע טקסט בלחץ | אף אחד |
<abbr> |
עוטף קיצורים וראשי תיבות כדי להציג את הגרסה המורחבת על ריחוף | כלול .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>ניתן להשתמש בתג:
לקיצורים עם titleתכונה יש גבול תחתון מנוקד בהיר וסמן עזרה בעת ריחוף. זה נותן למשתמשים אינדיקציה נוספת שמשהו יוצג על ריחוף.
הוסף את initialismהכיתה לקיצור כדי להגביר את ההרמוניה הטיפוגרפית על ידי מתן גודל טקסט קטן מעט יותר.
HTML הוא הדבר הטוב ביותר מאז לחם פרוס.
קיצור של המילה תכונה הוא attr .
| אֵלֵמֶנט | נוֹהָג | אופציונאלי |
|---|---|---|
<blockquote> |
אלמנט ברמת הבלוק לציטוט תוכן ממקור אחר | הוסף .pull-leftושיעורים .pull-rightעבור אפשרויות צפות |
<small> |
רכיב אופציונלי להוספת ציטוט הפונה למשתמש, בדרך כלל מחבר עם שם העבודה | מקם את <cite>הכותרת סביב הכותרת או שם המקור |
כדי לכלול ציטוט בלוק, עטוף <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>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
שימו לב! רשימות תיאור אופקיות יקצצו מונחים ארוכים מכדי להתאים לתיקון העמודה השמאלית text-overflow. ביציאות תצוגה צרות יותר, הם ישתנו לפריסת ברירת המחדל הנערמת.
עטוף קטעי קוד מוטבעים עם <code>.
- לדוגמה , <code> סעיף < / code > צריך להיות עטוף בתור מוטבע .
השתמש <pre>עבור שורות קוד מרובות. הקפד לברוח מכל סוגריים זווית בקוד לצורך עיבוד תקין.
<p>טקסט לדוגמה כאן...</p>
- <pre>
- <p>טקסט לדוגמה כאן...</p>
- </pre>
הערה: הקפד לשמור את הקוד בתוך <pre>התגים קרוב ככל האפשר לשמאל; זה יציג את כל הכרטיסיות.
ניתן להוסיף את .pre-scrollableהמחלקה באופן אופציונלי שתגדיר גובה מקסימלי של 350 פיקסלים ותספק פס גלילה בציר y.
קח את אותו <pre>אלמנט והוסף שתי מחלקות אופציונליות לעיבוד משופר.
- <p> טקסט לדוגמה כאן... </p>
- <pre class = "prettyprint
- linenums" >
- <p>טקסט לדוגמה כאן...</p>
- </pre>
הורד את google-code-pretify והצג את ה-readme כיצד להשתמש.
| תָג | תיאור |
|---|---|
<table> |
אלמנט גלישה להצגת נתונים בפורמט טבלאי |
<thead> |
רכיב מיכל עבור שורות כותרות טבלה ( <tr>) לתיוג עמודות טבלה |
<tbody> |
רכיב מיכל עבור שורות טבלה ( <tr>) בגוף הטבלה |
<tr> |
רכיב מכיל עבור קבוצה של תאי טבלה ( <td>או <th>) המופיעים בשורה אחת |
<td> |
תא ברירת מחדל בטבלה |
<th> |
תא טבלה מיוחד עבור תוויות עמודה (או שורה, בהתאם להיקף ולמיקום) חייב לשמש בתוך א <thead> |
<caption> |
תיאור או סיכום של מה הטבלה מכילה, שימושי במיוחד עבור קוראי מסך |
- <טבלה>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| שֵׁם | מעמד | תיאור |
|---|---|---|
| בְּרִירַת מֶחדָל | אף אחד | אין סגנונות, רק עמודות ושורות |
| בסיסי | .table |
רק קווים אופקיים בין שורות |
| גבול | .table-bordered |
מעגל פינות ומוסיף גבול חיצוני |
| פס זברה | .table-striped |
מוסיף צבע רקע אפור בהיר לשורות אי-זוגיות (1, 3, 5 וכו') |
| מְעוּבֶּה | .table-condensed |
חותך ריפוד אנכי לשניים, מ-8 פיקסלים ל-4 פיקסלים, בתוך כל האלמנטים tdוהאלמנטיםth |
טבלאות מעוצבות אוטומטית עם גבולות מעטים בלבד כדי להבטיח קריאה ושמירה על מבנה. עם 2.0, .tableהכיתה חובה.
- <table class = "table" >
- …
- </table>
| # | שם פרטי | שם משפחה | שם משתמש |
|---|---|---|---|
| 1 | סימן | אוטוטו | @mdo |
| 2 | יעקב | תורנטון | @שמן |
| 3 | לארי | הציפור | @טוויטר |
תהיו קצת מפוארים עם השולחנות שלכם על ידי הוספת פסי זברה - פשוט הוסף את .table-stripedהכיתה.
הערה: טבלאות פסים משתמשות :nth-childבבורר CSS ואינן זמינות ב-IE7-IE8.
- < מחלקה טבלה = "מפוספס שולחן" >
- …
- </table>
| # | שם פרטי | שם משפחה | שם משתמש |
|---|---|---|---|
| 1 | סימן | אוטוטו | @mdo |
| 2 | יעקב | תורנטון | @שמן |
| 3 | לארי | הציפור | @טוויטר |
הוסף גבולות סביב כל השולחן ופינות מעוגלות למטרות אסתטיות.
- <table class = "משולבת שולחן" >
- …
- </table>
| # | שם פרטי | שם משפחה | שם משתמש |
|---|---|---|---|
| 1 | סימן | אוטוטו | @mdo |
| סימן | אוטוטו | @getbootstrap | |
| 2 | יעקב | תורנטון | @שמן |
| 3 | לארי הציפור | @טוויטר | |
הפוך את השולחנות שלך לקומפקטיים יותר על ידי הוספת .table-condensedהמחלקה כדי לחתוך את ריפוד תאי השולחן לשניים (מ-8 פיקסלים ל-4 פיקסלים).
- < מחלקה טבלה = "תמצית טבלה" >
- …
- </table>
| # | שם פרטי | שם משפחה | שם משתמש |
|---|---|---|---|
| 1 | סימן | אוטוטו | @mdo |
| 2 | יעקב | תורנטון | @שמן |
| 3 | לארי הציפור | @טוויטר | |
אל תהסס לשלב כל אחת משיעורי השולחן כדי להשיג מראה שונה על ידי שימוש בכל אחת מהשיעורים הזמינים.
- <table class = "שולחן עם פסים של שולחן עם גבול שולחן מעובה" >
- ...
- </table>
| שם מלא | |||
|---|---|---|---|
| # | שם פרטי | שם משפחה | שם משתמש |
| 1 | סימן | אוטוטו | @mdo |
| 2 | יעקב | תורנטון | @שמן |
| 3 | לארי הציפור | @טוויטר | |
החלק הטוב ביותר בטפסים ב-Bootstrap הוא שכל התשומות והפקדים שלך נראים נהדר, לא משנה איך אתה בונה אותם בסימון שלך. אין צורך ב-HTML מיותר, אך אנו מספקים את התבניות למי שדורש זאת.
פריסות מסובכות יותר מגיעות עם שיעורים תמציתיים וניתנים להרחבה לעיצוב קל וכריכת אירועים, כך שאתה מכוסה בכל שלב.
Bootstrap מגיע עם תמיכה בארבעה סוגים של פריסות טפסים:
סוגים שונים של פריסות טפסים דורשים כמה שינויים לסימון, אך הפקדים עצמם נשארים ומתנהגים זהים.
הטפסים של Bootstrap כוללים סגנונות עבור כל פקדי הטפסים הבסיסיים כמו קלט, אזור טקסט ובחירה שאתה מצפה. אבל זה גם מגיע עם מספר רכיבים מותאמים אישית כמו כניסות מצורפות ומראש ותמיכה ברשימות של תיבות סימון.
מצבים כמו שגיאה, אזהרה והצלחה כלולים עבור כל סוג של בקרת טופס. כלולים גם סגנונות עבור פקדים מושבתים.
Bootstrap מספק סימון פשוט וסגנונות עבור ארבעה סגנונות של טפסי אינטרנט נפוצים.
| שֵׁם | מעמד | תיאור |
|---|---|---|
| אנכי (ברירת מחדל) | .form-vertical (לא דרוש) |
תוויות מוערמות מיושרות לשמאל מעל פקדים |
| בשורה | .form-inline |
פקדי תווית מיושרים לשמאל ופקדי בלוק מוטבע לסגנון קומפקטי |
| לחפש | .form-search |
קלט טקסט מעוגל במיוחד עבור אסתטיקת חיפוש טיפוסית |
| אופקי | .form-horizontal |
הציף תוויות מיושרות לשמאל באותו קו כמו הפקדים |
ברירות מחדל חכמות וקלות משקל ללא סימון נוסף.
- <form class = "טוב" >
- <label> שם תווית </label>
- <input type = "text" class = "span3" placeholder = "הקלד משהו..." >
- <span class = "help-block" > דוגמה לטקסט עזרה ברמת הבלוק כאן. </span>
- <label class = "checkbox" >
- <input type = "checkbox" > בדוק אותי
- </label>
- <button type = "submit" class = "btn" > שלח </button>
- </form>
הוסף .form-searchלטופס .search-queryול- input.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > חיפוש </button>
- </form>
הוסף .form-inlineלעדינות את היישור האנכי ואת המרווח של פקדי הטופס.
- <form class = "well 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>
מוצגים מימין כל פקדי הטופס המוגדרים כברירת מחדל שאנו תומכים בהם. הנה רשימת התבליטים:
בהתחשב בפריסת הטופס לדוגמה לעיל, הנה הסימון המשויך לקבוצת הקלט והבקרה הראשונה. ה- .control-group, .control-label, .controlsוהשיעורים כולם נדרשים לסטיילינג.
- <form class = "form-horizontal" >
- <fieldset>
- <legend> טקסט מקרא </legend>
- <div class = "קבוצת שליטה" >
- <label class = "control-label" for = "input01" > קלט טקסט </label>
- <div class = "פקדים" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > טקסט עזרה תומך </p>
- </div>
- </div>
- </fieldset>
- </form>
disabledBootstrap כולל סגנונות עבור מצבים ממוקדים נתמכי דפדפן . אנו מסירים את ברירת המחדל של Webkit outlineומחילים a box-shadowבמקומו עבור :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">אחרי רכיב הקלט.
במקום להפוך כל אייקון לבקשה נוספת, ריכזנו אותם ל-sprite - חבורה של תמונות בקובץ אחד שמשתמש ב-CSS כדי למקם את התמונות עם background-position. זוהי אותה שיטה בה אנו משתמשים ב-Twitter.com והיא עבדה היטב עבורנו.
כל מחלקות הסמלים מופיעות בקידומת .icon-לצורך מרווח שמות והיקף מתאימים, בדומה לרכיבים האחרים שלנו. זה יעזור למנוע התנגשויות עם כלים אחרים.
Glyphicons העניקה לנו שימוש בערכת Halflings בערכת הכלים שלנו בקוד פתוח כל עוד אנו מספקים קישור וקרדיט כאן במסמכים. אנא שקול לעשות את אותו הדבר בפרויקטים שלך.
Bootstrap משתמש <i>בתגית עבור כל הסמלים, אבל אין להם מחלקת מקרה - רק קידומת משותפת. כדי להשתמש, מקם את הקוד הבא כמעט בכל מקום:
- <i class = "icon-search" ></i>
ישנם גם סגנונות זמינים עבור סמלים הפוכים (לבנים), שהוכנו עם מחלקה נוספת אחת:
- <i class = "icon-search icon-white" ></i>
יש 120 כיתות לבחירה עבור הסמלים שלך. פשוט הוסף <i>תג עם הכיתות הנכונות ואתה מוכן. אתה יכול למצוא את הרשימה המלאה ב- sprites.less או ממש כאן במסמך זה.
שימו לב! בעת שימוש לצד מחרוזות של טקסט, כמו בכפתורים או קישורי ניווט, הקפד להשאיר רווח אחרי <i>התג לרווח מתאים.
סמלים נהדרים, אבל איפה אפשר להשתמש בהם? הנה כמה רעיונות:
בעיקרון, בכל מקום שאתה יכול לשים <i>תג, אתה יכול לשים סמל.
השתמש בהם בלחצנים, קבוצות לחצנים עבור סרגל כלים, ניווט, או קלט טפסים מוכנים.