Bootstrap ‫עדן אוריון‬ www.edenorion.com ‫המטרה‬ ‫יצירת אחידות (מסוימת) בממשקי וחווית משתמש‬ ‫‪Mobile First‬‬ ‫האצת תהליך בניית האתרים‬ ‫מתן כלים מתקדמים לכווולם (מתחילים ומתקדמים)‬ ‫הפתרון ‪Bootstrap -‬‬ ‫•‬ ‫•‬ ‫•‬ ‫•‬ ‫•‬ ‫•‬ ‫סט בסיסי של כלי ‪ CSS‬לעיצוב‬ ‫כלי ‪ CSS‬לממשק משתמש כגון תפריטים וכפתורים‬ ‫כלי ‪ CSS‬לעיצוב "מגיב" – רספונסיבי‬ ‫יישומוני ‪ JS‬מובנים (בשילוב ‪ )Jqurey‬לממשק משתמש‬ ‫(אקורדיאונים למשל)‬ ‫סט אייקונים מקצועי ואחיד‬ ‫גרסאות מצומצמות להקטנת התעבורה באתר גמור‬ ‫התאמה כוללת‬ http://getbootstrap.com/ ‫מעט הסטוריה‬ ‫• ‪ Bootstrap‬נכתבה על ידי ‪ Mark Otto‬ו‪Jacob -‬‬ ‫‪ Thornton‬ושוחררה לראשונה באוגוסט ‪.2011‬‬ ‫• הרעיון המקורי – לפתח ממשק משתמש קדמי מבוסס‬ ‫תשתית – ‪ Framework‬ולקדם אחידות בשימוש‬ ‫בכלים באתרים‪ ,‬לפשט את השימוש‪ ,‬ולהאיץ את תהליך‬ ‫הבנייה‪.‬‬ ‫• ‪ Bootstrap‬נמצאת היום בגרסתה השלישית‬ ‫ההייפ‪...‬‬ ‫•‬ ‫•‬ ‫•‬ ‫•‬ ‫•‬ ‫‪ Bootstrap‬הוא המיזם הפופולארי ביותר ב‪Github-‬‬ ‫כאשר הרבה מאחוריו נמצאים פרויקטים כגון‬ ‫‪...Jquery‬‬ ‫דוגמאות לשימוש – ‪Built with Bootstrap‬‬ ‫‪Opencooks.com‬‬ ‫אלכסון‬ ‫‪http://www.lovebootstrap.com‬‬ ?‫מי ומה בחוברת‬ • Scaffolding • Base CSS • Components • Javascript plugins • Using LESS ‫ – פיגומים‬Scaffolding Default grid system 12 columns Fixed layout Fluid layout Responsive design CSS ‫תיבת הגדרות‬ Typography Tables Forms Buttons & Icons Components Buttons, Navigation, Labels, Badges, Typography, Thumbnails, Alerts, Progress bars, Miscellaneous Button groups ‫כפתורים‬ ‫ניווט‬ ‫ ומידע‬,‫ תגיות‬,‫תוויות‬ Badges Labels Alerts ‫רכיבים‪ ,‬טיפוגרפיה‪" ,‬בולים" לתמונות‪" ,‬פסי התקדמות"‬ JS ‫פלאגינים של‬ , Popover, Alert, ‫טולטיפים‬, ‫טאבים‬, ‫נשלפים‬, ‫• מודל‬ , Carousel, Button, Collapse LESS http://twitter.github.com/bootstrap/less.html ‫רשימת מקורות‬ http://twitter.github.io/bootstrap/ • Lynda.com Joomla Bootstrap • Bootstrap ‫ לתפריטים מבוססי‬CSS • ‫ומה היופי בג'ומלה ‪?3‬‬ ‫שהכל כבר בפנים!!!‬ Demo UTF8 ‫קטעי קוד – דף בסיסי‬ <html> <head> <title>/<‫ סדנאות אפייה עצמית‬- ‫אני לבד‬title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link href="css/bootstrap.min.css" rel="stylesheet">    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="css/custom.css" rel="stylesheet" type="text/css"> </head> <body> <h1>Hello World</h1>  <script src="https://code.jquery.com/jquery.js"></script>  <script src="js/bootstrap.min.js"></script> </body> </html> ‫ תפריט‬- ‫קטעי קוד‬ <div class="col-md-12" class="navbar"> <ul class="nav nav-tabs nav-justified"> <li class="active"><a href="#">/<‫דף הבית‬a></li> <li><a href="#">/<‫אודות‬a></li> <li><a href="#">/<‫סדנאות‬a></li> <li><a href="#">/<‫גלריה‬a></li> <li><a href="#">/<‫צרו קשר‬a></li> </ul> </div> ‫ קרוסלה‬- ‫קטעי קוד‬  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol>  <div class="carousel-inner"> <div class="item active"> <img src="img/cake1.jpg" alt="..."> <div class="carousel-caption"> /< ...‫קורס נפלא רוצה עוד‬div> </div> <div class="item"> <img src="img/cake2.jpg" alt="..."> <div class="carousel-caption">/< ‫לא מפסיקים להלל‬div> </div> <div class="item"> <img src="img/cake3.jpg" alt="..."> <div class="carousel-caption">/< ?‫יש גם לחנוכה‬div> </div> ... </div>  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> ‫קטעי קוד ‪ -‬אודות‬ ‫>"‪<div class="col-md-12‬‬ ‫>‪h1‬ברוכים הבאים<‪<h1>/‬‬ ‫לורם איפסום דולור סיט אמט‪ ,‬קונסקטורר אדיפיסינג אלית סחטיר בלובק‪ .‬תצטנפל בלינדו למרקל אס לכימפו‪ ,‬דול‪ ,‬צוט >‪<p‬‬ ‫ומעיוט ‪ -‬לפתיעם ברשג ‪ -‬ולתיעם גדדיש‪ .‬קוויז דומור ליאמום בלינך רוגצה‪ .‬לפמעט מוסן מנת‪ .‬לורם איפסום דולור סיט‬ ‫אמט‪ ,‬קונסקטורר אדיפיסינג אלית‪ .‬סת אלמנקום ניסי נון ניבאה‪ .‬דס איאקוליס וולופטה דיאם‪ .‬וסטיבולום אט דולור‪ ,‬קראס‬ ‫אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק‪ .‬קונדימנטום קורוס בליקרה‪ ,‬נונסטי קלובר בריקנה סטום‪ ,‬לפריקך‬ ‫לפרומי בלוף קינץ תתיח לרעח‪ .‬לת צשחמי צש בליא‪ ,‬מנסוטו צמלח לביקו ננבי‪ ,‬צמוקו בלוקריה >‪p‬תצטריק לרטי‪<.‬‬ ‫שיצמה ברורק‪ .‬צש בליא‪ ,‬מנסוטו צמלח לביקו ננבי‪ ,‬צמוקו בלוקריה שיצמה ברורק‪ .‬מוסן מנת‪ .‬להאמית קרהשק סכעיט‬ ‫דז מא‪ ,‬מנכם למטכין נשואי מנורך‪ .‬קוואזי במר מודוף‪ .‬אודיפו בלאסטיק מונופץ קליר‪ ,‬בנפת נפקט למסון בלרק ‪ -‬וענוף‬ ‫>‪p‬לפרומי בלוף קינץ תתיח לרעח‪ .‬לת צשחמי צש בליא‪ ,‬מנסוטו צמלח לביקו ננבי‪ ,‬צמוקו בלוקריה שיצמה ברורק‪<.‬‬ ‫קולהע צופעט למרקוח איבן איף‪ ,‬ברומץ כלרשט מיחוצים‪ .‬קלאצי נולום ארווס סאפיאן ‪ -‬פוסיליס קוויס‪ ,‬אקווזמן קוואזי‬ ‫במר מודוף‪ .‬אודיפו בלאסטיק מונופץ קליר‪ ,‬בנפת נפקט למסון בלרק ‪ -‬וענוף סחטיר בלובק‪ .‬תצטנפל בלינדו למרקל אס‬ ‫לכימפו‪ ,‬דול‪ ,‬צוט ומעיוט ‪ -‬לפתיעם ברשג ‪ -‬ולתיעם גדדיש‪ .‬קוויז דומור ליאמום בלינך רוגצה‪ .‬לפמעט מוסן מנת‪ .‬הועניב‬ ‫היושבב שערש שמחויט ‪ -‬שלושע ותלברו חשלו שעותלשך וחאית נובש ערששף‪ .‬זותה מנק הבקיץ אפאח דלאמת יבש‪,‬‬ ‫>‪p‬כאנה ניצאחו נמרגי שהכים תוק‪ ,‬הדש שנרא התידם הכייר וק‪<.‬‬ ‫קולורס מונפרד אדנדום סילקוף‪ ,‬מרגשי ומרגשח‪ .‬עמחליף לורם איפסום דולור סיט אמט‪ ,‬קולורס מונפרד אדנדום סילקוף‪,‬‬ ‫מרגשי ומרגשח‪ .‬עמחליף הועניב היושבב שערש שמחויט ‪ -‬שלושע ותלברו חשלו שעותלשך וחאית נובש ערששף‪ .‬זותה‬ ‫>‪p‬מנק הבקיץ אפאח דלאמת יבש‪ ,‬כאנה ניצאחו נמרגי שהכים תוק‪ ,‬הדש שנרא התידם הכייר וק‪<.‬‬ ‫נולום ארווס סאפיאן ‪ -‬פוסיליס קוויס‪ ,‬אקווזמן קוואזי במר מודוף‪ .‬אודיפו בלאסטיק מונופץ קליר‪ ,‬בנפת נפקט למסון בלרק‬ ‫>‪ -p‬וענוף לפרומי בלוף קינץ תתיח לרעח‪ .‬לת צשחמי <‪/‬‬ ‫>‪</div‬‬ ‫קטעי קוד – קובייה אחת משלוש‬ ‫>"‪<div class="col-md-4‬‬ ‫>‪h1‬סדנת בצקים<‪<h1>/‬‬ ‫"‪<img src="img/bazek.jpg" class="img-responsive‬‬ ‫לורם איפסום דולור סיט אמט‪ ,‬קונסקטורר >‪p‬סדנת בצקים"><"=‪alt‬‬ ‫אדיפיסינג אלית סחטיר בלובק‪ .‬תצטנפל בלינדו למרקל אס לכימפו‪,‬‬ ‫דול‪ ,‬צוט ומעיוט ‪ -‬לפתיעם ברשג ‪ -‬ולתיעם גדדיש‪ .‬קוויז דומור‬ ‫ליאמום בלינך רוגצה‪ .‬לפמעט מוסן מנת‪ .‬לורם איפסום דולור סיט‬ ‫אמט‪ ,‬קונסקטורר אדיפיסינג אלית‪ .‬סת אלמנקום ניסי נון ניבאה‪ .‬דס‬ ‫איאקוליס וולופטה דיאם‪ .‬וסטיבולום אט דולור‪ ,‬קראס אגת לקטוס‬ ‫וואל אאוגו וסטיבולום סוליסי טידום בעליק‪ .‬קונדימנטום קורוס‬ ‫>‪p‬בליקרה‪ ,‬נונסטי קלובר בריקנה סטום‪ ,‬לפריקך תצטריק לרטי‪/<.‬‬ ‫>‪</div‬‬ ‫קטעי קוד ‪Footer -‬‬ ‫>""‪<div id="footer‬‬ ‫>‪h3‬לפרטים נוספים<‪<h3>/‬‬ ‫לורם איפסום דולור סיט אמט‪ ,‬קונסקטורר אדיפיסינג אלית סחטיר >‪<p‬‬ ‫בלובק‪ .‬תצטנפל בלינדו למרקל אס לכימפו‪ ,‬דול‪ ,‬צוט ומעיוט ‪-‬‬ ‫לפתיעם ברשג ‪ -‬ולתיעם גדדיש‪ .‬קוויז דומור ליאמום בלינך רוגצה‪.‬‬ ‫לפמעט מוסן מנת‪ .‬לורם איפסום דולור סיט אמט‪ ,‬קונסקטורר‬ ‫אדיפיסינג אלית‪ .‬סת אלמנקום ניסי נון ניבאה‪ .‬דס איאקוליס וולופטה‬ ‫דיאם‪ .‬וסטיבולום אט דולור‪ ,‬קראס אגת לקטוס וואל אאוגו‬ ‫וסטיבולום סוליסי טידום בעליק‪ .‬קונדימנטום קורוס בליקרה‪ ,‬נונסטי‬ ‫>‪p‬קלובר בריקנה סטום‪ ,‬לפריקך תצטריק לרטי‪/<.‬‬ ‫>‪</div‬‬ ‫קישורים – ארגזי חול‬ • http://mashable.com/2013/10/20/bootstrap-editors/ • http://www.bootply.com/ • http://bootstraphero.com/the-big-badass-list-of-twitter-bootstrapresources • http://bootsnipp.com/ • http://www.stylebootstrap.info/ • http://startbootstrap.com/all-templates • ‫ בדיקת רספונסיביות‬- ‫קישורים‬ • • • • • http://ami.responsivedesign.is http://www.responsinator.com http://www.studiopress.com/responsive/ http://www.responsivedesignchecker.com http://www.browserstack.com/responsive ‫קישורים – דברים אחרים‬ Windows 8 ‫בוטסטראפ שנראה כמו‬ http://aozora.github.io/bootmetro/ Flat UI ‫גרסה נוספת‬ http://designmodo.github.io/Flat-UI/ ‫תודה רבה‬ ‫עדן אוריון‬ ‫‪[email protected]‬‬