שלמה גולדברג
shlomo@haravdotnet.co.il
בפרק הקודם למדנו על טפסים אופקיים, בפוסט הנוכחי נלמד על אלמנטים נוספים מעניינים שאפשר לעשות בעזרת הספרייה.
נרצה להכיר את היכולות הבאות:
- להציג ויזואלית את המצב של הפקד (האם יש שגיאה, האם יש בעייה וכדו’)
- להפוך אלמנט ל – disabled.
- להציג אייקונים על תיבת הטקסט
- להצמיד לחצנים ליד תיבת הטקסט
כדי לשנות את הוזיואליות של אלמנט, יש לתת ל – form-group הרלוונטי, את המחלקה המתאימה (has-success, has-error, has-info וכו’), התוצאה תהיה כזו:
שימו לב שגם ה – label וגם ה – help-block קיבלו את הצביעה הנכונה.
<label class="control-label">User Name</label>
<input type="text" class="form-control" />
<span class="help-block">Bla bla bla bls</span>
</div>
<div class="form-group has-success">
<label class="control-label">User Name</label>
<input type="text" class="form-control" />
</div>
כדי להפוך אלמנט ל – disabled כל מה שצריך לעשות זה לתת את ה – attribute לאלמנט, אם נרצה לתת למספר אלמנטים disabled ניתן לעטוף אותם ב – fieldset (נקודה חשובה, זה לא נתמך בכל הדפדפנים, וכן אלמנטים מסוג לינק שנראים כמו לחצנים, יקבלו את העיצוב המתאים, אך לא באמת יהיו disabled)
כדי להציג אייקונים על תיבת הטקסט:
צריך לתת את המחלקה has-feedback ל – div שיש לו את ה – form-group, בנוסף צריך להוסיף אחרי האלמנט עם form-control אלמנט (span) עם שלוש מחלקות, glyphicon glyphicon-ok form-control-feedback) שני הראשונים עבור בחירת האייקון הרלוונטי, והאחרונה כדי להגדיר שזה יוצג כאייקון על האלמנט).
<label class="control-label">User Name</label>
<input type="text" class="form-control" />
<span class="form-control-feedback glyphicon glyphicon-user"></span>
</div>
<div class="form-group has-feedback">
<label class="control-label">User Name</label>
<input type="text" disabled class="form-control" />
<span class="form-control-feedback glyphicon glyphicon-user"></span>
</div>
<div class="form-group has-feedback has-error">
<label class="control-label">User Name</label>
<input type="text" class="form-control" />
<span class="form-control-feedback glyphicon glyphicon-erase"></span>
</div>
כדי להצמיד לחצנים לתיבת הטקסט, יש להשתמש במנגנון של input-gropu, צריך לעטוף את האלמנט עם ה – form-control עם div שיהיה לו את המחלקה input-gropu, בתוכו (לפני או אחרי) ניתן לשים span עם המחלקה input-group-addon.
<label class="control-label">User Name</label>
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-addon">@</span>
</div>
</div>
כדי לקבל תיבת טקסט המוצמדת ללחצן, יש לעטוף את הלחצן ב – input-group-btn
<label class="control-label">User Name</label>
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<input type="button" value="Ok" class="btn btn-default" />
</span>
</div>
</div>
בפרק הבא נכיר קצת איך עובדים עם הספרייה תוך שימוש בפקדים (JS) שלה.