همه چیز در مورد بوت استرپ
چرا باید بوت استرپ را یاد بگیرید؟ ( جلسه اول )
سلام می کنم به شما کاربران همراه آی سی تی به جلسه اول از دوره آموزش بوت استرپ خوش آمدید. توی این جلسه به شما خواهیم گفت که بوت استرپ چیست؟ , چرا بایدبوت استرپ را یاد بگیرید و درنهایت به شما خواهیم گفت که چگونه می توانید بوت استرپ را به پروژه های خود اضافه کنید.
بوت استرپ چیست؟
بوت استرپ یک فریم ورک رایگان سمت کاربر (Front – End) که برپایه زبان های Html , Css ,Java script نوشته شده است.این فریم ورک به طراح سایت کمک می کند که یک وب سایت ریسپانسیو و استاندارد طراحی کند. درادامه لیستی از ویژگی های فریم ورک بوت استرپ آورده شده است.
- بوت استرپ برای توسه سریع و آسان وب ایجاد شده است.
- بوت استرپ به یک توسعه دهنده امکان ایجاد وب سایت های ریسپانسیو را می دهد.
- بوت استرپ از jQuery برای پلاگین های جاوا اسکریپت استفاده می کند .
- بوت استرپ در ابتدا به عنوان یک پروژه توسط تویتر منتشر شدو هم اکنون به عنوان محبوبترین فریم ورک سمت کاربر شناخته می شود.
- بوت استرپ با تمام مرورگر ها سازگار است و هر کسی که دانش پایه css و Html را داشته باشه به راحتی می تونه از آن استفاده کند.
- بوت استرپ شامل تم پلت های آماده و از پیش تعریف شده Html و Css برای تایپوگرافی , فرم ها , دکمه ها , جداول و سایر المانهای یک صفحه وب است.
چرابایدبوت استرپ را یادبگیرید؟
بعد از اینکه دنیای فناوری پیشرفت چشمگیری را شاهد بود و با ورود دستگاه هایی مانند تبلت و موبایل و دم دست بودن این دستگاه ها نسبت به کامپیوتر ها و لب تاب ها , کاربران وبگردی خودشون رو بیشتر با این دستگاه ها انجام می دادند.و به جرات میتونم بگم که اکثر کاربران اینترنتی الان از این دستگاهها برای وبگردی استفاده می‌کنندو این امر موجب شدکه نیازبه طراحی های جدید برای نمایش وبسایت ها در رزولوشن های مختلف بیش از پیش به چشم بیاد .قبلا اگر یادتون باشه وقتی که با گوشی موبایل و یا تبلت وب سایتی رو باز میکردید متوجه می‌شدید که وب سایت دچار به هم ریختگی شده و به اون صورت استانداردی که در مانیتور کامپیوتر نمایش داده می شد.نمایش داده نمی شد.باید فکری به حالااین مشکل می شد و به همین خاطر مفهوم ریسپانسیو شکل گرفت در css میتونستید وب سایت رو ریسپانسیو یا واکنشگراکنیدتوسعه دهندگان وب به این فکرافتادند که یک چهارچوب مناسب وکاربردی برای این کار تعریف کنند.نهایتا فریمورکهای مختلفی برای بخشfront – end وب سایت شکل گرفت و فریم ورکBootstrapتوسط توییتر ارائه شد.(چون اکثر کاربران تویتر از موبایل و تبلت استفاده می کردند) بوت استرپ به خاطر جذابیت و قدرتی که داشت مورد توجه توسعه دهندگان وب قرار گرفت و به سرعت مخاطبان بسیاری را جذب خودش کرد و به اولین و محبوب ترین فریم ورک سمت کاربرتبدیل شد.
چگونه بوت استرپ به یک طراح سایت می تواند کمک کند؟
- این فریم ورک به شما کمک می کند که به راحتی وب سایت ریسپانسیو طراحی کنید.
- کارکردن با آن بسیار آسان است حتی کسی که اطلاعات اولیه ای از html , css داشته باشد می تواند با آن کار کند.
- این فریم ورک با مرورگرهای مدرن و قدیمی سازگاری دارد(Chrome, Firefox, Internet Explorer, Safari, Opera).
چگونه می توانیم بوت استرپ را به پروژه خود اضافه کنیم؟
- برای شروع کار با بوت استرپ می توانید به دو صورت زیر عمل کنید
- کتابخانه یBootstrap رو از سایت آن دانلود کنید و درون پروژه خود آپلود کنید
- بوت استرپ را از cdn بارگذاری کنید.
روش اول:دانلود کتابخانه بوت استرپ از وب سایت آن.
- به آدرس getbootstrap.Com بروید.
- روی گزینه get start کلیک کنید.
- درمنوی سمت چپ روی گزینه دانلود کلیک کنید.
- فایل دانلودی را از حالت فشرده خارج کنید.
- به پوشه css بوت استرپ بروید و فایل Bootstrap یا Bootstrap.Min درون پوشه css پروژه آپلود کنید.
- به پوشه js بوت استرپ بروید و فایل Bootstrap یا Bootstrap.Min درون پوشه js پروژه آپلودکنید.
- به فایل index پروژه خود بروید و ساختار استانداردBootstrap را درون این فایل کپی کنید.
توضیحات کدهای استارت بوت استرپ:
- درخط اول قابلیت طراحی ریسپانسیو رو برای وب سایت تعریف می کنیم.
- در خط دومفایل استایلBootstrap رو به اچ تی ام ال پیوست میکنیم.
- در گزینه ی آخرما کتابخانه جی کوئری و اجکس و جاوا اسکریپت اختصاصی Bootstrap رو به پروژه اضافه می کنیم.
- برای این کار روی لینک کلیک میکنیم و آخرین ورژن کتابخانه بوت استرپ رو دانلود می کنیم و درون پروژه در پوشه js آپلود می کنیم.
- اگر فقط از بخش CSS بوت استرپ استفاده کنید، شما به jQuery نیاز ندارید.
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"> </script> </body> </html>
نکته :بعد از آپلود کردن فایلهای بوت استرپ باید آدرس ها از درون پروژه فراخوانی شودکه در ویدیو جلسه کامل توضیح خواهیم داد.
روش دوم : بارگذاری 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 استفاده نکنید.
- تحریم ها می تواند کل وب سایت شما را از دسترس خارج کند.
این جلسه از آموزش بوت استرپ هم به پایان رسید امیدوارم مورد توجه شما عزیزان قرار گرفته باشد.
منبع : همراه آی سی تی
آموزش المنتور
آموزش المنتور
آموزش المنتور