آموزش بوت استرپ (Bootstrap)

دسته بندی: آموزش طراحی وب

آموزش بوت استرپ

آنچه در این صفحه می خوانید :

بوت استرپ (Bootstrap) چیست؟

Bootstrap یک ابزار اوپن سورس برای توسعه با اچ تی ام ال (HTML)، سی اس اس (CSS) و جاوااسکریپت است. نمونه اولیه ایده های خود را به سرعت ایجاد کنید یا کل برنامه خود را با متغیرها و mixins Sass، سیستم گرید رسپانسیو، کامپوننت های گسترده از قبل ساخته شده و پلاگین های قدرتمند ساخته شده در جی کوئری (JQuery) بسازید.

بوت استرپ برای توسعه سریع تر و ساده تر وب است و شامل فرمت های HTML و CSS مبتنی بر تایپوگرافی، فرم ها، دکمه ها، جداول، ناوبری، Modals، چرخش تصویر و بسیاری امکانات دیگر، و همچنین افزونه های جاوااسکریپت است. بوت استرپ همچنین به شما امکان می دهد تا به راحتی طرح های واکنش گرا (Responsive) ایجاد کنید. در این فریمورک از شیوه گرید بندی برای چیدمان صفحات وب استفاده می کند. بوت‌استرپ مجموعه‌ای برای ساخت ظاهر وب سایت‌ها و برنامه‌های وب است.

بوت‌استرپ یک پروژه محبوب در گیت هاب (GitHub) است که توسط NASA و MSNBC و بسیاری دیگر از سایت ها استفاده شده است. با استفاده از اطلاعات رابط برنامه‌نویسی (API) در بوت استرپ می‌توان اجزاء واسط پیشرفته مانند scroll spy و تکمیل کننده خودکار کلمات (typeahead) را بدون نیاز به نوشتن حتی یک خط کد جاوااسکریپت ایجاد نمود.

تاریخچه بوت استرپ (Bootstrap)

بوت استرپ توسط Mark Otto و Jacob Thornton در توییتر توسعه داده شد و در ماه اوت 2011 در گیت هاب (GitHub) به عنوان یک محصول اوپن سورس منتشر شد. در ابتدا قرار نبود به صورت عمومی منتشر شود اما با این وجود، توییتر Bootstrap را بصورت اوپن سورس و رایگان به عنوان یک فریمورک طراحی وب سایت در اختیار دیگران قرارداد. در ژوئن 2014، بوت استرپ پروژه No.1 در GitHub بود!

قبل از بوت استرپ، کتابخانه های مختلف برای توسعه رابط کاربری مورد استفاده قرار می گرفت، که منجر به عدم تناسب و بار نگهداری بالا میشد. پس از چند ماه توسعه توسط یک گروه کوچک، بسیاری از توسعه دهندگان در توییتر شروع به کمک به این پروژه نمودند. این برنامه از Twitter Blueprint به Bootstrap نامگذاری شد و به عنوان یک پروژه اوپن سورس در 19 اوت 2011 منتشر شد. این امر همچنان توسط Mark Otto و Jacob Thornton و گروه کوچکی از توسعه دهندگان اصلی و همچنین یک جامعه بزرگ مشارکت کنندگان حفظ شده است.

در 31 ژانویه 2012، Bootstrap 2 منتشر شد که پشتیبانی داخلی از Glyphicons، کامپوننت های جدید و همچنین تغییرات بسیاری دراجزای موجود را اضافه کرد. این نسخه از طراحی وب واکنش گرا پشتیبانی می کند، یعنی صفحه بندی صفحات وب به طور پویا با توجه به ویژگی های دستگاه مورد استفاده (دسکتاپ، تبلت، تلفن همراه و ...) تنظیم می شود.

نسخه اصلی بعدی، Bootstrap 3 در تاریخ 19 اوت 2013 منتشر شد. دراین نسخه اجزاء دوباره طراحی شدند تا از طراحی سرفیس و رویکرد تلفن همراه استفاده کنند. اولین نسخه آلفا Bootstrap4 در تاریخ 19 اوت 2015 و همچنین اولین نسخه بتا در تاریخ 10 اوت 2017 منتشر شد. Bootstrap4 در تاریخ 18 ژانویه 2018 نهایی شد. تغییرات زیادی در این نسخه اتفاق افتاد که عبارتند از :

  • بازنویسی مجدد کد اصلی
  • جایگزین کردن پیش پردازنده Less با پیش پردازنده Sass
  • عدم پشتیبانی از IE9 و نسخه های پایین تر و iOS 6
  • پشتیبانی از Flexible Box در CSS
  • اضافه کردن گزینه سفارشی سازی ناوبری
  • اضافه کردن فضاهای واکنش گرا و ابزارهای اندازه گیری
  • استفاده از واحد rem به جای px در CSS
  • افزایش اندازه فونت گلوبال از 14 پیکسل تا 16 پیکسل
  • حذف پانل ها، تصاویر بند انگشتی، پیجرها و well componentها
  • حذف Glyphicons ها
  • افزایش Class های مفید
  • تغییر ظاهر گرافیکی به شکل Flat
  • توسعه و اصلاح استایل های فرم ها، دکمه ها، منوهای کشویی، اشیای رسانه ای و کلاس های تصویر

بوت استرپ 4 از آخرین نسخه های گوگل کروم، فایرفاکس، اینترنت اکسپلورر، اپرا و سافاری پشتیبانی می کند. نسخه Bootstrap5 بزودی نسخه اصلی این فریمورک خواهد شد که شامل تغییرات زیر است :

  • استفاده از native JavaScript بجای jQuery library
  • عدم پشتیبانی از IE10
  • تغییر تست زیرساخت از QUnit به Jasmine

چرا باید از بوت استرپ (Bootstrap) استفاده کنیم؟

Bootstrap برای هر پروژه توسعه وب از مزایای بسیاری برخوردار است و یکی از این دلایل تعداد زیاد منابع قابل دسترسی برای Bootstrap است. اگر به عنوان یک طراح وب یا توسعه دهنده وب به تازگی با بوت استرپ آشنا شدید، در اینجا برخی از بهترین دلایلی را که در استفاده از Bootstrap برای طراحی های قابل توجه وب به شما کمک خواهد کرد، مطرح شده است:

  • استفاده آسان

شروع استفاده از بوت استرپ بسیار ساده و سریع است. Bootstrap نیز بسیار سازگار است. می توانید از Bootstrap به همراه CSS یا LESS استفاده کنید، یا همچنین با Sass.

  • رسپانسیو

همه ساله دستگاه های تلفن همراه همچنان به شدت محبوب می شوند و نیاز به داشتن یک وب سایت رسپانسیو نیز اجباری و مهم شده است. از آنجا که طرح بندی صفحه به شدت با سایز صفحه نمایش مناسب تغییر می کند، بنابراین ساخت سایت آماده برای موبایل با بوت استرپ یک کار صاف و آسان است. با استفاده از کلاس های آماده Bootstrap می توانید تعداد نقاط موجود در سیستم شبکه را که دوست دارید هر ستون در آن فعال باشد تشخیص دهید. سپس فقط می توانید در هر نقطه ای که مایل هستید ستون های خود را در حالت افقی بارگذاری کنید. به جای نمایش عمودی در وسایل نقلیه تلفن همراه، موقعیت دقیقی را نشان دهید.

  • سرعت توسعه

یکی از مهمترین مزایای استفاده از Bootstrap سرعت توسعه است. در حالی که به سرعت وب سایت یا برنامه جدیدی را توسعه می دهید، مطمئناً باید در استفاده از Bootstrap تأمل کنید. بوت استرپ به شما امکان می دهد تا از بلوک های کدگذاری آماده استفاده کنید تا به شما در تنظیم کمک کند. می توانید این ویژگی را همراه با قابلیت های CSS-Less و سازگاری اتصال بین مرورگر استفاده کنید که می تواند باعث صرفه جویی در ساعت های کدنویسی شود. شما حتی می توانید برای به دست آوردن سریعترین مسیر بالقوه، تم های بوت استرپ آماده را بخرید و آنها را متناسب با نیاز خود تغییر دهید.

  • قابلت تنظیم بوت استرپ

Bootstrap مطابق با طرح های پروژه شما قابل تنظیم است. توسعه دهندگان وب می توانند با انتخاب صفحه سفارشی سازی بوت استرپ، جنبه های موردنیاز خود را انتخاب کنند. شما فقط باید تمام جوانب مورد نیاز خود را از بین نبرید، مانند:

  1. CSS مشترک: تایپوگرافی، کد، سیستم شبکه، جداول، دکمه ها، فرم ها، سبک های رسانه.
  2. مؤلفه ها: گروه های ورودی، گروه های دکمه ای، پیجر، برچسب ها، ناوبری ها، ناوبری ها، نشان ها، صفحه بندی.
  3. کامپوننت های جاوااسکریپت: ماژول ها، راهنماهای ابزار؛
  4. برنامه های کاربردی: برنامه های کاربردی رسپانسیو، برنامه های اساسی.
  • قوام

معدود کارمندان توییتر ابتدا بوت استرپ را به عنوان فریمورکی برای تقویت قوام در ابزارهای داخلی گسترش دادند. اما بعداً بنیانگذار Mark Otto پس از فهم پتانسیل واقعی منتشر شده در آگوست 2011 اولین نسخه اوپن سورس Bootstrap را معرفی کرد. او حتی نحوه بزرگنمایی بوت استرپ را با استفاده از یک مفهوم اصلی طراحان به همراه توسعه دهندگان به تصویر کشید. بنابراین Bootstrap در توییتر محبوب شد.

  • پشتیبانی

از آنجایی که Bootstrap یک انجمن بزرگ پشتیبانی دارد، هر وقت مشکلی پیش آمد، می توانید از آنها کمک بگیرید. سازندگان همیشه Bootstrap را به روز می کنند. در حال حاضر Bootstrap با بیش از 9000 کاربر و همچنین بیش از 500 همکار در GitHub میزبان، گسترش و نگهداری می شود.

  • کامپوننت های پکیج شده جاوااسکریپت

بوت استرپ با مجموعه ای از اجزای JavaScript برای شامل توابعی که آن را به روشی ساده برای کارهایی مانند هشدارها و غیره کار می کند، همراه است. حتی می توانید اسکریپت های نوشتن را به طور کامل کنار بگذارید.

  • ادغام ساده

Bootstrap را می توان به سادگی با سیستم عامل ها و فریمورک های دیگر متمایز، در سایت های موجود و سایر سایت های جدید یکپارچه کرد. همچنین می توانید از عناصر خاص Bootstrap به همراه CSS فعلی خود استفاده کنید.

  • گرید

Bootstrap این قابلیت را دارد که از یک گرید 12 ستونی استفاده کند که رسپانسیو باشد. همچنین عناصر جبران و تو در تو را پشتیبانی می کند. شبکه می تواند در حالت رسپانسیو حفظ شود، یا می توانید به سادگی آن را در یک طرح امن تغییر دهید.

  • کامپوننت های Pre-styled

بوت استرپ با اجزای از پیش طراحی شده برای هشدارها، کشویی، میله های ناوبری و غیره استفاده می کند از این رو، بوت استرپ به عنوان یک ویژگی غنی از ویژگی ها، مزایای بی شماری از استفاده از آن را ارائه می دهد.

معرفی طراحی واکنش گرا (Responsive)

طراحی وب واکنش گرا (Responsive) باعث می شود صفحه وب شما در همه دستگاه ها خوب به نظر برسد. طراحی وب واکنش گرا (Responsive) فقط از HTML و CSS استفاده می کند. همچنین طراحی وب واکنش گرا (Responsive) یک برنامه یا JavaScript نیست.

صفحات وب با استفاده از دستگاه های مختلفی قابل مشاهده هستند: دسکتاپ، تبلت و تلفن همراه. بدون توجه به دستگاه، صفحه وب شما باید خوب به نظر برسد، و استفاده از آن آسان باشد. صفحات وب نباید اطلاعات را برای متناسب با دستگاه های کوچکتر حذف کنند، بلکه محتوای آن را متناسب با هر دستگاه تطبیق می دهند. هنگامی که از CSS و HTML برای تغییر اندازه، مخفی کردن، کوچک کردن، بزرگنمایی یا جابجایی محتوا استفاده می کنید، به منظور ایجاد زیبایی در هر صفحه، آن را به طراحی وب رسپانسیو می گویند.

ویژگی های بوت استرپ (Bootstrap)

    بوت استرپ چیست

    بوت استرپ یک فریمورک وب است که بر روی ساده سازی توسعه صفحات وب تمرکز دارد. هدف اولیه اضافه کردن آن به یک پروژه وب این است که انتخاب رنگ، اندازه، فونت و طرح را برای آن پروژه براحتی اعمال شود. به همین ترتیب، فاکتور اصلی این است که آیا توسعه دهندگان این گزینه ها را به دلخواه خود می یابند. Bootstrap پس از اضافه شدن به یک پروژه، تعاریف سبک پایه را برای تمام المنت های HTML فراهم می کند. نتیجه نهایی ظاهر یکنواخت برای متن، جداول و عناصر فرم در مرورگرهای وب است. علاوه بر این، توسعه دهندگان می توانند از کلاس های CSS تعریف شده در Bootstrap استفاده کنند تا ظاهر محتوا را سفارشی کنند. به عنوان مثال در Bootstrap جداول با رنگ های روشن و تیره، عنوان صفحه، نقل قول های برجسته تر و متن با هایلایت ارائه شده است.

    بوت استرپ همچنین دارای کامپوننت های جاوااسکریپت در قالب پلاگین های جی کوئری می باشد. آنها عناصر رابط کاربری اضافی مانند dialog boxes، tooltips، carousels را فراهم می کنند. هر جز بوت استرپ شامل یک ساختار HTML، اعلامیه CSS و در برخی موارد همراه با کد جاوااسکریپت است. همچنین عملکرد برخی از عناصر رابط کاربری مانند توابع auto-complete برای فیلدهای ورودی، توسعه یافته است.

    مهمترین اجزای بوت استرپ اجزای طرح (Layout) آن است، زیرا روی یک صفحه وب تاثیر می گذارند. طرح اولیه یا پایه "Container" نامیده می شود و عناصر صفحه در آن قرار دارد. توسعه دهندگان می توانند از بین Container های fixed-width و fluid-width انتخاب کنند.

    پس از نصب یک کانتینر، سایر مؤلفه های بوت استرپ با تعیین سطر و ستون، طرح شبکه CSS را پیاده سازی می کنند. یک نسخه از پیش تنظیم شده Bootstrap در قالب یک فایل CSS و سه فایل جاوااسکریپت موجود است که به راحتی به هر پروژه اضافه می شود. با این حال، شکل اولیه Bootstrap، توسعه دهندگان را قادر می سازد تا سفارشی سازی های بیشتر و بهینه سازی های اندازه را اعمال کنند. این فرم خام ماژولار است، به این معنی که توسعه دهنده می تواند اجزای غیرضروری را حذف کند، یک مضمون را اعمال کند و فایل های غیر سازگار Sass را تغییر دهد.

    کاربرد بوت استرپ (Bootstrap)

    دلایل زیادی برای استفاده از بوت استرپ وجود دارد:

    • یک راه حل تمیز و یکنواخت برای ایجاد یک رابط برای توسعه دهندگان فراهم می کند.
    • شامل اجزای داخلی زیبا و کاربردی است که به راحتی قابل تنظیم هستند.
    • سفارشی سازی وب را فراهم می کند.

    به عنوان مثال، Bootstrap درون هسته جوملا اجرا می شود. با این حال، هنگامی که گزینه پیش فرض نباشد، Bootstrap نیز حاکم است. حتی پلتفرم هایی مانند Shopify هم اکنون با صدها طرح بوت استرپ در دسترس هستند. در سمت تجاری وردپرس، Bootstrap نیز به سرعت در حال رشد است. همچنین محبوب ترین موضوع دروپال Bootstrap است. می توانید Bootstrap را در کنار سایر غول های وب مانند پی اچ پی و وردپرس قرار دهید.

    مزایا و معایب بوت استرپ (Bootstrap)

    مزایا

    • استفاده آسان (Easy to use): هر کسی که فقط دانش پایه ای از HTML و CSS داشته باشد می تواند استفاده از بوت استرپ را شروع کند.
    • ویژگی های واکنش گرا (Responsive features): بوت استرپ صفحات وب را به صورت کاملا مناسب در دستگاه‌های مختلف مانند موبایل، تبلت، رایانه دسکتاپ و صفحه نمایش‌های گوناگون براحتی نمایش می دهد.
    • رویکرد تلفن همراه (Mobile-first approach): در بوت استرپ 3، سبک های تلفن همراه برای اولین بار بخشی از هسته فریمورک هستند.
    • سازگاری مرورگر: بوت استرپ سازگار با تمام مرورگرهای مدرن مانند Chrome، Firefox، Internet Explorer، Edge، Safari، Opera می باشد.

    معایب

    • حجم زیاد
    • به روز رسانی دشوار
    • کاهش خوانایی کد
    • شباهت وب سایت های ساخته شده با بوت استرپ

    دانلود بوت استرپ (Bootstrap)

    دو راه برای شروع استفاده از Bootstrap در وب سایت شما وجود دارد :

    1. دانلود بوت استرپ از getbootstrap.com
    2. استفاده از CDN : اگر نمی خواهید خودتان بوت استرپ را دانلود و میزبانی کنید، می توانید از یک CDN استفاده کنید.

    MaxCDN پشتیبانی CDN برای CSS و جاوااسکریپت Bootstrap را فراهم می کند. شما همچنین باید jQuery را وارد کنید.

    مزیت استفاده از Bootstrap CDN

    بسیاری از کاربران هنگام بازدید از یک سایت دیگر، قبلا بوت استرپ را از MaxCDN دانلود کرده اند. در نتیجه زمانیکه افراد از سایت شما بازدید می کنند، Bootstrap از کش دانلود می شود که این مسئله باعث افزایش سرعت بارگذاری می شود. علاوه بر آن اکثر شبکه های تحویل محتوا (CDN) مطمئن هستند که زمانیکه کاربر درخواست یک فایل را دارد، آن درخواست توسط نزدیک ترین سرور پاسخ داده خواهد شد که این هم باعث افزایش سرعت بارگذاری می شود. بوت استرپ از jQuery برای پلاگین های جاوااسکریپت استفاده می کند، مانند modals، tooltipsها وغیره. با این حال، اگر شما فقط از بخش CSS بوت استرپ استفاده کنید، به jQuery نیاز ندارید.

    مثال بوت استرپ (Bootstrap)

    ایجاد اولین صفحه وب با Bootstrap

    اضافه کردن doctype: بوت استرپ از عناصر HTML و CSS که به HTML5 doctype نیاز دارند، استفاده می کند.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8"> 
      </head>
    </html>

    تنظیمات اولیه برای رویکرد موبایل: بوت استرپ 3 برای طرحی واکنش گرا (Responsive) در دستگاه های تلفن همراه اجرا شده است. سبک های اولیه موبایل بخشی از هسته فریمورک هستند.

    <meta name="viewport" content="width=device-width, initial-scale=1">

    بوت استرپ همچنین نیاز به یک عنصر حاوی محتویات سایت را دارد. دو کلاس container برای انتخاب وجود دارد:

    • کلاس container : عرض ثابت واکنش گرا را فراهم می کند.
    • کلاس: Container-fluid تمام عرض صفحه را پوشش می دهد.

    نمونه کد صفحه اصلی بوت استرپ با عرض ثابت (container) :

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="container">   <h1>My First Bootstrap Page</h1>   <p>This is some text.</p> </div>

    </body> </html>

    نمونه کد صفحه اصلی بوت استرپ با عرض کامل (container-fluid) :

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="container-fluid">   <h1>My First Bootstrap Page</h1>   <p>This is some text.</p> </div>

    </body> </html>

    آیا این نوشته را دوست داشتید؟
    pluralsight-web-layouts-with-flexbox-and-bootstrap-4

    آموزش طرح بندی صفحات وب با Flexbox و Bootstrap 4


    در این دوره، شما توانایی ایجاد طرح بندی های سفارشی صفحات وب بدون نیاز به تعریف ستون ها را کسب خواهید کرد. در ابتدا نحوه شروع کار با تعریف flex contain...

    1399/07/01 794 بازدید
    linkedin-bootstrap-4-with-sass

    آموزش بوت استرپ 4 به همراه Sass


    Bootstrap محبوب ترین فریمورک برای ساخت وب سایت هایی با قابلیت ریسپانسیو و mobile-first است. هنگامی که شما آن را با Sass ترکیب می کنید، به CSSهای قدرتم...

    1398/12/27 3219 بازدید
    teamtreehouse-bootstrap-4-basics

    آموزش مبانی Bootstrap 4


    در این دوره با استفاده از آخرین نسخه Bootstrap 4 آشنا می شوید. بوت استرپ یکی از محبوب ترین فریمورک های  front end متن باز است که به شما در ساخت یک طرا...

    1398/10/21 2436 بازدید
    packtpub-mern-stack-front-to-back-full-stack-react-redux-and-node-js-video

    آموزش MERN Stack: برنامه نویسی فول استک React, Redux و Node.js


    در این دوره شما با استفاده از Node.js، Express، React، Redux و MongoDB در کنار ES6+ یک برنامه شبکه اجتماعی جامع ایجاد خواهید کرد. شما با نحوه ایجاد مد...

    1398/08/21 4742 بازدید
    pluralsight-creating-a-site-with-css-grid-and-bootstrap-4

    آموزش ایجاد سایت با بوت استرپ 4 و CSS Grid


    در این دوره شما قدرت بوت استرپ 4 و CSS Grid را با هم ترکیب می کنید تا طرح بندی واکنش گرا ایجاد کنید. همچنین، استفاده از محبوب ترین کتابخانه کامپوننت f...

    1398/06/11 4717 بازدید
    packtpub-learn-spring-and-spring-boot-10x-productive-java-development

    آموزش Spring و Spring Boot - توسعه کاربردی جاوا


    در این دوره به طور کامل با Spring Framework و Spring Boot آشنا می‌شوید. شما به توسعه Spring MVC،Spring Data، اپلیکیشن‌های Spring REST و خیلی از کارهای...

    1398/05/25 15083 بازدید
    packtpub-hands-on-application-development-with-react-and-bootstrap

    توسعه اپلیکیشن با ری اکت و بوت استرپ


    در این دوره با ساخت اپلیکیشن های وب به کمک ری اکت و بوت استرپ آشنا می شوید....

    1398/04/20 18049 بازدید
    packtpub-an-introduction-to-bootstrap-4

    مقدمه ای بر بوت استرپ 4


    آموزش ساخت وب سایت واکنشگرا با استفاده از بوت استرپ 4 - این دوره به شما کمک می کند تا از سطح مبتدی به سطوح پیشرفته تر در طراحی وب و کار با بوت استرپ ...

    1398/02/28 2512 بازدید
    packtpub-the-complete-web-development-course-build-15-projects-video

    دوره کامل طراحی وب همراه با 15 پروژه


    دوره کامل طراحی وب همراه با 15 پروژه از مقدماتی تا پیشرفته با PHP و MYSQL به همراه HTML و CSS و Javascript و Jquery و Bootstrap...

    1398/01/14 16548 بازدید
    linkedin-dreamweaver-cc-responsive-design-with-bootstrap-4

    طراحی سایت واکنشگرا با Dreamweaver C C و بوت استرپ 4


    به نظر می رسد برنامه Dreamweaver CC همراه با Bootstrap 4 - برای طراحان ذهنی حرفه ای جهت ایجاد وبسایت ها، بر روی رایانه های رومیزی و دستگاه های شبیه تل...

    1397/12/27 2421 بازدید
    packtpub-create-a-parallax-style-single-page-website-from-scratch-using-bootstrap-4-video

    آموزش ایجاد وب سایت تک صفحه ای پارالاکس با Bootstrap 4


    آیا شما همیشه می خواستید وب سایت های مدرن، شگفت انگیز و واکنش گرا ایجاد کنید؟ اگر پاسخ شما بله است، این دوره برای شماست. البته این دوره برای استفاده ا...

    1397/10/19 3199 بازدید
    pluralsight-ng-bootstrap-playbook

    آشنایی کامل با ng-bootstrap


    ng-bootstrap  یک پیاده سازی نیتیو Angular برای کامپوننت های قوی در کتابخانه بوت استرپ ارائه می دهد که منجر به داشتن تجربه های کاربری عالی می شود. در ا...

    1397/10/15 1759 بازدید
    wintellectnow-custom-editor-templates

    آشنایی با Custom Editor Templates


    همانند Custom Display Template، شما می توانید Custom Editor Template را ایجاد کنید تا شیوه ای را که داده برای یک type از کاربر جمع آوری می شود را تغیی...

    1397/09/04 1046 بازدید
    packtpub-bootstrap-4-for-beginners-build-5-websites-from-scratch-video

    آموزش Bootstrap 4 برای مبتدیان - ایجاد 5 وب سایت از ابتدا


    این دوره از Bootstrap 4.0.0 بتا، آخرین نسخه استفاده می کند. در مورد Bootstrap Grid و تغییرات جدیدی که استفاده از آن را آسان تر می کند یاد بگیرید. در ا...

    1397/08/22 4826 بازدید
    packtpub-a-quick-guide-to-bootstrap-4-video

    راهنمای سریع Bootstrap 4


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

    1397/07/05 2080 بازدید
    packtpub-building-web-uis-with-bootstrap-4-video

    آموزش ایجاد رابط کاربری وب با Bootstrap 4


    بوت استرپ، یکی از کامل ترین چارچوب ها، برای طراحی رابط های ظریف، قدرتمند برای صفحات وب حرفه ای طراحی شده است. Bootstrap از طراحی واکنش گرا با تنظیم طر...

    1397/07/05 4751 بازدید
    packtpub-create-a-website-with-bootstrap-4-for-rapid-website-development-video

    آموزش توسعه سریع وب سایت با Bootstrap 4


    این دوره به شما چگونگی ساخت وب سایت ها با Bootstrap 4 را نشان می دهد؛ شما می توانید با استفاده از کلاس های بوت استرپ وب سایت ها را سریع و راحت ایجاد ک...

    1397/07/02 1987 بازدید
    teamtreehouse-bootstrap-4-basics-course

    آموزش اصول و مبانی بوت استرپ 4


    در این دوره با Bootstrap 4، مستندسازی بوت استرپ، حل مشکلات رایج در طرح بندی، تایپوگرافی و مشکلات سازگاری مرورگر توسط Bootstrap و غیره آشنا می شوید. بو...

    1397/05/25 1949 بازدید
    طراحی-پوسته-وردپرس-با-bootstrap

    طراحی پوسته وردپرس با Bootstrap


    فریمورک Bootstrap یکی از محبوب ترین فریمورک های طراحی صفحات وب است که قبلا آموزش کامل آن در سایت قرار گرفته است. در این دوره آموزشی که محصول Treehous...

    1397/04/14 8735 بازدید
    udemy-bootstrap-4-from-scratch-with-5-projects-udemy

    آموزش Bootstrap 4 از ابتدا به همراه 5 پروژه


    در این دوره با فرض اینکه شما هیچ چیز از بوت استرپ نمی دانید، با تمام utilities، کامپوننت ها، ویدجت ها و شبکه ها و ایجاد تم های جهان واقعی و وب سایت، آ...

    1397/03/17 7527 بازدید