הארכה · Bootstrap בעברית

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

למה פחות?

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

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

מה נכלל?

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

למד עוד

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

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

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

כלים להידור

שורת הפקודה

עקוב אחר ההוראות בפרויקט readme ב- GitHub להידור באמצעות שורת הפקודה.

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

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

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

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

<html>
  <head>
    <title> תבנית Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "גיליון סגנונות" >  
  </head>
  <גוף>
    <h1> שלום, עולם! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

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

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

<html>
  <head>
    <title> תבנית Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "גיליון סגנונות" >  
    <!-- פרויקט -->
    <link href = "public/css/application.css" rel = "גיליון סגנונות" >  
  </head>
  <גוף>
    <h1> שלום, עולם! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- פרויקט -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

הרחבת Bootstrap

נבנה עם פחות

למה פחות?

מה נכלל?

למד עוד

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

כלים להידור

שורת הפקודה

JavaScript

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

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

לִכסוֹס

CodeKit

פשוט

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

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

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

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