سلام برنامه | HiProgram

در خدمت شما هستیم با آموزش Bootstrap 4 جلسه بیست و دوم (Inputs Group)

آموزش Bootstrap 4 جلسه بیست و دوم (Inputs Group) از سری آموزش های تک قسمتی است.

input گروهی

در جلسه قبلی درباره input ها صحبت کردیم و کلاس هایی که بوت استرپ برای آنها آماده کرده بود را بررسی کردیم در این جلسه میخواهیم ببینیم چطور میتوانیم با کلاس های بوت استرپ ورودی های گروهی بسازیم یکی از پرکاربرد ترین حالت این ورودی ها دکمه و باکس جستجو است که به این روش ساخته میشود. ما برای ساخت input Group از کلاس input-group استفاده میکنیم . تمام مواردی که میخواهیم با Input ها در یک گروه قرار بگیرند را داخل این کلاس که به یک div تعلق میگیرد قرار میدهیم.

سایز ورودی های گروهی

اگر بخواهیم سایز های مختلفی از input Group بسازیم بوت استرپ برای ما کلاس هایی آماده کرده است. ما سایز های موجود و کلاس های تعریف شده برای این کار را برای شما لیست میکنیم و توضیح میدهیم

• سایز کوچک: برای ساخت سایز کوچک باید از کلاس input-group-sm در کنار کلاس input-group استفاده کرد.
• سایز متوسط :به صورت پیشفرض این سایز روی تمام موارد قرار دارد و نیاز به تعریف کلاس خاصی نیست.
• سایز بزرگ: برای ساخت سایز بزرگ باید از کلاس input-group-lg در کنار کلاس input-group استفاده کرد.

برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<form>
  <div class="input-group mb-3 input-group-sm">
     <div class="input-group-prepend">
       <span class="input-group-text">Small</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>
<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">Default</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>
<form>
  <div class="input-group mb-3 input-group-lg">
    <div class="input-group-prepend">
      <span class="input-group-text">Large</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>

input های چندگانه

اگر بخواهیم input های چند تایی تعریف کنیم لازم نیست کار خاصی انجام دهیم کافیست تمام input ها را داخل کلاس input-group قرار دهیم و برای فیلد هایی که ورودی ندارند کلاس input-group-prepend ایجاد کنیم برای واضح کردن موضوع میتوانید از کد زیر کمک بگیرید:

<form>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text">One</span>
      <span class="input-group-text">Two</span>
      <span class="input-group-text">Three</span>
    </div>
    <input type="text" class="form-control">
  </div>
</form>

ورودی های گروهی با checkbox و radios

شما میتوانید همراه با input های خود checkbox و radio را اضافه کنید و در نهایت آن هارا در یک گروه قرار دهید برای این کار کافیست آنهارا در داخل تگی با کلاس input-group-text قرار دهید به همین راحتی میتوانید در کنار input های خود چک باکس و رادیو داشته باشید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox"> 
    </div>
  </div>
  <input type="text" class="form-control" placeholder="Some text">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="radio"> 
    </div>
  </div>
  <input type="text" class="form-control" placeholder="Some text">
</div>

قرار دادن دکمه در input Group ها 

برای قرار دادن دکمه ها کافیست از آموزش جلسه آن که قبلا توضیح داده ایم استفاده کنید اما برای آنکه آن را به صورت گروه در کنار input قرار دهیم لازم است آن را در div با کلاس input-group-append قرار دهیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Something clever..">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">OK</button> 
    <button class="btn btn-danger" type="button">Cancel</button> 
  </div>
</div>

input های زیر منو دار

درست است شما میتوانید برای ورودی های خود زیر منو هم داشته باشید و زیر منویی را به آن بچسبانید اگر طریقه ساخت خود زیرمنو را بلد نیستید به آموزش های جلسات قبل مراجعه کنید برای اضافه کردن زیر منو به input کافیست آن را در کلاس input-group-prepend قرار دهید و به همین راحتی زیرمنو را در کنار input خود داشته باشید برای واضح شدن موضوع میتوانید از کد زیر استفاده کنید:

<div class="input-group mt-3 mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
  <input type="text" class="form-control" placeholder="Username">
</div>

اضافه کردن label به input

شاید در برخی از سایت ها دیده باشید قسمتی از باکس ورودی محتوا از قبل تعریف شده و غیر قابل تغییر است مانند ورودی ایمیل که بعد از @ آن در کمپانی های مختلف ثابت است یا قرار دادن علامت @ قبل از نام های کاربری برای ایجاد این حالت کافیست به کمک کلاس های بوت استرپ لیبل خود را اضافه کنید به کمک کلاس input-group-text که در یک تگ span قرار میگیرد میتوانید این کار را انجام دهید اما توجه کنید قبل از این مورد باید کل input-group-text را در داخل div با کلاس input-group-append قرار دهید.
برای راحتی شما عزیزان کدی شامل کل آموزش برای شما قرار میدهیم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>


  <div class="container mt-3">
  <h3>Input Groups</h3>
  <p>The .input-group class is a container to enhance an input by adding an icon, text or a button in front (.input-group-prepend) or behind (.input-group-append) the input field as a "help text".</p>
  <p>Use the .input-group-text class to style the specified help text.</p>
  
  <form action="/action_page.php">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" id="usr" name="username">
    </div>

    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Your Email" id="mail" name="email">
      <div class="input-group-append">
        <span class="input-group-text">@example.com</span>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>



----------------------------------------------------------------------------

    
<div class="container mt-3">
  <h1>Input Group Size</h1>
  <p>Use the .input-group-sm class for small input groups and .input-group-lg for large inputs groups:</p>
  <form>
    <div class="input-group mb-3 input-group-sm">
      <div class="input-group-prepend">
        <span class="input-group-text">Small</span>
      </div>
      <input type="text" class="form-control">
    </div>
  </form>
  <form>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Default</span>
      </div>
      <input type="text" class="form-control">
    </div>
  </form>
  <form>
    <div class="input-group mb-3 input-group-lg">
      <div class="input-group-prepend">
        <span class="input-group-text">Large</span>
      </div>
      <input type="text" class="form-control">
    </div>
  </form>
</div>


----------------------------------------------------------------------------
<div class="container mt-3">
  <h3>Multiple Inputs and Addons</h3>
  
  <form>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">Person</span>
      </div>
      <input type="text" class="form-control" placeholder="First Name">
      <input type="text" class="form-control" placeholder="Last Name">
    </div>  
  </form>
  
  <form>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">One</span>
        <span class="input-group-text">Two</span>
        <span class="input-group-text">Three</span>
      </div>
      <input type="text" class="form-control">
    </div>
  </form>
</div>


----------------------------------------------------------------------------
<div class="container mt-3">
  <h3>Input Group with Checkboxes and Radios</h3>
  <p>You can also use checkboxes or radio buttons instead of text:</p>
  <form>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <div class="input-group-text">
          <input type="checkbox"> 
        </div>
      </div>
      <input type="text" class="form-control" placeholder="Some text">
    </div>
  </form>
  
  <form>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <div class="input-group-text">
          <input type="radio"> 
        </div>
      </div>
      <input type="text" class="form-control" placeholder="Some text">
    </div>
  </form>
</div>


----------------------------------------------------------------------------
<div class="container mt-3">
  <h1>Input Group Buttons</h1>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <button class="btn btn-outline-primary" type="button">Basic Button</button>  
    </div>
    <input type="text" class="form-control" placeholder="Some text">
  </div>

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Search">
    <div class="input-group-append">
      <button class="btn btn-success" type="submit">Go</button>  
     </div>
  </div>

  <div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Something clever..">
    <div class="input-group-append">
      <button class="btn btn-primary" type="button">OK</button>  
      <button class="btn btn-danger" type="button">Cancel</button>  
     </div>
  </div>
</div>

----------------------------------------------------------------------------
<div class="container mt-3">
  <h3>Input Groups with Dropdown Button</h3>
  <p>Add a dropdown button in the input group. Note that you don't need the .dropdown wrapper, as you normally would.</p>
  <form>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
          Dropdown button
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </div>
      <input type="text" class="form-control" placeholder="Username">
    </div>
  </form>
</div>

----------------------------------------------------------------------------
<div class="container mt-3">
  <h2>Input Group Labels</h2>
  <p>Put labels outside of the input group, and remember that the value of the for attribute should match the id of the input.</p>
  <p>Click on the label and it will bring focus to the input:</p>
  <form>
    <label for="demo">Write your email here:</label>
    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Email" id="demo" name="email">
      <div class="input-group-append">
        <span class="input-group-text">@example.com</span>
      </div>
    </div>
  </form>
</div>
----------------------------------------------------------------------------

<br>
</body>
</html>

می توانید دیگر قسمت ها را در لینک زیر ببینید:

آموزش Bootstrap 4 جلسه بیست و یکم (Input)

آموزش Bootstrap 4 جلسه بیست و سوم (Custom Forms)

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.