Bootstrap – המדריך – פרק 9 – עבודה עם הודעות

25 בינואר 2016

לתוכן העניינים. בפרק הקודם למדנו אודות רשימות, היום נרצה ללמוד על הודעות שהספרייה נותנת לנו.   למעשה יש מחלקה פשוטה בשם alert שבעזרתה ניתן להציג הודעות למשתמש Code Snippet <div class="alert alert-success" role="alert">    Well done! You successfully read this important alert message.</div><div class="alert alert-info" role="alert">    Well done! You successfully read this important alert message.</div><div class="alert alert-warning" role="alert">    Well done! You successfully read this important alert message.</div><div class="alert alert-danger" role="alert">    Well done! You successfully read this important alert message.</div>   התוצאה תהיה חביבה   במידה ונוסיף את הקוד הבא: Code Snippet <div class="alert alert-danger" role="alert">   ...
אין תגובות

Bootstrap – המדריך – פרק 8 – עבודה עם רשימות

10 בינואר 2016

לתוכן העניינים בפרק הקודם למדנו על עטיפה בשם Well, בפרק זה נלמד מה הספרייה מספקת לנו כשנבוא להציג רשימות. שפת Html מאפשרת שלושה סוגי רשימות: UL – שהיא המוכרת ביותר, המציגה רשימת בלתי ממוספרת (כלומר עם בולטים וכדו’) OL – המציגה רשימה ממסופרת (מספרית או אחר). DL – המציגה רשימה של כותרת תוכן (בעזרת תגיות – dt, dd)   לספרייה יש מספר עזרים כשנרצה להציג רשימות, הפשוטה ביותר לשימוש היא המחלקה list-group על תגית ul, ומחלקת list-group-item על תגיות ה – li, מחלקות אלו ייתנו עיצוב נחמד לרשימה, הקוד ייראה כך: Code Snippet <ul class="list-group"> <li class="list-group-item">Shlomo Goldberg</li> <li class="list-group-item">Asher Mark <span class="badge">10</span></li> <li class="list-group-item">Tomer Kisar</li> <li class="list-group-item">Meir Choen</li> </ul> שימו לב שעל הדרך...
אין תגובות

Bootstrap – המדריך – פרק 7 – עבודה עם WELL

4 בינואר 2016

  לתוכן העניינים   בפרק הקודם למדנו על עבודה עם תמונות, היום נכיר את אחת מהעטיפות הנוחות של הספרייה לאלמנטים במסך. למעשה הוא הוא די פשוט, כל div שתתנו לו את המחלקה well יקבל צבע רקע אפור שמתחלף בהדרגה לאפור בהיר יותר, האלמנט הזה נותן הרגשה מאוד נעימה לעין, ומאפשר לתת רקע יפה לאלמנטים שונים, כמו לטפסים וכד’, ישנם שלושה סוגי well. well – רגיל ייתן עטיפה של הצבע. well well-lg - כנ”ל אך נותן יותר רווח בשוליים. well well-sm – כנ”ל אך נותן רווח מצומצם יותר בשוליים   דוגמת קוד: Code Snippet <div class="well"> Bla bla bla bla bla bla bla <br /> <div class="text-success"> Bla bla bla bla bla bla bla <br...
אין תגובות

Bootstrap – המדריך – פרק 6 – עבודה עם תמונות

24 בנובמבר 2015

לתוכן העניינים.   בפרק הקודם למדנו על טבלאות, הפעם נראה מה יש לספרייה להציע לנו בעבודה עם תמונות.   הספרייה נותנת שני שירותים עיקריים בעבודה עם תמונות: תמיכה בהקטנת והגדלת התמונה לפי המקום שיש לה, בעזרת שימוש במחלקה img-responsive. מתן “מסגרת” לתמונה בעזרת אחד משלושת המחלקות הבאות: img-rounded – המעגל את הפינות של התמונה. img-circle – המעגל את כל התמונה img-thumbnail – הנותן מסגרת לתמונות.   כל תמונה הנמצאת בתוך col--xx כלשהו (size כמובן זה הרזולוצייה הרלוונטית, כפי שלמדנו כאן) ו – xx זה המקום שניתן לעמודה (בין 1 ל – 12), התמונה תגדל ותקטן בהתאם למקום שיש לה תוך שמירה על יחס רוחב-גובה. כל תמונה שתקבל את אחת משלושת המחלקות...
תגיות: , ,
אין תגובות

Bootstrap – המדריך – פרק 5 – עבודה עם Tables

18 באוקטובר 2015

לתוכן העניינים.   בפרק הקודם, למדנו על Panels ותוך כדי עשינו חזרה על ה – Grid System, היום נראה מה נקבל בעבודה עם טבלאות פשוטות. כפי שדברנו בהקדמה, ובפרקים הראשונים כשעסקנו בעבודה עם ה – Grid System, הבנו שלא נכון לעמד את המסך בעזרת טבלאות ותתי טבלאות, אלא עם Div, אמנם עדיין יש שימוש בטבלאות, כגון תצוגה של סיכומים, או עבודה עם גרידים (רגילים, המאפשרים מיון, חיפוש וכדו’). כדי לקבל עיצוב נחמד ועדין לטבלאות, נוסיף את המחלקה (class) בשם table לאלמנט ה – table שלנו, בנוסף נוכל להוסיף את אחד מהמחלקות הבאות: table-striped – נותן צבע רקע שונה לשורות. (לא זמין ב – IE8) table-bordered...
תגיות: , , ,
3 תגובות

Bootstrap – המדריך – פרק 4 – עבודה עם Panels

30 ביולי 2015

לתוכן העניינים בפרק הקודם למדנו על עבודה עם מערכת ה – Grid system המאפשרת לנו לכתוב בצורה לוגית של טבלאות (שורות ועמודות) ומצד שני לעבוד עם div ולוודא תמיכה ברזולוציות שונות. היום נלמד להכיר את אחד מהאלמנטים הנחמדים של הספריה בשם Panels המאפשרים בצורה יחסית קלה להגדיר Container עם עיצוב בסיסי ויפה, על הדרך נכיר מספר מחלקות בסיסיות נוספות לעיצוב ונעשה חזרה קצרה בשימוש ב – Grid system.   נסתכל על דוגמת הקוד הבאה: Code Snippet <div class="row"> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> This is Header <span class="pull-right glyphicon glyphicon-edit"></span> </div> <div class="panel-body"> bla bla bla bla bla <br /> bla bla bla bla bla <br /> bla bla bla bla bla <br /> bla bla bla...
תגיות: , , , ,
אין תגובות

Bootstrap – המדריך – פרק 3 – הגדרת תפריטים ושימוש במערכת הגרידים.

16 ביולי 2015

לתוכן העניינים. בפרק הקודם ראינו את המסך הראשון שלנו תוך שימוש בספרייה, הכרנו מספר מחלקות ודברנו על ארבעת הגדלים הנתמכים.   היום נראה כיצד להגדיר תפריט ולהשתמש ב – Grid System של הספרייה. (הקוד בדוגמאות, מתבסס שיש לכם את ה – starter מהפרקים הקודמים) Grid System. כפי שדברנו בהקדמה, אחד הבעיות שהספרייה באה לפתור זה העימוד של התוכן בעזרת טבלאות שזה לוגי יותר אבל שגוי מכל בחינה שהיא, בעזרת ה – Grid System נוכל לעמד בעזרת שימוש ב – div אבל נחשוב לוגית על שורות ועמודות. אלו המחלקות שאנחנו צריכים להכיר: row – מתאר שורה שניתנת לחלוקה ל – 12 עמודות. col-resolution-width – מתאר עמודה בתוך שורה,...
תגיות: , , , ,
אין תגובות

סיכום קורס בסיסי ב – #C

22 ביוני 2015

  לאחרונה סיימתי ללמד קורס CSharp בסיסי, כתבתי לתלמידים מסמך בן 16 עמודים סיכום קורס, אמנם זה אינו כתוב כפוסט עם דוגמאות קוד, אבל בכל זאת נראה לי שיהיו עוד אנשים שיוכלו ליהנות מסיכום זה: מצורף קובץ pdf עם הסיכום. תוכן העניינים: הקדמה ל – Microsoft.net היכרות עם ה – Type System עבודה עם מחלקות מנגנון ניקוי הזיכרון. מערכים ו – List. עבודה עם מחרוזות. Object Orientedמבנים nullable enums טיפול בשגיאות Operator Overload Reflection Attributes ממשקים.   תהנו
תגיות: ,
תגובה אחת

Bootstrap – המדריך – פרק 2 – שלום עולם, כתיבת המסך הראשון והכירות עם מספר מחלקות בסיסיות.

8 ביוני 2015

לתוכן העניינים. בפרק הקודם הבנו מה צריך להוריד כדי להתחיל לעבוד עם הספרייה, וכיצד צריך להיראות ה – template הבסיסי של דפי ה – WEB שלנו, היום נראה את תחילת הקוד, נכתוב את המסך הראשון ונכיר מספר css בסיסיים.   נזכיר מהו הקוד המשותף בין הדפים (Master Page, Layout Page) Code Snippet <html> <head> <title>Bootstrap demo</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE-edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" />    <link href="../Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="../Content/bootstrap/css/bootstrap-theme.css" rel="stylesheet" /> <!-- <script src="../Scripts/html5shiv.js"></script> <script src="../Scripts/respond.src.js"></script> --> <script src="../Scripts/jquery-1.11.3.js"></script> <script src="../Scripts/bootstrap.js"></script> </head> כעת לאחר שהרצנו את הדף והכול תקין, נתחיל לכתוב את הקוד עצמו. Code Snippet <body> <div class="container"> <div class="page-header"> <h1>Bootstrap demo <small>By Haravdotnet</small></h1> </div> </div> </body> אחד הדברים שבדרך כלל נוודא שקוד ה – html עטוף...
תגיות: , ,
אין תגובות

Bootstrap – המדריך – פרק 1 – הורדת הקבצים, ובניית ה – template הבסיסי.

27 במאי 2015

בתוכן העניינים למדנו למה כדאי ומומלץ להשתמש בספריית Bootstarp ותיארנו את רשימת הנושאים שנלמד, בפרק הנוכחי נראה מהיכן להוריד את הספרייה, ומהם הצעדים המומלצים כדי להתחיל לעבוד עם הספרייה. ראשית נוריד את הספרייה מהאתר שלהם בלינק הבא בלחצן Download Bootstrap, יירד לכם קובץ zip ובתוכו התיקיות הבאות: CSS npm.jsbootstrap.css bootstrap.css.map bootstrap.min.css bootstrap-theme.css bootstrap-theme.css.map bootstrap-theme.min.css Fonts glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff glyphicons-halflings-regular.woff2 JS bootstrap.js bootstrap.min.js npm.js   כל מה שלא מודגש אינו חשוב לזמן הפיתוח, הוא רלוונטי בזמן העלאה לשרת עבור ביצועים וכדו’, אבל לעת עתה ניתן למחוק את הקבצים שאינם מודגשים. כדי לעבוד עם העיצוב של הספרייה, עלינו להוסיף לפרוייקט את תיקיית css+fonts, את קובץ הסקריפט נוסיף רק במידה ונרצה להשתמש ביכולות הסקריפטיות של הספרייה (פקדים וכדו’) במקרה כזה נצטרף להוסיף...
תגיות: , , ,
5 תגובות