گروه های input در بوت استرپ

بهاره حسنیبهاره حسنی
449 بازدید
گروه های ورودی
[cdb_box_content css=”.vc_custom_1572165793101{background-color: #1e73be !important;}”]

در این مبحث به آموزش input groups در بوت استرپ خواهیم پرداخت.

کلاس های آماده ی input groups در بوت استرپ را با زدن چندین مثال برایتان توضیح میدهیم.

[/cdb_box_content]

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 groups

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]

خروجی این مثال را در تصویر زیر ببینید :

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

input group size

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]

تصویر خروجی این مثال :

گروه های ورودی

multiple input and addons

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]

تصویر مثال بالا :

چک باکس و رادیو باتن

checkbox and radiobutton

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 button

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 with dropdowns

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]

تصویر مثال بالا :

برچسب های گروه ورودی

input group lables

Rate this post
دسته بندی آموزش bootstrap
اشتراک گذاری

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

سبد خرید

سبد خرید شما خالی است.

ورود به سایت