אתחול

הרחבת Bootstrap

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

נבנה עם פחות

פחות CSS

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

למה פחות?

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

  • Bootstrap קומפילציה מהירה יותר ~6x מהר יותר עם פחות בהשוואה ל-Sass
  • פחות כתוב ב-JavaScript, מה שמקל עלינו לצלול פנימה ולתקן בהשוואה לרובי עם Sass.
  • פחות זה יותר; אנחנו רוצים להרגיש שאנחנו כותבים CSS והופכים את Bootstrap לנגיש לכולם.

מה נכלל?

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

למד עוד

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

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

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

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

כלים להידור

צומת עם makefile

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

$ npm התקנת -g פחות jshint recess 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 שנצפה. אם תרצה, תוכל לשנות את ההעדפות באפליקציה לצמצום אוטומטי ולאיזו ספרייה הקבצים המלוכדים מגיעים.

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

לִכסוֹס

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

CodeKit

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

פשוט

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

השתמש כנכסים סטטיים

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

מבנה קובץ התקנה

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

  אפליקציה/
      פריסות/
      תבניות/
  פּוּמְבֵּי/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

השתמש בתבנית התחלה

העתק את ה-HTML הבסיסי הבא כדי להתחיל.

  1. <html>
  2.   <head>
  3.     <title> תבנית Bootstrap 101 </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "גיליון סגנונות" >  
  6.   </head>
  7.   <גוף>
  8.     <h1> שלום, עולם! </h1>
  9.     <!-- Bootstrap -->
  10.     <script src = "public/js/bootstrap.min.js" ></script> 
  11.   </body>
  12. </html>

שכבה על קוד מותאם אישית

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

  1. <html>
  2.   <head>
  3.     <title> תבנית Bootstrap 101 </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "גיליון סגנונות" >  
  6.     <!-- פרויקט -->
  7.     <link href = "public/css/application.css" rel = "גיליון סגנונות" >  
  8.   </head>
  9.   <גוף>
  10.     <h1> שלום, עולם! </h1>
  11.     <!-- Bootstrap -->
  12.     <script src = "public/js/bootstrap.min.js" ></script> 
  13.     <!-- פרויקט -->
  14.     <script src = "public/js/application.js" ></script> 
  15.   </body>
  16. </html>