Web DevelopmEnt Bootstrap קרן כליף
תוכן עניינים מהו Bootstrap מבנה הדף תמיכה ברספונסיביות דוגמאות לעיצוב טבלה קישור לדוגמאות עיצובי כל האלמטים
לעבודה עם 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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> ציון השפה וה- charset המתאימים הגדרה להשתמש בכל רוחב המכשיר ושהזום ההתחלתי הוא 1 קובץ ה- css של bootstrap קובץ ה- JQuery קובץ ה-JS של bootstrap
דוגמת מעטפת <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> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/Bootstrap/01_container.html דוגמת מעטפת כל קטע קוד צריך להיות עטוף ב- div עם אחד מה- cass'ים הבאים: container או container-fluid
Div המעטפת: container & container-fluid על-מנת לתמוך ברספונסיביות, כל האלמנטים ב- body צריכים להיות עטופים ב- div שה- class שלו הוא או container או container-fluid container: הרוחב המקסימלי של הדף קבוע וממורכז, ויקטן במידת הצורך container-fluid: הרוחב הוא תמיד רוחב המסך
כיצד 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
חלוקה לעמודות: Stacked-to-horizontal http://kerenkalif.com/ProgrammingLectures/WebDevelopment/Bootstrap/02_gridStackToHorizontal.html חלוקה לעמודות: 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>
חלוקת עמודות שונה לכל מכשיר באופן ידני http://kerenkalif.com/ProgrammingLectures/WebDevelopment/Bootstrap/03_differentLayoutForDevice.html חלוקת עמודות שונה לכל מכשיר באופן ידני מכשיר שרוחבו בגבולות 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
דוגמאות עיצוב אלמנט בסיסי באמצעות מחלקות המוגדרות ב- bootstrap http://kerenkalif.com/ProgrammingLectures/WebDevelopment/Bootstrap/04_elementsDesign.html <!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
<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>gogo@gmail.com</td> <td>gogo@yahoo.com</td> <td>050-5556767</td> <td>Momo</td> <td colspan="2">momo@gmail.com</td> <td>050-8787878</td> </tbody> </table> </div> </body> http://kerenkalif.com/ProgrammingLectures/WebDevelopment/Bootstrap/05_table.html דוגמת עיצוב table
דוגמאות לעיצובים שונים לטבלאות <table class="table table-striped table-bordered table-responsive"> עבורו הבדלי גוון בין השורות עבור גבולות להוספת פס-גלילה אופקי במסכים צרים
אוסף הדוגמאות המלא https://www.w3schools.com/bootstrap/default.asp
ביחידה זו למדנו: מהו Bootstrap מבנה הדף תמיכה ברספונסיביות דוגמאות לעיצוב טבלה קישור לדוגמאות עיצובי כל האלמטים