Таблицасы
Сезнең формаларга ниндидер структура бирегез - сызыктан горизонтальгә кадәр, махсус челтәр кертүгә кадәр - безнең форма урнаштыру вариантлары белән.
Формалар
Форма кырларының һәр төркеме бер <form>
элементта яшәргә тиеш. Bootstrap <form>
элемент өчен демократик стиль белән тәэмин итми, ләкин кайбер көчле браузер үзенчәлекләре бар, алар килешү буенча бирелә.
- Браузер формалары өчен яңалык? Гомуми күзәтү һәм булган атрибутларның тулы исемлеге өчен MDN форма документларын карау турында уйлагыз .
<button>
s<form>
килешү буенчаtype="submit"
, шуңа күрә конкрет булырга омтылыгыз һәм һәрвакыт аtype
.- Сез формадагы барлык элементларны формадагы
disabled
атрибут белән сүндерә аласыз<form>
.
Bootstrap кулланылганга display: block
һәм width: 100%
безнең барлык формалар белән идарә итүгә диярлек, формалар килешү буенча вертикаль рәвештә урнаштырылачак. Өстәмә класслар бу макетны форма нигезендә үзгәртү өчен кулланылырга мөмкин.
Коммуналь хезмәтләр
Маргин коммуналь хезмәтләре - формаларга ниндидер структура өстәү өчен иң җиңел ысул. Алар этикеткаларның төп төркемнәрен, контрольләрен, өстәмә форма текстын, форма тикшерү хәбәрләрен бирәләр. Без коммуналь хезмәтләргә ябышырга, margin-bottom
эзлеклелек өчен форма буенча бер юнәлеш кулланырга киңәш итәбез.
<fieldset>
S, <div>
s яки бүтән элементлар белән теләсәгез дә, үз формаларыгызны төзергә иренегез.
<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>
Челтәр формасы
Безнең челтәр класслары ярдәмендә катлаулырак формалар төзелергә мөмкин. Аларны берничә багана, төрле киңлек һәм өстәмә тигезләү вариантлары таләп иткән форма макетлары өчен кулланыгыз. Sass үзгәрүченең кушылуын таләп итә$enable-grid-classes
(килешү буенча).
<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>
Гаттерлар
Чүпрәк үзгәртүче классларын өстәп , сез чүпнең киңлеген, шулай ук блок юнәлешен контрольдә тота аласыз. Шулай ук $enable-grid-classes
Sass үзгәрүченең кушылуын таләп итә (килешү буенча).
<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>
Челтәр системасы белән тагын да катлаулырак макетлар булдырырга мөмкин.
<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>
Горизонталь форма
.row
Төркемнәр формалаштыру өчен класслар өстәп һәм .col-*-*
сезнең этикеткалар һәм контроль киңлекне күрсәтү өчен класслар кулланып , челтәр белән горизонталь формалар төзегез . .col-form-label
Сезнең с -ларга да өстәргә онытмагыз, <label>
шуңа күрә алар бәйләнешле форма белән идарә итәләр.
Кайвакыт, сезгә кирәк булган камил тигезләү өчен, бәлки, маржа яки паддер ярдәмендә кулланырга кирәк. padding-top
Мисал өчен, текст базасын яхшырак тигезләү өчен, без тупланган радио кертү этикеткасын бетердек .
<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>
Горизонталь форма этикеткасы зурлыгы
Зурлыкны дөрес куллану өчен, яисә .col-form-label-sm
сезнең .col-form-label-lg
яисә <label>
кулланыгыз .<legend>
.form-control-lg
.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>
Колоннаның зурлыгы
Алдагы мисалларда күрсәтелгәнчә, безнең челтәр системасы сезгә теләсә нинди санны урнаштырырга мөмкинлек .col
бирә .row
. Алар булган киңлекне алар арасында тигез бүләчәкләр. Сез шулай ук баганаларның бер өлешен сайлый аласыз, күбрәк яки азрак урын алу өчен, .col
калганнары тигез итеп бүлеп бирәләр, билгеле багана класслары кебек .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>
Авто-размер
.col
Түбәндәге мисал эчтәлекне вертикаль рәвештә үзәкләштерү өчен флексбокс ярдәмендә кулланыла .col-auto
, сезнең баганалар кирәк булганча гына урын ала. Башка юл белән әйтегез, багананың эчтәлеге нигезендә зурлыгы.
<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>
Аннары сез моны тагын бер кат размерга кертә аласыз.
<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>
Эчке формалар
.row-cols-*
Классларны җаваплы горизонталь макетлар булдыру өчен кулланыгыз . Чүпрәк үзгәртүче класслар өстәп , бездә горизонталь һәм вертикаль юнәлешләр бар. Тар мобиль күренешләрдә .col-12
форма контроле һәм башкаларны тупларга булыша. .align-items-center
Форма элементларын уртага тигезләү, тигезләү .form-checkbox
дөрес.
<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>