אתחול

מתחילים

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

1. הורד

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

הורדה מורכבת

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

הורד את Bootstrap

הורד מקור

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

הורד את מקור Bootstrap

2. מבנה הקובץ

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

לאחר ההורדה, פתח את התיקיה הדחוסה כדי לראות את המבנה של (הקומפילציה) Bootstrap. אתה תראה משהו כזה:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── אתחול . דקה _ css
   ├── js / │ ├── אתחול . js
   │ ├── אתחול . דקה _ js
   ├── img / │ ├── glyphicons - halflings . png
   │ ├── גליפיקונים - חצאי - לבן . png
  
  
        
        
        └── README . md

זוהי הצורה הבסיסית ביותר של Bootstrap: קבצים מורכבים לשימוש מהיר בירידה כמעט בכל פרויקט אינטרנט. אנו מספקים CSS ו-JS מקופלים ( bootstrap.*), כמו גם CSS ו-JS מקופלים וממוזערים ( bootstrap.min.*). קובצי התמונה נדחסים באמצעות ImageOptim , אפליקציית Mac לדחיסת PNGs.

3. מה כלול

Bootstrap מגיע מצויד ב-HTML, CSS ו-JS עבור כל מיני דברים, אבל ניתן לסכם אותם עם קומץ קטגוריות הנראות בחלק העליון של תיעוד Bootstrap .

קטעי מסמכים

פיגומים

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

CSS בסיסי

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

רכיבים

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

תוספים של Javascript

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

רשימת רכיבים

יחד, החלקים רכיבים ותוספי Javascript מספקים את רכיבי הממשק הבאים:

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

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

4. תבנית HTML בסיסית

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

כעת, הנה מבט על קובץ HTML טיפוסי :

  1. <html>
  2.   <head>
  3.     <title> תבנית Bootstrap 101 </title>
  4.   </head>
  5.   <גוף>
  6.     <h1> שלום, עולם! </h1>
  7.   </body>
  8. </html>

כדי להפוך את זה לתבנית Bootstraped , פשוט כלול את קבצי ה-CSS וה-JS המתאימים:

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

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

5. דוגמאות

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

  • אתר שיווק בסיסי

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

  • פריסה נוזלית

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

  • תבנית התחלה

    מסמך HTML Barebones עם כל Bootstrap CSS ו-Javascript כלולים.

מה הלאה?

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

בקר במסמכי Bootstrap התאמה אישית של Bootstrap