آموزش کامل بوت استرپ BootStrap – جلسه یازدهم

آموزش کامل بوت استرپ BootStrap – جلسه یازدهم

با سلام. در این مطلب از سایت آموزش برنامه نویسی سورس باران آموزش کامل بوت استرپ BootStrap – جلسه یازدهم به زبان فارسی رو براتون به اشتراک گذاشتیم. در آموزش کامل بوت استرپ BootStrap – جلسه یازدهم یا مباحث زیر آشنا خواهید شد.

1- مروری بر جلسات گذشته

2- کار با گالری آیکن ها

3- شیو های مختلف ساخت دراپ دان لیست

4- اشیای مختلف برای تولید دراپ دان لیست

همچنین جهت دانلود قسمت های قبلی بوت استرپ میتونید از این لینک استفاده نمایید. امیدواریم که این مطلب مورد پسن کاربران قرار گرفته باشد.

جهت دانلود آموزش کامل بوت استرپ BootStrap – جلسه یازدهم به ادامه مطلب مراجعه نمایید.

 

توضیحات مختصری در مورد بوت استرپ :

آموزش کامل بوت استرپ BootStrap فریم ورک بوت استرپ یک مجموعه ی رایگان از ابزارهای ایجاد کامپوننت برای وب سایت و وب اپلیکیشن می باشد. بوت استرپ حاوی تمپلیت های طراحی بر پایه ی HTML و CSS برای تایپوگرافی، فرم ها، دکمه ها، navigation و دیگر کامپوننت های UI و همچنین اکستنشن های جاوا اسکریپت است. در ژوئن سال ۲۰۱۴، فریم ورک بوت استرپ پروژه ی شماره ۱ در GitHub بود که بیش از ۶۹۰۰۰ ستاره و بیش از ۲۵۰۰۰ شاخه داشت. هم اکنون کاربرانی مانند MSNBC و NASA از آن استفاده می کنند.

ویژگی ها:

بوت استرپ با آخرین نسخه های تمام مرورگر های بزرگ سازگاری دارد. هنگامی که از بوت استرپ در مرورگرهای قدیمی مانند اینترنت اکسپلورر ۸ استفاده می شود، به خوبی خود را با آن مرورگر وفق داده و مطابق با امکانات آن مرورگر، خود را پایین می آورد. از نسخه ی ۲٫۰ به بعد، بوت استرپ از طراحی وب responsive یا پاسخگو نیز پشتیبانی می کند. به این معنی که آرایش صفحات وب با در نظر گرفتن ویژگی های صفحه نمایش مورد استفاده (دسکتاپ، تبلت، گوشی موبایل)، به صورت داینامیک منطبق می شود. با شروع نسخه ی ۳٫۰، بوت استرپ فلسفه ی طراحی موبایل را برگزید که تاکید آن بر طراحی responsive به صورت پیش فرض بود. بوت استرپ به صورت open source بوده و بر روی GitHub موجود می باشد. برنامه نویسان می توانند در این پروژه شرکت کرده و تغییرات مورد نظر خود را بر روی این پلتفرم اعمال کنند. اخیرا، اعضای انجمن bootstrap توانسته اند، مستندات آن را به زبان های مختلفی از جمله چینی، اسپانیایی و روسی ترجمه کنند.

ساختار و کاربرد:

توییتر bootstrap به صورت ماژولی بوده و شامل یک سری از شیوه نامه (stylesheet) های LESS می باشد که کامپوننت های مختلف toolkit را اجرا می کند. شیوه نامه ای که bootstrap.less نام دارد شامل شیوه نامه های کامپوننت ها می باشد. برنامه نویسان می توانند از خود فایل Bootstrap استفاده کنند و از این طریق بتوانند کامپوننت های مورد نظر خود را برای استفاده در پروژه ی خود انتخاب کنند. انطباق ها از طریق یک شیوه نامه ی تنظیماتی مرکزی، برای حوزه ی محدودی امکان پذیر می باشد. تغییرات عمیق نیز از طریق LESS امکان پذیر می باشد. استفاده از زبان شیوه نامه ی LESS، امکان استفاده از متغیرها، توابع و اپراتورها، سلکتورهای تودرتو و mixin ها را می دهد. از زمان انتشار نسخه ی ۲٫۰ ، تنظیمات بوت استرپ دارای یک گزینه ی مخصوص “Customize” در مستندات خود شد. علاوه بر این، برنامه نویس می تواند کامپوننت ها و انطباقات دلخواه خود، و در صورت نیاز مقادیر گزینه های متعدد را بر اساس نیاز خود برای یک فرم انتخاب کند. بسته ای که پس از آن ایجاد شود نیز شامل شیوه نامه ی از پیش ساخته شده ی CSS می باشد. سیستم Grid و طراحی پاسخگو نیز با آرایشی با عرض ۱۱۷۰ پیکسل، استاندارد شناخته می شود. علاوه بر این، برنامه نویس می تواند از آرایشی با عرض متغیر استفاده کند. در هر دو مورد، toolkit دارای چهار روش متفاوت برای استفاده از رزولوشن های مختلف و انواع دستگاه ها شامل گوشی های موبایل، تبلت ها و کامپیوترهای شخصی با روزولوشن های بالا و پایین است. هر یک از روش ها می تواند با عرض ستون ها انطباق یابد.

 

به این مطلب امتیاز دهید post

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

پکیج آموزش طراحی وب سایت مدرسه با PHP و MySql
دانلود با لینک مستقیم

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

  1. سلام جناب جهان بین‌ ممنون از زحمات شما و سایت سورس باران اگر میشه آدرس ایمیلتون روی بدید توی فیلم مشخصه نیست. مشکلی داشتم ک میخوام عکسش رو ارسال کنم و ازتون کمکم بخوام. ممنون

  2. سلام دوست عریز خیلی مفید بود . خدا پدر مادرتو بیامرزه.

  3. سلام
    کسی هست ج بده؟
    دکمه هایی که حالت dropdown دارن ——– داخل button این خصوصیت
    data-toggle=”dropdown”
    رو نمیاره میشه لطفا راهنمایی کنی ؟

    کلیک کنید

    ۱
    ۲
    ۳
    ۴
    ۵
    ۶

    البته من از dreamweaver استفاده می کنم البته فرقی نمیکنه که !!!!

  4. فیلمهای آموزشی خوب هستن فقط نسبت به حجم بالای فیلمها مطالب آموزشی کمه ، یعنی وسطش خیلی مکث دارن و وقت رو هدر میدن .

    در ضمن تلفظهای انگلیسیشون کمی خنده داره
    مثلا در این آموزش کلمه divider رو میخونن دایویدر :))))))))

  5. اگه ممکنه لطفا یک دوره کامل آموزش jQuery به زبان فارسی هم بزارید؟ممنون.

  6. سلام
    من ادرس ایمیلتون رو نمیبینم تو این صفحه!
    من تا آموزش ۹ رو گوش کردم و کار کردم خیلی خوب بود ممنونم .یه سوال اینکه اگه بخوام صفحه رو طوری طراحی کنم که تمام عکس ها منظورم عکس های بلگراند هستش و متن ها با کوچیک شدن مرورگر و منطبق بر اون کوچک بشن آیا میشه؟چطور؟
    با تشکر از شما

  7. نظرخوبی بود اگه مدیریت قبول کنن ایشالا اتود اون کار رو هم میزنیم باهم. طراحی وب با فتوشاپ خیلی شیرین و جذابه

  8. سلام خسته نباشید بابت آموزش های خوبتون

    میخاستم بپرسم طراحی سایت با استفاده از نرم افزار های گرافیکی مثل فوتوشاپ رو هم آموزش بدین !! امروزه اکثرا سایت ها گرافیکی و شیکن

    • صابر بوستانی
      18 آذر 1393

      یا سلام. ان شالله این آموزش رو هم تولید می کنیم.

  9. اموزشها تون عالیه . پیروز باشید

  10. تشکر فراوان

بازخوردهای خود را برای ما ارسال کنید

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.