דוגמאות להתחלה מהירה

צריך תבניות מהירות? בדוק את הדוגמאות הבסיסיות האלה שהרכבנו:

רשת ברירת מחדל

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

סימון רשת לדוגמה

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

<div class = "row" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

עמודות קינון

קן את התוכן שלך אם אתה חייב על ידי יצירת .rowבתוך עמודה קיימת.

דוגמה לעמודות מקוננות

<div class = "row" > 
  <div class = "span12" > 
    רמה 1 של העמודה
    <div class = "row" > 
      <div class = "span6" > 
        שלב 2
      </div>
      <div class = "span6" > 
        שלב 2
      </div>
    </div>
  </div>
</div>

גלגל את הרשת שלך

מובנים ב-Bootstrap קומץ משתנים להתאמה אישית של מערכת ברירת המחדל של 940px. עם קצת התאמה אישית, אתה יכול לשנות את גודל העמודות, המרזבים שלהם והמיכל שבו הם שוכנים.

בתוך הרשת

המשתנים הדרושים לשינוי מערכת הרשת נמצאים כעת כולם ב- variables.less.

עכשיו להתאמה אישית

שינוי הרשת פירושו שינוי שלושת @grid-*המשתנים והידור מחדש של קבצי Less.

Bootstrap מגיע מצויד לטיפול במערכת רשת עם עד 24 עמודות; ברירת המחדל היא 16 בלבד. כך יראו משתני הרשת שלך בהתאמה אישית לרשת של 24 עמודות.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

לאחר הידור מחדש, אתה תהיה מוכן!

פריסה קבועה

פריסת ברירת המחדל והפשוטה ברוחב 940 פיקסלים, מרוכזת כמעט עבור כל אתר או דף שסופק על ידי יחיד <div.container>.

<גוף>
  <div class = "container" > 
    ...
  </div>
</body>

פריסה נוזלית

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

<גוף>
  <div class = "container-fluid" > 
    <div class = "סרגל צד" > 
      ...
    </div>
    <div class = "תוכן" > 
      ...
    </div>
  </div>
</body>

כותרות והעתקה

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

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

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

h1. מכוון ל 1

h2. כותרת 2

h3. כותרת 3

h4. כותרת 4

h5. כותרת 5

h6. כותרת 6

פסקה לדוגמה

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.

לכותרת לדוגמה יש כותרת משנה...

שונות אלמנטים

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

<strong> <em> <address> <abbr>

מתי להשתמש

יש להשתמש בתגיות הדגשה ( <strong>ו <em>) כדי לציין חשיבות נוספת או הדגשה של מילה או ביטוי ביחס לעותק שמסביב שלה. השתמש <strong>לחשיבות <em>ולהדגשת לחץ .

הדגשה בפסקה

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>משמש לפרטי התקשרות עבור האב הקדמון הקרוב שלו, או את כל גוף העבודה. להלן שתי דוגמאות כיצד ניתן להשתמש בו:

הערה: כל שורה בשורה <address>חייבת להסתיים במעבר שורה ( <br />) או להיות עטופה בתג ברמת הבלוק (למשל, <p>) כדי לבנות כראוי את התוכן.

קיצורי מילים

עבור קיצורים וראשי תיבות, השתמש <abbr>בתג ( <acronym>ה��צא משימוש ב- HTML5 ). שים את טופס הקיצור בתוך התג והגדר כותרת לשם המלא.

ציטוטים בלוק

<blockquote> <p> <small>

איך לצטט

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. שלם posuere erat a ante venenatis dapibus posuere velit aliquet.

ד"ר יוליוס היברט

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. שלם posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> ד"ר יוליוס היברט </small>
</blockquote>

לא מסודר<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.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> <pre>

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

מציג קוד

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

<div>
  <h1>כותרת</h1>
  <p>משהו כאן...</p>
</div>

<div> <h1> כותרת </h1> <p> משהו כאן... </p> </div>
  
  

תוויות מוטבעות

<span class="label">

הפנה תשומת לב או סמן כל ביטוי בגוף הטקסט שלך.

תווית כל דבר

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

רשת מדיה

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

תמונות ממוזערות לדוגמה

תמונות ממוזערות בקובץ .media-gridיכולות להיות בכל גודל, אבל הן פועלות בצורה הטובה ביותר כשהן ממפות ישירות למערכת ה-Bootstrap המובנית. רוחבי תמונה כמו 90, 210 ו-330 משתלבים עם כמה פיקסלים של ריפוד כדי להשתוות לגדלים .span2, .span4, .span6ועמודות.

גָדוֹל

בינוני

קָטָן

מקודדים אותם

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

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

בניית שולחנות

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

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

עטוף תמיד את כותרות העמודות שלך בצורה <thead>כזו שההיררכיה היא <thead>> <tr>> <th>.

בדומה לכותרות העמודות, כל תוכן הטבלה שלך צריך להיות עטוף ב- <tbody>כך שההיררכיה שלך תהיה <tbody>> <tr>> <td>.

דוגמה: סגנונות טבלה המוגדרים כברירת מחדל

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

<טבלה>
  ...
</table>

דוגמה: שולחן מרוכז

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

דוגמה: שולחן עם גבול

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

<table class = "bordered-table" > 
  ...
</table>

דוגמה: פסי זברה

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

הערה: פסי זברה הוא שיפור מתקדם שאינו זמין עבור דפדפנים ישנים כמו IE8 ומטה.

< מחלקה טבלה = "פסים זברה" > 
  ...
</table>

דוגמה: פסי זברה עם TableSorter.js

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

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( פונקציה () { 
    $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
< מחלקה טבלה = "פסים זברה" > 
  ...
</table>

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

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

צורות מוערמות

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

גדלי שדות טפסים

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

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

כפתורים

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

ברירת המחדל של כל הלחצנים היא סגנון אפור בהיר, אך ניתן ליישם מספר מחלקות פונקציונליות עבור סגנונות צבע שונים. חוגים אלו כוללים כיתת כחול .primary, כיתת תכלת .info, כיתת ירוקה .successוכיתת אדום .danger.

לחצנים לדוגמה

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

גדלים חלופיים

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

מצב נכה

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

קישורים

כפתורים

מה זה

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

ניתן להתאמה אישית

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

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

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

כרטיסיות וכדורים

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

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

דוגמה לכרטיסיות בסיסיות

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

• בית
• פּרוֹפִיל
• הודעות
• הגדרות
• איש קשר
• להפיל
  • קישור משני
  • משהו אחר כאן
  • קישור נוסף

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > דף הבית </a></li>  
  <li><a href = "#" > פרופיל </a></li> 
  <li><a href = "#" > הודעות </a></li> 
  <li><a href = "#" > הגדרות </a></li> 
  <li><a href = "#" > איש קשר </a></li> 
</ul>

דוגמה לכדורים בסיסיים

• בית
• פּרוֹפִיל
• הודעות
• הגדרות
• איש קשר

<ul class = "כדורים" > 
  <li class = "active" ><a href = "#" > דף הבית </a></li>  
  <li><a href = "#" > פרופיל </a></li> 
  <li><a href = "#" > הודעות </a></li> 
  <li><a href = "#" > הגדרות </a></li> 
  <li><a href = "#" > איש קשר </a></li> 
</ul>

פרורי לחם

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

• בית

• דף הבית /
• עמוד אמצעי

• דף הבית /
• עמוד אמצעי /
• עוד אחד

• דף הבית /
• עמוד אמצעי /
• עוד אחד /
• אתה כאן

<ul class = "פירורי לחם" > 
  <li><a href = "#" > דף הבית </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > דף אמצעי </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > עוד אחד </a> <span class = "divider" > / </span></li>   
  <li class = "active" > אתה כאן </li> 
</ul>

דִפּוּף

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

<div class = "Pagement" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← הקודם </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "next" ><a href = "#" > הבא → </a></li>  
  </ul>
</div>

התראות בסיסיות

.alert-message

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

קבל את ה-Javascript »

קוד לדוגמה

<div class = "alert-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> גוואקמולי קדוש! </strong> הכי טוב תבדוק את עצמך, אתה לא נראה טוב מדי. </p>
</div>

חסום הודעות

.alert-message.block-message

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

קבל את ה-Javascript »

קוד לדוגמה

<div class = "alert-message block-message warning" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> גוואקמולי קדוש! זו אזהרה! </strong> הכי טוב תבדוק את עצמך, אתה לא נראה טוב מדי. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > בצע פעולה זו </a> <a class = "btn small" href = "#" > או עשה זאת </a>     
  </div>
</div>

מודלים

מודלים - דיאלוגים או Lightbox - מצוינים עבור פעולות הקשריות במצבים שבהם חשוב שהקשר הרקע יישמר.

קבל את ה-Javascript »

עצות כלים

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

קבל את ה-Javascript »

פופ-אוברים

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

קבל את ה-Javascript »

מתחילים

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

הצג מסמכי javascript »

מה נכלל

הבא לחיים כמה מהרכיבים העיקריים של Bootstrap עם תוספים מותאמים אישית חדשים שעובדים עם jQuery ו- Ender . אנו ממליצים לך להרחיב ולשנות אותם כך שיתאימו לצרכי הפיתוח הספציפיים שלך.

האם יש צורך ב-javascript?

לא! Bootstrap נועד בראש ובראשונה להיות ספריית CSS. Javascript זה מספק שכבה אינטראקטיבית בסיסית על גבי הסגנונות הכלולים.

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

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