in English

Ẹgbẹ ti nwọle

Ni irọrun fa awọn iṣakoso fọọmu fa nipasẹ fifi ọrọ kun, awọn bọtini, tabi awọn ẹgbẹ bọtini ni ẹgbẹ mejeeji ti awọn igbewọle ọrọ, yiyan aṣa, ati awọn igbewọle faili aṣa.

Apẹẹrẹ ipilẹ

Fi afikun kan tabi bọtini si ẹgbẹ mejeeji ti titẹ sii. O tun le gbe ọkan si ẹgbẹ mejeeji ti titẹ sii. Ranti lati gbe <label>s ita ẹgbẹ titẹ sii.

@
@example.com
https://example.com/users/
$
.00
Pẹlu textarea 
<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>

Fi ipari si

Awọn ẹgbẹ titẹ sii fi ipari si nipasẹ aiyipada nipasẹ flex-wrap: wraplati le gba ifọwọsi aaye fọọmu aṣa laarin ẹgbẹ titẹ sii. O le mu eyi ṣiṣẹ pẹlu .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>

Titobi

Ṣafikun awọn kilasi iwọn fọọmu ojulumo si .input-groupararẹ ati awọn akoonu inu yoo yipada laifọwọyi-ko si iwulo fun atunwi awọn kilasi iwọn iṣakoso fọọmu lori ipin kọọkan.

Iwọn lori awọn eroja ẹgbẹ titẹ sii kọọkan ko ni atilẹyin.

Kekere
Aiyipada
Tobi 
<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>

Awọn apoti ayẹwo ati awọn redio

Fi apoti ayẹwo eyikeyi tabi aṣayan redio laarin addoni ẹgbẹ titẹ sii dipo ọrọ.

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

Awọn igbewọle pupọ

Lakoko ti ọpọlọpọ awọn <input>s ṣe atilẹyin ni wiwo, awọn aza afọwọsi nikan wa fun awọn ẹgbẹ titẹ sii pẹlu ẹyọkan <input>.

Orukọ akọkọ ati idile 
<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>

Multiple addons

Awọn afikun afikun ni atilẹyin ati pe o le dapọ pẹlu apoti ayẹwo ati awọn ẹya igbewọle redio.

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

Awọn afikun bọtini

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

Awọn bọtini pẹlu dropdowns

Action Miiran igbese Nkankan miran nibi Iyatọ ọna asopọ
Action Miiran igbese Nkankan miran nibi Iyatọ ọna asopọ 
<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>

Awọn bọtini ti a pin

Action Miiran igbese Nkankan miran nibi Iyatọ ọna asopọ
Action Miiran igbese Nkankan miran nibi Iyatọ ọna asopọ 
<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>

Awọn fọọmu aṣa

Awọn ẹgbẹ igbewọle pẹlu atilẹyin fun awọn yiyan aṣa ati awọn igbewọle faili aṣa. Awọn ẹya aiyipada ẹrọ aṣawakiri ti iwọnyi ko ni atilẹyin.

Aṣa yan

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

Iṣagbewọle faili aṣa

Apẹẹrẹ yii nlo paati aṣawakiri faili aṣa , eyiti o gbarale ohun itanna bs-custom-faili-input lọtọ .
Gbee si
Gbee si 
<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>

Wiwọle

Rii daju pe gbogbo awọn iṣakoso fọọmu ni orukọ wiwọle ti o yẹ ki idi wọn le jẹ gbigbe si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ. Ọna ti o rọrun julọ lati ṣaṣeyọri eyi ni lati lo ipin <label>kan, tabi—ninu ọran ti awọn bọtini—lati ṣafikun ọrọ ijuwe ti o to gẹgẹ bi apakan <button>...</button>akoonu naa.

Fun awọn ipo nibiti ko ṣee ṣe lati ṣafikun <label>akoonu ọrọ ti o han tabi ti o yẹ, awọn ọna miiran wa ti ṣi pese orukọ wiwọle, bii:

  • <label>eroja pamọ lilo .sr-onlykilasi
  • Ntọkasi nkan ti o wa tẹlẹ ti o le ṣe bi aami nipa liloaria-labelledby
  • Pese a titlero pe
  • Ṣiṣeto orukọ ti o wa ni gbangba lori eroja nipa liloaria-label

Ti ko ba si ọkan ninu iwọnyi ti o wa, awọn imọ-ẹrọ iranlọwọ le ṣe igbasilẹ si lilo placeholderabuda bi ipadasẹhin fun orukọ wiwọle lori <input>ati <textarea>awọn eroja. Awọn apẹẹrẹ ti o wa ni apakan yii pese diẹ ti a daba, awọn isunmọ-ọrọ kan pato.

Lakoko lilo akoonu ti o farapamọ oju ( .sr-only, aria-label, ati paapaa placeholderakoonu, eyiti o padanu ni kete ti aaye fọọmu kan ni akoonu) yoo ṣe anfani awọn olumulo imọ-ẹrọ iranlọwọ, aini ti ọrọ aami ti o han le tun jẹ iṣoro fun awọn olumulo kan. Diẹ ninu awọn aami ti o han ni gbogbogbo jẹ ọna ti o dara julọ, mejeeji fun iraye si ati lilo.