گروه بندی دکمه ها

چرا باید BOOTSTRAP رو یاد بگیریم؟

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

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

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

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

نهایتا فریمورکهای مختلفی برای بخشfront – end وب سایت شکل گرفت و  فریم ورکBootstrapتوسط توییتر ارائه شد.(چون اکثر کاربران تویتر از  موبایل و تبلت استفاده می کردند)و به خاطر جذابیت و قدرتی که داشت مورد توجه توسعه دهندگان وب قرار گرفت و به سرعت مخاطبان بسیاری را جذب خودش کرد و به  اولین و محبوب ترین فریم ورک تبدیل شد .

چگونه بوت استرپ به یک طراح سایت می تواند کمک کند؟

  • این فریم ورک به شما کمک می کند که به راحتی وب سایت ریسپانسیو طراحی کنید.
  • کارکردن با آن بسیار آسان است حتی کسی که اطلاعات اولیه ای از html , css داشته باشد می تواند با آن کار کند.
  • این فریم ورک با مرورگرهای مدرن و قدیمی سازگاری دارد(Chrome, Firefox, Internet Explorer, Safari, Opera).

چگونه می توانیم بوت استرپ را به پروژه خود اضافه کنیم؟

برای شروع کار با بوت استرپ می توانید به دو صورت زیر عمل کنید

  •  کتابخانه یBootstrap رو از سایت آن دانلود کنید و درون پروژه خود آپلود کنید
  •  بوت استرپ را از cdn  بارگذاری کنید.

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

  • به آدرس   getbootstrap.Com   بروید.

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

  • روی گزینه get start کلیک کنید.

get start

  • درمنوی سمت چپ روی گزینه دانلود کلیک کنید.

دانلود

  • فایل دانلودی را از حالت فشرده خارج کنید.
  • به پوشه css بوت استرپ بروید و فایل Bootstrap یا Bootstrap.Min درون پوشه css پروژه آپلود کنید.
  • به پوشه js بوت استرپ بروید و فایل Bootstrap یا Bootstrap.Min درون پوشه js پروژه آپلودکنید.
  • به فایل index  پروژه خود بروید و ساختار استانداردBootstrap را که در وب سایتBootstrap طبق شکل زیر آورده شده است درون این فایل کپی کنید.

start bootstrap

 

توضیحات کدهای استارت  بوت استرپ:

درخط اول قابلیت طراحی ریسپانسیو رو برای وب سایت تعریف می کنیم.

در خط  دومفایل استایلBootstrap رو به اچ تی ام ال پیوست میکنیم.

در گزینه ی آخرما کتابخانه جی کوئری و اجکس و جاوا اسکریپت اختصاصی Bootstrap رو به پروژه اضافه می کنیم.

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

اگر  فقط از بخش CSS بوت استرپ استفاده کنید، شما به jQuery نیاز ندارید.

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

 

روش دوم : بارگذاری BOOTSTRAP ازCDN:

  • CDN مخفف عبارت Content Delivery Network به معنی شبکه توزیع محتوا می باشد.
  • CDN شبکه ای عظیم از سرورها می باشد که در سراسر دنیا پخش شده اند.
  • برای فراخوانی بوت استرپ از cdn مراحل زیر را انجام دهید.
  • مرحله یک تا سه را در آپلود مستقیم  تکرار کنید.
  • به بخش BootstrapCDN بروید.

 

کد های زیر را در قسمت هدر وب سایت قرار دهید.

 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

اگر در پروژه از جاوا اسکریپت استفاده می کنید کدهای زیر را هم در هدر قرار دهید.

 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

زمانی که از CDN برای بوت استرپ استفاده می کنید:

  • بوت استرپ از نزدیکترین سرور به کاربر ارائه می شود.
  • سرعت بارگذاری صفحات وب به طور چشم گیری بالا می رود.
  • اگر در ایران هستید توصیه می شود از cdn استفاده نکنید.
  • تحریم ها می تواند کل وب سایت شما را از دسترس خارج کند.

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


منبع : همراه آی سی تی


منبع : همراه آی سی تی