Bootstrap – המדריך – פרק 11 – טפסים אופקיים

12 במאי 2016

אין תגובות

לתוכן העניינים

בפרק הקודם למדנו על עיצוב טפסים רגילים, היום נראה כיצד מעצבים טפסים בהם הטקסט של הפקד נמצא במקביל לפקד (ולא מעליו)

 

גם הפעם אציג את התוצאה הסופית לפני שנעבור על הקוד, ושוב יהיה לנו:

  • תיבת טקסט להכנסת מייל
  • תיבת סיסמא
  • סימון של “זכור אותי”
  • שני לחצנים (Login, Register)

 

image

 

להלן הקוד המלא:

Code Snippet
<div class="row">
<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 כדי לוודא שתיבת הסימון תעמוד בצורה שווה לשאר הפקדים

בנוסף הפעם בשנוה מהפעם הקודמת שמנו לחצנים ולא לינקים, אף אפשר לראות שמבחינת תצוגה זה נראה אותו דבר.

 

בפרק הבא נלמד על יכולות עיצוביות נוספות בעבודה עם טפסים.

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *