in English

Diseinua

Eman zure inprimakiei nolabaiteko egitura (lerrotik horizontalera, sareko inplementazio pertsonalizatuetara) gure inprimakien diseinu aukerekin.

Orrialde honetan

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 barruan type="submit", beraz, saiatu zehatza izaten eta sartu beti bat type.

Bootstrap aplikatzen denez display: blocketa 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-bottometa 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.

Etiketa adibidea

Beste etiketa bat

html

<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).

html

<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).

html

<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.

html

<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 .rowklasea gehituz taldeak osatzeko eta .col-*-*klaseak erabiliz zure etiketen eta kontrolen zabalera zehazteko. Ziurtatu .col-form-labelzure <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-topgure irrati-sarrerak pilatutako etiketa kendu dugu testuaren oinarri-lerroa hobeto lerrokatzeko.

html

<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-smedo .col-form-label-lgzure <label>s edo <legend>s erabiltzen duzula .form-control-lgeta .form-control-sm.

Posta elektronikoa

html

<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 .cols-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 .cols-ek gainerakoak berdin banatzen dituzten bitartean, zutabe-klase espezifikoekin .col-sm-7.

html

<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 .coldezaten . .col-autoBeste modu batean esanda, zutabeak bere burua hartzen du edukiaren arabera.

html

<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.

html

<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-centerInprimakiaren elementuak erdialdera lerrokatzen ditu, lerrokatzea .form-checkbehar bezala eginez.

html

<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>