Lomake
Peruslomakkeen layout-mahdollisuuksia on kolme:
- kentän label on kentän yläpuolella
- kentän label on kentän vasemmalla puolella
- kentän label on kentän vasemmalla puolella ja kentät ovat peräkkäin
Perusrekisterissä käytetään ensisijaisesti tyyliä, jossa kentän nimi ja kenttä ovat vierekkäin (formille luokka label-left-e). Muokkauslomakkeet ladataan modaaliin ikkunaan. Lomakekenttiä voidaan tarvittaessa palstoittaa kahdelle palstalle, mikäli näkymän tilankäytön kannalta se on järkevää. Yleisesti ottaen kuitenkin käytetään yksipalstaista lomaketta.
Lomake-elementin perusrakenne
Perusrekisterissä käytettävä lomaketyyli
<!-- label inputin vasemmalla puolella --> <div class="field-e label-left-e"> <label for="textExample1">Label</label> <input id="textExample1" placeholder="Enter text" type="text"> </div> <!-- tyyli käyttöön koko lomakkeessa --> <form class="label-left-e"> <div class="field-e"> <label for="textExample1">Label</label> <input id="textExample1" placeholder="Enter text" type="text"> </div> </form>
Lomakkeen painikkeet
Toimintonapit sijoitetaan lomakkeen alapuolelle ja ensisijainen painike (submit) korostetaan luokalla btn-primary. Painikkeiden ympärillä olevalle diville annetaan luokka form-buttons-e, joka tekee painikealueelle oman tyylinsä ja erottaa sen muusta lomakkeesta.
Lomakkeen painikkeet
<div class="form-buttons-e"> <button class="btn btn-primary" type="submit">Submit</button> <button class="btn btn-default" type="clear">Clear</button> </div>