در قسمت بیست و سوم از آموزش‌های بوت استرپ 4 به این خواهیم پرداخت که گروهی از ورودی را طراحی کنیم. انواع فرم‌های ورودی در این قسمت به شما بزرگواران آموزش داده خواهد شد.
پیشنهاد می‌شود برای درک بهتر این جلسه، قسمت‌های پیشین دوره‌ی بوت استرپ 4 را مطالعه فرمایید.
گروه فرم‌های ورودی
شما با استفاده از کلاس.input-group می‌توانید یک راهنما به فرم‌های خود اضافه کنید. این فرم‌ها متنی یا آیکونی خواهند بود.
برای اضافه کردن متن راهنما در مقابل ورودی از کلاس.input-group-prepend و برای اضافه کردن متن راهنما در پشت ورودی از کلاس.input-group-append استفاده می‌شود.
برای استفاده از یک راهنمای متنی خاص از کلاس .input-group-text باید استفاده کرد.
برای درک بهتر این موضوع به سورس کد زیر توجه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<form> <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"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Your Email"> <div class="input-group-append"> <span class="input-group-text">@example.com</span> </div> </div> </form> |
در رابطه باکلاس.mb-3 در ویدیوی قبلی صبحت کردیم که به خاطر فاصله گرفتن از پایین از این کلاس استفاده می‌شود.
اندازه گروه ورودی
برای استفاده از ابعاد مختلف می‌توانید از کلاس‌های.input-group-sm برای کوچک کردن گروه ورودی و کلاس.input-group-lg برای بزرگنمایی استفاده کرد.
برای درک بهتر این موضوع به سورس کد زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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> |
ورودی‌های چندگانه و راهنماها
در سورس کد زیر دو مورد ورودی‌های چندگانه و راهنماهای چندگانه را قرار داده‌ایم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!-- ورودی های چندگانه --> <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> |
گروه فرم همراه با چک باکس یا دکمه‌های رادیویی
شما می‌توانید بجای متن از چک باکس و دکمه‌های رادیویی استفاده کنید. برای درک بهتر این موضوع به سورس کد زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
گروه ورودی به همراه دکمه
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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> |
گروه ورودی به همراه لیست بازشونده
یک دکمه کشویی را در گروه ورودی اضافه کنید. توجه داشته باشید که طبق روال معمول شما به بسته بندی .dropdown احتیاج ندارید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
برچسب در گروه ورودی
برچسب‌ها را خارج از گروه ورودی قرار دهید و به یاد داشته باشید که مقدار ویژگی باید با شناسه ورودی مطابقت داشته باشد.
برای درک بهتر این موضوع به سورس کد زیر توجه کنید:
|
1 2 3 4 5 6 7 |
<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> |
برای مطالعه موارد بیشتر می‌توانید به سایت getbootstrap مراجعه کنید.
پیشنهاد می‌شود برای مطالعه موارد بیشتر به دوره آموزش بوت استرپ 4 مراجعه فرمایید.
پایدار باشید.
2 Comments
Join the discussion and tell us your opinion.
سلام
چرا ویدیوی قسمت ۲۳ تو سایت وجود نداره؟
ویدیوهای دو سه قسمت آخر به زودی قرار داده می‌شود.