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

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

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

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

بايد فكري به حالاين مشكل مي شد و به همين خاطر مفهوم ريسپانسيو شكل گرفت  در 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 رو به اچ تي ام ال پيوست ميكنيم.

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

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

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

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

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

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

كد هاي زير را در قسمت هدر وب سايت قرار دهيد.

 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

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

زماني كه از CDN براي بوت استرپ استفاده مي كنيد:

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

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

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