Άρχισα να χρησιμοποιώ το Bootstrap για να επιτύχω έναν ωραίο σχεδιασμό σελίδας χωρίς να καταφεύγω στο GWT (το backend είναι φτιαγμένο σε java).
Για την οθόνη εισόδου μου αντέγραψα αυτό το παράδειγμα. Τώρα θέλω να σημειώσω ένα σφάλμα, για παράδειγμα, ότι το όνομα χρήστη έμεινε κενό. Αναρωτιόμουν λοιπόν ποια είναι η διαδικασία στο πλαίσιο Bootstrap για αυτό. Ή μήπως αν υπάρχουν παραδείγματα που να δείχνουν τη φόρμα με το σφάλμα.
Δεν είμαι σίγουρος αν η ιδέα είναι να εμφανίσω το μήνυμα λάθους μέσα στο στοιχείο εισόδου με κόκκινο χρώμα, ή να το εμφανίσω κάτω από το στοιχείο εισόδου, ή μήπως με ένα αναδυόμενο παράθυρο;
(ΕΝΗΜΕΡΩΣΗ με παραδείγματα για Bootstrap v4, v3 και v3)
Παραδείγματα φορμών με κλάσεις επικύρωσης για τις τελευταίες μεγάλες εκδόσεις του Bootstrap.
Bootstrap v4
Δείτε τη ζωντανή έκδοση στο codepen
<div class="container">
<form>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label text-success">Email</label>
<div class="col-sm-7">
<input type="email" class="form-control is-valid" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label text-danger">Password</label>
<div class="col-sm-7">
<input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Password">
</div>
<div class="col-sm-3">
<small id="passwordHelp" class="text-danger">
Must be 8-20 characters long.
</small>
</div>
</div>
</form>
</div>
Bootstrap v3
Δείτε την ζωντανή έκδοση στο codepen
<form role="form">
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<input type="text" class="form-control" id="inputWarning">
<span class="help-block">Something may have gone wrong</span>
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with error</label>
<input type="text" class="form-control" id="inputError">
<span class="help-block">Please correct the error</span>
</div>
<div class="form-group has-info">
<label class="control-label" for="inputError">Input with info</label>
<input type="text" class="form-control" id="inputError">
<span class="help-block">Username is taken</span>
</div>
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label>
<input type="text" class="form-control" id="inputSuccess" />
<span class="help-block">Woohoo!</span>
</div>
</form>
Bootstrap v2
Δείτε την [ζωντανή έκδοση](
) στο jsfiddleΟι κλάσεις .error
, .success
, .warning
και .info
προσαρτώνται στην .control-group
. Αυτή είναι η τυπική σήμανση και διαμόρφωση του Bootstrap στην v2. Απλά ακολουθήστε το και είστε σε καλή κατάσταση. Φυσικά μπορείτε να προχωρήσετε με τα δικά σας στυλ για να προσθέσετε ένα αναδυόμενο παράθυρο ή ένα "inline flash" αν προτιμάτε, αλλά αν ακολουθήσετε τη σύμβαση του Bootstrap και κρεμάσετε αυτές τις κλάσεις επικύρωσης στο .control-group
θα παραμείνει συνεπές και εύκολο στη διαχείριση (τουλάχιστον αφού θα συνεχίσετε να έχετε το πλεονέκτημα των εγγράφων και των παραδειγμάτων του Bootstrap)
<form class="form-horizontal">
<div class="control-group warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Something may have gone wrong</span>
</div>
</div>
<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group info">
<label class="control-label" for="inputInfo">Input with info</label>
<div class="controls">
<input type="text" id="inputInfo">
<span class="help-inline">Username is taken</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div>
</div>
</form>
Bootstrap V3:
Επίσημος σύνδεσμος εγγράφου 1<br/>, Επίσημος σύνδεσμος εγγράφου 2
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label>
<input type="text" class="form-control" id="inputSuccess" />
<span class="help-block">Woohoo!</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<input type="text" class="form-control" id="inputWarning">
<span class="help-block">Something may have gone wrong</span>
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with error</label>
<input type="text" class="form-control" id="inputError">
<span class="help-block">Please correct the error</span>
</div>
Γενικά, είναι καλύτερο να δείχνετε το σφάλμα κοντά στο σημείο όπου εμφανίζεται το σφάλμα. π.χ. αν κάποιος έχει σφάλμα στην εισαγωγή του email του, επισημαίνετε το πλαίσιο εισαγωγής email.
Αυτό το άρθρο έχει μερικά καλά παραδείγματα. http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/
Επίσης, το twitter bootstrap έχει κάποιο ωραίο στυλ που βοηθάει σε αυτό (μετακινηθείτε προς τα κάτω στην ενότητα Validation states). http://twitter.github.com/bootstrap/base-css.html#forms
Η επισήμανση κάθε πλαισίου εισαγωγής είναι λίγο πιο περίπλοκη, οπότε ο εύκολος τρόπος θα ήταν να τοποθετήσετε απλά μια ειδοποίηση bootstrap στην κορυφή με λεπτομέρειες για το τι έκανε λάθος ο χρήστης. http://twitter.github.com/bootstrap/components.html#alerts