كىرگۈزۈش گۇرۇپپىسى
تېكىست كىرگۈزۈش ، ئىختىيارى تاللاش ۋە ئىختىيارى ھۆججەت كىرگۈزۈشنىڭ ئىككى تەرىپىگە تېكىست ، كۇنۇپكا ياكى كۇنۇپكا گۇرۇپپىسى قوشۇش ئارقىلىق جەدۋەل كونتروللۇقىنى ئاسان كېڭەيتىڭ.
كىرگۈزۈشنىڭ ئىككى تەرىپىگە بىر قىستۇرما ياكى كۇنۇپكا قويۇڭ. كىرگۈزۈشنىڭ ئىككى تەرىپىگە بىرنى قويسىڭىزمۇ بولىدۇ. بىز بىر كىرگۈزۈش گۇرۇپپىسىدىكى كۆپ خىل شەكىل كونترول قىلىشنى قوللىمايمىز ، چوقۇم <label>
كىرگۈزۈش گۇرۇپپىسىنىڭ سىرتىغا چىقىشى كېرەك.
<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>
ئۆزىگە مۇناسىۋەتلىك جەدۋەل چوڭلۇقتىكى دەرسلەرنى قوشسىڭىز ، .input-group
ئىچىدىكى مەزمۇنلار ئاپتوماتىك چوڭايتىلىدۇ - ھەر بىر ئېلېمېنتتا جەدۋەل كونترول چوڭلۇقى سىنىپىنى تەكرارلاشنىڭ ھاجىتى يوق.
يەككە كىرگۈزۈش گۇرۇپپىسىنىڭ ئېلېمېنتلىرىنى چوڭايتىشنى قوللىمايدۇ.
<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="Small" 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="Default" 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="Large" aria-describedby="inputGroup-sizing-sm">
</div>
ھەر قانداق تەكشۈرۈش رامكىسى ياكى رادىئو تاللانمىسىنى تېكىستنىڭ ئورنىغا كىرگۈزۈش گۇرۇپپىسىنىڭ قوشۇمچە قىسمىغا قويۇڭ.
<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>
كۆپ <input>
s كۆرۈنۈشتە قوللايدىغان بولسىمۇ ، دەلىللەش ئۇسلۇبى پەقەت بىرلا گۇرۇپپا كىرگۈزۈش گۇرۇپپىلىرىغىلا ئىشلىتىلىدۇ <input>
.
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">First and last name</span>
</div>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
كۆپ خىل قوشۇمچە دېتاللارنى قوللايدۇ ، تەكشۈرۈش ساندۇقى ۋە رادىئو كىرگۈزۈش نۇسخىسى بىلەن ئارىلاشتۇرغىلى بولىدۇ.
<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="Amount (to the nearest dollar)">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="" 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">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<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="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
<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-haspopup="true" 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-haspopup="true" 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>
<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-haspopup="true" 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-haspopup="true" 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>
كىرگۈزۈش گۇرۇپپىلىرى ئىختىيارى تاللاش ۋە ئىختىيارى ھۆججەت كىرگۈزۈشنى قوللايدۇ. بۇلارنىڭ توركۆرگۈ سۈكۈتتىكى نەشرىنى قوللىمايدۇ.
<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">
<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">
<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>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Upload</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01">
<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">Choose file</label>
</div>
<div class="input-group-append">
<span class="input-group-text" id="">Upload</span>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile03">
<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">
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
ئەگەر ھەر بىر كىرگۈزۈشنىڭ بەلگىسىنى قوشمىسىڭىز ئېكران ئوقۇرمەنلىرى جەدۋەللىرىڭىزدە ئاۋارىچىلىققا ئۇچرايدۇ. بۇ كىرگۈزۈش گۇرۇپپىلىرىغا قوشۇمچە بەلگە ياكى ئىقتىدارلارنىڭ ياردەمچى تېخنىكىلارغا يەتكۈزۈلۈشىگە كاپالەتلىك قىلىڭ.
ئىشلىتىشكە بولىدىغان كونكرېت تېخنىكا ( سىنىپنى <label>
ئىشلىتىپ يوشۇرۇنغان ئېلېمېنتلار ياكى خاسلىق ۋە خاسلىقلارنى ئىشلىتىش بەلكىم بىرلەشتۈرۈلۈپ بولۇشى مۇمكىن ) ۋە قايسى قوشۇمچە ئۇچۇرلارنى يەتكۈزۈشكە ئېھتىياجلىق ئىكەنلىكىڭىز سىز ئىجرا قىلىۋاتقان كۆرۈنمە يۈزى كىچىك قورالىنىڭ ئوخشىماسلىقىغا ئاساسەن ئوخشاش بولمايدۇ. بۇ بۆلەكتىكى مىساللار بىر قانچە تەۋسىيە قىلىنغان ، دېلوغا مۇناسىۋەتلىك ئۇسۇللارنى تەمىنلەيدۇ..sr-only
aria-label
aria-labelledby
aria-describedby