Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap הוא ערכת כלים של טוויטר שנועדה להניע פיתוח של אפליקציות ואתרים באינטרנט.
הוא כולל CSS ו-HTML בסיסיים לטיפוגרפיה, טפסים, לחצנים, טבלאות, רשתות, ניווט ועוד.
התראת חנון: Bootstrap נבנה עם Less ונועד לעבוד מחוץ לשער עם מחשבה על דפדפנים מודרניים.
להתחלה המהירה והקלה ביותר, פשוט העתק את הקטע הזה לדף האינטרנט שלך.
מעריץ של שימוש בפחות? אין בעיה, פשוט תשכפל את ה-repo והוסף את השורות הבאות:
הורד, מזלג, משיכה, בעיות קבצים ועוד עם מאגר ה-Bootstrap הרשמי ב-Github.
בימים הראשונים של טוויטר, המהנדסים השתמשו כמעט בכל ספרייה שהם הכירו כדי לעמוד בדרישות החזית. Bootstrap התחיל כמענה לאתגרים שהוצגו והפיתוח הואץ במהירות במהלך ה-Hackweek הראשון של טוויטר.
בעזרתם והמשוב של מהנדסים רבים בטוויטר, Bootstrap גדלה באופן משמעותי כדי להקיף לא רק סגנונות בסיסיים, אלא דפוסי עיצוב חזיתיים אלגנטיים ועמידים יותר.
קרא עוד ב- dev.twitter.com ›
Bootstrap נבדק ונתמך בדפדפנים מודרניים גדולים כמו Chrome, Safari, Internet Explorer ו-Firefox.
Bootstrap מגיע עם קומפילציה של CSS, תבניות לא הידור ותבניות לדוגמה.
מערכת ברירת המחדל המסופקת כחלק מ-Bootstrap היא רשת ברוחב 940 פיקסלים של 16 עמודות. זהו טעם של מערכת הרשת הפופולרית 960, אך ללא שוליים/ריפוד נוספים בצד שמאל וימין.
כפי שמוצג כאן, ניתן ליצור פריסה בסיסית עם שתי "עמודות", כל אחת משתרעת על מספר מ-16 עמודות היסוד שהגדרנו כחלק ממערכת הרשת שלנו. ראה את הדוגמאות שלהלן לקבלת וריאציות נוספות.
- <div class = "row" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
פריסת ברירת המחדל והפשוטה ברוחב 940 פיקסלים, מרוכזת כמעט עבור כל אתר או דף שסופק על ידי יחיד <div.container>
.
- <גוף>
- <div class = "container" >
- ...
- </div>
- </body>
מבנה דף נוזלי חלופי וגמיש עם רוחב מינימלי ומקסימלי וסרגל צד שמאלי. נהדר עבור אפליקציות ומסמכים.
- <גוף>
- <div class = "container-fluid" >
- <div class = "סרגל צד" >
- ...
- </div>
- <div class = "תוכן" >
- ...
- </div>
- </div>
- </body>
היררכיה טיפוגרפית סטנדרטית למבנה דפי האינטרנט שלך.
הרשת הטיפוגרפית כולה מבוססת על שני משתני Less בקובץ preboot.less שלנו: @basefont
ו @baseline
. הראשון הוא גודל הגופן הבסיסי המשמש לכל אורכו והשני הוא גובה קו הבסיס.
אנו משתמשים במשתנים האלה, ובחלק מתמטיקה, כדי ליצור את השוליים, הריפודים וגבהי הקו של כל הסוג שלנו ועוד.
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>
—
Lorem ipsum dolor sit amet, consectetur adipiscing elit. שלם posuere erat a ante venenatis dapibus posuere velit aliquet.
ד"ר יוליוס היברט
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
שולחנות נהדרים - להרבה דברים. עם זאת, טבלאות נהדרות זקוקות למעט אהבת סימון כדי להיות שימושיות, ניתנות להרחבה וקריא (ברמת הקוד). הנה כמה טיפים שיעזרו.
עטוף תמיד את כותרות העמודות שלך בצורה <thead>
כזו שההיררכיה היא <thead>
> <tr>
> <th>
.
בדומה לכותרות העמודות, כל תוכן הטבלה שלך צריך להיות עטוף ב- <tbody>
כך שההיררכיה שלך תהיה <tbody>
> <tr>
> <td>
.
כל הטבלאות יעוצבו אוטומטית עם הגבולות החיוניים בלבד כדי להבטיח קריאה ושמירה על מבנה. אין צורך להוסיף כיתות או תכונות נוספות.
# | שם פרטי | שם משפחה | שפה |
---|---|---|---|
1 | כמה | אחד | אנגלית |
2 | ג'ו | שישייה | אנגלית |
3 | סטו | שֶׁקַע | קוד |
- <טבלה>
- ...
- </table>
תהיו קצת מפוארים עם השולחנות שלכם על ידי הוספת פסי זברה - פשוט הוסף את .zebra-striped
הכיתה.
# | שם פרטי | שם משפחה | שפה |
---|---|---|---|
1 | כמה | אחד | אנגלית |
2 | ג'ו | שישייה | אנגלית |
3 | סטו | שֶׁקַע | קוד |
הערה: פסי זברה הוא שיפור מתקדם שאינו זמין עבור דפדפנים ישנים כמו IE8 ומטה.
- < מחלקה טבלה = "פסים זברה" >
- ...
- </table>
אם ניקח את הדוגמה הקודמת, אנו משפרים את השימושיות של הטבלאות שלנו על ידי מתן פונקציונליות מיון באמצעות jQuery והפלאגין Tablesorter . לחץ על כותרת עמודה כלשהי כדי לשנות את המיון.
# | שם פרטי | שם משפחה | שפה |
---|---|---|---|
1 | שֶׁלְךָ | אחד | אנגלית |
2 | ג'ו | שישייה | אנגלית |
3 | סטו | שֶׁקַע | קוד |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( פונקציה () {
- $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- < מחלקה טבלה = "פסים זברה" >
- ...
- </table>
כל הטפסים מקבלים סגנונות ברירת מחדל כדי להציג אותם בצורה קריאה וניתנת להרחבה. סגנונות מסופקים עבור קלט טקסט, רשימות בחירה, אזורי טקסט, לחצני בחירה ותיבות סימון וכפתורים.
הוסף .form-stacked
ל-HTML של הטופס שלך ויהיו לך תוויות על גבי השדות שלהם במקום משמאלם. זה עובד נהדר אם הטפסים שלך קצרים או שיש לך שתי עמודות של קלט עבור טפסים כבדים יותר.
כמקובל, כפתורים משמשים לפעולות ואילו קישורים משמשים לאובייקטים. לדוגמה, "הורד" יכול להיות כפתור ו"פעילות אחרונה" יכולה להיות קישור.
ברירת המחדל של כל הלחצנים היא סגנון אפור בהיר, אך ניתן ליישם מספר מחלקות פונקציונליות עבור סגנונות צבע שונים. חוגים אלו כוללים כיתת כחול .primary
, כיתת תכלת .info
, כיתת ירוקה .success
וכיתת אדום .danger
. בנוסף, לגלגל את הסגנונות שלך זה קל.
ניתן להחיל סגנונות כפתורים על כל דבר עם .btn
המיושם. בדרך כלל תרצה להחיל אותם רק על <a>
, , ורכיבים <button>
נבחרים . <input>
כך זה נראה:
בא לכם על כפתורים גדולים או קטנים יותר? יש בזה!
עבור כפתורים שאינם פעילים או מושבתים על ידי האפליקציה מסיבה זו או אחרת, השתמש במצב מושבת. זה .disabled
עבור קישורים :disabled
ועבור <button>
אלמנטים.
div.alert-message
הודעות בשורה אחת להדגשת כישלון, כישלון אפשרי או הצלחה של פעולה. שימושי במיוחד עבור טפסים.
div.alert-message.block-message
להודעות הדורשות מעט הסבר, יש לנו התראות בסגנון פסקה. אלה מושלמים לבעבוע הודעות שגיאה ארוכות יותר, להזהיר משתמש מפני פעולה ממתינה, או סתם להצגת מידע כדי להדגיש יותר את הדף.
מודלים - דיאלוגים או Lightbox - מצוינים עבור פעולות הקשריות במצבים שבהם חשוב שהקשר הרקע יישמר.
גוף אחד משובח…
Twipsies הם סופר שימושיים כדי לסייע למשתמש מבולבל ולהפנות אותם לכיוון הנכון.
Lorem ipsum dollar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae akkusantium fulquate voluptasdicta .
השתמש בפופ-אובר כדי לספק מידע תת-טקסטואלי לדף מבלי להשפיע על הפריסה.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap נבנה עם Preboot , חבילת קוד פתוח של מיקסים ומשתנים לשימוש בשילוב עם Less , מעבד קדם CSS לפיתוח אינטרנט מהיר וקל יותר.
בדוק כיצד השתמשנו ב-Preboot ב-Bootstrap וכיצד תוכל להשתמש בו אם תבחר להפעיל Less בפרויקט הבא שלך.
השתמש באפשרות זו כדי לעשות שימוש מלא במשתני הפחות, המיקסינים והקינון של Bootstrap ב-CSS באמצעות javascript בדפדפן שלך.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.1.3.min.js" ></script>
לא מרגישים את פתרון ה-.js? נסה את אפליקציית Less Mac או השתמש ב-Node.js כדי להדר בעת פריסת הקוד שלך.
להלן כמה מנקודות השיא של מה שנכלל ב-Twitter Bootstrap כחלק מ-Bootstrap. עברו לאתר Bootstrap או לדף פרויקט Github כדי להוריד וללמוד עוד.
משתנים בפחות מושלמים לשמירה ועדכון של ה-CSS שלך ללא כאב ראש. כאשר אתה רוצה לשנות ערך צבע או ערך בשימוש תכוף, עדכן אותו במקום אחד ואתה מוכן.
- // קישורים
- @linkColor : #8b59c2;
- @linkColorHover : כהה ( @linkColor , 10 );
- // אפורים
- @שחור : #000;
- @grayDark : להבהיר ( @black , 25 %);
- @grey : lighten ( @black , 50 %);
- @grayLight : להבהיר ( @black , 70 %);
- @grayLighter : להבהיר ( @black , 90 %);
- @לבן : #fff ;
- // צבעי מבטא
- @blue : #08b5fb;
- @גרין : #46a546 ;
- @red : #9d261d;
- @yellow : #ffc40d;
- @orange : #f89406;
- @pink : #c3325f;
- @purple : #7a43b6;
- // רשת קו בסיס
- @basefont : 13px ;
- @baseline : 18px ;
/* ... */
Less מספק גם סגנון נוסף של הערות בנוסף לתחביר הרגיל של CSS .
- // זו תגובה
- /* זו גם תגובה */
Mixins הם בעצם כוללים או חלקיים עבור CSS, ומאפשרים לך לשלב בלוק קוד לאחד. הם מצוינים עבור מאפיינים עם קידומת של ספקים כמו box-shadow
, מעברי דפדפן, ערימות גופנים ועוד. להלן דוגמה של המיקסינים הכלולים ב-Bootstrap.
- #font {
- . קיצור ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- גודל גופן : @size ; _
- font - weight : @weight ;
- line - height : @lineHeight ;
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- גודל גופן : @size ; _
- font - weight : @weight ;
- line - height : @lineHeight ;
- }
- . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - family : "Georgia" , Times New Roman , Times , sans - serif ;
- גודל גופן : @size ; _
- font - weight : @weight ;
- line - height : @lineHeight ;
- }
- . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {
- font - family : "Monaco" , Courier New , monospace ;
- גודל גופן : @size ; _
- font - weight : @weight ;
- line - height : @lineHeight ;
- }
- }
- #gradient {
- . horizontal ( @startColor : #555, @endColor: #333) {
- רקע - צבע : @endColor ;
- רקע - חזרה : חוזר - x ;
- background - image : - khtml - gradient ( ליניארי , שמאלי למעלה , ימני למעלה , מ- ( @startColor ), אל ( @endColor )); // Konqueror
- background - image : - moz - linear - gradient ( left , @startColor , @endColor ); // FF 3.6+
- background - image : - ms - linear - gradient ( left , @startColor , @endColor ); // IE10
- background - image : - webkit - gradient ( לינארית , שמאל למעלה , ימין למעלה , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- background - image : - webkit - linear - gradient ( left , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- רקע - תמונה : -o - linear - gradient ( שמאל , @startColor , @endColor ) ; // אופרה 11.10
- רקע - תמונה : ליניארי - הדרגה ( שמאל , @startColor , @endColor ); // Le standard
- }
- . אנכי ( @startColor : #555, @endColor: #333) {
- רקע - צבע : @endColor ;
- רקע - חזרה : חוזר - x ;
- רקע - תמונה : - khtml - מעבר צבע ( ליניארי , שמאל למעלה , שמאל למטה , מ ( @startColor ), אל ( @endColor )); // Konqueror
- רקע - תמונה : - moz - ליניארי - הדרגתי ( @startColor , @endColor ); // FF 3.6+
- רקע - תמונה : - ms - ליניארי - שיפוע ( @startColor , @endColor ); // IE10
- background - image : - webkit - gradient ( ליניארי , שמאל למעלה , שמאל למטה , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- רקע - תמונה : - webkit - ליניארי - שיפוע ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- רקע - תמונה : -o - linear - gradient ( @startColor , @endColor ) ; // אופרה 11.10
- רקע - תמונה : ליניארי - שיפוע ( @startColor , @endColor ); // הסטנדרט
- }
- . כיווני ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . אנכי - שלושה - צבעים ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
תהיו מפוארים ובצעו קצת מתמטיקה כדי ליצור מיקסים גמישים וחזקים כמו זה למטה.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // מערכת רשת
- . מיכל {
- רוחב : @siteWidth ;
- שוליים : 0 אוטומטי ;
- . clearfix ();
- }
- . עמודות ( @columnSpan : 1 ) {
- width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . offset ( @columnOffset : 1 ) {
- margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }