پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: بهاره حسنی 
در این مبحث به آموزش input groups در بوت استرپ خواهیم پرداخت.
کلاس های آماده ی input groups در بوت استرپ را با زدن چندین مثال برایتان توضیح میدهیم.
Input Groups:
برای ایجاد گروه های input از کلاس هایی که در مثال زیر به کار برده ایم استفاده کنید.
مثال :
[php]
<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>
[/php]
خروجی مثال بالا :
Input Group Sizing :
برای گروه های ورودی کوچک از کلاس input-group-sm. و برای گروه های ورودی بزرگ از کلاس input-group-lg. استفاده کنید.
مثال :
[php]
<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 input-group-lg”>
<div class=”input-group-prepend”>
<span class=”input-group-text”>Large</span>
</div>
<input type=”text” class=”form-control”>
</div>
</form>
[/php]
خروجی این مثال را در تصویر زیر ببینید :
Multiple Inputs and Helpers :
میتوانید در یک input چندین ورودی یا افزودنی اضافه کنید.
به مثال زیر توجه کنید :
[php]
<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>
[/php]
تصویر خروجی این مثال :
Input Group with Checkboxes and Radios :
شما همچنین میتوانید به جای ورودی از نوع متن ، از چک باکس ها یا رادیو باتن ها استفاده کنید.
برای توضیح بیشتر مثال زیر را ببینید :
[php]
<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>
[/php]
تصویر مثال بالا :
Input Group Buttons :
برای داشتن گروه دکمه های ورودی از کلاس های به کار رفته در مثال زیر استفاده کنید.
مثال :
[php]
<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>
[/php]
تصویر دکمه های گروهی در input :
Input Group with Dropdown Button :
میتوان گروه های ورودی را با منوهای کشویی ترکیب کرد و ورودی با ساختار دیگری ساخت مانند مثال گفته شده در زیر:
مثال :
[php]
<form>
<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>
</form>
[/php]
تصویر خروجی مثال بالا :
Input Group Labels :
برچسب ها را خارج از گروه ورودی قرار دهید و به یاد داشته باشید که مقدار ویژگی باید با شناسنامه ی ورودی مطاقبت داشته باشد.
بر روی برچسب کلیک کنید تا آن را روی ورودی متمرکز کنید.
مثال :
[php]
<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>
[/php]
تصویر مثال بالا :
