آموزش کار با Checkboxes در بوت استرپ؛ یکی از مفاهیم اساسی در Bootstrap! بوت استرپ یکی از فریم ورک های پرکاربرد در حوزه وب است که شما می توانید با استفاده از آن کارهای مختلفی انجام دهید و سایت های مورد نظر خودتان را طراحی و راه اندازی کنید.
امروزه طراحی سایت با ابزارها و تکنیک های مختلفی امکان پذیر است. بوت استرپ یکی از مجموعه ابزارهای کاربردی برای ایجاد انواع مختلف سایت است. با استفاده از بوت استرپ می توان هرگونه صفحه وب و نرم افزار تحت وب را ایجاد و توسعه داد. البته این چارچوب از جمله چارچوب های قدیمی محسوب می شود. اگر قصد طراحی سایت در ارومیه را دارید، باید با بخش های مختلف بوت استرپ آشنا شوید. به همین دلیل ما می خواهیم در این مطلب، توضیحاتی در مورد Checkboxes در بوت استرپ برای شما ارائه کنیم و نحوه کار با این بخش را به شمایاد دهیم.
Checkboxes در بوت استرپ چیست؟
شاید این سوال برای شما نیز پیش آمده باشد که Checkboxes چیست؟ ما می توانیم در پاسخ به این سوال بگوییم که Checkboxes یکی از بخش های مهم و کاربردی در بوت استرپ است که شما می توانید در این بخش کارهای مختلفی انجام دهید. اگر می خواهید کاربر هر تعداد گزینه را از فهرستی از گزینه های از قبل تعیین شده انتخاب کند، چک باکس ها مورد استفاده قرار می گیرند. همچنین اگر می خواهید نحوه کار با چک باکس ها را یاد بگیرید، توصیه می کنیم تا در دوره آموزش بوت استرپ شرکت کنید.
برای استایل دادن به چک باکس ها از یک عنصر wrapper با class=form-check استفاده کنید تا از حاشیه های مناسب برای برچسب ها و چک باکس ها اطمینان حاصل کنید. سپس کلاس form check-label را به عناصر برچسب و form-check input را به کادرهای چک به درستی در داخل ظرف form-check اضافه کنید. اگر می خواهید چک باکس به طور پیش فرض علامت زده شود، از ویژگی checked استفاده کنید. اگر می خواهید کاربر را به یک انتخاب از لیست گزینه های از قبل تعیین شده محدود کنید، از دکمه های رادیویی استفاده کنید.
ساخت Checkbox در بوت استرپ
توجه داشته باشید که Checkboxes پس از آموزش کار با dropdown بخش مهمی در بوت استرپ هستند که توسعه دهندگان می توانند با استفاده از این بخش ها رفتار کاربران را محدود کنند. برای ایجاد یک کنترل سفارشی انتخاب یا Checkbox مخصوص بوت استرپ، آن را داخل یک عنصر در برگیرنده و مانند یک تگ div با کلاس custom-control و custom-checkbox قرار می دهید. سپس به کنترل input کلاس custom-control-input و نوع type=checkbox می دهید تا چک باکس در بوت استرپ ایجاد شود.
برای ایجاد یه کنترل رادیویی یا Radio Button در بوت استرپ نیز باید آن را داخل یک عنصر در برگیرنده با کلاس custom-control و custom-radio قرار دهید. سپس به کنترل input سازنده کنترل رادیویی، کلاس custom-control را اضافی کرده و نوع آن را type=radio تعیین کنید.
فرم عمودی یا فرم پایه
توجه داشته باشید که کنترل های تک فرمی معمولا به طور پیش فرض برخی از سبک بندی های سراسری را دریافت می کنند. برای اینکه یک فرم پایه در بوت استرپ ایجاد کنیم، باید به ترتیب مراحل زیر عمل کنیم:
• یک نقش form را به عنصر والد <form> اضافی می کنیم.
• تگ ها و کنترل ها را در یک تگ <div> با کلاس form.group. قرار می دهیم. این کار برای فاصله گذاری مناسب لازم است.
• یک کلاس form.control را به تمام عناصر <texterae>، <input> و <select> متنی اضافی می کنیم.
<form role = "form"> <div class = "form-group"> <label for = "name">Name</label> <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name"> </div> <div class = "form-group"> <label for = "inputfile">File input</label> <input type = "file" id = "inputfile"> <p class = "help-block">Example block-level help text here.</p> </div> <div class = "checkbox"> <label><input type = "checkbox"> Check me out</label> </div> <button type = "submit" class = "btn btn-default">Submit</button> </form>
جمع بندی و نتیجه:
ما خواستیم در این مطلب، توضیحاتی در مورد Checkboxes در بوت استرپ برای شما ارائه کنیم و نحوه کار با این بخش را به شمایاد دهیم. همانطور که گفته شد، چک باکس و کنترل رادیویی دو بخش مهم و کاربردی در بوت استرپ هستند که باید نحوه ساخت این بخش را یاد بگیرید. اگر می خواهید نحوه کار با این قسمت ها را یاد بگیرید، پیشنهاد می کنیم تا در دوره آموزش بوت استرپ شرکت کنید.
نظرات: