Diseinua
Eman zure inprimakiei nolabaiteko egitura (lerrotik horizontalera, sareko inplementazio pertsonalizatuetara) gure inprimakien diseinu aukerekin.
Formak
Inprimaki-eremu talde bakoitzak <form>
elementu batean egon behar du. Bootstrap-ek ez du elementuaren estilo lehenetsirik eskaintzen <form>
, baina lehenespenez ematen diren arakatzailearen funtzio indartsu batzuk daude.
- Arakatzaileko inprimakietan hasi zara? Demagun MDN inprimakiaren dokumentuak berrikustea eskuragarri dauden atributuen ikuspegi orokorra eta zerrenda osoa lortzeko.
<button>
s<form>
lehenetsi baten barruantype="submit"
, beraz, saiatu zehatza izaten eta sartu beti battype
.- Inprimaki bateko inprimaki-elementu guztiak desgaitu ditzakezu
disabled
atributuarekin<form>
.
Bootstrap aplikatzen denez display: block
eta width: 100%
gure inprimakien kontrol ia guztietan, inprimakiak berez bertikalean pilatuko dira. Klase gehigarriak erabil daitezke diseinu hau inprimakiaren arabera aldatzeko.
Utilitateak
Marjina utilitateak inprimakiei egitura batzuk gehitzeko modurik errazena dira. Etiketen, kontrolaren, inprimakiaren aukerako testuaren eta inprimakien baliozkotze-mezuen oinarrizko taldekatzea eskaintzen dute. Utilitateetara atxikitzea margin-bottom
eta inprimaki osoan norabide bakarra erabiltzea gomendatzen dugu koherentzia lortzeko.
Anima zaitez zure inprimakiak nahi duzun moduan eraikitzeko, <fieldset>
s, <div>
s edo ia beste edozein elementurekin.
<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>
Inprimakia sareta
Inprimaki konplexuagoak eraiki daitezke gure sareko klaseak erabiliz. Erabili hauek zutabe anitz, zabalera anitzak eta lerrokatze aukera osagarriak behar dituzten inprimaki-diseinuetarako. Sass aldagaia gaituta egotea eskatzen du$enable-grid-classes
(aktibatuta lehenespenez).
<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>
Erretenak
Gutter modifikatzaile klaseak gehituz , erretenaren zabaleraren kontrola izan dezakezu lerroan zein blokeen norabidean. Sass aldagaia gaituta egotea ere eskatzen du$enable-grid-classes
(aktibatuta lehenespenez).
<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>
Sare sistemarekin diseinu konplexuagoak ere sor daitezke.
<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>
Forma horizontala
Sortu inprimaki horizontalak saretarekin .row
klasea gehituz taldeak osatzeko eta .col-*-*
klaseak erabiliz zure etiketen eta kontrolen zabalera zehazteko. Ziurtatu .col-form-label
zure <label>
s-etara ere gehitzen duzula, inprimaki-kontrolekin bertikalki zentratuta egon daitezen.
Batzuetan, beharbada marjinak edo betegarrizko utilitateak erabili beharko dituzu behar duzun lerrokadura perfektu hori sortzeko. Adibidez, padding-top
gure irrati-sarrerak pilatutako etiketa kendu dugu testuaren oinarri-lerroa hobeto lerrokatzeko.
<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>
Inprimaki horizontaleko etiketen tamaina
Ziurtatu .col-form-label-sm
edo .col-form-label-lg
zure <label>
s edo <legend>
s erabiltzen duzula .form-control-lg
eta .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>
Zutabeen tamaina
Aurreko adibideetan erakusten den bezala, gure sareta-sistemak edozein .col
s-kopurua jartzeko aukera ematen du .row
. Eskuragarri dagoen zabalera berdin banatuko dute haien artean. Zure zutabeen azpimultzo bat ere hauta dezakezu leku gehiago edo gutxiago okupatzeko, gainerako .col
s-ek gainerakoak berdin banatzen dituzten bitartean, zutabe-klase espezifikoekin .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>
Tamaina automatikoa
Beheko adibideak flexbox erabilgarritasun bat erabiltzen du edukiak eta aldaketak bertikalki zentratzeko, zutabeek behar adina leku bakarrik har .col
dezaten . .col-auto
Beste modu batean esanda, zutabeak bere burua hartzen du edukiaren arabera.
<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>
Ondoren, berriro nahastu dezakezu tamainari dagokion zutabe klaseekin.
<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>
Lineako inprimakiak
Erabili .row-cols-*
klaseak diseinu horizontal sentikorrak sortzeko. Gutter modifikatzaile-klaseak gehituz , kanalak norabide horizontal eta bertikalean izango ditugu. Ikuspegi mugikor estuetan .col-12
, inprimaki-kontrolak eta gehiago pilatzen laguntzen du. .align-items-center
Inprimakiaren elementuak erdialdera lerrokatzen ditu, lerrokatzea .form-checkbox
behar bezala eginez.
<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>