در خدمت شما هستیم با آموزش Bootstrap 4 جلسه بیست و دوم (Inputs Group)
آموزش Bootstrap 4 جلسه بیست و دوم (Inputs Group) از سری آموزش های تک قسمتی است.
input گروهی
در جلسه قبلی درباره input ها صحبت کردیم و کلاس هایی که بوت استرپ برای آنها آماده کرده بود را بررسی کردیم در این جلسه میخواهیم ببینیم چطور میتوانیم با کلاس های بوت استرپ ورودی های گروهی بسازیم یکی از پرکاربرد ترین حالت این ورودی ها دکمه و باکس جستجو است که به این روش ساخته میشود. ما برای ساخت input Group از کلاس input-group استفاده میکنیم . تمام مواردی که میخواهیم با Input ها در یک گروه قرار بگیرند را داخل این کلاس که به یک div تعلق میگیرد قرار میدهیم.
سایز ورودی های گروهی
اگر بخواهیم سایز های مختلفی از input Group بسازیم بوت استرپ برای ما کلاس هایی آماده کرده است. ما سایز های موجود و کلاس های تعریف شده برای این کار را برای شما لیست میکنیم و توضیح میدهیم
- سایز کوچک: برای ساخت سایز کوچک باید از کلاس input-group-sm در کنار کلاس input-group استفاده کرد.
- سایز متوسط :به صورت پیشفرض این سایز روی تمام موارد قرار دارد و نیاز به تعریف کلاس خاصی نیست.
- سایز بزرگ: برای ساخت سایز بزرگ باید از کلاس input-group-lg در کنار کلاس input-group استفاده کرد.
برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
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> |
input های چندگانه
اگر بخواهیم input های چند تایی تعریف کنیم لازم نیست کار خاصی انجام دهیم کافیست تمام input ها را داخل کلاس input-group قرار دهیم و برای فیلد هایی که ورودی ندارند کلاس input-group-prepend ایجاد کنیم برای واضح کردن موضوع میتوانید از کد زیر کمک بگیرید:
1 2 3 4 5 6 7 8 9 10 | <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> |
ورودی های گروهی با checkbox و radios
شما میتوانید همراه با input های خود checkbox و radio را اضافه کنید و در نهایت آن هارا در یک گروه قرار دهید برای این کار کافیست آنهارا در داخل تگی با کلاس input-group-text قرار دهید به همین راحتی میتوانید در کنار input های خود چک باکس و رادیو داشته باشید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
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> |
قرار دادن دکمه در input Group ها
برای قرار دادن دکمه ها کافیست از آموزش جلسه آن که قبلا توضیح داده ایم استفاده کنید اما برای آنکه آن را به صورت گروه در کنار input قرار دهیم لازم است آن را در div با کلاس input-group-append قرار دهیم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
1 2 3 4 5 6 7 | <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> |
input های زیر منو دار
درست است شما میتوانید برای ورودی های خود زیر منو هم داشته باشید و زیر منویی را به آن بچسبانید اگر طریقه ساخت خود زیرمنو را بلد نیستید به آموزش های جلسات قبل مراجعه کنید برای اضافه کردن زیر منو به input کافیست آن را در کلاس input-group-prepend قرار دهید و به همین راحتی زیرمنو را در کنار input خود داشته باشید برای واضح شدن موضوع میتوانید از کد زیر استفاده کنید:
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> |
اضافه کردن label به input
شاید در برخی از سایت ها دیده باشید قسمتی از باکس ورودی محتوا از قبل تعریف شده و غیر قابل تغییر است مانند ورودی ایمیل که بعد از @ آن در کمپانی های مختلف ثابت است یا قرار دادن علامت @ قبل از نام های کاربری برای ایجاد این حالت کافیست به کمک کلاس های بوت استرپ لیبل خود را اضافه کنید به کمک کلاس input-group-text که در یک تگ span قرار میگیرد میتوانید این کار را انجام دهید اما توجه کنید قبل از این مورد باید کل input-group-text را در داخل div با کلاس input-group-append قرار دهید.
برای راحتی شما عزیزان کدی شامل کل آموزش برای شما قرار میدهیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 | <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h3>Input Groups</h3> <p>The .input-group class is a container to enhance an input by adding an icon, text or a button in front (.input-group-prepend) or behind (.input-group-append) the input field as a "help text".</p> <p>Use the .input-group-text class to style the specified help text.</p> <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> </div> ---------------------------------------------------------------------------- <div class="container mt-3"> <h1>Input Group Size</h1> <p>Use the .input-group-sm class for small input groups and .input-group-lg for large inputs groups:</p> <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> </div> ---------------------------------------------------------------------------- <div class="container mt-3"> <h3>Multiple Inputs and Addons</h3> <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> </div> ---------------------------------------------------------------------------- <div class="container mt-3"> <h3>Input Group with Checkboxes and Radios</h3> <p>You can also use checkboxes or radio buttons instead of text:</p> <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> </div> ---------------------------------------------------------------------------- <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> ---------------------------------------------------------------------------- <div class="container mt-3"> <h3>Input Groups with Dropdown Button</h3> <p>Add a dropdown button in the input group. Note that you don't need the .dropdown wrapper, as you normally would.</p> <form> <div class="input-group 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> </div> ---------------------------------------------------------------------------- <div class="container mt-3"> <h2>Input Group Labels</h2> <p>Put labels outside of the input group, and remember that the value of the for attribute should match the id of the input.</p> <p>Click on the label and it will bring focus to the input:</p> <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> </div> ---------------------------------------------------------------------------- <br> </body> </html> |
می توانید دیگر قسمت ها را در لینک زیر ببینید:
آموزش Bootstrap 4 جلسه بیست و یکم (Input)
آموزش Bootstrap 4 جلسه بیست و سوم (Custom Forms)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:
همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.
اگر این مطلب آموزنده بود به ما امتیاز دهید
(2 رای, میانگین: 4,50 امتیاز از 5)
Loading...
آموزش Bootstrap 4 جلسه بیست و سوم (Custom Forms)
آموزش Bootstrap 4 جلسه یازدهم (Badge)
آموزش Bootstrap 4 جلسه چهارم (typography)
آموزش Bootstrap 4 جلسه سوم (ساختار بدنه)