Download presentation
Presentation is loading. Please wait.
1
Web DevelopmEnt Bootstrap
קרן כליף
2
תוכן עניינים מהו Bootstrap מבנה הדף תמיכה ברספונסיביות
דוגמאות לעיצוב טבלה קישור לדוגמאות עיצובי כל האלמטים
3
לעבודה עם bootstrap יש לאפשר תמיכה ב- HTML5
Bootstrap היא ספריה עם קודים מוכנים לעיצוב המבוססים על css ועל JavaScript, ולכן יש להוסיף לקוד שלנו קישור לשתי ספריות ולהגדיר התאמות ב- header: הקודים תומכים ברספונסיביות ולכן מומלץ להשתמש בהם לעבודה עם bootstrap יש לאפשר תמיכה ב- HTML5 <!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <meta name="keywords" content="Bootstrap, Keren Kalif"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=" <script src=" <script src=" </head> ציון השפה וה- charset המתאימים הגדרה להשתמש בכל רוחב המכשיר ושהזום ההתחלתי הוא 1 קובץ ה- css של bootstrap קובץ ה- JQuery קובץ ה-JS של bootstrap
4
דוגמת מעטפת <head lang="en">
… <style> h1 {background-color: red;} p {background-color: green;} </style> </head> <body> <div class="container"> <h1>Container Example</h1> <p>This part is inside a .container class</p> <p>this is a responsive fixed width container. This is long-long-long line. this is a long line</p> </div> <div class="container-fluid"> <h1>Container-Fluid Example</h1> <p>This part is inside a .container-fluid class</p> <p>this is a responsive full width container, spanning the entire width of the viewport</p> </body> דוגמת מעטפת כל קטע קוד צריך להיות עטוף ב- div עם אחד מה- cass'ים הבאים: container או container-fluid
5
Div המעטפת: container & container-fluid
על-מנת לתמוך ברספונסיביות, כל האלמנטים ב- body צריכים להיות עטופים ב- div שה- class שלו הוא או container או container-fluid container: הרוחב המקסימלי של הדף קבוע וממורכז, ויקטן במידת הצורך container-fluid: הרוחב הוא תמיד רוחב המסך
6
כיצד bootstrap תומך ברספונסיביות
נקרא bootstrap grid-system למשל 3 עמודות בדף כך שרוחב הראשונה הוא 3 חלקים, השנייה 6 חלקים והשלישית 3 חלקים העמודות רספונסיביות באמצעות תמיכה ע"י CSS, מאחר ומוגדרים ב- 4 class'ים לגודלי מסך שונים: נעדיף לתכנן לגודל זה ו- bootstrap ידע לבצע את ההתאמות לשאר הגדלים קידומת ל- class סוג מכשיר קידומת .col-xs-* טלפונים xs .col-sm-* טאבלטים sm .col-mf-* מחשבים נייחים md .col-lg-* מסכי ענק lg
7
חלוקה לעמודות: Stacked-to-horizontal
חלוקה לעמודות: Stacked-to-horizontal <body> <div class="container"> <h1>Stacked-to-Horizontal</h1> <div class="row"> <div class="col-sm-4" style="background-color: antiquewhite;"> <p>This is the left paragraph</p> </div> <div class="col-sm-6" style="background-color:lightpink;"> <p>This is the middle paragraph</p> <div class="col-sm-2" style="background-color: deeppink;"> <p>This is the right paragraph</p> </body>
8
חלוקת עמודות שונה לכל מכשיר באופן ידני
חלוקת עמודות שונה לכל מכשיר באופן ידני מכשיר שרוחבו בגבולות md כאשר יש הגדרות רק למכשיר גדול, כל המכשירים שקטנים ממנו יהיו מסודרים ורטיקלית <body> <div class="container"> <h1>Different Grid Layout for each Device</h1> <div class="row"> <div class="col-sm-1 col-md-4" style="background-color: antiquewhite;"> <p>This is the left paragraph</p> </div> <div class="col-sm-10 col-md-4" style="background-color:lightpink;"> <p>This is the middle paragraph</p> <div class="col-sm-1 col-md-4" style="background-color:deeppink;"> <p>This is the right paragraph</p> </body> מכשיר שרוחבו בגבולות sm Bootstrap יודע להשתמש ב- class המתאים בהתאם לגודל המכשיר! מכשיר שרוחבו קטן מ- sm
9
דוגמאות עיצוב אלמנט בסיסי באמצעות מחלקות המוגדרות ב- bootstrap
<!DOCTYPE html> <html> <head lang="en"> ... <style> div, p { border: 1px solid black; } </style> </head> <body> <div class="container"> <h1>Different Grid Layout for each Device</h1> <div class="row"> <div class="col-xs-6" style="background-color: antiquewhite;"> <p class="bg-success text-center">This is the left paragraph</p> </div> <div class="col-xs-6" style="background-color:lightpink;"> <p class="text-info text-capitalize">This is the right paragraph</p> </body> </html> דוגמאות עיצוב אלמנט בסיסי באמצעות מחלקות המוגדרות ב- bootstrap ניתן להבחין של- p יש margin שמאלי, ימני ותחתון, ואין padding
10
<body> <div class="container"> <h1>Table Example</h1> <table class="table"> <thead> <tr> <th>Name</th><th>Mail 1</th><th>Mail 2</th><th>Phone</th> </tr> </thead> <tbody> <td>Gogo</td> <td> </td> <td>Momo</td> <td <td> </td> </tbody> </table> </div> </body> דוגמת עיצוב table
11
דוגמאות לעיצובים שונים לטבלאות
<table class="table table-striped table-bordered table-responsive"> עבורו הבדלי גוון בין השורות עבור גבולות להוספת פס-גלילה אופקי במסכים צרים
12
אוסף הדוגמאות המלא
13
ביחידה זו למדנו: מהו Bootstrap מבנה הדף תמיכה ברספונסיביות
דוגמאות לעיצוב טבלה קישור לדוגמאות עיצובי כל האלמטים
Similar presentations
