in English

Buidheann cuir a-steach

Leudaich smachdan foirm gu furasta le bhith a’ cur teacsa, putanan, no buidhnean putan air gach taobh de chuir a-steach teacsa, taghaidhean gnàthaichte, agus cuir a-steach faidhle gnàthaichte.

Eisimpleir bunaiteach

Cuir aon tuilleadan no putan air gach taobh de chur-a-steach. Faodaidh tu cuideachd fear a chuir air gach taobh de chuir a-steach. Cuimhnich gun cuir thu <label>s taobh a-muigh a’ bhuidheann cuir a-steach.

@
@eisimpleir.com
https://example.com/users/
$
.00
Le raon teacsa 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
  </div>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">With textarea</span>
  </div>
  <textarea class="form-control" aria-label="With textarea"></textarea>
</div>

Clò-bhualadh

Bidh buidhnean cuir a-steach a’ cuairteachadh gu bunaiteach tro flex-wrap: wrapgus gabhail ri dearbhadh raon foirm àbhaisteach taobh a-staigh buidheann cuir a-steach. Faodaidh tu seo a chuir dheth le .flex-nowrap.

@ 
<div class="input-group flex-nowrap">
  <div class="input-group-prepend">
    <span class="input-group-text" id="addon-wrapping">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
</div>

Meudachadh

Cuir na clasaichean meud cruth coimeasach ris .input-groupfhèin agus thèid na tha a-staigh a mheudachadh gu fèin-ghluasadach - chan eil feum air na clasaichean meud smachd foirm ath-aithris air gach eileamaid.

Chan eil meudachadh air na h-eileamaidean buidhne cuir a-steach fa leth a’ faighinn taic.

Beag
Deònach
Mòr 
<div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>

<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
</div>

Bogsaichean sgrùdaidh agus rèidiothan

Cuir bogsa sgrùdaidh no roghainn rèidio sam bith taobh a-staigh addon buidheann cuir a-steach an àite teacsa.

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox" aria-label="Checkbox for following text input">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="radio" aria-label="Radio button for following text input">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with radio button">
</div>

Ioma-steach a-steach

Fhad ‘s a tha ioma <input>s a’ faighinn taic lèirsinneach, chan eil stoidhlichean dearbhaidh rim faighinn ach airson buidhnean cuir a-steach le aon fhaidhle <input>.

Ciad ainm agus sloinneadh 
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">First and last name</span>
  </div>
  <input type="text" aria-label="First name" class="form-control">
  <input type="text" aria-label="Last name" class="form-control">
</div>

Ioma addons

Tha grunn thuilleadan a’ faighinn taic agus faodar an measgachadh le tionndaidhean bogsa-seic agus cuir a-steach rèidio.

$ 0.00
$ 0.00 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
  <div class="input-group-append">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
</div>

Addons putan

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend" id="button-addon3">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons" aria-describedby="button-addon3">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
  <div class="input-group-append" id="button-addon4">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

Putanan le dropdowns

Gnìomh Gnìomh eile Rud eile an seo Ceangal air a sgaradh
Gnìomh Gnìomh eile Rud eile an seo Ceangal air a sgaradh 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

Putanan sgaraichte

Gnìomh Gnìomh eile Rud eile an seo Ceangal air a sgaradh
Gnìomh Gnìomh eile Rud eile an seo Ceangal air a sgaradh 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary">Action</button>
    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
  <div class="input-group-append">
    <button type="button" class="btn btn-outline-secondary">Action</button>
    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

Foirmean gnàthaichte

Tha buidhnean cuir a-steach a’ toirt a-steach taic airson taghaidhean gnàthaichte agus cuir a-steach faidhle gnàthaichte. Chan eil taic ri dreachan bunaiteach brabhsair dhiubh sin.

Taghadh gnàthaichte

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">Options</label>
  </div>
  <select class="custom-select" id="inputGroupSelect01">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="input-group mb-3">
  <select class="custom-select" id="inputGroupSelect02">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div class="input-group-append">
    <label class="input-group-text" for="inputGroupSelect02">Options</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <select class="custom-select" id="inputGroupSelect03" aria-label="Example select with button addon">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="input-group">
  <select class="custom-select" id="inputGroupSelect04" aria-label="Example select with button addon">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

Cuir a-steach faidhle gnàthaichte

Bidh an eisimpleir seo a’ cleachdadh a’ phàirt brabhsair faidhle àbhaisteach , a tha an urra ris a’ plugan bs-custom-file-input air leth .
Luchdaich suas
Luchdaich suas 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile02">
    <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label>
  </div>
  <div class="input-group-append">
    <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
    <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
  </div>
</div>

<div class="input-group">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
    <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
  </div>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
  </div>
</div>

Ruigsinneachd

Dèan cinnteach gu bheil ainm ruigsinneach iomchaidh aig a h-uile smachd foirm gus an tèid an adhbhar a chuir an cèill do luchd-cleachdaidh teicneòlasan taice. 'S e an dòigh as sìmplidh air seo a choileanadh a bhith a' cleachdadh <label>eileamaid, no - a thaobh putanan - gus teacsa tuairisgeul gu leòr a thoirt a-steach mar phàirt den t- <button>...</button>susbaint.

Airson suidheachaidhean far nach eil e comasach <label>susbaint teacsa faicsinneach no iomchaidh a thoirt a-steach, tha dòighean eile ann fhathast air ainm ruigsinneach a thoirt seachad, leithid:

  • <label>eileamaidean falaichte a’ cleachdadh a’ .sr-onlychlas
  • A’ comharrachadh eileamaid a th’ ann mar-thà a dh’ fhaodas a bhith mar leubail a’ cleachdadharia-labelledby
  • A 'toirt seachad titlefeart
  • Suidhich gu soilleir an t-ainm ruigsinneach air eileamaid a’ cleachdadharia-label

Mura h-eil gin dhiubh sin an làthair, faodaidh teicneòlasan cuideachaidh a bhith a 'cleachdadh a' placeholderghnè mar chùl-taic airson an ainm ruigsinneach <input>agus na h- <textarea>eileamaidean. Tha na h-eisimpleirean san earrann seo a’ toirt seachad beagan dhòighean-obrach a tha air am moladh, a tha sònraichte do chùisean.

Ged a bhios cleachdadh susbaint a tha falaichte gu fradharcach ( .sr-only, aria-label, , agus eadhon placeholdersusbaint, a thèid à sealladh aon uair ‘s gu bheil susbaint ann an raon foirm) na bhuannachd do luchd-cleachdaidh teicneòlas cuideachaidh, dh’ fhaodadh dìth teacsa leubail faicsinneach a bhith fhathast na dhuilgheadas dha cuid de luchd-cleachdaidh. Is e seòrsa air choreigin de leubail faicsinneach an dòigh-obrach as fheàrr sa chumantas, an dà chuid a thaobh ruigsinneachd agus so-chleachdadh.