שלמה גולדברג
shlomo@haravdotnet.co.ilבפרק הקודם למדנו על עיצוב טפסים רגילים, היום נראה כיצד מעצבים טפסים בהם הטקסט של הפקד נמצא במקביל לפקד (ולא מעליו)
גם הפעם אציג את התוצאה הסופית לפני שנעבור על הקוד, ושוב יהיה לנו:
- תיבת טקסט להכנסת מייל
- תיבת סיסמא
- סימון של “זכור אותי”
- שני לחצנים (Login, Register)
להלן הקוד המלא:
<div class="col-md-8 well">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">User Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" />
<span class="help-block">Press user name</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" />
<span class="help-block">The password need to match [A-Z]</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<div class="checkbox">
<label>
<input type="checkbox" />
Remember me
</label>
</div>
</div>
</div>
<div class="text-right">
<input type="button" class="btn btn-default" value="Register" />
<input type="button" class="btn btn-primary" value="Login" />
</div>
</form>
</div>
</div>
אני אתעלם מההסברים שפורטו בפוסט הקודם, ואתייחס רק לדברים ששונו.
אלמנט ה – form קיבלת מחלקה בשם form-horizontal אשר גורמת לכך שכל div שיש לו את המחלקה form-group מקבל את ההתנהגות של row, כלומר בתוכם ניתן יהיה לשים מחלקות של עמודות.
כל div שמקבל form-group מכיל את ה – label וה – control עצמו, אך בנוסף למחלקה של control-label הוא מקבל את הרוחב הרלוונטי, במקרה שלנו col-sm-3, (משמעות נסתרת היא שבמסך קטן, זה יחזור אוטומטית להיות כמו form רגיל, כיוון שב – xs הוא יקבל רוחב ברירת מחדל של 12 – כלומר כל השורה), בנוסף את הפקד שיש לו את מחלקת form-control עוטפים באלמנט שמקבל את הרוחב הנשאר, במקרה שלנו col-sm-9, הסיבה לעטיפה הנוספת כיון שמחלקות col-x-size קצת מתנגשות עם מחלקת form-control.
דבר נוסף שהוספנו בפוסט הנוכחי, היא span עם מחלקת help-block שמציגה טקסט בצבע אפור עם הסבר על התיבה.
ה – div שעוטף את לחצן “זכור אותי” קיבל בנוסף ל – col-sm-9 גם את col-sm-offset-3 כדי לוודא שתיבת הסימון תעמוד בצורה שווה לשאר הפקדים
בנוסף הפעם בשנוה מהפעם הקודמת שמנו לחצנים ולא לינקים, אף אפשר לראות שמבחינת תצוגה זה נראה אותו דבר.
בפרק הבא נלמד על יכולות עיצוביות נוספות בעבודה עם טפסים.