שימוש ב-LESS עם Bootstrap

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

למה פחות?

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

מה נכלל?

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

למד עוד

בקר באתר הרשמי בכתובת http://lesscss.org/ למידע נוסף.

משתנים

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

מיקסינס

שלוש הצהרות רדיוס הגבול האלה שאתה צריך לעשות ב-CSS רגיל? עכשיו הם יורדים לשורה אחת בעזרת mixins, קטעי קוד שתוכלו לעשות בהם שימוש חוזר בכל מקום.

פעולות

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

פיגומים וקישורים

`@bodyBackground`	`@white`	צבע רקע העמוד
`@textColor`	`@grayDark`	צבע טקסט ברירת מחדל עבור הגוף כולו, כותרות ועוד
`@linkColor`	`#08c`	צבע ברירת המחדל של טקסט קישור
`@linkColorHover`	`darken(@linkColor, 15%)`	צבע ברירת המחדל של ריחוף של טקסט קישור

מערכת רשת

`@gridColumns`	12
`@gridColumnWidth`	60 פיקסלים
`@gridGutterWidth`	20 פיקסלים
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

טיפוגרפיה

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	מנלו, מונקו, "שליח חדש", מונוספייס
`@baseFontSize`	13 פיקסלים	חייבים להיות פיקסלים
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18 פיקסלים	חייבים להיות פיקסלים
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

טבלאות

`@tableBackground`	`transparent`
`@tableBackgroundAccent`	`#f9f9f9`
`@tableBackgroundHover`	`#f5f5f5`
`@tableBorder`	`ddd`

צבעי גווני אפור

`@black`	#000
`@grayDarker`	#222
`@grayDark`	#333
`@gray`	#555
`@grayLight`	#999
`@grayLighter`	#eee
`@white`	#fff

צבעי מבטא

`@blue`	#049cdb
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

רכיבים

כפתורים

`@btnBackground`	`@white`
`@btnBackgroundHighlight`	`darken(@white, 10%)`
`@btnBorder`	`darken(@white, 20%)`
`@btnPrimaryBackground`	`@linkColor`
`@btnPrimaryBackgroundHighlight`	`spin(@btnPrimaryBackground, 15%)`
`@btnInfoBackground`	`#5bc0de`
`@btnInfoBackgroundHighlight`	`#2f96b4`
`@btnSuccessBackground`	`#62c462`
`@btnSuccessBackgroundHighlight`	`51a351`
`@btnWarningBackground`	`lighten(@orange, 15%)`
`@btnWarningBackgroundHighlight`	`@orange`
`@btnDangerBackground`	`#ee5f5b`
`@btnDangerBackgroundHighlight`	`#bd362f`
`@btnInverseBackground`	`@gray`
`@btnInverseBackgroundHighlight`	`@grayDarker`

טפסים

`@placeholderText`	`@grayLight`
`@inputBackground`	`@white`
`@inputBorder`	`#ccc`
`@inputBorderRadius`	`3px`
`@inputDisabledBackground`	`@grayLighter`
`@formActionsBackground`	`#f5f5f5`

טופס מצבים והתראות

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

Navbar

`@navbarHeight`	40 פיקסלים
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`
`@navbarLinkColorActive`	`@navbarLinkColorHover`
`@navbarLinkBackgroundHover`	`transparent`
`@navbarLinkBackgroundActive`	`@navbarBackground`
`@navbarSearchBackground`	`lighten(@navbarBackground, 25%)`
`@navbarSearchBackgroundFocus`	`@white`
`@navbarSearchBorder`	`darken(@navbarSearchBackground, 30%)`
`@navbarSearchPlaceholderColor`	`#ccc`
`@navbarBrandColor`	`@navbarLinkColor`

תפריטים נפתחים

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`

יחידת גיבורים

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

לגבי מיקסינים

מיקסים בסיסיים

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

. אלמנט {
  . clearfix ();
}

מיקסים פרמטריים

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

. אלמנט {
  . גבול - רדיוס ( 4px );
}

הוסף בקלות משלך

כמעט כל המיקסים של Bootstrap מאוחסנים ב-mixins.less, קובץ .less נפלא המאפשר לך להשתמש ב-mixin בכל אחד מהקבצים .less בערכת הכלים.

אז, קדימה השתמש באלה הקיימים או אל תהסס להוסיף משלך לפי הצורך.

שילובים כלולים

כלי עזר

מיקסין	פרמטרים	נוֹהָג
`.clearfix()`	אף אחד	הוסף לכל הורה כדי לנקות מצופים בתוכו
`.tab-focus()`	אף אחד	החל את סגנון המיקוד של Webkit ואת המתאר העגול של Firefox
`.center-block()`	אף אחד	מרכז אוטומטית אלמנט ברמת הבלוק באמצעות`margin: auto`
`.ie7-inline-block()`	אף אחד	השתמש בנוסף לרגיל `display: inline-block`כדי לקבל תמיכה ב-IE7
`.size()`	`@height @width`	הגדר במהירות את הגובה והרוחב על קו אחד
`.square()`	`@size`	מבוסס על `.size()`הגדרת הרוחב והגובה באותו ערך
`.opacity()`	`@opacity`	הגדר, במספרים שלמים, את אחוז האטימות (למשל, "50" או "75")

טפסים

מיקסין	פרמטרים	נוֹהָג
`.placeholder()`	`@color: @placeholderText`	הגדר את `placeholder`צבע הטקסט עבור קלט

טיפוגרפיה

מיקסין	פרמטרים	נוֹהָג
`#font > #family > .serif()`	אף אחד	הפוך אלמנט להשתמש בערימת גופני סריף
`#font > #family > .sans-serif()`	אף אחד	הפוך אלמנט להשתמש בערימת גופנים sans-serif
`#font > #family > .monospace()`	אף אחד	הפוך אלמנט להשתמש בערימת גופנים מונוספייס
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	הגדר בקלות את גודל הגופן, המשקל והמוביל
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	הגדר את משפחת הגופנים לסריף, ושלוט בגודל, במשקל ובמוביל
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	הגדר את משפחת הגופנים ל-Sans-serif, ושלוט בגודל, במשקל ובמוביל
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	הגדר את משפחת הגופנים ל-monspace, ושלוט בגודל, במשקל ובמוביל

מערכת רשת

מיקסין	פרמטרים	נוֹהָג
`.container-fixed()`	אף אחד	צור מיכל מרוכז אופקית להחזקת התוכן שלך
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	צור מערכת רשת פיקסלים (מיכל, שורה ועמודות) עם n עמודות ומרזב רחב של x פיקסלים
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	צור מערכת גריד עדכנית עם n עמודות ומרזב רחב x %
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	צור את מערכת רשת הפיקסלים עבור `input`אלמנטים, תוך התחשבות בריפוד וגבולות
`.makeColumn`	`@columns: 1, @offset: 0`	הפוך כל `div`אחד לעמודת רשת ללא `.span*`הכיתות

מאפייני CSS3

מיקסין	פרמטרים	נוֹהָג
`.border-radius()`	`@radius`	לעגל את הפינות של אלמנט. יכול להיות ערך בודד או ארבעה ערכים מופרדים ברווחים
`.box-shadow()`	`@shadow`	הוסף צללית לאלמנט
`.transition()`	`@transition`	הוסף אפקט מעבר CSS3 (למשל, `all .2s linear`)
`.rotate()`	`@degrees`	סובב אלמנט n מעלות
`.scale()`	`@ratio`	קנה קנה מידה של אלמנט לפי n מגודלו המקורי
`.translate()`	`@x, @y`	הזז אלמנט במישורי x ו-y
`.background-clip()`	`@clip`	חיתוך הרקע של אלמנט (שימושי עבור `border-radius`)
`.background-size()`	`@size`	שלוט בגודל תמונות הרקע באמצעות CSS3
`.box-sizing()`	`@boxmodel`	שנה את מודל התיבה עבור אלמנט (למשל, `border-box`עבור רוחב מלא `input`)
`.user-select()`	`@select`	שליטה בבחירת הסמן של טקסט בעמוד
`.backface-visibility()`	`@visibility: visible`	מנע הבהוב של תוכן בעת שימוש בהמרות תלת-ממדיות של CSS
`.resizable()`	`@direction: both`	הפוך כל רכיב לשינוי גודל בצד ימין ובתחתית
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	הפוך את התוכן של כל אלמנט להשתמש בעמודות CSS3

רקעים והדרגות

מיקסין	פרמטרים	נוֹהָג
`#translucent > .background()`	`@color: @white, @alpha: 1`	תן לאלמנט צבע רקע שקוף
`#translucent > .border()`	`@color: @white, @alpha: 1`	תן לאלמנט צבע גבול שקוף
`#gradient > .vertical()`	`@startColor, @endColor`	צור שיפוע רקע אנכי חוצה דפדפן
`#gradient > .horizontal()`	`@startColor, @endColor`	צור שיפוע רקע אופקי חוצה דפדפן
`#gradient > .directional()`	`@startColor, @endColor, @deg`	צור שיפוע רקע כיווני בין דפדפנים
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	צור שיפוע רקע בשלושה צבעים חוצה דפדפנים
`#gradient > .radial()`	`@innerColor, @outerColor`	צור שיפוע רקע רדיאלי חוצה דפדפן
`#gradient > .striped()`	`@color, @angle`	צור שיפוע רקע מפוספס בין דפדפנים
`#gradientBar()`	`@primaryColor, @secondaryColor`	משמש ללחצנים להקצאת שיפוע וגבול מעט כהה יותר

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

כלים להידור

צומת עם makefile

התקן את מהדר שורת הפקודה LESS ואת uglify-js באופן גלובלי עם npm על ידי הפעלת הפקודה הבאה:

$ npm התקנת -g פחות uglify-js

לאחר ההתקנה פשוט הפעל makeמהשורש של ספריית האתחול שלך ואתה מוכן.

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

שורת הפקודה

התקן את כלי שורת הפקודה LESS דרך Node והפעל את הפקודה הבאה:

$ lessc ./less/bootstrap.less > bootstrap.css

הקפד לכלול --compressבפקודה זו אם אתה מנסה לשמור כמה בתים!

Javascript

הורד את הגרסה העדכנית ביותר של Less.js וכלול את הנתיב אליו (ואת Bootstrap) ב- <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

כדי להדר מחדש את קבצי ה-.less, פשוט שמור אותם וטען מחדש את הדף שלך. Less.js מרכיב אותם ומאחסן אותם באחסון מקומי.

אפליקציית Mac לא רשמית

אפליקציית Mac הלא רשמית צופה בספריות של קבצי .less ומרכיבה את הקוד לקבצים מקומיים לאחר כל שמירה של קובץ .less שנצפה.

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

נבנה עם פחות

למה פחות?

מה נכלל?

למד עוד

משתנים

מיקסינס

פעולות

משתני Bootstrap פחות משתנים, הערכים שלהם והנחיות שימוש

פיגומים וקישורים

מערכת רשת

טיפוגרפיה

טבלאות

צבעי גווני אפור

צבעי מבטא

רכיבים

כפתורים

טפסים

טופס מצבים והתראות

Navbar

תפריטים נפתחים

יחידת גיבורים

מיקסים של Bootstrap

לגבי מיקסינים

מיקסים בסיסיים

מיקסים פרמטריים

הוסף בקלות משלך

שילובים כלולים

כלי עזר

טפסים

טיפוגרפיה

מערכת רשת

מאפייני CSS3

רקעים והדרגות

קומפילציה של Bootstrap עם LESS

כלים להידור

צומת עם makefile

שורת הפקודה

Javascript

אפליקציית Mac לא רשמית

עוד אפליקציות Mac

לִכסוֹס

CodeKit

פשוט