Bootstrap – המדריך – פרק 13 – עבודה עם הפקדים השונים

יום רביעי, אפריל 19, 2017

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

Bootstrap – המדריך – פרק 12 – שונות אודות טפסים

יום ראשון, דצמבר 11, 2016

לתוכן העניינים   בפרק הקודם למדנו על טפסים אופקיים, בפוסט הנוכחי נלמד על אלמנטים נוספים מעניינים שאפשר לעשות בעזרת הספרייה. נרצה להכיר את היכולות הבאות: להציג ויזואלית את המצב של הפקד (האם יש שגיאה, האם יש בעייה וכדו’) להפוך אלמנט ל – disabled. להציג אייקונים על תיבת הטקסט להצמיד לחצנים ליד תיבת הטקסט   כדי לשנות את הוזיואליות של אלמנט, יש לתת ל – form-group הרלוונטי, את המחלקה המתאימה (has-success, has-error, has-info וכו’), התוצאה תהיה כזו:   שימו לב שגם ה – label וגם ה – help-block קיבלו את הצביעה הנכונה. Code Snippet <div class="form-group has-error"> <label class="control-label">User Name</label> <input type="text" class="form-control" /> <span class="help-block">Bla bla bla bls</span> </div> <div class="form-group has-success"> <label class="control-label">User...
אין תגובות

Bootstrap – המדריך – פרק 11 – טפסים אופקיים

יום חמישי, מאי 12, 2016

לתוכן העניינים בפרק הקודם למדנו על עיצוב טפסים רגילים, היום נראה כיצד מעצבים טפסים בהם הטקסט של הפקד נמצא במקביל לפקד (ולא מעליו)   גם הפעם אציג את התוצאה הסופית לפני שנעבור על הקוד, ושוב יהיה לנו: תיבת טקסט להכנסת מייל תיבת סיסמא סימון של “זכור אותי” שני לחצנים (Login, Register)     להלן הקוד המלא: Code Snippet <div class="row"> <div class="col-md-8 well"> <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-3 control-label">User Name</label> <div class="col-sm-9"> <input type="text" class="form-control" /> <span class="help-block">Press user name</span> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Password</label> <div class="col-sm-9"> <input type="password" class="form-control" /> <span class="help-block">The password need to match </span> </div> </div> <div class="form-group"> <div class="col-sm-9 col-sm-offset-3"> <div class="checkbox"> <label> <input type="checkbox" /> Remember me </label> </div> </div> </div> <div class="text-right"> <input type="button" class="btn btn-default" value="Register" /> <input type="button" class="btn btn-primary" value="Login" /> </div> </form> </div> </div>   אני אתעלם מההסברים...
אין תגובות

Bootstrap – המדריך – פרק 10 – טפסים רגילים

יום שני, מאי 2, 2016

לתוכן העניינים. בפרק הקודם למדנו על הצגת הודעות, הפעם נראה כיצד עובדים עם טפסים. עד כה ראינו כיצד משתמשים בספריה לעיצוב Html סטטי כזה או אחר, אחד הדברים המאתגרים ביותר לעיצוב אלו טפסים, יש כל מיני טפסים אלו אשר מורכבים יותר ואלו אשר מורכבים פחות, בפוסט זה נרצה לראות כיצד מגדירים טופס בסיסי המעוצב יפה (הכל עניין יחסי בחיים…) בקלות בעזרת הספרייה. ראשית אציג את התוצאה הסופית, לאחר מכן את הקוד המושלם ואז הסבר על קטעי הקוד השונים. הטופס שלנו יהיה טופס לוגין פשוט אשר מכיל: תיבת טקסט להכנסת מייל תיבת סיסמא סימון של “זכור אותי” שני לחצנים (Login, Register)   התוצאה הסופית בזמן הרצה תראה כך:   הקוד שיוצר את...
תגובה אחת

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"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> Well done! You successfully read this important alert message. </div> נקבל לחצן X שלחיצה עליו תסגור את ההודעה.   אם נשים לינקים (אלמנטי...
אין תגובות

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...
תגיות: , , , ,
אין תגובות