ئاساسلىق مەزمۇنغا ئاتلاڭ Docs يول باشلاش
Check
in English

Layout

جەدۋەللىرىمىزنىڭ شەكىل قۇرۇلمىسى بىلەن سىزىقتىن توغرىسىغا توغرىسىغا خاس تورنى يولغا قويۇشقىچە بولغان بىر قىسىم قۇرۇلمىلارنى بېرىڭ.

بۇ بەتتە

جەدۋەل

ھەر بىر گۇرۇپپا شەكىل بۆلەكلىرى ئېلېمېنتتا تۇرۇشى كېرەك <form>. Bootstrap ئېلېمېنت ئۈچۈن سۈكۈتتىكى ئۇسلۇب بىلەن تەمىنلىمەيدۇ <form>، ئەمما سۈكۈتتىكى ھالەتتە تەمىنلەنگەن بىر قىسىم كۈچلۈك توركۆرگۈچ ئىقتىدارلىرى بار.

  • توركۆرگۈ شەكلىگە يېڭىمۇ؟ MDN جەدۋەل ھۆججىتىنى ئومۇمىي چۈشەنچە ۋە بار بولغان خاسلىقلارنىڭ تولۇق تىزىملىكى ئۈچۈن كۆرۈپ بېقىشنى ئويلاڭ.
  • <button>s <form>سۈكۈتتىكى ھالەتتە type="submit"، شۇڭا كونكرېت بولۇشقا تىرىشىڭ ھەمدە ھەمىشە a نى ئۆز ئىچىگە ئالىدۇ type.

Bootstrap قوللىنىلىدىغان بولغاچقا display: block، width: 100%بارلىق جەدۋەل كونتروللىرىمىزغا ئاساسەن ، جەدۋەللەر سۈكۈتتىكى ھالەتتە تىك ھالەتتە بولىدۇ. قوشۇمچە دەرسلەرنى بۇ جەدۋەلنى ھەر بىر شەكىلگە ئاساسەن ئۆزگەرتىشكە بولىدۇ.

Utilities

پايدا نىسبىتى بەزى شەكىللەرنى شەكىلگە قوشۇشنىڭ ئەڭ ئاسان ئۇسۇلى. ئۇلار بەلگە ، كونترول ، ئىختىيارى جەدۋەل تېكىستى ۋە جەدۋەل دەلىللەش ئۇچۇرلىرىنى ئاساسلىق گۇرۇپپىلاش بىلەن تەمىنلەيدۇ. ئاممىۋى مۇلازىمەتتە چىڭ تۇرۇشنى margin-bottom، ھەمدە پۈتۈن شەكىلدە بىر يۆنىلىشنى ئىزچىللىقنى ئىشلىتىشنى تەۋسىيە قىلىمىز.

<fieldset>S ، <div>s ياكى باشقا ئېلېمېنتلار بىلەن ئۆزىڭىز خالىغان شەكىللىرىڭىزنى قۇرالايسىز .

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>

تور تورى

تور دەرسلىكىمىز ئارقىلىق تېخىمۇ مۇرەككەپ شەكىللەرنى قۇرغىلى بولىدۇ. بۇلارنى كۆپ ئىستون ، ئوخشىمىغان كەڭلىك ۋە قوشۇمچە توغرىلاش تاللانمىلىرىنى تەلەپ قىلىدىغان جەدۋەل ئورۇنلاشتۇرۇشىغا ئىشلىتىڭ. Sass ئۆزگەرگۈچى مىقدارنىڭ قوزغىتىلىشىنى تەلەپ قىلىدۇ$enable-grid-classes (سۈكۈتتىكى ھالەتتە).

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>

Gutters

ئۆستەڭ ئۆزگەرتكۈچ سىنىپى قوشسىڭىز ، ئۆستەڭنىڭ كەڭلىكى شۇنداقلا سىزىقنى توسۇش يۆنىلىشى سۈپىتىدە كونترول قىلالايسىز. يەنە $enable-grid-classesSass ئۆزگەرگۈچى مىقدارنىڭ قوزغىتىلىشىنى تەلەپ قىلىدۇ (سۈكۈتتىكى ھالەتتە).

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>

تور سىستېمىسى ئارقىلىق تېخىمۇ مۇرەككەپ ئورۇنلاشتۇرۇشلارنى قۇرغىلى بولىدۇ.

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>

گورىزونتال شەكلى

كاتەكچە قوشۇش ئارقىلىق .rowسىنىپ بىلەن گورىزونتال شەكىل ھاسىل قىلىڭ ھەمدە .col-*-*دەرسلەرنى ئىشلىتىپ بەلگە ۋە كونتروللىرىڭىزنىڭ كەڭلىكىنى بەلگىلەڭ. .col-form-labelS لىرىڭىزنىمۇ قوشۇشقا كاپالەتلىك قىلىڭ ، <label>شۇنداق بولغاندا ئۇلار مۇناسىۋەتلىك جەدۋەل كونتروللىرى بىلەن تىك ھالەتتە مەركەزلىشىدۇ.

بەزى ۋاقىتلاردا ، سىز ئېھتىياجلىق بولغان مۇكەممەل ماسلىشىشنى ھاسىل قىلىش ئۈچۈن ، سىز گىرۋەك ياكى تاختا ئىشلىتىش قوراللىرىنى ئىشلىتىشىڭىز كېرەك. مەسىلەن ، padding-topتېكىست ئاساسى سىزىقنى تېخىمۇ ياخشى ماسلاشتۇرۇش ئۈچۈن ، دۆۋىلەنگەن رادىئو كىرگۈزۈش بەلگىسىدىكى ئۆچۈرۈۋەتتۇق.

رادىئو
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>

گورىزونتال شەكىل بەلگىسىنىڭ چوڭ-كىچىكلىكى

چوڭلۇقى .col-form-label-smياكى . _ .col-form-label-lg_ <label>_ _<legend>.form-control-lg.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>

ستون چوڭلۇقى

ئالدىنقى مىساللاردا كۆرسىتىلگەندەك ، بىزنىڭ تور سىستېمىسىمىز ھەر قانداق ساننى .cola ئىچىگە قويسىڭىز .rowبولىدۇ. ئۇلار بار بولغان كەڭلىكنى تەڭ بۆلۈپ بېرىدۇ. سىز ئاز ياكى كۆپ بوشلۇق ئىگىلەش ئۈچۈن ئىستونلىرىڭىزنىڭ بىر قىسمىنى تاللىسىڭىزمۇ بولىدۇ ، .colقالغانلىرى قالغان قىسمىنى تەڭ بۆلۈپ ، مەخسۇس ئىستون سىنىپلىرىغا ئوخشاش .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>

ئاپتوماتىك چوڭلۇقتا

تۆۋەندىكى مىسالدا flexbox قورالى ئىشلىتىلگەن بولۇپ ، مەزمۇن ۋە ئۆزگىرىشلەرنى تىك ھالەتتە مەركەز قىلىدۇ .col، .col-autoبۇنداق بولغاندا ئىستونلىرىڭىز ئېھتىياجلىق بوشلۇقنى ئىگىلەيدۇ. باشقىچە قىلىپ ئېيتقاندا ، ستوننىڭ مەزمۇنىغا ئاساسەن چوڭلۇقى.

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

ئاندىن چوڭ-كىچىك ئىستون سىنىپلىرى بىلەن ئۇنى يەنە بىر قېتىم رېمونت قىلالايسىز.

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

قۇر شەكلى

.row-cols-*دەرسلەرنى ئىشلىتىپ ئىنكاسچان توغرىسىغا ئورۇنلاشتۇرۇش ھاسىل قىلىڭ . ئۆستەڭ ئۆزگەرتىش سىنىپى قوشۇش ئارقىلىق ، توغرىسىغا ۋە تىك يۆنىلىشتە ئۆستەڭ بولىدۇ. تار كۆچمە كۆرۈنۈشلەردە ، .col-12جەدۋەل كونتروللىغۇچنى تىزىشقا ياردەم بېرىدۇ. .align-items-centerشەكىل ئېلېمېنتلىرىنى ئوتتۇرىسىغا توغرىلاپ ، توغرىلاشنى .form-checkمۇۋاپىق قىلىدۇ.

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