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 – המדריך – פרק 3 – הגדרת תפריטים ושימוש במערכת הגרידים.

יום חמישי, יולי 16, 2015

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

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 תגובות

Bootstrap – המדריך

יום רביעי, מאי 20, 2015

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

Bundle and jQuery or bootstrap images

יום שני, יוני 9, 2014

מנגנון ה - bundling and optimization של asp.net הוא מנגנון נהדר שמגיע לפתור לנו מספר בעיות. ספריות (כמו jQuery, angular ואחרים) מגיעות בדרך כלל עם קובץ לזמן פיתוח וקובץ min שמכיל את כל התוכן בצורה מקוצרת (כל הטקסט בשורה אחת, שמות מקוצרים של משתנים וכו’), נרצה לוודא שבזמן פיתוח נשתמש בקובץ הרגיל ובזמן שהמשתמש גולש נשתמש בקובץ המכווץ. עבור הקוד שאנחנו כותבים נרצה גם כן מנגנון שיודע לייצר בזמן שהמתשמש גולש קובץ “min” עם המידע. כל קובץ js או css הינו request נפרד לשרת, ניתן לאחד מספר קבצים לבקשה אחת מהשרת – כך שטעינת העמוד תהיה...
תגיות: , ,
אין תגובות

Simple jQuery menu

יום שני, דצמבר 2, 2013

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

handle jquery drag and resize look – 2

יום שבת, ספטמבר 14, 2013

בהמשך לפוסט על שליטה בהתנהגות של גרירה והרחבה של jQuery, בפוסט זה נראה כיצד ניתן להגדיר שבזמן לחיצה על ctrl יהיה רק גרירה ולא הרחבה. כזכור בפוסט הקודם הראיתי כיצד ניתן לקבוע גודל וצבע עבור השוליים של ההרחבה במידה ומאפשרים גם גרירה – כך שלמשתמש יהיה ברור היכן הוא גורר והיכן הוא מרחיב. הבעייה שיכולה להיווצר שלפעמים השטח מאוד קטן לגרירה, ולכן ניתן להחליט שבמידה והמשתמש לוחץ על ctrl יהיה רק גרירה, הקוד יראה כך: ...
תגיות: , ,
2 תגובות

handle jquery drag and resize look

יום שלישי, ספטמבר 10, 2013

אחד מהתכונות המגניבות שיש ב – jqury ui זהו היכולת להגדיר drag, resize לכל אלמנט. הקוד הוא פשוט ביותר (להורדה) Code Snippet $(function () {     $('div').draggable().resizable({         autoHide: true,         handles: "n, e, s, w" ...
תגיות: , ,
אין תגובות

jQuery UI menu horizontal – rtl

יום ראשון, ספטמבר 8, 2013

לא מזמן הייתי צריך להשתמש ב – jquery ui menu זהו אחד מהתכונות החדשות של jquery ui, ונראה שהם לא באמת השקיעו אלא כתבו קומפוננטה נוספת (חשובה) לצאת ידי חובה וחבל, אם נסתכל על כל שאר היכולות, לכל אחד מהם יש אוסף של תכונות ודוגמאות, מה שאין ל – menu. בכל מקרה, אחד מהתכונות שנצפה מתפריט הוא לדעת להיות לרוחב או לאורך, מה שמגיע עם jquery תומך רק לאורך, כדי לשנות לרוחב (את הבסיס, מצאתי כאן – והוספתי קצת שינויים כדי לתמוך בעברית ולשנות את הסימון של החץ לתתי תפריטים) נוסיף את ה...
תגיות: , ,
אין תגובות