آموزش input ها در بوت استرپ

بهاره حسنیبهاره حسنی
217 بازدید

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

بوت استرپ از کلیه انواع ورودی html5 پشتیبانی میکند: متن ، گذرواژه ، تاریخ ، زمان محلی ، ماه ، ساعت ، هفته ، ایمیل ، آدرس اینترنتی ، جستجو ، تلفن ، و رنگ.

در ادامه انواع کلاس های زیبا ی input در بوت استرپ را برایتان مثال خواهیم زد.

با سلام خدمت شما همراهان عزیز وب سایت پرنیان طرح

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

پشتیبانی از کنترل های فرم:

بوت استرپ از کنترل های فرم زیر پشتیبانی میکند:

۰ input

. textarea

. checkbox

. radio

. select

ورودی بوت استرپ (Bootstrap Input):

بوت استرپ از کلیه  انواع ورودی html5  پشتیبانی میکند :

متن ، گذرواژه ، تاریخ ، زمان محلی ، ماه ، ساعت ، هفته ، ایمیل ، آدرس اینترنتی ، جستجو ، تلفن و رنگ.

نکته : اگر نوع input ها به درستی اعلام نشده باشد ، ورودی ها به طور کامل طراحی نمیشوند.

مثال زیر شامل دو عنصر ورودی است : یکی از نوع متن ، و دیگری از نوع رمز عبور است.

همانطور که در مبحث فرم ها ذکر کردیم از کلاس form-control. برای استایل ورودی های با پهنای عریض و فاصله ی مناسب و غیره استفاده میکنیم.

مثال :

[php]

<form action=”/action_page.php”>
<div class=”form-group”>
<label for=”usr”>Name:</label>
<input type=”text” class=”form-control” id=”usr” name=”username”>
</div>
<div class=”form-group”>
<label for=”pwd”>Password:</label>
<input type=”password” class=”form-control” id=”pwd” name=”password”>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

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

input

Bootstrap Textarea :

مثال زیر شامل یک ورودی از نوع textarea است:

مثال:

[php]

<form action=”/action_page.php”>
<div class=”form-group”>
<label for=”comment”>Comment:</label>
<textarea class=”form-control” rows=”5″ id=”comment” name=”text”></textarea>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

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

Bootstrap Checkboxes :

اگر میخواهید کاربر هر تعداد گزینه از لیست گزینه های از پیش تعیین شده را انتخاب کند ، از صندوق های انتخاب استفاده میکند.

مثال زیر شامل ۳ کادر باکس است که آخرین گزینه ی آن غیر فعال است.

مثال:

[php]

<form action=”/action_page.php”>
<div class=”form-check”>
<label class=”form-check-label” for=”check1″>
<input type=”checkbox” class=”form-check-input” id=”check1″ name=”option1″ value=”something” checked>Option 1
</label>
</div>
<div class=”form-check”>
<label class=”form-check-label” for=”check2″>
<input type=”checkbox” class=”form-check-input” id=”check2″ name=”option2″ value=”something”>Option 2
</label>
</div>
<div class=”form-check”>
<label class=”form-check-label”>
<input type=”checkbox” class=”form-check-input” disabled>Option 3
</label>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

تصویر checkbox :

checkbox

Inline Checkboxes :

اگر میخواهید که صندوق های انتخاب به صورت خطی قرار بگیرند از کلاس form-check-inline. استفاده کنید.

مثال:

[php]

<form action=”/action_page.php”>
<div class=”form-check-inline”>
<label class=”form-check-label” for=”check1″>
<input type=”checkbox” class=”form-check-input” id=”check1″ name=”vehicle1″ value=”something” checked>Option 1
</label>
</div>
<div class=”form-check-inline”>
<label class=”form-check-label” for=”check2″>
<input type=”checkbox” class=”form-check-input” id=”check2″ name=”vehicle2″ value=”something”>Option 2
</label>
</div>
<div class=”form-check-inline”>
<label class=”form-check-label”>
<input type=”checkbox” class=”form-check-input” disabled>Option 3
</label>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

در تصویر زیر چک باکس های دورن خطی را ببینید :

Bootstrap Radio Buttons :

از دکمه هخای رادیویی زمانی که میخواهی کاربر تنها یک حق انتخاب یک گزینه را داشته باشد استفاده کنید.

مثال زیر شامل ۳ دکمه ی رادیویی است که یکی از گزینه های آن غیر فعال است.

مثال:

[php]

<form action=”/action_page.php”>
<div class=”form-check”>
<label class=”form-check-label” for=”radio1″>
<input type=”radio” class=”form-check-input” id=”radio1″ name=”optradio” value=”option1″ checked>Option 1
</label>
</div>
<div class=”form-check”>
<label class=”form-check-label” for=”radio2″>
<input type=”radio” class=”form-check-input” id=”radio2″ name=”optradio” value=”option2″>Option 2
</label>
</div>
<div class=”form-check”>
<label class=”form-check-label”>
<input type=”radio” class=”form-check-input” disabled>Option 3
</label>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

تصویر دکمه های رادیویی :

radio buttons

Inline Radio Buttons :

اگر میخواهید که دکمه های رادیویی در همان خط ظاهر شوند از کلاس chesck-checkinline. استفاده کنید.

مثال:

[php]

<form action=”/action_page.php”>
<div class=”form-check-inline”>
<label class=”form-check-label” for=”radio1″>
<input type=”radio” class=”form-check-input” id=”radio1″ name=”optradio” value=”option1″ checked>Option 1
</label>
</div>
<div class=”form-check-inline”>
<label class=”form-check-label” for=”radio2″>
<input type=”radio” class=”form-check-input” id=”radio2″ name=”optradio” value=”option2″>Option 2
</label>
</div>
<div class=”form-check-inline”>
<label class=”form-check-label”>
<input type=”radio” class=”form-check-input” disabled>Option 3
</label>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

تصویر رادیو باتن های خطی :

inline radio buttons

لیست های انتخاب بوت استرپ :

زمانی که میخواهیم به کاربر اجازه بدهیم که چند گزینه را انتخاب کند ، از لیست های انتخاب شده استفاده میکنیم.

مثال زیر شامل لیست کشویی (select list) است.

مثال:

[php]

<form action=”/action_page.php”>
<div class=”form-group”>
<label for=”sel1″>Select list (select one):</label>
<select class=”form-control” id=”sel1″ name=”sellist1″>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<br>
<label for=”sel2″>Mutiple select list (hold shift to select more than one):</label>
<select multiple class=”form-control” id=”sel2″ name=”sellist2″>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

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

select list

کنترل اندازه فرم :

اندازه کنترل فرم را با کلاس form-control-sm. یا form-control-lg. تغییر دهید.

برای توضیح بیشتر مثال زیر را ببینید:

[php]

<form action=”/action_page.php”>
<div class=”form-group”>
<input type=”text” class=”form-control form-control-sm” placeholder=”Small form control” name=”text1″>
</div>
<div class=”form-group”>
<input type=”text” class=”form-control” placeholder=”Default form control” name=”text2″>
</div>
<div class=”form-group”>
<input type=”text” class=”form-control form-control-lg” placeholder=”Large form control” name=”text3″>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

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

form control sizing

کنترل فرم با متن ساده :

از کلاس form-control-plaintext. استفاده کنید اگر میخواهید ورودی را به عنوان متن ساده استایل بدهید.

مثال :

[php]

<form action=”/action_page.php”>
<div class=”form-group”>
<input type=”text” class=”form-control” placeholder=”Default form control” name=”text1″>
</div>
<div class=”form-group”>
<input type=”text” class=”form-control-plaintext” placeholder=”Form control with plain text” name=”text2″>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

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

plain text

فرم کنترل File و Range :

از کلاس input type”range”. یا form-control-file. برای تمام عرض کردن فیلدهای فرم کنترل استفاده کنید.

مثال:

[php]

<form action=”/action_page.php”>
<div class=”form-group”>
<input type=”range” class=”form-control-range” name=”range”>
</div>
<div class=”form-group”>
<input type=”file” class=”form-control-file border” name=”file”>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>

[/php]

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

form control range and file

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

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

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

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

21+ محصولات
374+ سفارشات تکمیل شده
1860+ کاربران
396+ مطالب وبلاگ
سبد خرید

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

ورود به سایت