הִיסטוֹרִיָה

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

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

קרא עוד ב- dev.twitter.com ›

תמיכה בדפדפן

Bootstrap נבדק ונתמך בדפדפנים מודרניים גדולים כמו Chrome, Safari, Internet Explorer ו-Firefox.

• הספארי האחרון
• Google Chrome העדכני ביותר
• Firefox 4+
• Internet Explorer 7+

מה נכלל

Bootstrap מגיע עם קומפילציה של CSS, תבניות לא הידור ותבניות לדוגמה.

• כל הקבצים המקוריים
• CSS הידור מלא וממוזער
• תיעוד מדריך סגנון מלא
• תבנית דף לדוגמה (עוד בקרוב)

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

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

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

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

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

פריסה קבועה

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

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

פריסה נוזלית

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

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

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

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

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

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

הערה: כל שורה בשורה <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.

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

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

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

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

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

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

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

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

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

#	שם פרטי	שם משפחה	שפה
1	כמה	אחד	אנגלית
2	ג'ו	שישייה	אנגלית
3	סטו	שֶׁקַע	קוד

<table class="common-table"> class = "משותף-טבלה" >
  ...
</table>

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

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

#	שם פרטי	שם משפחה	שפה
1	כמה	אחד	אנגלית
2	ג'ו	שישייה	אנגלית
3	סטו	שֶׁקַע	קוד

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

<table class="common-table zebra-striped"> class = "משותף-שולחן עם פסים זברה" >
...
</table>

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

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

#	שם פרטי	שם משפחה	שפה
1	שֶׁלְךָ	אחד	אנגלית
2	ג'ו	שישייה	אנגלית
3	סטו	שֶׁקַע	קוד

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

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

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

דוגמה לצורת אגדה

קלט X-Large

בחר

1 2 3 4 5

בחר

1 2 3 4 5

קלט בלתי ניתן לעריכה

קצת ערך כאן

קלט מושבת

קלט X-Large

קטע קטן של טקסט עזרה

דוגמה לצורת אגדה

טקסט מקדימה

@

תיבת סימון מוכנה

תיבת סימון מצורפת

קלט קובץ

דוגמה לצורת אגדה

רשימת אפשרויות

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

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

טווח תאריכים

ל כל הזמנים מוצגים כשעון האוקיינוס ​​השקט (GMT -08:00).

Textarea

בלוק של טקסט עזרה לתיאור השדה שלמעלה במידת הצורך.

רשימת אפשרויות

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

שמור שינויים  לְבַטֵל

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

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

דוגמה לצורת אגדה

קלט X-Large

בחר

1 2 3 4 5

דוגמה לצורת אגדה

קלט X-Large

קטע קטן של טקסט עזרה

רשימת אפשרויות

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

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

שמור שינויים  לְבַטֵל

כפתורים

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

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

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

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

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

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

מצב נכה

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

קישורים

כפתורים

מה זה

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

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

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

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

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

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

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

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

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

<ul class="tabs"> 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="pills"> 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>

דִפּוּף

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

<div class="pagination"> class = "ציון" >
  <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>

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

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

חסום הודעות

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

מודלים

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

טיפים לכלים

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

פופ-אוברים

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

Bootstrap נבנה עם Preboot , חבילת קוד פתוח של מיקסים ומשתנים לשימוש בשילוב עם Less , מעבד קדם CSS לפיתוח אינטרנט מהיר וקל יותר.

בדוק כיצד השתמשנו ב-Preboot ב-Bootstrap וכיצד תוכל להשתמש בו אם תבחר להפעיל Less בפרויקט הבא שלך.

איך להשתמש בזה

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

<link rel="stylesheet/less" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" href = "less/bootstrap.less" media = "הכל" />   
<script src = "js/less-1.0.41.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;            
// קו בסיס
@baseline : 20px ;          

מעירים

/* ... */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    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    מסנן : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 ו-IE7 
    רקע - תמונה : ליניארי - הדרגה ( שמאל , @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   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    מסנן : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 ו-IE7 
    רקע - תמונה : ליניארי - שיפוע ( @startColor , @endColor ); // הסטנדרט  
  }
  . כיווני ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . אנכי - שלושה - צבעים ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

מערכת תפעול ורשת

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

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// מערכת רשת
. מיכל {
  רוחב : @siteWidth ; 
  שוליים : 0 אוטומטי ;  
  . clearfix ();
}
. עמודות ( @columnSpan : 1 ) {  
  תצוגה : מוטבע ; 
  לצוף : שמאל ;
  width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  שוליים - שמאל : @gridGutterWidth ; 
  &: ראשון - ילד {
    שוליים - שמאל : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! חשוב ;          
}