Bootstrap – המדריך – פרק 12 – שונות אודות טפסים

11 בדצמבר 2016

אין תגובות

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

 

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

נרצה להכיר את היכולות הבאות:

  • להציג ויזואלית את המצב של הפקד (האם יש שגיאה, האם יש בעייה וכדו’)
  • להפוך אלמנט ל – disabled.
  • להציג אייקונים על תיבת הטקסט
  • להצמיד לחצנים ליד תיבת הטקסט

 

כדי לשנות את הוזיואליות של אלמנט, יש לתת ל – form-group הרלוונטי, את המחלקה המתאימה (has-success, has-error, has-info וכו’), התוצאה תהיה כזו:

image

 

שימו לב שגם ה – label וגם ה – help-block קיבלו את הצביעה הנכונה.

Code Snippet
<div class="form-group has-error">
<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)

 

כדי להציג אייקונים על תיבת הטקסט:

image

 

צריך לתת את המחלקה has-feedback ל – div שיש לו את ה – form-group, בנוסף צריך להוסיף אחרי האלמנט עם form-control אלמנט (span) עם שלוש מחלקות, glyphicon glyphicon-ok form-control-feedback) שני הראשונים עבור בחירת האייקון הרלוונטי, והאחרונה כדי להגדיר שזה יוצג כאייקון על האלמנט).

 

Code Snippet
<div class="form-group has-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.

image

 

Code Snippet
<div class="form-group">
<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

image

Code Snippet
<div class="form-group">
<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) שלה.

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

כתיבת תגובה

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