Skipulag
Gefðu eyðublöðunum þínum einhverja uppbyggingu - allt frá innbyggðu til láréttu til sérsniðinna hnitanetsútfærslur - með eyðublöðum okkar.
Eyðublöð
Sérhver hópur eyðublaða ætti að vera í <form>
frumefni. Bootstrap veitir enga sjálfgefna stíl fyrir <form>
þáttinn, en það eru nokkrir öflugir vafraeiginleikar sem eru sjálfgefnir.
- Nýtt í vafraformum? Íhugaðu að skoða MDN eyðublaðið til að fá yfirlit og heildarlista yfir tiltæka eiginleika.
<button>
s innan<form>
sjálfgefið tiltype="submit"
, svo leitast við að vera sérstakur og innihalda alltaf atype
.- Þú getur slökkt á öllum formeiningum innan eyðublaðs með
disabled
eigindinni á<form>
.
Þar sem Bootstrap á við display: block
og width: 100%
fyrir næstum allar formstýringar okkar munu eyðublöð sjálfgefið stafla lóðrétt. Hægt er að nota fleiri flokka til að breyta þessu skipulagi eftir formi.
Veitur
Framlegðartól eru auðveldasta leiðin til að bæta einhverri uppbyggingu við eyðublöð. Þau veita grunnflokkun merkimiða, stýringa, valfrjáls eyðublaðstexta og eyðublaðsstaðfestingarskilaboð. Við mælum með því að halda þig við margin-bottom
tól og nota eina stefnu í gegnum eyðublaðið til samræmis.
Ekki hika við að byggja eyðublöðin þín eins og þú vilt, með <fieldset>
s, <div>
s, eða næstum hvaða öðrum þáttum sem er.
<div class="mb-3">
<label for="formGroupExampleInput" class="form-label">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="mb-3">
<label for="formGroupExampleInput2" class="form-label">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>
Myndaðu rist
Hægt er að búa til flóknari form með því að nota grid flokkana okkar. Notaðu þetta fyrir eyðublaðaútlit sem krefjast margra dálka, fjölbreyttrar breiddar og viðbótarjöfnunarvalkosta. Krefst þess að $enable-grid-classes
Sass breytan sé virkjuð (sjálfgefið kveikt).
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
</div>
Rennur
Með því að bæta við þakrennubreytingarflokkum geturðu haft stjórn á breidd rennunnar bæði í innlínunni og blokkarstefnunni . Krefst einnig að $enable-grid-classes
Sass breytan sé virkjuð (sjálfgefið).
<div class="row g-3">
<div class="col">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
</div>
Einnig er hægt að búa til flóknari skipulag með ristkerfinu.
<form class="row g-3">
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="col-md-6">
<label for="inputPassword4" class="form-label">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
<div class="col-12">
<label for="inputAddress" class="form-label">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="col-12">
<label for="inputAddress2" class="form-label">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="col-md-6">
<label for="inputCity" class="form-label">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="col-md-4">
<label for="inputState" class="form-label">State</label>
<select id="inputState" class="form-select">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-2">
<label for="inputZip" class="form-label">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</form>
Lárétt form
Búðu til lárétt eyðublöð með hnitanetinu með því að bæta .row
bekknum við mynda hópa og nota .col-*-*
flokka til að tilgreina breidd merkimiða og stýringa. Gakktu úr skugga um að þú bætir .col-form-label
líka við <label>
skjölin þín svo þau séu lóðrétt í miðju með tilheyrandi formstýringum.
Stundum þarftu kannski að nota spássíu- eða fyllingartæki til að búa til þá fullkomnu röðun sem þú þarft. Til dæmis höfum við fjarlægt padding-top
merkimiðann á staflaðri útvarpsinntak okkar til að samræma grunnlínuna betur.
<form>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Lárétt stærð merkimiða
Vertu viss um að nota .col-form-label-sm
eða .col-form-label-lg
til þín <label>
eða <legend>
s til að fylgja réttri stærð .form-control-lg
og .form-control-sm
.
<div class="row mb-3">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
</div>
<div class="row mb-3">
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
</div>
</div>
<div class="row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
</div>
</div>
Stærð súlu
Eins og sýnt er í fyrri dæmum, gerir töflukerfið okkar þér kleift að setja hvaða fjölda .col
s sem er innan .row
. Þeir munu skipta tiltækri breidd jafnt á milli sín. Þú getur líka valið hlutmengi af dálkunum þínum til að taka meira eða minna pláss, en hinir dálkarnir .col
skipta jafnt afganginum, með sérstökum dálkaflokkum eins og .col-sm-7
.
<div class="row g-3">
<div class="col-sm-7">
<input type="text" class="form-control" placeholder="City" aria-label="City">
</div>
<div class="col-sm">
<input type="text" class="form-control" placeholder="State" aria-label="State">
</div>
<div class="col-sm">
<input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
</div>
</div>
Sjálfvirk stærð
Dæmið hér að neðan notar flexbox tól til að miðja innihaldið lóðrétt og breytist .col
þannig .col-auto
að dálkarnir þínir taka aðeins eins mikið pláss og þarf. Sagt á annan hátt, dálkurinn stærðir sjálfan sig út frá innihaldi.
<form class="row gy-2 gx-3 align-items-center">
<div class="col-auto">
<label class="visually-hidden" for="autoSizingInput">Name</label>
<input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="visually-hidden" for="autoSizingInputGroup">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
</div>
</div>
<div class="col-auto">
<label class="visually-hidden" for="autoSizingSelect">Preference</label>
<select class="form-select" id="autoSizingSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck">
<label class="form-check-label" for="autoSizingCheck">
Remember me
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Þú getur síðan endurblandað það aftur með stærðarsértækum dálkaflokkum.
<form class="row gx-3 gy-2 align-items-center">
<div class="col-sm-3">
<label class="visually-hidden" for="specificSizeInputName">Name</label>
<input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
</div>
<div class="col-sm-3">
<label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
</div>
</div>
<div class="col-sm-3">
<label class="visually-hidden" for="specificSizeSelect">Preference</label>
<select class="form-select" id="specificSizeSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck2">
<label class="form-check-label" for="autoSizingCheck2">
Remember me
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Innbyggð eyðublöð
Notaðu .row-cols-*
flokkana til að búa til móttækileg lárétt skipulag. Með því að bæta við rennubreytingarflokkum munum við hafa þakrennur í lárétta og lóðrétta átt. Á þröngum farsímasýnum .col-12
hjálpar það að stafla formstýringum og fleira. Það .align-items-center
stillir formþættina að miðjunni, sem gerir .form-checkbox
samræminguna rétt.
<form class="row row-cols-lg-auto g-3 align-items-center">
<div class="col-12">
<label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>
</div>
<div class="col-12">
<label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
<select class="form-select" id="inlineFormSelectPref">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>