אתחול

שימוש ב-LESS עם Bootstrap

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

נבנה עם פחות

למה פחות?

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

מה נכלל?

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

למד עוד

פחות CSS

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

משתנים

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

מיקסינס

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

פעולות

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

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

היפר-קישורים

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

מערכת רשת

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

טיפוגרפיה

@baseFontSize 13 פיקסלים
@baseFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@baseLineHeight 18 פיקסלים

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

@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

רכיבים

כפתורים

@primaryButtonBackground @linkColor

טפסים

@placeholderText @grayLight

Navbar

@navbarHeight 40 פיקסלים
@navbarBackground @grayDarker
@navbarBackgroundHighlight @grayDark
@navbarText @grayLight
@navbarLinkColor @grayLight
@navbarLinkColorHover @white

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

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

מיקסים של Bootstrap

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

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

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

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

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

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

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

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

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

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

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

כלי עזר

מיקסין פרמטרים נוֹהָג
.clearfix() אף אחד הוסף לכל הורה כדי לנקות מצופים בתוכו
.tab-focus() אף אחד החל את סגנון המיקוד של Webkit ואת המתאר העגול של Firefox
.center-block() אף אחד מרכז אוטומטית אלמנט ברמת הבלוק באמצעותmargin: auto
.ie7-inline-block() אף אחד השתמש בנוסף לרגיל display: inline-blockכדי לקבל תמיכה ב-IE7
.size() @height: 5px, @width: 5px הגדר במהירות את הגובה והרוחב על קו אחד
.square() @size: 5px מבוסס על .size()הגדרת הרוחב והגובה באותו ערך
.opacity() @opacity: 100 הגדר, במספרים שלמים, את אחוז האטימות (למשל, "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 %

מאפייני CSS3

מיקסין פרמטרים נוֹהָג
.border-radius() @radius: 5px לעגל את הפינות של אלמנט. יכול להיות ערך בודד או ארבעה ערכים מופרדים ברווחים
.box-shadow() @shadow: 0 1px 3px rgba(0,0,0,.25) הוסף צללית לאלמנט
.transition() @transition הוסף אפקט מעבר CSS3 (למשל, all .2s linear)
.rotate() @degrees סובב אלמנט n מעלות
.scale() @ratio קנה קנה מידה של אלמנט לפי n מגודלו המקורי
.translate() @x: 0, @y: 0 הזז אלמנט במישורי x ו-y
.background-clip() @clip חיתוך הרקע של אלמנט (שימושי עבור border-radius)
.background-size() @size שלוט בגודל תמונות הרקע באמצעות CSS3
.box-sizing() @boxmodel שנה את מודל התיבה עבור אלמנט (למשל, border-boxעבור רוחב מלא input)
.user-select() @select שליטה בבחירת הסמן של טקסט בעמוד
.resizable() @direction: both הפוך כל רכיב שניתן לשנות את גודלו בצד ימין ובתחתית
.content-columns() @columnCount, @columnGap: @gridColumnGutter הפוך את התוכן של כל אלמנט להשתמש בעמודות 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 משמש ללחצנים להקצאת שיפוע וגבול מעט כהה יותר

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

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

כלים להידור

צומת עם makefile

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

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

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

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

שורת הפקודה

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

$ lessc ./lib/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 שנצפה.

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

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

לִכסוֹס

Crunch הוא עורך ומהדר פחות שנראה נהדר שנבנה על Adobe Air.

CodeKit

נוצר על ידי אותו בחור כמו אפליקציית Mac הלא רשמית, CodeKit היא אפליקציית Mac שמרכיבה את LESS, SASS, Stylus ו- CoffeeScript.

פשוט

אפליקציית Mac, Linux ו-PC עבור גרירה ושחרור של קבצים פחותים. בנוסף, קוד המקור נמצא ב-GitHub .