Fara í aðalefni Farðu í skjalaleiðsögn
Check
in English

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.

Á þessari síðu

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ð til type="submit", svo leitast við að vera sérstakur og innihalda alltaf a type.

Þar sem Bootstrap á við display: blockog 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-bottomtó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.

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>

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-classesSass breytan sé virkjuð (sjálfgefið kveikt).

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>

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-classesSass breytan sé virkjuð (sjálfgefið).

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>

Einnig er hægt að búa til flóknari skipulag með ristkerfinu.

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>

Lárétt form

Búðu til lárétt eyðublöð með hnitanetinu með því að bæta .rowbekknum 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-labellí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-topmerkimiðann á staflaðri útvarpsinntak okkar til að samræma grunnlínuna betur.

Útvarpstæki
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>

Lárétt stærð merkimiða

Vertu viss um að nota .col-form-label-smeða .col-form-label-lgtil þín <label>eða <legend>s til að fylgja réttri stærð .form-control-lgog .form-control-sm.

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>

Stærð súlu

Eins og sýnt er í fyrri dæmum, gerir töflukerfið okkar þér kleift að setja hvaða fjölda .cols sem er innan .row. Þeir munu skipta tiltækri breidd jafnt á milli sín. Þú getur líka valið undirmengi af dálkunum þínum til að taka meira eða minna pláss, en hinir dálkarnir .colskipta jafnt afganginum, með sérstökum dálkaflokkum eins og .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>

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

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

Þú getur síðan endurblandað það aftur með stærðarsértækum dálkaflokkum.

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

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-12hjálpar það að stafla formstýringum og fleira. Það .align-items-centerstillir formþættina að miðjunni, sem gerir .form-checksamræminguna rétt.

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