جداول و فرم ها در بوت استرپ

جداول (ادامه)

اگر کلاس .table-bordered را اضافه کنید، مرزهایی در اطراف هر عنصر خواهید داشتو گوشه های گرد دور کل جدول با اصافه کردن کلاس هاور تیبل به زمانی که موس روی ان برود بک گراند ان به خاکستری روشن تغییر میکند. اگر کلاس .table-condensed را اضافه کنید، padding از وسط برش داده می شود.تا جدول متراکم شود،این مفید است اگر اطلاعات فشرده تری می خواهید.با کلاس های success , error , warning , info  میتوانید رنگ بک گراند را تغییر دهید.

فرم ها

یکی دیگر از نکات برجسته استفاده از بوت استرپ، توانایی ایجاد فرم ها به راحتی است.به‌عنوان یک توسعه‌دهنده وب، استایل‌سازی فرم‌ها یکی از کم‌ترین کارهای مورد علاقه من است. بوت استرپ آن را می سازدبا نشانه گذاری ساده HTML و کلاس های توسعه یافته برای سبک های مختلف فرم ها آسان است.ساختار اصلی فرم همراه با Bootstrap است. نیازی به اضافه کردن کمک اضافی نیست. اگر از placeholder استفاده می کنید، به خاطر داشته باشید که فقط پشتیبانی می شوددر مرورگرهای جدیدتر در مرورگرهای قدیمی، هیچ placeholder نمایش داده نخواهد شد.  22- با چند کلاس کمکی، می توانید به صورت پویا طرح بندی فرم خود را به روز کنید. بوت استرپدارای چند سبک از پیش تعیین شده برای انتخاب می باشد. .form-search را به تگ <form> اضافه کنید و سپس .search-query را به <input> اضافه کنید.یک input box با گوشه های گرد و یک دکمه ارسال درون خطی.برای ایجاد فرمی که در آن همه عناصر درون خطی باشند و برچسب ها در کنار هم باشند، عبارت را اضافه کنیدclass .form-inline به تگ <form>. برای داشتن برچسب و ورودیدر همان خط، از این کد فرم درون خطی استفاده کنید23-.Bootstrap همچنین با فرم افقی از قبل پخته شده عرضه می شود. این یکی جدا ازدیگران نه تنها در میزان نشانه گذاری، بلکه در ارائه فرم  کابرد دارد ، به طور سنتی از یک جدول برای به دست آوردن یک طرح بندی فرم استفاده میشود.اما بوت استرپ بدون استفاده از جداول این کار را انجام می دهد. حتی بهتر است، اگر از آن استفاده می کنیدCSS responsive، فرم افقی را به طور خودکار با طرح‌بندی‌های کوچک‌تر سازگار میکند و انباشتن کنترل ها به صورت عمودی.برای ایجاد فرمی که از طرح افقی استفاده می کند، موارد زیر را انجام دهید:1 : یک کلاس از .form-horizontal را به عنصر والد <form> اضافه کنید.2 : برچسب ها و کنترل ها را در یک <div> با class .control-group قرار دهید.3 : یک کلاس از .control-label را به برچسب ها اضافه کنید.4 : هر کنترل مرتبط را در یک <div> با class .controls برای تراز مناسب قرار دهید. بوت استرپ به طور بومی از رایج ترین کنترل های فرم پشتیبانی می کند. سران در میان آنها هستندورودی، text area، چک باکس، radio، و select کنید.رایج ترین فیلد متن فرم ورودی است—این جایی است که کاربران بیشتر موارد را وارد می کنندداده های فرم ضروری  در بوت استرپ از تمام HTML5 بومی پشتیبانی می کندانواع ورودی: متن، رمز عبور، تاریخ، تاریخ-محلی، تاریخ، ماه، زمان، هفته، شمارهبر، ایمیل، آدرس اینترنتی، جستجو، تلفن و رنگ: