Začel sem uporabljati Bootstrap, da bi dosegel lepo oblikovanje strani, ne da bi se zatekel k GWT (backend je narejen v javi)
Za moj prijavni zaslon sem kopiral ta primer. Zdaj želim označiti napako, na primer, da je uporabniško ime ostalo prazno. Zato me zanima, kakšen je postopek v ogrodju Bootstrap za to. Ali morda obstajajo primeri, ki prikazujejo obrazec z napako.
Nisem prepričan, ali gre za to, da se sporočilo o napaki prikaže znotraj vnosnega elementa z rdečo barvo ali da se prikaže pod vnosnim elementom, ali morda s pojavnim oknom?
(AKTUALNO s primeri za Bootstrap v4, v3 in v3)
Primeri obrazcev z razredi potrjevanja za zadnjih nekaj glavnih različic Bootstrapa.
Bootstrap v4
Oglejte si živo različico na spletni strani 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
Oglejte si živo različico na codepenu
<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
Oglejte si [živo različico](
) na jsfiddleRazredi .error
, .success
, .warning
in .info
so dodani k .control-group
. To je standardno označevanje in oblikovanje Bootstrap v različici v2. Samo sledite temu in ste v dobrem stanju. Seveda lahko z lastnimi slogi dodate pojavno okno ali "inline flash", če želite, vendar če boste sledili konvenciji Bootstrapa in te razrede za preverjanje obesili na .control-group
, bo vse ostalo dosledno in enostavno za upravljanje (vsaj zato, ker vam bodo še naprej na voljo dokumenti in primeri Bootstrapa).
<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>
Botstrap V3:
Uradna dok. povezava 1
Official Doc Link 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>
Na splošno je najbolje, da se napaka prikaže v bližini mesta, kjer se je pojavila, npr. če nekdo napačno vnese svoj e-poštni naslov, poudarite vnosno polje za e-poštni naslov.
V tem članku je nekaj dobrih primerov. http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/
Tudi twitter bootstrap ima nekaj lepih slogov, ki pomagajo pri tem (pomaknite se navzdol do razdelka Validation states). http://twitter.github.com/bootstrap/base-css.html#forms
Poudarjanje vsakega vnosnega polja je nekoliko bolj zapleteno, zato bi bilo preprosto na vrh postaviti opozorilo bootstrap s podrobnostmi o tem, kaj je uporabnik naredil narobe. http://twitter.github.com/bootstrap/components.html#alerts