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

بهاره حسنیبهاره حسنی
121 بازدید
گروه های ورودی
[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

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

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

38+ محصولات
294+ سفارشات تکمیل شده
1720+ کاربران
396+ مطالب وبلاگ

پرداخت آنلاین

عضویت در خبرنامه

با عضویت در خبرنامه از آخرین پیشنهادها و تخفیف های ما زودتر از بقیه با خبر شوید!

نمادهای ما

نماد اعتماد
ساماندهی
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت