Bootstrap הוא מסגרת CSS שהפך פופולרי מאוד ברחבי הרשת. הסגנונות שלהם תגובה נראים ברשתות החברתיות טואנטי y טויטר. השימוש בכך חוסך לנו זמן רב בפיתוח אפליקציית רשת מאחר והוא חוסך לנו את כל העבודה והמאמץ הכרוך ביצירת סגנון עמוד נקי המתאים לכל המכשירים. בהתייעצות עם הסגנונות המשמשים במסגרת זו נבין שהם מוכרים לנו, שכן כיום אתרים רבים יישמו אותה.
המבנה
מבנה נוזל Bootstrap
כדי שהאתר שלנו יהיה נגיש ממוביילים וטאבלטים נצטרך להשתמש במבנה הנוזל שמציע לנו Bootstrap. השימוש במבנה זה פשוט מאוד, הכל מבוסס על אלמנטים משך שיעזור לנו מַעֲרָך עיצוב האתרים שלנו. מאוחר יותר, כשאנחנו ניגשים לעיצוב זה מא טלפון חכם o לוח, זה יסתגל אוטומטית למכשיר האמור ומשפר באופן משמעותי את איכות הניווט. נשתמש ב- משך עם שיעורים בחלוקה לוגית בתוך המבנה הנוזלי, כלומר:
<div class="row-fluid"> <div class="span2">Contenido</div> </div>
כאשר המספר 2 מייצג את גודל הטווח. כל שורה מכילה מספיק מקום ל 12 טווחים בגודל 1, או 2 בגודל 6, ניתן לחלק את זה כרצונך. לאחר חריגה ממרחב השורה, היא תרד אוטומטית לשנייה הבאה ותאפשר לנו להשתמש ב- משך גודל 12 כדי ליצור מעבר שורה. אם היינו רוצים לדלג על כמה משך בעת יצירת אחד, כלומר החל מ -4 משך, ויישם גודל של 3, נשתמש בקוד זה:
<div class="span2 offset4">Contenido</div>
זה מאפשר לחטיבה לקפוץ ארבע משתרע לפני הצגת התוכן. אנחנו יכולים להשתמש בזה ברצוננו החופשי, ולדלג על מה שאנחנו רוצים עם הקוד שלנו.
דילוג על טווחים עם שיעור הקיזוז
עיצוב שונה לכל מכשיר
שיעורי CSS כדי להבדיל בין כל מכשיר
כדי להחיל עיצוב שונה עבור כל סוג של מכשיר, נגיד לכל חלוקה הגיונית לאיזה מכשיר הוא מכוון, תוך שימוש בשיעורים הבאים:
בדרך זו אנו יכולים להציג עיצוב שונה לחלוטין עבור כל מכשיר עם אותה כתובת URL.
כפתורים
רשימת הכפתורים שמציעה Bootstrap
Bootstrap מציע לנו רפרטואר נקי של כפתורים צבעוניים, השימוש בו פשוט מאוד:
<a class="btn btn-success" href="URL"> Nombre del Botón </a>
איפה btn btn-success מתייחס לצבע הכפתור, כדי לשנות אותו, נצטרך להחליף אותו רק בשיעורים המוצגים בתמונה הקודמת.
התקנת Bootstrap
להתקנת מסגרת CSS זו, אנו מורידים את ה- zip מהקישור שאשאיר בסוף ההודעה, ונכתוב את הקוד הבא בראש קובץ ה- HTML שלנו.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="./css/bootstrap.css" rel="stylesheet" type="text/css" /> <link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="./js/bootstrap.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script>
לאחר שווידאנו שקובצי ה- CSS וה- JS נמצאים באותה תיקיה כמו קובץ ה- HTML שלנו, אנו יכולים להתחיל לעצב את האתר הרספונסיבי שלנו.
עוד מידע - אימות טפסים
הורד - Bootstrap: CSS Framework
אין לך יותר מדריכים על מסגרת זו ???