آموزش Bootstrap 3
BootStrap چیست؟
BootStrap یک فریم ورک مجانی برای طراحی سریعتر و ساده ترِ وب می باشد.
BootStrap شامل دستوراتِ HTML و CSS برای تولید و ارائه ی تایپوگرافی (typography) ، فرم ها(forms) ، دکمه ها(buttons) ، جداول (tables) ، پیمایش (Navigation)، تصاویر(images)، و خیلی موارد دیگر از قبیل JavaScript Plugins می باشد که لازمه ی طراحی وب هستند.
BootStrap همچنین این امکان را فراهم می آورد که به راحتی طرح های Responsive را طراحی و اجرا نمایید.
طراحی Responsive (واکنش گرا) وب چیست؟
طراحی Responsive وب عبارت است از ایجاد وب سایت هایی که به طور اتوماتیک خود را طوری تنظیم می کنند که بر روی همه ی دستگاهها، از گوشی های کوچک گرفته تا کامپیوترهای رومیزی بزرگ، خوب و مقبول نمایش داده شوند.
تاریخچه ی BootStrap
BootStrap توسط Mark Otto و Jakob Thornton بر روی توییتر توسعه یافت و بعنوانِ یک محصول Open Source در آگوست سال 2011 در GitHub ایجاد گردید. در ژوئن 2014، BootStrap پروژه ی شماره 1 و محبوب ترین پروژه در Github بود.
مزایای BootStrap
- کاربری ساده: هرکسی با اطلاعاتِ اولیه از HTML و CSS می تواند از آن استفاده کند.
- ویژگی Responsive: کدهای Responsive CSS در این فریم ورک بر روی همه ی تلفن ها، تبلت ها، و دسکتاب ها تنظیم می شود.
- راه کارِ Mobile-First (اولویت موبایل): در BootStrap3 شیوه های mobile-first، بخشی از چهارچوب اصلی می باشند.
- سازگاری با مرورگرها: BootStrap با تمامی مرورگرهای مدرن (Chrome, Firefox, Internet Explorer, Safari, Opera) سازگار و منطبق می باشد.
BootStrap از چه جایی قابل دسترسی است؟
دو راه برای شروعِ استفاده از BootStrap بر روی وبسایتتان وجود دارد. شما می توانید:
1. BootStrap را از آدرسِ getbootstrap.com دانلود کنید.
2. BootStrap را با استفاده از یک CDN در صفحه ی خود بگنجانید.
دانلود BootStrap
اگر می خواهید BootStrap را دانلود کرده و آن را در host ذخیره کنید، به آدرس getbootstrap.com بروید و دستورالعمل های ذکر شده را دنبال کنید.
شروع آموزش Bootstrap
سیستمِ Grid (شبکه بندی) موجب می شود که عرضِ صفحه به میزانِ حداکثر 12 ستون افزایش یابد. اگر خواستارِ استفاده از تمامیِ این 12 ستون نمی باشید، می توانید ستون ها را با هم ترکیب کرده و ستون های گسترده تری را به دست آورید
اندازه ی پیش فرض و عمومیِ فونتِ BootStrap ،14 پیکسل بوده و فاصله ی بین خطوط (Line Height) 1.428 می باشد. این اندازه ی قراردادی برای تمامی پاراگراف ها و نیز برای <body> یا تگ ها، اعمال می شود. به علاوه، تمامیِ عناصرِ <p> دارای یک حاشیه ی انتهایی (Bottom Margin) می باشند که برابر با نیمی از ارتفاع بین خطوط(Line Height) است که به صورت پیش فرض به صورت 10 پیکسل تعیین شده است.
در این صفحه از آموزش شما چگونگی Responsive کردن table توسط BootStrap فرا دیده و کاربرد کلاس های table,striped,bordered,hover,condensed,responsive در BootStrap در طراحی سایت
در این صفحه از آموزش شما با کلاس های img-rounded ,img-circle,img-thumbnail,img-responsive,thumbnail در BootStrap آشنا شده و می توانید از کلاس های که ارتباط با تصویر در BootStrap دارند استفاده کنید
JumboTron نشان دهنده ی یک باکس بزرگ است که برای جلب توجه کاربر به برخی اطلاعات و محتوای خاص در صفحه، به کار گرفته می شود. در این صفحه از آموزش شما نحوه آموزش قرار دادن JumboTron درون Container آشنا می شوید
کلاسِ .well یک کادر گرد شده اطراف یک عنصر ایجاد می نماید. این کادر دارای پس زمینه ای به رنگ خاکستری و مقداری Padding می باشد شما می توانید انواع آن را در همین صفحه تست کنید
هشدارها (Alerts) به وسیله ی کلاسِ .alert به وجود می آیند که پس از این کلاس، چهار کلاسِ متنی (Contextual) قرار می گیرد. این کلاس ها عبارتند از .alert-success ،.alert-info ،.alert-warning ،.alert-danger و.alert-danger .
در این آموزش شما انواع مختلف استایل دکمه ها در BootStrap,سایز دکمه ها در BootStrap,ایجاد دکمه Block Level در BootStrap آشنا خواهید شد
BootStrap این امکان را فراهم می آورد که بتوان مجموعه ای از دکمه ها را بر روی یک خط با هم گروه بندی نمود توسط این ویژگی می توان دکمه ها را به شکل گروه های عمودی و هم تراز و دکمه تو در تو و دکمه های کشویی مجزا درست کرد
Badge ها نشانِ عددیِ آیتم هایی است که با یک لینک در ارتباط هستند.
نوار پیشرفت (Progress Bar) به کاربر اعلان می کند که تا چه میزان در پروسه پیش رفته است. BootStrap چند نوع نوار پیشرفت را فراهم نموده است. نوار پیش فرض در BootStrap به شکل زیر است.
اگر دارای وب سایتی با صفحات متعدد هستید، احتمالا خواستار شماره بندی هر کدام از صفحات می باشید. صفحه بندیِ(Pagination) اصلی در BootStrap به صورت زیر می باشد
پیجر(Pager) نیز نمونه ای از صفحه بندی (Pagination) می باشد. پیجر(Pager) دکمه ها یا لینک های مربوط به صفحه ی بعد یا صفحه ی قبل را فراهم می نماید. برای ایجادِ دکمه های قبلی/بعدی (next/previous)، کلاسِ .pager را به عنصرِ <ul> اضافه نمایید
ابتدایی ترین گروه لیست عبارت است از یک لیست نامنظم که دارای آیتم های لیست می باشد
پنل در BootStrap به صورت یک جعبه ی کادر دار است که متن موجود در آن دارای Padding می باشد. پنل ها بوسیله ی کلاسِ .panel و متنِ محتواییِ آن توسط کلاسِ .panel-body ایجاد می شوند
منوی dropdown یا کشویی یک منوی تبدیل پذیر است که به کاربر اجازه می دهد مقدار خاصی را از یک لیستِ از پیش تعریف شده انتخاب نماید. به مثال پایین توجه کنید
زمانی که بخواهید حجم بزرگی از محتوا را پنهان کرده یا نمایش دهید، Collapsible ها گزینه ی مفیدی هستند
آموزش فرم های ورودی بوت استرپ-Bootstrap Input Form
آموزش سایزبندی ورودی ها در بوت استرپ-BootStrap Input Sizing
آموزش modal در بوت استرپ-BootStrap Modal Plugin
آموزش Grid System در Bootstrap
آموزش سیستم شبکه بندی بوت استرپ-Bootstrap Grid System
آموزش گرید سیستم بوت استرپ در دستگاه های کوچک
آموزش گرید سیستم بوت استرپ در دستگاه های متوسط
آموزش گرید سیستم بوت استرپ در دستگاه های بزرگ