بوت استرپ bootstrap به فایل jquery نیاز دارد تا بتواند کدها و کامپوننت های جاوااسکریپت را اجرا کند . برای دانلود jquery می توانید به سایت www.jquery.com بروید و آخرین نسخه ی jquery را دانلود کنید . بوت استرپ مرورگر اینترنت اسکپلورر 8 و بالاتر را پشتیبانی می کند .
بخش 12 – طراحی وب واکنش گرا ، شروع کار با بوت استرپ ، بخش دوم
در ادامه باید فایل css خود را به فایل HTML خود لینک دهیم . برای اینکار کد زیر را در بخش <head> فایل HTML خود و در زیر <title> قرار می دهیم :
بوت استرپ bootstrap به فایل jquery نیاز دارد تا بتواند کدها و کامپوننت های جاوااسکریپت را اجرا کند . برای دانلود jquery می توانید به سایت www.jquery.com بروید و آخرین نسخه ی jquery را دانلود کنید . بوت استرپ مرورگر اینترنت اسکپلورر 8 و بالاتر را پشتیبانی می کند . اگر شما نسخه ی 2 فایل jquery را دانلود کنید آنگاه پشتیبانی از IE8+ را از دست خواهید داد چرا که نسخه ی دوم jquery برای پشتیبانی از IE8 بهینه نشده است . بنابراین شما می توانید بجای آن از آخرین ویرایش نسخه ی اول jquery که در واقع 1.11.0 می باشد بجای نسخه ی دوم آن استفاده کنید .
پس از آن که فایل jquery.js را دانلود کردید آن را در فولدر /js قرار دهید . و برای لینک دادن این فایل در فایل index.html خود باید از کد زیر استفاده کنیم :
بخاطر داشته باشید که تگ مربوط به jquery را در تگ <body> قرار دهید . نه در تگ <head> چرا که در این حالت فایل jqeury بعد از بارگزاری تمامی کدها و فایل های دیگر پروژه بارگزاری خواهد شد و بدین ترتیب زمان بارگزاری صفحه کمتر خواهد بود .
و حالا باید فایل جاوااسکریپت بوت استرپ bootstrap را هم به پروژه اضافه کنیم .
حال فایل index.html شما باید به صورت زیر باشد :
برای آنکه بوت استرپ با تمامی دستگاه ها سازگار شود ، نیاز به یک سری متا تگ های ضروری در فایل پروژه ی خود خواهیم داشت . در ابتدا باید به مرورگر بگوییم که کاراکترهای وب سایت ما شامل کاراکترهایی از مجموعه ی یونیکد می باشد . که در واقع یه مجموعه ی کامل از کاراکترهای اسکی می باشد . اینکار توسط کد زیر انجام خواهد پذیرفت :
گاهی اوقات ، مرورگر اینترنت اکسپلورر در حالت compatibility mode اجرا خواهد شد . استفاده از کد زیر می تواند آن را وادار نماید تا از آخرین و بروزترین موتور رندر خود برای رندر کردن کدهای سایت ما استفاده کند . اینکار از رندر شدن سایت ما با نسخه های قدیمی جلوگیری می کند تا بتوانیم از تمامی ویژگی های css خود برای نمایش سایت استفاده کنیم .
بعد از آن ، ما می خواهیم تا کاربران سایت ما از تمامی فضای پنجره ی مرورگر خود برای دیدن سایت ما بهره ببرند ، حال می خواهد یک تبلت باشد ، یک موبایل یا یک دسکتاپ . ما باید به نرم افزار مربوطه بگوییم تا اندازه ی خود را به اندازه ی تمامی فضای پنجره ی مرورگر در آورد :
حالا کد HTML ما باید به این صورت در آمده باشد :
حال تنها یک مرحله مانده تا به کد بالا اضافه کنیم . بوت استرپ bootstrap3 المان های HTML و CSS زیادی دارد که در IE8 کار نمی کند . ما نیاز داریم تا تعدادی اسکریپت به صفحه ی خود اضافه کنیم تا هنگامی که وب سایت در IE8 باز می شود پشتیبانی از HTML5 و CSS3 را برای ما به ارمغان آورد . این اسکریپت ها html5shiv.js و respond.js نام دارند .
نکته : استفاده از این اسکریپت ها مستلزم آن نیست که آن ها را دانلود نمایید . شما می توانید بصورت مستقیم به CDN مورد نظر مانند بالا لینک دهید .
حالا صفحه ی index ما کامل شده و شبیه به شکل زیر خواهد بود :
ما یک تگ <h1> داریم که در آن عبارت " Hello World " معروف را نوشته ایم . به مرورگر خود رفته و این فایل را در آن اجرا کنید ، خواهید دید که کلمه ی hello world با فونتی زیبا به نمایش در خواهد آمد .
اگر شما از گوگل کروم استفاده می کنید براحتی می توانید با کلیک راست کردن روی صفحه و سپس زدن گزینه ی Inspect Element تمامی فایل های CSS و javascript خود را بررسی نمایید . روی تب کنسول console کلیک کرده و اگر در آنجا هیچ پیام خطایی ملاحظه نکردید بدان معناست که فایل های جاواسکریپت شما بدرستی اجرا شده اند . سپس به تب Network رفته و اگر پیام 404 وجود نداشت یعنی فایل های css شما نیز بدرستی اجرا شده است .
تا اینجای کار ما تنظیمات اولیه ی یک پروژه ی بوت استرپی را گفتیم و از این قسمت به بعد از این تنظیمات برای کارهای آینده استفاده خواهیم کرد .
شاد و سلامت باشید
محمد جعفری فوتمی