چرا بايد بوت استرپ را ياد بگيريد؟ ( جلسه اول )

چرا بايد بوت استرپ را ياد بگيريد؟ ( جلسه اول )
 
سلام مي كنم به شما كاربران همراه آي سي تي به جلسه اول از دوره آموزش بوت استرپ خوش آمديد. توي اين جلسه به شما خواهيم گفت كه بوت استرپ چيست؟ , چرا بايدبوت استرپ را ياد بگيريد و درنهايت به شما خواهيم گفت كه چگونه مي توانيد بوت استرپ را به پروژه هاي خود اضافه كنيد.
چرا بايد بوت استرپ را ياد بگيريد؟ ( جلسه اول )
 
سلام مي كنم به شما كاربران همراه آي سي تي به جلسه اول از دوره آموزش بوت استرپ خوش آمديد. توي اين جلسه به شما خواهيم گفت كه بوت استرپ چيست؟ , چرا بايدبوت استرپ را ياد بگيريد و درنهايت به شما خواهيم گفت كه چگونه مي توانيد بوت استرپ را به پروژه هاي خود اضافه كنيد.

 
بوت استرپ چيست؟
 
بوت استرپ يك فريم ورك رايگان سمت كاربر (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 نياز نداريد.

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

Hello, world!

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

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

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

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

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

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