ቅጾች

ለቅጽ ቁጥጥር ቅጦች፣ የአቀማመጥ አማራጮች እና የተለያዩ ቅጾችን ለመፍጠር ብጁ ክፍሎች ምሳሌዎች እና የአጠቃቀም መመሪያዎች።

አጠቃላይ እይታ

የቡትስትራፕ ቅፅ ቁጥጥሮች ከክፍሎች ጋር ዳግም በተጀመሩ የቅጽ ስልቶቻችን ላይ ይሰፋሉ። በአሳሾች እና በመሳሪያዎች ላይ የበለጠ ወጥነት ያለው ስራ ለመስራት ወደ ብጁ ማሳያዎቻቸው ለመምረጥ እነዚህን ክፍሎች ይጠቀሙ።

typeእንደ ኢሜል ማረጋገጫ፣ የቁጥር ምርጫ እና ሌሎችም ያሉ አዳዲስ የግቤት መቆጣጠሪያዎችን ለመጠቀም በሁሉም ግብዓቶች (ለምሳሌ emailለኢሜይል አድራሻ ወይም numberለቁጥር መረጃ) ተገቢውን ባህሪ መጠቀምዎን ያረጋግጡ ።

የBootstrapን ቅፅ ቅጦችን ለማሳየት ፈጣን ምሳሌ ይኸውና። በሚፈለጉት ክፍሎች፣ የቅጽ አቀማመጥ እና ሌሎች ላይ ለሰነዶች ማንበብ ይቀጥሉ።

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

የቅጽ መቆጣጠሪያዎች

<input>እንደ s፣ <select>s እና s ያሉ የጽሑፍ ቅፅ መቆጣጠሪያዎች ከክፍል <textarea>ጋር በቅጥ የተሰሩ ናቸው .form-control። ለአጠቃላይ ገጽታ፣ የትኩረት ሁኔታ፣ የመጠን መጠን እና ሌሎችም ቅጦች ተካትተዋል።

የእኛን ብጁ ቅፆች ወደ ተጨማሪ የቅጥ <select>s ማሰስዎን እርግጠኛ ይሁኑ ።

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

ለፋይል ግብዓቶች፣ .form-controlለ .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

መጠናቸው

.form-control-lgእንደ እና ክፍሎችን በመጠቀም ቁመቶችን ያዘጋጁ .form-control-sm።

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

ለማንበብ ብቻ የተፈቀደ

readonlyየግቤት ዋጋ እንዳይቀየር ለመከላከል የቦሊያን አይነታውን በግቤት ላይ ያክሉ ። ተነባቢ-ብቻ ግብዓቶች ቀለለ ሆነው ይታያሉ (ልክ እንደ የተሰናከሉ ግብዓቶች)፣ ግን መደበኛ ጠቋሚውን ያቆዩት።

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

ንባብ ብቻ ግልጽ ጽሑፍ

<input readonly>በቅጽዎ ውስጥ ያሉ ክፍሎች እንደ ግልጽ ጽሁፍ እንዲቀረጹ ከፈለጉ ፣ .form-control-plaintextነባሪውን የቅጽ የመስክ ቅጥን ለማስወገድ እና ትክክለኛውን ህዳግ እና ንጣፍ ለመጠበቅ ክፍሉን ይጠቀሙ።

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

ክልል ግብዓቶች

በመጠቀም በአግድም የሚሽከረከሩ የክልል ግብዓቶችን ያዘጋጁ .form-control-range።

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

አመልካች ሳጥኖች እና ሬዲዮዎች

ነባሪ አመልካች ሳጥኖች እና ራዲዮዎች የኤችቲኤምኤል አባላቶቻቸውን አቀማመጥ እና ባህሪ የሚያሻሽሉ ለሁለቱም የግቤት ዓይነቶች አንድ ክፍል.form-check በመታገዝ ይሻሻላሉ ። አመልካች ሳጥኖች በአንድ ዝርዝር ውስጥ አንድ ወይም ብዙ አማራጮችን ለመምረጥ ሲሆኑ ራዲዮዎች ከብዙዎች አንድ ምርጫን ለመምረጥ ናቸው.

የተሰናከሉ አመልካች ሳጥኖች እና ሬዲዮዎች ይደገፋሉ። disabledየመግቢያውን ሁኔታ ለማመልከት ባህሪው ቀለል ያለ ቀለም ይተገብራል ።

አመልካች ሳጥኖች እና የሬዲዮ አዝራሮች በኤችቲኤምኤል ላይ የተመሠረተ ቅጽ ማረጋገጥን ይደግፋሉ እና አጭር እና ተደራሽ መለያዎችን ይሰጣሉ። ስለዚህ፣ የእኛ <input>እና ሴቶቻችን ከውስጥ <label>በተቃራኒ የወንድም እህት አካላት ናቸው ። እርስዎ መግለጽ ስላለብዎት እና ን ለማዛመድ ባህሪያት ይህ በመጠኑ የበለጠ የቃል ነው ።<input><label>idfor<input><label>

ነባሪ (የተቆለለ)

በነባሪ፣ የቅርብ ወንድም ወይም እህት የሆኑ ማንኛውም የአመልካች ሳጥኖች እና ራዲዮዎች በአቀባዊ ይደረደራሉ እና በትክክል ከ ጋር ይያያዛሉ .form-check።

ነባሪ አመልካች ሳጥን

አመልካች ሳጥን ተሰናክሏል።

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

ነባሪ ሬዲዮ

ሁለተኛ ነባሪ ሬዲዮ

የጠፋ ሬዲዮ

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

በአግባቡ

.form-check-inlineወደ ማንኛውም በማከል በተመሳሳይ አግድም ረድፍ ላይ የአመልካች ሳጥኖችን ወይም ራዲዮዎችን የቡድን .form-check.

3 (የተሰናከለ)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

3 (የተሰናከለ)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

ያለ መለያዎች

ምንም የመለያ ጽሑፍ .position-staticወደሌለው ውስጥ ወደ ግብዓቶች ያክሉ ። .form-checkአሁንም ቢሆን ለረዳት ቴክኖሎጂዎች (ለምሳሌ፣ በመጠቀም aria-label) የሆነ ዓይነት መሰየሚያ ማቅረብዎን ያስታውሱ።

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

አቀማመጥ

Bootstrap ስለሚተገበር display: blockእና width: 100%በሁሉም የቅጽ መቆጣጠሪያዎቻችን ላይ ቅፆች በነባሪነት በአቀባዊ ይደረደራሉ። ተጨማሪ ክፍሎች ይህንን አቀማመጥ በቋሚ ቅፅ ላይ ለመለወጥ ጥቅም ላይ ሊውሉ ይችላሉ.

ቡድኖችን ይፍጠሩ

ክፍል .form-groupወደ ቅጾች አንዳንድ መዋቅር ለመጨመር ቀላሉ መንገድ ነው. ትክክለኛ መለያዎችን፣ ቁጥጥሮችን፣ አማራጭ የእገዛ ጽሑፍን እና የማረጋገጫ መልእክትን ማሰባሰብን የሚያበረታታ ተለዋዋጭ ክፍል ያቀርባል። በነባሪነት ብቻ ተፈጻሚ ይሆናል ፣ ነገር ግን እንደ አስፈላጊነቱ margin-bottomተጨማሪ ቅጦችን ይወስዳል ። በ s፣ s ወይም ከማንኛውም ሌላ አካል .form-inlineጋር ይጠቀሙበት ።<fieldset><div>

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
  </div>
</form>

የቅጽ ፍርግርግ

የፍርግርግ ክፍሎቻችንን በመጠቀም የበለጠ ውስብስብ ቅጾችን መገንባት ይቻላል. እነዚህን ብዙ ዓምዶች፣ የተለያዩ ስፋቶች እና ተጨማሪ የአሰላለፍ አማራጮች ለሚፈልጉ የቅጽ አቀማመጦች ይጠቀሙ።

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

ረድፍ ቅፅ

እንዲሁም ነባሪውን የዓምድ ቦይ የሚሽረው የመደበኛ የፍርግርግ ረድፋችን ልዩነት ለጠንካራ እና ውሱን አቀማመጦች .rowመለዋወጥ ይችላሉ ።.form-row

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

በጣም ውስብስብ አቀማመጦች እንዲሁ በፍርግርግ ስርዓቱ ሊፈጠሩ ይችላሉ.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <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>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

አግድም ቅርጽ

.rowቡድኖችን ለመመስረት ክፍሉን በመጨመር እና ክፍሎቹን በመጠቀም .col-*-*የመለያዎችዎን እና የመቆጣጠሪያዎችዎን ስፋት በመግለጽ አግድም ቅጾችን ከግሪድ ጋር ይፍጠሩ። በአቀባዊ በተያያዙት የቅጽ መቆጣጠሪያዎቻቸው ላይ እንዲያማምሩ .col-form-labelወደ እርስዎም ማከልዎን ያረጋግጡ ።<label>

አንዳንድ ጊዜ፣ የሚፈልጉትን ፍጹም አሰላለፍ ለመፍጠር ህዳግ ወይም ንጣፍ መገልገያዎችን መጠቀም ሊኖርብዎ ይችላል። padding-topለምሳሌ፣ የፅሁፍ መነሻ መስመርን በተሻለ ሁኔታ ለማጣጣም የተከመረውን የሬዲዮ ግብዓቶች መለያችንን አስወግደናል ።

<form>
  <div class="form-group row">
    <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="form-group row">
    <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="form-group">
    <div class="row">
      <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>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <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>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

አግድም ቅጽ መለያ መጠን

መጠኑን በትክክል ለመከተል .col-form-label-smወይም .col-form-label-lgየእርስዎን <label>s ወይም s መጠቀምዎን ያረጋግጡ ።<legend>.form-control-lg.form-control-sm

<form>
  <div class="form-group row">
    <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="form-group row">
    <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="form-group 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>
</form>

የአምድ መጠን

በቀደሙት ምሳሌዎች ላይ እንደሚታየው የእኛ የፍርግርግ ስርዓት ማንኛውንም ቁጥር .colበ a .rowወይም ውስጥ እንዲያስቀምጡ ይፈቅድልዎታል .form-row። ያለውን ስፋት በመካከላቸው እኩል ይከፋፍሏቸዋል። እንዲሁም ብዙ ወይም ያነሰ ቦታ ለመውሰድ የአምዶችዎን ንዑስ ስብስብ መምረጥ ይችላሉ፣ የተቀሩት .colዎች ደግሞ የቀረውን በእኩል መጠን ይከፍላሉ፣ እንደ የተወሰኑ የአምድ ክፍሎች .col-7።

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

ራስ-ሰር መጠን

ከታች ያለው ምሳሌ ይዘቱን በአቀባዊ መሃል ለማድረግ እና አምዶችዎ የሚፈለገውን ያህል ቦታ ብቻ እንዲይዙ ለማድረግ .colየ Flexbox መገልገያ ይጠቀማል። .col-autoበሌላ መንገድ ያስቀምጡ, የዓምዱ መጠኖች በይዘቱ ላይ ተመስርተው.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <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 mb-2">Submit</button>
    </div>
  </div>
</form>

ከዚያ ያንን እንደገና መጠነ-ተኮር ከሆኑ የአምድ ክፍሎች ጋር መቀላቀል ይችላሉ።

<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <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 my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

እና በእርግጥ ብጁ የቅጽ መቆጣጠሪያዎች ይደገፋሉ።

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <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 my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

የመስመር ውስጥ ቅጾች

.form-inlineበአንድ አግድም ረድፍ ላይ ተከታታይ መለያዎችን፣ የቅጽ መቆጣጠሪያዎችን እና አዝራሮችን ለማሳየት ክፍሉን ይጠቀሙ ። በውስጥ መስመር ቅጾች ውስጥ ያሉ የቅጽ መቆጣጠሪያዎች ከነባሪ ሁኔታቸው ትንሽ ይለያያሉ።

መቆጣጠሪያዎች display: flexማንኛውንም የኤችቲኤምኤል ነጭ ቦታን እየሰበሩ እና ከቦታ ቦታ እና ከ flexbox መገልገያዎች ጋር የአሰላለፍ ቁጥጥር እንዲያቀርቡ ያስችሉዎታል።
width: autoየቡትስትራፕ ነባሪውን ለመሻር መቆጣጠሪያዎች እና የግቤት ቡድኖች ይቀበላሉ width: 100%።
በተንቀሳቃሽ መሳሪያዎች ላይ ጠባብ የእይታ ወደቦችን ለመለካት ቢያንስ 576 ፒክስል ስፋት ባላቸው የእይታ ወደቦች ውስጥ መቆጣጠሪያዎች በመስመር ውስጥ ብቻ ይታያሉ።

የግለሰብ የቅጽ መቆጣጠሪያዎችን ስፋት እና አሰላለፍ ከክፍተት መገልገያዎች ጋር (ከዚህ በታች እንደሚታየው) እራስዎ መፍታት ሊኖርብዎ ይችላል ። በመጨረሻ፣ ሁልጊዜ ከእያንዳንዱ የቅጽ መቆጣጠሪያ ጋር ማካተትዎን እርግጠኛ ይሁኑ <label>፣ ምንም እንኳን በስክሪን አንባቢ ካልሆኑ ጎብኝዎች መደበቅ ቢፈልጉም .sr-only።

<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

ብጁ የቅጽ መቆጣጠሪያዎች እና ምርጫዎች እንዲሁ ይደገፋሉ።

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>

ወደ የተደበቁ መለያዎች አማራጮች

ለእያንዳንዱ ግቤት መለያ ካላካተቱ እንደ ስክሪን አንባቢ ያሉ አጋዥ ቴክኖሎጂዎች በእርስዎ ቅጾች ላይ ችግር አለባቸው። ለእነዚህ የውስጠ-መስመር ቅጾች፣ .sr-onlyክፍሉን በመጠቀም መለያዎቹን መደበቅ ይችላሉ። aria-labelእንደ , aria-labelledbyወይም titleአይነታ የመሳሰሉ ለረዳት ቴክኖሎጂዎች መለያን ለማቅረብ ተጨማሪ አማራጭ ዘዴዎች አሉ ። ከእነዚህ ውስጥ አንዳቸውም ከሌሉ አጋዥ ቴክኖሎጂዎች ካሉ ባህሪውን ወደ መጠቀም ሊሄዱ ይችላሉ placeholder፣ ነገር ግን placeholderሌሎች የመለያ ዘዴዎችን እንደ ምትክ መጠቀም አይመከርም።

የእገዛ ጽሑፍ

አግድ-ደረጃ እገዛ ጽሑፍ በቅጾች ሊፈጠር ይችላል (ቀደም ሲል v3 ውስጥ .form-textይታወቅ )። .help-blockየውስጠ-መስመር እገዛ ጽሑፍ ማንኛውንም የውስጠ-መስመር HTML አባል እና የመገልገያ ክፍሎችን በመጠቀም በተለዋዋጭነት ሊተገበር ይችላል .text-muted።

የእገዛ ጽሑፍን ከቅጽ መቆጣጠሪያዎች ጋር ማያያዝ

የእገዛ ጽሁፍ ባህሪውን ከመጠቀም ጋር ከሚዛመደው የቅጽ መቆጣጠሪያ ጋር በግልፅ መያያዝ አለበት aria-describedby። ይህ እንደ ስክሪን አንባቢዎች ያሉ አጋዥ ቴክኖሎጂዎች ተጠቃሚው ትኩረት ሲያደርግ ወይም መቆጣጠሪያው ውስጥ ሲገባ ይህን የእገዛ ጽሁፍ እንደሚያሳውቁ ያረጋግጣል።

ከግብዓቶች በታች የእገዛ ጽሑፍ በ ቅጥ ሊደረግ ይችላል .form-text። ይህ ክፍል display: blockከላይ ካሉት ግብዓቶች ለቀላል ክፍተት አንዳንድ ከፍተኛ ህዳግን ያካትታል እና ይጨምራል።

ፕስወርድ የይለፍ ቃልዎ ከ8-20 ቁምፊዎች ርዝመት ያለው፣ ፊደሎችን እና ቁጥሮችን የያዘ እና ክፍተቶችን፣ ልዩ ቁምፊዎችን ወይም ስሜት ገላጭ ምስሎችን መያዝ የለበትም።

<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

የውስጠ-መስመር ጽሑፍ ማንኛውንም የተለመደ የውስጠ-መስመር ኤችቲኤምኤል ኤለመንት (ኤ፣፣፣ ወይም ሌላ ነገር ሊሆን ይችላል <small>) <span>ከመገልገያ ክፍል በቀር ምንም ሊጠቀም ይችላል።

<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

የተሰናከሉ ቅጾች

disabledየተጠቃሚ መስተጋብርን ለመከላከል እና ቀለል ያለ መስሎ እንዲታይ ለማድረግ የቦሊያን አይነታውን በግቤት ላይ ያክሉ ።

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

በውስጡ ያሉትን ሁሉንም መቆጣጠሪያዎች ለማሰናከል ባህሪውን disabledወደ ሀ ያክሉ ።<fieldset>

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

መልህቆች ጋር ማሳሰቢያ

በነባሪ፣ አሳሾች ሁሉንም የውስጥ ቅፅ መቆጣጠሪያዎችን ( <input>፣ <select>እና <button>ኤለመንቶችን) <fieldset disabled>እንደ አካል ጉዳተኛ አድርገው ይቆጥሯቸዋል፣ ይህም ሁለቱንም የቁልፍ ሰሌዳ እና የመዳፊት መስተጋብር ይከላከላል። ነገር ግን፣ የእርስዎ ቅፅ <a ... class="btn btn-*">አባላትን የሚያካትት ከሆነ፣ እነዚህ የሚሰጣቸው የአጻጻፍ ስልት ብቻ ነው pointer-events: none። ስለ አዝራሮች የአካል ጉዳተኛ ሁኔታ (በተለይም በንዑስ ክፍል ለአንካሮች) ክፍል ላይ እንደተገለፀው ይህ የሲኤስኤስ ንብረት ገና ደረጃውን ያልጠበቀ እና በInternet Explorer 10 ውስጥ ሙሉ በሙሉ አይደገፍም እና የቁልፍ ሰሌዳ ተጠቃሚዎች እንዳይሆኑ አይከለክልም እነዚህን ማገናኛዎች ማተኮር ወይም ማንቃት ይችላል። ስለዚህ ለደህንነት ሲባል እንደዚህ ያሉትን ማገናኛዎች ለማሰናከል ብጁ ጃቫስክሪፕት ይጠቀሙ።

የአሳሽ ተሻጋሪ ተኳኋኝነት

disabledBootstrap እነዚህን ቅጦች በሁሉም አሳሾች ላይ ቢተገበርም፣ ኢንተርኔት ኤክስፕሎረር 11 እና ከዚያ በታች በ ሀ ላይ ያለውን ባህሪ ሙሉ በሙሉ አይደግፉም <fieldset>። በእነዚህ አሳሾች ውስጥ የመስክ ስብስቡን ለማሰናከል ብጁ ጃቫ ስክሪፕትን ይጠቀሙ።

ማረጋገጫ

በኤችቲኤምኤል 5 ቅጽ ማረጋገጫ ለተጠቃሚዎችዎ ጠቃሚ እና ተግባራዊ ግብረመልስ ያቅርቡ - በሁሉም በሚደገፉ አሳሾች ውስጥ ይገኛል። ከአሳሹ ነባሪ የማረጋገጫ ግብረመልስ ምረጥ ወይም ብጁ መልዕክቶችን አብሮ በተሰራ ክፍሎቻችን እና ጀማሪ ጃቫስክሪፕት ተግብር።

ቤተኛ የአሳሽ ነባሪ የማረጋገጫ መልዕክቶች በሁሉም አሳሾች ውስጥ (በተለይም Chrome በዴስክቶፕ እና በሞባይል ላይ) በቋሚነት ለረዳት ቴክኖሎጂዎች ስለማይጋለጡ በአሁኑ ጊዜ ብጁ የማረጋገጫ ቅጦችን እንዲጠቀሙ እንመክራለን።

እንዴት እንደሚሰራ

የቅጽ ማረጋገጫ ከBootstrap ጋር እንዴት እንደሚሰራ እነሆ፡-

የኤችቲኤምኤል ቅጽ ማረጋገጫ በ CSS ሁለት አስመሳይ ክፍሎች በኩል ይተገበራል፣ :invalidእና :valid. የሚመለከተው በ <input>፣ <select>እና <textarea>አባሎች ላይ ነው።
ቡትስትራፕ የወላጅ ክፍልን :invalidእና ቅጦችን ይሸፍናል፣ ብዙውን ጊዜ በ . ያለበለዚያ፣ ዋጋ የሌለው ማንኛውም አስፈላጊ መስክ በገጽ ጭነት ላይ ልክ ያልሆነ ሆኖ ይታያል። በዚህ መንገድ እነሱን መቼ እንደሚያነቃቁ መምረጥ ይችላሉ (በተለምዶ ቅጹን ለማስገባት ከተሞከረ በኋላ)።:valid.was-validated<form>
የቅጹን ገጽታ እንደገና ለማስጀመር (ለምሳሌ AJAX ን በመጠቀም በተለዋዋጭ ቅፅ ማስረከቢያ) ፣ ካስረከቡ በኋላ .was-validatedክፍሉን <form>እንደገና ያስወግዱት።
እንደ ውድቀት፣ .is-invalidእና ክፍሎች ለአገልጋይ ጎን ማረጋገጫ.is-valid ከሐሰት-ክፍሎች ይልቅ ጥቅም ላይ ሊውሉ ይችላሉ ። የወላጅ ክፍል አያስፈልጋቸውም ።.was-validated
<label>በሲኤስኤስ አሰራር ላይ ባሉ ገደቦች ምክንያት በብጁ ጃቫ ስክሪፕት ሳይታገዝ በDOM ውስጥ ከቅጽ ቁጥጥር በፊት የሚመጣውን ቅጦች (በአሁኑ ጊዜ) መተግበር አንችልም ።
ሁሉም ዘመናዊ አሳሾች የቅጽ መቆጣጠሪያዎችን ለማረጋገጥ ተከታታይ የጃቫ ስክሪፕት ዘዴዎችን የገደብ ማረጋገጫውን ይደግፋሉ ።
የግብረመልስ መልእክቶች የአሳሹን ነባሪዎች (ለእያንዳንዱ አሳሽ የተለየ እና በ CSS በኩል የማይሰራ) ወይም የእኛን ብጁ የግብረመልስ ስልቶች ከተጨማሪ HTML እና CSS ጋር ሊጠቀሙ ይችላሉ።
ብጁ ተቀባይነት ያላቸው መልዕክቶችን setCustomValidityበጃቫ ስክሪፕት ማቅረብ ይችላሉ።

ያንን በአእምሯችን ይዘን፣ ለብጁ የቅጽ ማረጋገጫ ስልቶቻችን፣ አማራጭ የአገልጋይ ክፍሎች እና የአሳሽ ነባሪዎች የሚከተሉትን ማሳያዎች አስቡባቸው።

ብጁ ቅጦች

ለብጁ የ Bootstrap ቅጽ ማረጋገጫ መልእክቶች novalidateየቦሊያንን ባህሪ ወደ እርስዎ ማከል ያስፈልግዎታል <form>። ይህ የአሳሹን ነባሪ የግብረመልስ መሳሪያ ምክሮችን ያሰናክላል፣ነገር ግን አሁንም በጃቫስክሪፕት የቅጽ ማረጋገጫ ኤፒአይዎችን መዳረሻ ይሰጣል። ከታች ያለውን ቅጽ ለማስገባት ይሞክሩ; የእኛ ጃቫ ስክሪፕት የማስረከቢያ አዝራሩን ያጠለፈ እና ግብረመልስ ያቀርብልዎታል። ለማስገባት ሲሞክሩ በቅጽ መቆጣጠሪያዎችዎ ላይ የተተገበሩትን :invalidእና ቅጦችን ያያሉ ።:valid

ብጁ የግብረመልስ ቅጦች ግብረመልስን በተሻለ መልኩ ለማስተላለፍ ብጁ ቀለሞችን፣ ድንበሮችን፣ የትኩረት ቅጦችን እና የበስተጀርባ አዶዎችን ይተገበራሉ። የበስተጀርባ አዶዎች ለ <select>ዎች ብቻ ይገኛሉ .custom-select፣ ግን አይደሉም .form-control።

የመጀመሪያ ስም

Looks good!

የአያት ስም

Looks good!

የተጠቃሚ ስም

Please choose a username.

ከተማ

Please provide a valid city.

ግዛት

Please select a valid state.

ዚፕ

Please provide a valid zip.

ውሎች እና ሁኔታዎች ይስማሙ

You must agree before submitting.

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

የአሳሽ ነባሪዎች

የቅጽ ባህሪያትን ለመለወጥ ብጁ የማረጋገጫ ግብረመልስ መልዕክቶችን ወይም ጃቫ ስክሪፕትን ለመጻፍ ፍላጎት የለዎትም? ሁሉም ጥሩ, የአሳሽ ነባሪዎችን መጠቀም ይችላሉ. ከታች ያለውን ቅጽ ለማስገባት ይሞክሩ። በአሳሽዎ እና በስርዓተ ክወናዎ ላይ በመመስረት ትንሽ የተለየ የአስተያየት ዘይቤ ያያሉ።

እነዚህ የአስተያየት ስልቶች በሲኤስኤስ ሊቀረጹ ባይችሉም፣ አሁንም በጃቫስክሪፕት የአስተያየት ጽሑፉን ማበጀት ይችላሉ።

<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername"  aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

የአገልጋይ ጎን

የደንበኛ-ጎን ማረጋገጫን እንዲጠቀሙ እንመክራለን፣ ነገር ግን የአገልጋይ ወገን ማረጋገጫ ከፈለጉ፣ ልክ ያልሆኑ እና ትክክለኛ የሆኑ የቅጽ መስኮችን በ .is-invalidእና .is-valid. .invalid-feedbackበእነዚህ ክፍሎችም የሚደገፍ መሆኑን ልብ ይበሉ ።

የመጀመሪያ ስም

ጥሩ ይመስላል!

የአያት ስም

ጥሩ ይመስላል!

የተጠቃሚ ስም

እባክዎ የተጠቃሚ ስም ይምረጡ።

ከተማ

እባክዎ ትክክለኛ ከተማ ያቅርቡ።

ግዛት

እባክዎ የሚሰራ ሁኔታ ይምረጡ።

ዚፕ

እባክዎ ትክክለኛ ዚፕ ያቅርቡ።

ውሎች እና ሁኔታዎች ይስማሙ

ከማቅረቡ በፊት መስማማት አለቦት።

<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

የሚደገፉ አካላት

የማረጋገጫ ቅጦች ለሚከተሉት የቅጽ መቆጣጠሪያዎች እና አካላት ይገኛሉ፡-

<input>s እና <textarea>s ጋር ( በግቤት ቡድኖች ውስጥ .form-controlእስከ አንድ ጨምሮ ).form-control
<select>ጋር .form-controlወይም.custom-select
.form-checkኤስ
.custom-checkboxs እና .custom-radios
.custom-file

ጽሑፍ አካባቢ

እባክህ መልእክት በቴክስት አከባቢው አስገባ።

ይህንን ብጁ አመልካች ሳጥን ላይ ምልክት ያድርጉ

ምሳሌ ልክ ያልሆነ የግብረመልስ ጽሑፍ

ይህን ብጁ ሬዲዮ ቀይር

ወይም ይህን ሌላ ብጁ ሬዲዮ ቀይር

ተጨማሪ ምሳሌ ልክ ያልሆነ የግብረመልስ ጽሑፍ

ምሳሌ ልክ ያልሆነ ብጁ ግብረመልስ ይምረጡ

ፋይል ይምረጡ...

ምሳሌ ልክ ያልሆነ ብጁ ፋይል ግብረመልስ

<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

የመሳሪያ ምክሮች

የቅጽ አቀማመጥህ የሚፈቅድ ከሆነ የማረጋገጫ ግብረመልስን በቅጥ በተዘጋጀ የመሳሪያ ጥቆማ ለማሳየት ክፍሎቹን ለክፍሎች .{valid|invalid}-feedbackመለዋወጥ ትችላለህ። ለመሳሪያ ምክር አቀማመጥ በእሱ ላይ .{valid|invalid}-tooltipወላጅ እንዳለዎት እርግጠኛ ይሁኑ ። position: relativeከዚህ በታች ባለው ምሳሌ ውስጥ የእኛ የአምድ ክፍሎች ይህ ቀድሞውኑ አላቸው ፣ ግን የእርስዎ ፕሮጀክት አማራጭ ማዋቀር ሊፈልግ ይችላል።

የመጀመሪያ ስም

የአያት ስም

የተጠቃሚ ስም

ከተማ

ግዛት

ዚፕ

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

ማበጀት

$form-validation-statesየማረጋገጫ ግዛቶች በካርታው በ Sass በኩል ሊበጁ ይችላሉ ። በእኛ _variables.scssፋይል ውስጥ የሚገኘው ይህ የሳስ ካርታ ነባሪውን valid/ invalidየማረጋገጫ ሁኔታዎችን ለመፍጠር ተዘግቷል። የእያንዳንዱን ግዛት ቀለም እና አዶ ለማበጀት የተቀበረ ካርታ ተካትቷል። ምንም ሌሎች ግዛቶች በአሳሾች የማይደገፉ ቢሆኑም፣ ብጁ ቅጦችን የሚጠቀሙ በቀላሉ የበለጠ የተወሳሰበ የቅጽ ግብረመልስ ማከል ይችላሉ።

እባክዎን ማደባለቁን ሳይቀይሩ እነዚህን እሴቶች ማበጀት form-validation-stateእንደማንመክረው ልብ ይበሉ።

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

ብጁ ቅጾች

ለበለጠ ማበጀት እና የአሳሽ ወጥነት፣ የአሳሹን ነባሪዎች ለመተካት የእኛን ሙሉ ለሙሉ ብጁ የቅጽ ክፍሎችን ይጠቀሙ። እነሱ የተገነቡት በፍቺ እና ተደራሽ ምልክት ማድረጊያ ላይ ነው፣ ስለዚህ ለማንኛውም ነባሪ የቅጽ ቁጥጥር ጠንካራ ምትክ ናቸው።

አመልካች ሳጥኖች እና ሬዲዮዎች

የኛን ብጁ መቆጣጠሪያ ለመፍጠር እያንዳንዱ አመልካች ሳጥን እና ሬዲዮ <input>እና <label>ጥንድ በ a ተጠቅልለዋል ። <div>በመዋቅራዊ ሁኔታ ይህ እንደ ነባሪው ተመሳሳይ አቀራረብ ነው .form-check.

የኛን ብጁ ቅፅ አመልካች በትክክል ለመቅረጽ የወንድም እህት መራጭ ( ~) ለሁሉም <input>ግዛቶቻችን እንጠቀማለን -እንደ -። :checkedከክፍል ጋር ስንጣመር፣ በ ' ግዛት .custom-control-labelላይ በመመስረት ለእያንዳንዱ ንጥል ነገር ጽሁፍ መቅረጽ እንችላለን ።<input>

ነባሪውን <input>ከ ጋር ደብቀን አዲስ ብጁ ቅጽ አመልካች በ እና ጋር ለመገንባት opacityእንጠቀማለን ። እንደ አለመታደል ሆኖ ሲኤስኤስ በዚያ አካል ላይ ስለማይሰራ ብጁ መገንባት አንችልም ።.custom-control-label::before::after<input>content

ምልክት በተደረገባቸው ግዛቶች ውስጥ፣ ከ Open Iconic የ base64 የተከተቱ SVG አዶዎችን እንጠቀማለን ። ይህ በአሳሾች እና መሳሪያዎች ላይ የቅጥ እና አቀማመጥ ምርጥ ቁጥጥር ይሰጠናል።

አመልካች ሳጥኖች

ይህንን ብጁ አመልካች ሳጥን ላይ ምልክት ያድርጉ

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

ብጁ አመልካች ሳጥኖች እንዲሁ :indeterminateበእጅ በጃቫስክሪፕት ሲቀናበሩ የውሸት ክፍልን መጠቀም ይችላሉ (ለመግለጽ ምንም የኤችቲኤምኤል አይነታ የለም)።

ይህንን ብጁ አመልካች ሳጥን ላይ ምልክት ያድርጉ

jQuery እየተጠቀሙ ከሆነ፣ እንደዚህ ያለ ነገር በቂ መሆን አለበት፡-

$('.your-checkbox').prop('indeterminate', true)

ሬዲዮዎች

ይህን ብጁ ሬዲዮ ቀይር

ወይም ይህን ሌላ ብጁ ሬዲዮ ቀይር

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

በአግባቡ

ይህን ብጁ ሬዲዮ ቀይር

ወይም ይህን ሌላ ብጁ ሬዲዮ ቀይር

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

ተሰናክሏል።

ብጁ አመልካች ሳጥኖች እና ራዲዮዎች እንዲሁ ሊሰናከሉ ይችላሉ። disabledየቦሊያን አይነታውን ወደ ላይ ያክሉ <input>እና ብጁ አመልካች እና የመለያ መግለጫው በራስ-ሰር የቅጥ ይሆናል።

ይህንን ብጁ አመልካች ሳጥን ላይ ምልክት ያድርጉ

ይህን ብጁ ሬዲዮ ቀይር

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>

መቀየሪያዎች

ማብሪያ / ማጥፊያ የብጁ አመልካች ሳጥን ምልክት አለው ነገር ግን .custom-switchየመቀያየር መቀየሪያን ለመስራት ክፍሉን ይጠቀማል። መቀየሪያዎች እንዲሁ ባህሪውን ይደግፋሉ disabled።

ይህን የመቀየሪያ አካል ቀያይር

የመቀየሪያ አካል ተሰናክሏል።

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

ብጁ ሜኑዎች ብጁ ቅጦችን ለመቀስቀስ <select>ብጁ ክፍል ብቻ ያስፈልጋቸዋል ። .custom-selectብጁ ቅጦች በ'መጀመሪያ መልክ የተገደቡ ናቸው እና በአሳሽ ውሱንነቶች ምክንያት sውን <select>መቀየር አይችሉም ።<option>

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

እንዲሁም ከትንሽ እና ትልቅ ብጁ ምርጫዎች ተመሳሳይ መጠን ያላቸውን የጽሑፍ ግብዓቶችን መምረጥ ይችላሉ።

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

ባህሪው multipleእንዲሁ ይደገፋል፡-

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

እንደ sizeባህሪው:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

ክልል

በ ጋር ብጁ <input type="range">መቆጣጠሪያዎችን ይፍጠሩ .custom-range። ትራኩ (ዳራ) እና አውራ ጣት (እሴቱ) ሁለቱም በአሳሾች ላይ ተመሳሳይ ሆነው እንዲታዩ የተቀየሱ ናቸው። አይኢ እና ፋየርፎክስ ብቻ ትራካቸውን ከአውራ ጣት ከግራ ወይም ከቀኝ "መሙላት" የሚደግፉ እንደመሆናችን መጠን እድገትን በእይታ ለማሳየት አሁን አንደግፈውም።

የምሳሌ ክልል

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

minየክልል ግብዓቶች ለ እና max- 0እና 100፣ እንደቅደም ተከተላቸው ስውር እሴቶች አሏቸው ። minአዲስ እሴቶችን እና ባህሪያቱን ለሚጠቀሙ ሰዎች መግለጽ ይችላሉ max።

የምሳሌ ክልል

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

በነባሪ፣የክልል ግብዓቶች ወደ ኢንቲጀር እሴቶች “ይያዙ”። ይህንን ለመለወጥ, stepዋጋን መግለጽ ይችላሉ. ከዚህ በታች ባለው ምሳሌ, በመጠቀም የእርምጃዎችን ቁጥር በእጥፍ እናደርጋለን step="0.5".

የምሳሌ ክልል

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

የፋይል አሳሽ

የሚመከር ተሰኪ ብጁ የፋይል ግብዓትን: bs-custom-file-input , አሁን እዚህ በሰነዶቻችን ውስጥ የምንጠቀመው ያ ነው።

የፋይሉ ግቤት ከጥቅሉ ውስጥ በጣም ጅል ነው እና እነሱን ከተግባራዊ ፋይል ምረጥ… እና ከተመረጠ የፋይል ስም ጽሑፍ ጋር ማገናኘት ከፈለጉ ተጨማሪ ጃቫ ስክሪፕት ይፈልጋል ።

ፋይል ይምረጡ

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

ነባሪውን ፋይል <input>በ በኩል opacityደብቀን በምትኩ ቅጥያውን እናስቀምጣለን <label>። አዝራሩ ተፈጥሯል እና በ ጋር ተቀምጧል ::after. በመጨረሻ፣ ለአካባቢው ይዘት ተገቢውን ክፍተት widthእናውጃለን ።height<input>

ሕብረቁምፊዎችን በ SCSS መተርጎም ወይም ማበጀት።

የውሸት :lang()ክፍል “አስስ” የሚለውን ጽሑፍ ወደ ሌሎች ቋንቋዎች ለመተርጎም ይጠቅማል። በሚዛመደው የቋንቋ መለያ እና በአካባቢያዊ ሕብረቁምፊዎች ወደ $custom-file-textSass ተለዋዋጭ ግቤቶችን ይሽሩ ወይም ያክሉ ። የእንግሊዝኛ ሕብረቁምፊዎች በተመሳሳይ መንገድ ሊበጁ ይችላሉ. ለምሳሌ፣ አንድ ሰው የስፓኒሽ ትርጉም እንዴት እንደሚጨምር እነሆ (የስፓኒሽ ቋንቋ ኮድ )፡-es

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

ለስፔን lang(es)ትርጉም በብጁ የፋይል ግብአት ላይ በተግባር ላይ ያለ ነው

የተመረጠ አርኪቮ

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

ትክክለኛው ጽሑፍ እንዲታይ የሰነድዎን ቋንቋ (ወይም ከሱ በታች) በትክክል ማዘጋጀት ያስፈልግዎታል። ይህ በኤለመንት ወይም በኤችቲቲፒ አርዕስት ላይ ያለውን langባህሪ በመጠቀም ከሌሎች ዘዴዎች ጋር ሊከናወን ይችላል ።<html>Content-Language

ሕብረቁምፊዎችን በኤችቲኤምኤል መተርጎም ወይም ማበጀት።

ቡትስትራፕ በኤችቲኤምኤል ውስጥ የ"አስስ" ጽሁፍን data-browseወደ ብጁ የግቤት መለያ ሊታከል በሚችል ባህሪው የሚተረጎምበትን መንገድ ያቀርባል (ምሳሌ በደች)።

Voeg je ሰነድ ጣት

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>

ቅጾች

አጠቃላይ እይታ

የቅጽ መቆጣጠሪያዎች

መጠናቸው

ለማንበብ ብቻ የተፈቀደ

ንባብ ብቻ ግልጽ ጽሑፍ

ክልል ግብዓቶች

አመልካች ሳጥኖች እና ሬዲዮዎች

ነባሪ (የተቆለለ)

በአግባቡ

ያለ መለያዎች

አቀማመጥ

ቡድኖችን ይፍጠሩ

የቅጽ ፍርግርግ

ረድፍ ቅፅ

አግድም ቅርጽ

አግድም ቅጽ መለያ መጠን

የአምድ መጠን

ራስ-ሰር መጠን

የመስመር ውስጥ ቅጾች

ወደ የተደበቁ መለያዎች አማራጮች

የእገዛ ጽሑፍ

የእገዛ ጽሑፍን ከቅጽ መቆጣጠሪያዎች ጋር ማያያዝ

የተሰናከሉ ቅጾች

መልህቆች ጋር ማሳሰቢያ

የአሳሽ ተሻጋሪ ተኳኋኝነት

ማረጋገጫ

እንዴት እንደሚሰራ

ብጁ ቅጦች

የአሳሽ ነባሪዎች

የአገልጋይ ጎን

የሚደገፉ አካላት

የመሳሪያ ምክሮች

ማበጀት

ብጁ ቅጾች

አመልካች ሳጥኖች እና ሬዲዮዎች

አመልካች ሳጥኖች

ሬዲዮዎች

በአግባቡ

ተሰናክሏል።

መቀየሪያዎች

ምናሌን ይምረጡ

ክልል

የፋይል አሳሽ

ሕብረቁምፊዎችን በ SCSS መተርጎም ወይም ማበጀት።

ሕብረቁምፊዎችን በኤችቲኤምኤል መተርጎም ወይም ማበጀት።