09390495192 _ 09130084782 info@teroa.ir

Bootstrap چیست؟

Bootstrap – بوت‌استرپ یک چهارچوب (فریم ورک – Framework) رایگان و محبوب، برای طراحی ظاهر صفحات است که از Sass ،Less ،css ،html و js تشکیل‌شده است.
بوت‌استرپ از یک سری ماژول‌های مختلف تشکیل‌شده است که توسعه سریع‌تر و آسان‌تر ظاهر وب‌سایت را ممکن می‌سازد.
یکی از مهم‌ترین ویژگی‌های آن امکان طراحی واکنشگرا (رسپانسیو) است که به‌آسانی وب‌سایت شمارا در همه دستگاه‌ها از موبایل، تبلت تا صفحات دسکتاپ به‌درستی نمایش می‌دهد.
این فریم ورک از به‌روز ترین زبان‌ها مانند Html5 و Css3 پشتیبانی می‌کند.
کدهای Bootstrap، از دو پیش پردازنده مهم css یعنی LESS و SASS استفاده می‌کند.

تاریخچه

Mark Otto و Jacob Thornton در توییتر این فریم ورک را توسعه می‌دادند که سرانجام ۱۹ آگوست ۱۳۹۰ (۲۰۱۱ میلادی) آن را در GitHub منتشر کردند.
بوت‌استرپ از دل یکی از پروژه‌های توییتر بیرون آمد و کاربرد آن کم کردن زحمت برای توسعه و تغییر پروژه بود.
این پروژه در خرداد سال ۱۳۹۳ (ژوئن ۲۰۱۴ میلادی)، پروژه شماره یک گیت هاب بود.

ساختار و عملکرد

ساختار کلی بوت استرپ از یک سری فایل‌های استایل و اسکریپت تشکیل‌شده است.
در Bootstrap برای هر امکان کلاسی مشخص وجود دارد؛ مثلاً برای طراحی صفحه واکنشگرا و بخش‌بندی صفحه (Grid System) 4 کلاس lg-md-sm-xs تعریف‌شده است. این چهار کلاس مشخص‌کننده سایز باکس‌ها در دستگاه‌های مختلف است.
بوت‌استرپ ماژولار بوده و توسعه‌دهندگان می‌توانند فایل بوت‌استرپ را به انتخاب خودشان بسازند و حتی به‌وسیله دستورهای LESS تغییرات عمده‌تری انجام دهند.

گرید بندی bootstrap

گریدبندی یا ستون بندی بوت استرپ

مزایا

• کاربردی و ساده
• طراحی صفحات واکنشگرا
• سازگاری با عموم مرورگرها (cross platform)
• ایجاد ظاهر مناسب برای تگ‌ها/دستورهای html
• قابل تنظیم و سفارشی‌سازی
• جامعه بزرگ پشتیبانی
• سازگار با دیگر فریم ورک ها و پلتفرم‌ها
انعطاف‌پذیر
به‌روزرسانی مناسب
• تاپیوگرافی استاندارد
• دارای بیش از ۲۵۰ آیکن فونت کاربردی

Bootstrap icons

آیکن های بوت استرپ

Bootstrap buttons

دکمه های بوت استرپ

معایب

• در صورت غیرفعال بودن جاوااسکریپت مرورگر کاربر، بخشی از ماژول‌ها کار نمی‌کنند.
• فایل بوت استرپ ممکن است باعث افزایش حجم زیاد پروژه شما شود (با امکان انتخاب ماژول‌های موردنیاز در پروژه این مورد قابل‌حل است).

سازگاری با مرورگرها

مرورگرهای موبایل سازگار با بوت استرپ

مرورگرهای موبایل

مرورگرهای دسکتاپ سازگار با بوت استرپ

مرورگرهای دسکتاپ

بخشی از امکانات

Bootstrap alerts

باکس های پیغام بوت استرپ

Bootstrap modals

باکس مدال بوت استرپ

Bootstrap labels

برچسب (لیبل) بوت استرپ

Bootstrap iimages

نمایش تصاویر در بوت استرپ

 Bootstrap tooltips

تولتیپ در بوت استرپ

Bootstrap inputs

اینپوت در بوت استرپ

لینک های مفید

سایت مرجع رسمی
سایت رسمی آموزشی


برای راحتی و سرعت بخشیدن به کارتون در طراحی صفحه وب، بوت‌استرپ یکی از بهترین گزینه‌هاست مخصوصاً باوجود ویژگی رسپانسیو که داره.

Bootstrap چیست؟

Bootstrap – بوت‌استرپ یک چهارچوب (فریم ورک – Framework) رایگان و محبوب، برای طراحی ظاهر صفحات است که از Sass ،Less ،css ،html و js تشکیل‌شده است.
بوت‌استرپ از یک سری ماژول‌های مختلف تشکیل‌شده است که توسعه سریع‌تر و آسان‌تر ظاهر وب‌سایت را ممکن می‌سازد.
یکی از مهم‌ترین ویژگی‌های آن امکان طراحی واکنشگرا (رسپانسیو) است که به‌آسانی وب‌سایت شمارا در همه دستگاه‌ها از موبایل، تبلت تا صفحات دسکتاپ به‌درستی نمایش می‌دهد.
این فریم ورک از به‌روز ترین زبان‌ها مانند Html5 و Css3 پشتیبانی می‌کند.
کدهای Bootstrap، از دو پیش پردازنده مهم css یعنی LESS و SASS استفاده می‌کند.

تاریخچه

Mark Otto و Jacob Thornton در توییتر این فریم ورک را توسعه می‌دادند که سرانجام  ۱۹ آگوست ۱۳۹۰ (۲۰۱۱ میلادی) آن را در GitHub منتشر کردند.
بوت‌استرپ از دل یکی از پروژه‌های توییتر بیرون آمد و کاربرد آن کم کردن زحمت برای توسعه و تغییر پروژه بود.
این پروژه در خرداد سال ۱۳۹۳ (ژوئن ۲۰۱۴ میلادی)، پروژه شماره یک گیت هاب بود.

ساختار و عملکرد

ساختار کلی بوت استرپ از یک سری فایل‌های استایل و اسکریپت تشکیل‌شده است.
در Bootstrap برای هر امکان کلاسی مشخص وجود دارد؛ مثلاً برای طراحی صفحه واکنشگرا و بخش‌بندی صفحه (Grid System) 4 کلاس lg-md-sm-xs تعریف‌شده است. این چهار کلاس مشخص‌کننده سایز باکس‌ها در دستگاه‌های مختلف است.
بوت‌استرپ ماژولار بوده و توسعه‌دهندگان می‌توانند فایل بوت‌استرپ را به انتخاب خودشان بسازند و حتی به‌وسیله دستورهای LESS تغییرات عمده‌تری انجام دهند.

 

گرید بندی bootstrap

گریدبندی یا ستون بندی بوت استرپ

مزایا

• کاربردی و ساده
• طراحی صفحات واکنشگرا
• سازگاری با عموم مرورگرها (cross platform)
• ایجاد ظاهر مناسب برای تگ‌ها/دستورهای html
• قابل تنظیم و سفارشی‌سازی
• جامعه بزرگ پشتیبانی
• سازگار با دیگر فریم ورک ها و پلتفرم‌ها
انعطاف‌پذیر
به‌روزرسانی مناسب
• تاپیوگرافی استاندارد
• دارای بیش از ۲۵۰ آیکن فونت کاربردی

 

Bootstrap icons

آیکن های بوت استرپ

Bootstrap buttons

دکمه های بوت استرپ

معایب

• در صورت غیرفعال بودن جاوااسکریپت مرورگر کاربر، بخشی از ماژول‌ها کار نمی‌کنند.
• فایل بوت استرپ ممکن است باعث افزایش حجم زیاد پروژه شما شود (با امکان انتخاب ماژول‌های موردنیاز در پروژه این مورد قابل‌حل است).

سازگاری با مرورگرها

مرورگرهای موبایل سازگار با بوت استرپ

مرورگرهای موبایل

مرورگرهای دسکتاپ سازگار با بوت استرپ

مرورگرهای دسکتاپ

بخشی از امکانات

Bootstrap alerts

باکس های پیغام بوت استرپ

Bootstrap modals

باکس مدال بوت استرپ

Bootstrap labels

برچسب (لیبل) بوت استرپ

Bootstrap iimages

نمایش تصاویر در بوت استرپ

 Bootstrap tooltips

تولتیپ در بوت استرپ

Bootstrap inputs

اینپوت در بوت استرپ

لینک های مفید

سایت مرجع رسمی
سایت رسمی آموزشی


برای راحتی و سرعت بخشیدن به کارتون در طراحی صفحه وب، بوت‌استرپ یکی از بهترین گزینه‌هاست مخصوصاً باوجود ویژگی رسپانسیو که داره.