Facebook
Twitter
RSSיצירת דף אינטרנט רספונסיבי בעברית משרטוט, בזמן קצר ביותר – Bootstrap3
לחצו כאן כדי לראות את התוצאה הסופית .
הקדמה
שלום חברים . בהמשך לסידרת המאמרים הקודמים שלי על הספריה של Twitter Bootstrap, וכמו שהבטחתי כשכתבתי אותם – הכנתי מדריך שכולל בתוכו ומיישם את השימוש בכלים העיקרייים של Bootstrap (גירסה 3).
המדריך כולל הסבר מעמיק ומפורט כיצד ליצור אתר רספונסיבי (מתאים את עצמו לכל סוגי המסכים). נתחיל בשרטוט ונסיים בדף הכולל בתוכו – תפריט רגיל, תפריט מותאם לסמארטפונים וטאבלטים, סליידר עם כיתוב, ריבועי תוכן המותאמים לעברית, שימוש בקבצי תמונה רספונסיביים.. ועוד כמה תוספות עיצוב ב CSS.
ניסיתי לעשות זאת כמה שיותר בצורה בסיסית ומובנת, ולכן לא התעמקתי והשקעתי זמן בעיצוב – אז סילחו לי על כך מראש.
עוד משהו לפני שאני מתחיל – למי שלא קרא את מדריך המבוא ל Bootstrap3 (לחצו פה כדי לקרוא), לא מומלץ לקפוץ ולהתחיל פה. כדאי גם שיהיה ידע בסיסי ב HTML5 ו CSS3 .
תכנון ה WireFrame של העמוד
נשרטט איזו סקיצה של האלמנטים המרכזיים בדף . הקונספט יהיה : דף נחיתה של ארגון כלשהו, שמראה סליידר עם 3 תמונות, תפריט, איזור כניסת יוזרים ורישום, והסבר על המוצרים הבולטים של אותו הארגון .
דף בסיסי שבטוח נתקלנו במשהו שדומה לו בהרבה אתרים של חברות או ארגונים. והנה ה WireFrame שלו :
הורדת קבצי Bootstrap ויצירת תיקיות הפרוייקט
ראשית, בואו ניצור תיקיה באיזשהו מקום במחשב שלנו (עדיף כמובן אם יש לנו שרת מקומי אז בתוך תיקית ה www שב localhost) , נקרא לה נגיד bs_project .
הכנתי מבעוד מועד את קבצי וספריות הפרוייקט . – לחצו פה להורדה.
חלצו את הקבצים ישירות אל תיקית הפרוייקט שכרגע יצרתם.
פיתחו עם editor כלשהו את קובץ הבסיס שממנו נתחיל – index.html . אני ממליץ על ה editor המצויין SublimeText .
מה שיש לנו בקובץ זה תבנית בסיסית של דף HTML5 הכולל בתוכו הטמעות של קבצי Bootstrap ושל Jquery. וכמו כן הטמעות של קובץ עיצוב – css .
1: <!DOCTYPE html>
2: <html lang="he" >
3: <head>
4: <title>My Bootsrap Site</title>
5: <meta name="viewport" content="width=device-width, initial-scale=1.0">
6: <meta charset="UTF-8">
7: <!-- Bootstrap -->
8: <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
9: 10: <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
11: <!--[if lt IE 9]>
12: <script src="assets/js/html5shiv.js"></script>
13: <script src="assets/js/respond.min.js"></script>
14: <![endif]-->1:2:3: </head>4: <body>5:6: <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->7: <script src="http://code.jquery.com/jquery.min.js">1: </script>2: <!-- Include all compiled plugins (below), or include individual files as needed -->3: <script src="js/bootstrap.min.js"></script>
15:16: </body>17: </html>
הגדרת קובץ Css משלנו בנפרד : משהו חשוב שצריך להוסיף בכדי לבצע שינויים ותוספות בעיצוב העמוד, כמו לדוגמא כל העניין עם עברית מימין לשמאל, צבעים , גדלי פונט משלנו וכו'. וכל זאת מבלי לפגוע בהגדרות העיצוב של bootstrap ..
כדי לעשות את כל זה, ניצור קובץ חדש בתוך תיקית ה css , נקרא לו mystyle.css ונבצע אליו קישור מתוך הקובץ index.html .
1: <link href="css/mycss.css" rel="stylesheet" media="screen">
עכשיו בואו נבדוק עם הקובץ מקושר בצורה טובה ובאמת מתפקד לשינויים. בואו נגדיר צבע רקע לאלמנט ה body שלנו :
1: body{
2: background-color:#033;
3: }תרפרשו את העמוד והצבע אמור להשתנות. אם לא השתנה – תבדקו שוב את ההטמעה של הקובץ .. ואם כן אז מעכשיו כל שינוי ב CSS יהיה אך ורק בקובץ הזה..
שלב הבניה
הוספת Container
אז כמו שאתם יודעים, כל דף פיגוז מתחיל ב Container . כל מה שאנחנו צריכים זה להוסיף כמובן class בשם container.
אבל כמו שאמרנו, אנחנו כנראה נרצה לעשות בו כלשהם שינויים בעיצוב וכאלה, אז נשנה לו את השםל mycontainer. וכל זה מייד אחרי תגית ה Body :
1: <div class="mycontainer">
2: </div>
יצירת תפריט עליון
כדי ליצור את התפריט, יש להוסיף את האלמנט nav עם הקלאסים והמאפיינים הבאים :
1: <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation"> </nav>
נשמור את הקובץ ונעשה ריפרוש בדפדפן. אנחנו אמורים לראות מין פס כזה בצד העליון של הדף, שבו נשים את האלמנטים הבאים של התפריט. קצת הסבר על הקלאסים שהשתמשנו בהם :
navbar – פשוטו כמשמעו. הוא בעצם ה container של כל מה שיהיה בסרגל העליון של התפריט.
navbar-fixed-top – גם פשוט – שיוך position:fixed לאלמנט. מה שאומר שהאלמנט יישאר ממוקם כל הזמן בראש המסך ולא יעלם כאשר נגלול מטה.
navbar-inverse – בעצם משנה את כל ערכת הצבעים של התפריט לצבעים מנוגדים (רקע כהה, פונטים בהירים…) . זו תוספת שהוספתי בגלל שהרגע של הדף שהשתמשתי בו הוא כהה..
יפה, עכשיו בואו נוסיף את שם הארגון ובנוסף איזשהו כפתור שיצוץ בשורת התפריט כאשר המסך יהיה ברוחב של טאבלט ומטה. למה זה טוב? קודם כל זה כלכך נפוץ היום הלחצן הזה שבא במקום התפריט בסמארטפונים וטאבלטים, וזה גם חוסך לנו מקום ובלגאן על המסך. אז נוסיף את הקוד ישר אל תוך האלמנט הקודם שיצרנו nav
1: <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
2: 3: <div class="navbar-header">
4: <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
5: <span class="sr-only">Toggle navigation</span>
6: <span class="icon-bar"></span>
7: <span class="icon-bar"></span>
8: <span class="icon-bar"></span>
9: </button>
10: <a class="navbar-brand" href="#">לוגו הארגון</a>
11: </div>
12: 13: </nav>
מוזמנים לשמור, לרפרש ולראות את השינויים כאשר אתם מקווצ'צ'ים את המסך לרוחב . הלחצן אמור לצוץ לכם מתישהו.
עכשיו בואו נמלא את התפריט בלינקים וב 2 כפתורים : לוג-אין ורישום. מה שאנחנו צריכים לעשות זה ראשית להוסיף עוד div שיהיה לו קלאס מסוג collapse . ולהוסיף אותו מייד לאחר הדיב האחרון שיצרנו navbar-header . מה שיהיה בתוך דיב מסוג collapse – יעלם כאשר נשתמש במסך קטן ויתמקם מחדש בתוך תפריט קטן שיופיע כאשר נלחץ על הלחצן שלנו ממקודם. נשמע מסובך? בואו נוסיף את זה גם לקובץ שלנו ונראה כמה זה ניהיה פשוט (אתם יכולים להחליף את כל אלמנט ה Nav בזה):
1: <!-- My Nav Bar ------------------------>
2: <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
3: <!-- Brand and toggle get grouped for better mobile display -->
4: <div class="navbar-header">
5: <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
6: <span class="sr-only">Toggle navigation</span>
7: <span class="icon-bar"></span>
8: <span class="icon-bar"></span>
9: <span class="icon-bar"></span>
10: </button>
11: <a class="navbar-brand" href="#">לוגו הארגון</a>
12: </div>
13: 14: <!-- Collect the nav links, forms, and other content for toggling -->
15: <div class="collapse navbar-collapse navbar-ex1-collapse ">
16: <ul class="nav navbar-nav navbar-right " id="menu_items">
17: <li class="active navbar-right"><a href="#">דף הבית</a></li>
18: <li class="navbar-right"><a href="#">מי אנחנו</a></li>
19: <li class="navbar-right"> <a href="#">מוצרים</a></li>
20: <li class="navbar-right"><a href="#">צרו קשר</a></li>
21: <li class="navbar-right">
22: 23: <a href="#" class="dropdown-toggle " data-toggle="dropdown">עזרה <b class="caret"></b></a>
24: <ul class="dropdown-menu ">
25: <li ><a href="#">בלוג</a></li>
26: <li ><a href="#">פורום</a></li>
27: <li ><a href="#">שאלות ותשובות</a></li>
28: <li ><a href="#">גירסה 1.0.1</a></li>
29: </ul>
30: 31: </li>
32: </ul>
33: </div><!-- /.navbar-collapse -->
34: 35: </nav> <!-- End of Nav Bar ------------------------>
תרפרשו. צריכים לראות עכשיו תפריט שנעלם כאשר מקטינים את המסך לרוחב טאבלט.
עוד תוספת קטנה שנפוצה בהרבה אתרים ארגוניים זה כפתורי Log-in & Register . נוסיף את הכפתורים הבאים מייד לאחר תגית הסגירה של ה ul באלמנט div.collapse.
והנה כל התפריט שלנו במלואו לאחר התוספת של הכפתורים:
1: <!-- My Nav Bar ------------------------>
2: <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
3: <!-- Brand and toggle get grouped for better mobile display -->
4: <div class="navbar-header">
5: <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
6: <span class="sr-only">Toggle navigation</span>
7: <span class="icon-bar"></span>
8: <span class="icon-bar"></span>
9: <span class="icon-bar"></span>
10: </button>
11: <a class="navbar-brand" href="#">לוגו הארגון</a>
12: </div>
13: 14: <!-- Collect the nav links, forms, and other content for toggling -->
15: <div class="collapse navbar-collapse navbar-ex1-collapse ">
16: <ul class="nav navbar-nav navbar-right " id="menu_items">
17: <li class="active navbar-right"><a href="#">דף הבית</a></li>
18: <li class="navbar-right"><a href="#">מי אנחנו</a></li>
19: <li class="navbar-right"> <a href="#">מוצרים</a></li>
20: <li class="navbar-right"><a href="#">צרו קשר</a></li>
21: <li class="navbar-right">
22: 23: <a href="#" class="dropdown-toggle " data-toggle="dropdown">עזרה <b class="caret"></b></a>
24: <ul class="dropdown-menu ">
25: <li ><a href="#">בלוג</a></li>
26: <li ><a href="#">פורום</a></li>
27: <li ><a href="#">שאלות ותשובות</a></li>
28: <li ><a href="#">גירסה 1.0.1</a></li>
29: </ul>
30: 31: </li>
32: </ul>
33: 34: <button type="button" class="btn btn-default navbar-btn btn-inverse navbar-left btn-xs " >Register</button>
35: <button type="button" class="btn btn-default navbar-btn navbar-left btn-xs btn-primary" >Sign in</button>
36: </div><!-- /.navbar-collapse -->
37: 38: </nav> <!-- End of Nav Bar ------------------------>
בעיה – לא יודע אם שמתם לב, אבל אין כלכך התאמה לעברית.. היישור אותיות הוא לשמאל. גם כשנלחץ על הקישור "עזרה" בתפריט נוכל לראות את הבעיה וגם כאשר יופיע לנו לחצן התפריט כאשר נקטין את המסך – הטקסט בו יהיה מיושר לשמאל .
פתרון – נוסיף לקובץ ה mystyle.css שלנו , בתוך עיצוב תגית ה Body את המאפיין direction: rtl . זה גם יסדר לנו את היישור לימין בכל שאר העצמים.
הגדרת הסליידר
כמה פעמים מצאנו את עצמנו יושבים שעות מול גוגל ומחפשים איזה סליידר פשוט ,נוח וגמיש – אה וגם חינמי ?? לי יצא הרבה להתערבב עם זה .. בוטסטרפ ,נותנים לנו להשתמש בסליידר פשוט, נוח , קל, חינמי ו……. ניחשתם נכון : רספונסיבי (כמה פעמים כבר אאמרתי רספונסיבי היום???).
אז כדי להוסיף סליידר, קודם כל צריך תמונות לסליידר. הכנתי לכם 3 תמונות בתוך תיקית gallery. למי שמתעניין – תמונות שצילמתי בהודו.
ועכשיו בואו נוסיף, מייד לאחר סגירת אלמנט ה Nav שהגדרנו בפרק הקודם, אלמנט div עם 2 קלאסים בשמות class=carousel slide ומזהה id=carousel-example . זהו בעצם הקונטיינר של הסליידר שלנו. אפשר לשמור ולרפרש ולראות ששום דבר לא קורה על המסך.
בואו נוסיף בתוך ה div שעכשיו יצרנו, אינדיקטורים של מיקומי התמונות (העיגולים הקטנים האלו שאומרים לנו באיזו תמונה אנחנו נמצאים כרגע בסליידר). כדי לעשות זאת , ניצור אלמנט OL עם קלאס בשם carousel-indicators . ובתוך אלמנט הרשימה הזה, נוסיף את כל האינדיקטורים שלנו כאלמנטים מסוג li שבכל אחד מהם יש את המאפיין data-target = #carousel-example . זאת אומרת, כל אחד מהם יצביע על הקונטיינר הראשי. ובנוסף, נוסיף לכל אחד מאלמנט ה li את המאפיין data-slide-to=x כאשר במקרה שלנו ה x הוא מ 0 עד 2 (מספר התמונה בסלייד). מסובך???? בטח !!! בואו תראו את הכל בקוד ואז תבינו יותר כאשר תקראו שוב
1: <!-- My Carousel -->
2: <div id="carousel-example" class="carousel slide">
3: 4: <!-- Indicators -->
5: <ol class="carousel-indicators">
6: <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
7: <li data-target="#carousel-example" data-slide-to="1"></li>
8: <li data-target="#carousel-example" data-slide-to="2"></li>
9: </ol>
10: 11: </div><!-- End of My Carousel -->
השלב הבא זה לקשר את התמונות עצמם אל הסליידר.
נוסיף תגית div חדשה, מייד לאחר הסגירה של תגית ה OL , עם קלאס בשם carousel-inner . הדיב הזה בעצם אמור להכיל את כל העצמים שיהיו בסליידר (תמונות, טקסט, כותרות ואפילו כפתורים). כאשר כל תגית של סלייד אחד כזה תיהיה div עם קלאס item . וככה זה נראה הכל ביחד :
1: <!-- My Carousel -->
2: <div id="carousel-example" class="carousel slide">
3: 4: <!-- Indicators -->
5: <ol class="carousel-indicators">
6: <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
7: <li data-target="#carousel-example" data-slide-to="1"></li>
8: <li data-target="#carousel-example" data-slide-to="2"></li>
9: </ol>
10: 11: <!-- Wrapper for slides -->
12: <div class="carousel-inner">
13: 14: <div class="item active">
15: <img src="gallery/img1.jpg" alt="IMG1">
16: <div class="carousel-caption" > סלייד ראשון . <button type="button" class="btn btn-primary btn-sm ">לפרטים</button> </div>
17: 18: </div>
19: 20: <div class="item ">
21: <img src="gallery/img2.jpg" alt="IMG2">
22: <div class="carousel-caption"> סלייד שני . </div>
23: </div>
24: 25: <div class="item ">
26: <img src="gallery/img3.jpg" alt="IMG3">
27: <div class="carousel-caption"> סלייד שלישי ואחרון . </div>
28: </div>
29: 30: </div>
31: 32: </div><!-- End of My Carousel -->
תרפרשו. אמורים לראות סליידר שמתפקד בהתאם ללחיצות על עיגולי האינדיקטורים.
יפה. יש לנו סליידר.
בואו קצת נעצב אותו ונתאים לו מנגנון הפעלה אוטומטית עם אינטרוואל של כל 3 וחצי שניות.
כדי לעשות אינטרוואל, יש לגשת לתחתית הקוד, איפה שמוגדרים כל הסקריפטים. ולהוסיף תגית script נוספת ובתוכה – לאחר שיצרנו איוונט מסוג document.ready (ייפעל לאחר שכל העמוד ייטען), יש להוסיף את הפקודה הבאה (מצרף את כל הפקודה כלל אלמנט ה script)
1: <script> 2: 3: $(document).ready(function() {
4: $('.carousel').carousel({
5: interval: 3500 6: }) 7: }); 8: </script>תרפרשו. הסליידר אמור לפעול אוטומטית כל 3 וחצי שניות.
אתם מוזמנים לשחק עם הרוחב של המסך ולראות איך התמונה משנה את הגודל בצורה אוטומטית. ואתם יכולים גם להחליף בקלות את קבצי התמונה בקבצים שלכם..
בכל אופן אמור לצאת לכם משהו כזה עד עכשיו :
חלק המוצרים בדף
זוכרים את השרטוט שלנו בהתחלה? החלק הזה של ה Products בעצם אמור להציג 3 מוצרים נבחרים. למעשה הוא יהיה div.row שבתוכו יהיו שלושה div.col . בתוך כל אחד מהם, תיהיה כותרת , תמונה קטנה , תיאור קצר במילים וכפתור .
מילה על col-sm-4 : קודם כל למה 4 ? זה בטח אתם יודעים מהמדריך הקודם, שאם אני רוצה לעשות פריסה שווה של 3 עצמים לרוחב אז אני צריך לעשות זאת מתוך 12. ולכן 12 חלקי 3 יוצא 4. פה נכנס הקטע המגניב של גירסה 3 – מה אם אני בוחר שכאשר אנחנו מגיעים לצפיה במסך של סמארטפונים, 3 העצמים יופיעו כל אחד בפריסה מלאה ? בגלל זה בחרתי בקלאס col-sm-4 .
יאללא בואו ניישם את זה בדף. מייד לאחר הסגירה של הסליידר :
ניצור תגית section עם קלאס row ו – id בשם products .
בתוך התגית הזו, ניצור div עם קלאס מסוג col-sm-4 .
ובתוכו נוסיף את התגיות, אחת אחרי השניה : h2 , img, p, button . ממש לפי השירטוט.
1: <!-- My Products -->
2: <section id="products" class="row">
3: 4: <div class="col-sm-4" >
5: <h4>מוצר ראשון</h4>
6: <img src="gallery/thmb1.jpg" alt="..." >
7: <p>מה שאפשר לספר על המוצר הזה זה הרבה דברים. אולי למשל שהוא יודע לקפוץ, הוא גם יודע לבשל, ואולי גם לקרוא בשעות המאוחרות..</p>
8: <br>
9: <button type="button" >המשך לקרוא..</button>
10: </div>
11: 12: </section><!--End of My Products -->
רפרשו.. יצא לא משהו …
בואו נכפיל את כל אחד מהדיבים , שיהיו 3 פעמים ובנוסף לכך נשנה להם את הכותרת (מוצר ראשון, מוצר שני .. שלשי) , ואת שמות קבצי התמונות (thmb1, thmb2, thmb3):
1: <!-- My Products -->
2: <section id="products" class="row">
3: 4: <div class="col-sm-4" >
5: <h4>מוצר ראשון</h4>
6: <img src="gallery/thmb1.jpg" alt="..." >
7: <p>מה שאפשר לספר על המוצר הזה זה הרבה דברים. אולי למשל שהוא יודע לקפוץ, הוא גם יודע לבשל, ואולי גם לקרוא בשעות המאוחרות..</p>
8: <br>
9: <button type="button" >המשך לקרוא..</button>
10: </div>
11: 12: <div class="col-sm-4" >
13: <h4>מוצר שני</h4>
14: <img src="gallery/thmb2.jpg" alt="..." >
15: <p>מה שאפשר לספר על המוצר הזה זה הרבה דברים. אולי למשל שהוא יודע לקפוץ, הוא גם יודע לבשל, ואולי גם לקרוא בשעות המאוחרות..</p>
16: <br>
17: <button type="button" >המשך לקרוא..</button>
18: </div>
19: 20: <div class="col-sm-4" >
21: <h4>מוצר שלישי</h4>
22: <img src="gallery/thmb3.jpg" alt="..." >
23: <p>מה שאפשר לספר על המוצר הזה זה הרבה דברים. אולי למשל שהוא יודע לקפוץ, הוא גם יודע לבשל, ואולי גם לקרוא בשעות המאוחרות..</p>
24: <br>
25: <button type="button" >המשך לקרוא..</button>
26: </div>
27: 28: </section><!--End of My Products -->
רפרשו… אוקי יש לנו כמה בעיות שאנחנו צריכים לסדר פה :
1. סידור 3 הדיבים מימין לשמאל : שוב פעם התאמה לעברית.. עם כמה שזה מבאס, זה הכרחי כדי שלא נסדר את העצמים הפוך.. מה שצריך לעשות בקובץ ה css זה להגדיר את האלמנט div שלנו כ float:left . אפשר גם ליישר את הטקסט למרכז ולעשות עוד כמה padding . ככה זה נראה בקובץ ה css :
1: #products div{
2: padding-top:50px;
3: padding-bottom:80px;
4: float:right;
5: text-align:center;
6: }
2. מתן תכונות רספונסיביות לתמונות הקטנות : נלך לתגיות של ה img שיצרנו ונוסיף לכל אחת מהן את הקלאס img-thumbnail – שמוסיף לנו מסגרת לבנה ויפה כזו, ואת הקלאס img-responsive שאתם כבר יודעים מה אחראי לעשות .
1: <img src="gallery/thmb1.jpg" alt="..." class="img-thumbnail img-responsive">
3. עיצוב הכפתורים : כדי ל"שחק" עם גודל וצבע הכפתור, אנחנו ראשית צריכים להוסיף לכל אחד מהכפתורים קלאס בשם btn . ולאחר מכן אם אנחנו רוצים לשנות צבעים, יש לנו את האפשרות להוסיף את הקלאסים הבאים :
btn-default , btn-primary, btn-success, btn-info, btn-warning, btn-danger .
אם נרצה לשנות את הגדלים, נצטרך להוסיף אחד מהקלאסים הבאים :
.btn-lg, .btn-sm, .btn-xs
1: <button type="button" class="btn btn-primary ">המשך לקרוא..</button>
4. הקטנת רוחב תיבת הטקסט :
1: #products div p{
2: width:50%;
3: margin:auto;
4: padding-top:10px;
5: }
לבסוף אמור לצאת משהו כזה :
תוספות עיצוב נוספות בקובץ ה css שלנו שאני סתם ממליץ לעשות לפני שממשיכים :
1. כדי לסדר את הטקסט בכל סלייד בסליידר , הייתי ממליץ להגדיל את הטקסט .
2. סידור המיקומים של הכפתורים בתפריט .
3. הגדרת overflow-x:hidden בתוך תגית ה body כדי למנוע גלילה לרוחב..
1: body{
2: background-color:#033;
3: color:#FFF;
4: direction:rtl;
5: overflow-x:hidden;
6: } 7: 8: .carousel-caption{
9: font-size:25px;
10: color:#FFF;
11: } 12: 13: .navbar .btn{
14: margin-left:5px;
15: margin-top:15px;
16: }
יצירת חלק ה Information
בחלק זה, שאין לי מושג למה קראתי לו information, מה שאני רוצה לעשות זה לחלק את ה Row ל 2 חלקים.
החלק הראשון יהיה טקסט גדול עם 2 כותרות ופיסקה. והשני יהיה תמונה בינונית שממוקמת מימין לטקסט וכמובן רספונסיבית . היחס שאני רוצה לעשות הוא 3 לתמונה ו 9 לטקסט.
דבר נוסף שאני רוצה זה, שבמסכים של טאבלטים וסמארטפונים, 2 הריבועים יתפסו 100% רוחב. בקיצור, יותר פשוט מהחלק הקודם.
ראשית ניצור תגית section חדשה, מייד אחרי הסגירה של הsection הקודם, וניתן לו את הקלאס row כמובן ואת האיי די information.
בתוכו ניצור את 2 הדיבים- לראשון ניתן את הקלאס col-md-9 ולשני col-md-3 .
בתוך הדיב הראשון – יהיו לנו לפי הסדר : כותרת ראשית, כותרת משנית, פיסקה ואחריה עוד כותרת משנית.
בתוך הדיב השני : תמונה .
1: <!-- Additional information -->
2: <section id="information" class="row">
3: 4: 5: <div class="col-md-9">
6: <h1 >כותרת למידע נוסף שאפשר להוסיף</h1>
7: <h2 >
8: כל מיני תוספות קטנות וקלות כאלו של טקסט9: </h2>
10: <p >
11: תכנות מונחה-עצמים היווה מהפכה בכתיבת תוכנה, ודרש מהמתכנתים התייחסות אחרת לפתרון בעיות ורכישת הרגלי תכנות חדשים. תכנות מונחה-עצמים הוא חלק מתפיסת פיתוח מונחית-עצמים, הכוללת גם ניתוח מערכות מונחה-עצמים (OOA), עיצוב מונחה-עצמים (OOD) ובמידה חלקית גם בסיסי נתונים 12: <br>
13: הפרדיגמה של תכנות מונחה-עצמים צמחה מהתכנות הפרוצדורלי והמודולרי שבוסס על שגרות ופונקציות שפעלו על מבני נתונים חופשיים. שיטה זו יצרה קושי רב, מכיוון שכל שינוי בהגדרת משתנים בתוכנית חייב שינוי בפונקציות שפעלו בכל מרחב התוכנה. ככל שהתוכנה הייתה גדולה ומורכבת הקושי הלך והתעצם, דבר שגרר תחזוקה רבה ואיטיות ומורכבות בפיתוח ככל שהתקדם.14: </p>
15: <h2>מתוך Wikipedia </h2>
16: </div>
17: 18: 19: <div class="col-md-3" >
20: <img src="gallery/additional.jpg">
21: </div>
22: </section><!-- End of Additional information -->
רפרשו.. הרספונסיוביות עובדת סבבה. אבל חסרים לנו כמה קלאסים שיעשו לנו קצת קלאסההה 
בדיב הראשון של הטקסט, בתוך 2 התגיות h2 שיש לנו שם, נוסיף קלאס בשם text-muted שתפקידו להוריד לנו מההבלטה של הטקסט. לתוך תגית ה P נוסיף קלאס בשם lead , שתפקידו להעצים לנו את הנוכחות של הטקסט..
בדיב השני של התמונה, לתוך תגית ה IMG נוסיף את הקלאסים הבאים :
img-responsive – כדי שהתמונה תיהיה כרגיל רספונסיבית.
img-thumbnail – כדי שתקבל מעטפת יפה..
אפשר גם לתת לדיב הזה ב css תזוזה קצת שמאלה ע"י margin …
וככה זה נראה בקוד :
1: <!-- Additional information -->
2: <section id="information" class="row">
3: 4: 5: <div class="col-md-9">
6: <h1 >כותרת למידע נוסף שאפשר להוסיף</h1>
7: <h2 class="text-muted">
8: כל מיני תוספות קטנות וקלות כאלו של טקסט9: </h2 >
10: <p class="lead">
11: תכנות מונחה-עצמים היווה מהפכה בכתיבת תוכנה, ודרש מהמתכנתים התייחסות אחרת לפתרון בעיות ורכישת הרגלי תכנות חדשים. תכנות מונחה-עצמים הוא חלק מתפיסת פיתוח מונחית-עצמים, הכוללת גם ניתוח מערכות מונחה-עצמים (OOA), עיצוב מונחה-עצמים (OOD) ובמידה חלקית גם בסיסי נתונים 12: <br>
13: הפרדיגמה של תכנות מונחה-עצמים צמחה מהתכנות הפרוצדורלי והמודולרי שבוסס על שגרות ופונקציות שפעלו על מבני נתונים חופשיים. שיטה זו יצרה קושי רב, מכיוון שכל שינוי בהגדרת משתנים בתוכנית חייב שינוי בפונקציות שפעלו בכל מרחב התוכנה. ככל שהתוכנה הייתה גדולה ומורכבת הקושי הלך והתעצם, דבר שגרר תחזוקה רבה ואיטיות ומורכבות בפיתוח ככל שהתקדם.14: </p>
15: <h2 class="text-muted">מתוך Wikipedia </h2>
16: </div>
17: 18: 19: <div class="col-md-3" >
20: <img src="gallery/additional.jpg" class="img-responsive img-thumbnail ">
21: </div>
22: </section><!-- End of Additional information -->
רפרשו..
צריך להופיע לכם משהו בסגנון הדבר הבא על המסך
יצירת Footer
מה שבד"כ מכילים ב footer זה קישורים פנימיים, זכויות יוצרים, עדכונים אחרונים וכו'…
בחרתי לשים אלמנט פשוט שמציג זכויות יוצרים – אבל זכותו של כל אחד ממכם להוסיף עוד אלמנטים כאלו.
מה שאני רוצה שיהיה לי בתוך ה footer זה תגית h5 שמכילה כמה מילים. ובנוסף אני רוצה שדווקא התגית הזאת תיצמד לצד השמאלי של המסך.
אז אני יוצר תגית footer. מייד לאחר הסגירה של ה section האחרון כמובן, ובתוכה אני יוצר תגית h5 . בתוך התגית h5 אני מוסיף מעט טקסט. ומרפרש…
אם אני רוצה,כמו שתכננתי, להצמיד את הטקסט לשמאל : כל מה שאני צריך להוסיף לתגית ה h5 זה קלאס pull-left . פשוטו כמשמעו.
1: <footer>
2: <p>
3: <h5 class="pull-left">כל הזכויות שמורות לי 2013</h5>
4: </p>
5: </footer>
רפרשו… יצא סבבה. לא?
תוספות נוספות ל css : סידור המרווחים ב footer , ויצירת צבע רקע ומרווחים באלמנט information. אז אתם מוזמנים לכתוב את זה בקובץ ה css :
1: #information{2: background-color:#3b3b3b;
3: padding-top:50px;
4: padding-bottom:50px;
5: border-top:1px solid gray;
6: border-bottom:3px solid gray;
7: } 8: 9: footer {10: margin-left:40px;
11: padding-top:10px;
12: }
סיכום
* אין לי בעיה שכל אחד ממכם ישתמש בזה לשימוש אישי ומסחרי.. תהנו!!
לאלו מכם, שהצליחו לסיים את המדריך, ושרדו – אני מקווה שהבינו את הכח העצום שיש ל bootstrap בתהליך בניה רספונסיבית של דף.
כדי ליצור דף טוב, חייבים בשרטוט WireFrames ולתכנן מה יקרה כאשר נעבור בין מסך למסך.
יש עוד הרבה קלאסים ואלמנטים מגניבים ל Bootstrap3 , המון עיצובים שונים ובעיקר מבחר עצום של אפשרויות. מה שננשאר לכם זה להכנס אל האתר שלהם :
http://getbootstrap.com/getting-started/
ולהתחיל ולחקור ולשחק ..
אני מקווה שנהנתם ושזה העשיר לכם את הידע.. מוזמנים להעיר\ להאיר \ או סתם לתת תגובה מעניינת .
מוזמנים להכנס לבלוג שלי
תגובות בפייסבוק