درک توییتر بوت استرپ 3 – قسمت اول

درک توییتر بوت استرپ 3 – قسمت اول

در نسخه ی 3 از فریم ورک توییتر بوت استرپ تغییرات برزگی نسبت به نسخه های قبلی دیده است. این فریم ورک برای نمایش در موبایل طراحی شده است و می تواند ادعا کند که یکی از بهترین فریم ورک ها برای ساخت وب سایت های ریسپانسیو است.

از آنجایی که بوت استراپ 3 یک فریم ورک موبایل است، بطور بیش فرض هر آنچه را که طراحی و ایجاد می کنید با تلفن های همراه سازگار است. آیا این جالب نیست؟

 

شروع

توییتر بوت استرپ جدید یک وب سایت جدید است که با خودش را با فریم ورک بوت استراپ 3 ساخته است.

bootstrap3

شما می توانید فایل آرشیو را از وب سایت getbootstrap.com دانلود کنید. هنگامی که فایل آرشیو را از حالت فشرده خارج می کنید، مقدار زیادی فایل و پوشه را مشاهده می کنید که نیازی به آنها در این آموزش نیست. پس فقط مستقیم به پوشه ی dist پرش کنید و آنها را در یک پوشه ی جدید که می تواند پوشه ی پروژه خود نیز باشد کپی کنید.

boot3fig2

حال ما سه دایرکتوری داریم، بیایید هر کدام را بررسی کنیم. پوشه css شامل فایل های CSS است:

  • bootstrap.css
  • bootstrap.min.css
  • bootstrap-theme.css
  • bootstrap-theme.min.css

سی اس اس اصلی ما فایل bootstrap.css است و باید آن را در داخل صفحه ی HTML خود قرار دهیم. bootstrap.min.css فقط یک نسخه ی فشرده و بهینه از bootstrap.css است. این هنگامی لازم می شود که وب سایت خود را ساخته ایم و می خواهیم آن را در سرور مستقر کنیم. Bootstrap-theme.css یک فایل سی اس اس اضافی است، که برای برای استفاده کردن اختیاری است. به دکمه ها و دیگر عناصر حالت سه بعدی می دهد. به طور مشابه هم، bootstrap-theme.min.css نسخه ی فشرده و بهینه فایل bootstrap-theme.css است.

بزرگترین تفاوت بین بوت استراپ 2 و بوت استراپ 3 این است که در نسخه ی جدید بجای تصاویر پیکسلی از فوت ها استفاده می شود. که مزایای آن:

  • مصرف پهنای باند کمتر، سرعت وب سایت بالا
  • آیکون های فونت ریسپانسیو و قابل تغییر اندازه هستند

به این فونت ها Glyphicons می گویند. شرکتی که آیکون های رایگان به توییتر بوت استراپ می دهد.

glyphicons

حال به پوشه ی js مراجعه کنید، در اینجا دو فایل به نام های bootstrap.js و bootstrap.min.js وجود دارد. این فایل ها شامل کتابخانه های مهم جاوا اسکریپت مثل اسلایدر، منو های کشویی و برخی از دیگر ویژگی های جاوا اسکریپت. این فریم ورک یک نسخه ی بهینه و فشرده برای محصول خود ارائه می دهد.

 

چه چیز خواهیم ساخت؟

در این پست ما یاد خواهیم گرفت چگونه یک وب سایت آزمایشی ایستا با بوت استراپ 3 درست کنیم، نمونه کار زیر وب سایتی است که در آخر خواهیم ساخت.

 

هنگامی که نمونه وب سایت بالا را درست کردید، در آخر خواهید دید که با تغییر اندازه صفحه، عناصر وب سایت نسبت به اندازه پنجره واکنش نشان می دهند، همچنین خواهید دید که منو چطور مخفی می شود و به یک منوی لمسی سازگار با موبایل تبدیل می شود.

bootstrap-test-1

ساختار

بوت استراپ 3 عناصر HTML5 را درک می کند، بنابراین نیاز داریم که یک تگ DOCTYPE را به صفحه اضافه کنیم. بیایید پیش برویم! یک صفحه HTML جدید باز کنید، و بعد تگ زیر را به آن اضافه کنید.

حال تگ های ابتدایی برای نمایش سند HTML را اضافه می کنیم:

بیایید نگاهی به داخل تگ head کنیم، همانطور که می دانید تگ title به صفحه ما عنوان می دهد.

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

متا تگ viewport را همانطور که می بینید، ما عرض محتوا را برابر با عرض صفحه نمایش قرار داریم.

بعد از تنظیم متا تگ viewport، حال باید فایل های CSS بوت استراپ را وارد صفحه کنیم. این فایل کاملا واضح است. درباره هر تگ سی اس اس توضیحاتی در بالای آن می بینید. اگر می خواهید بدانید هر کلاس بوت استراپ چه کاری می کند، با باز کردن فایل bootstrap.css و پیدا کردن تگ مربوطه می توانید توضیحات آن را در مستندات قرار داده شده در بالای آن مشاهده کنید.

حال بیایید نگاهی به تگ body بیندازیم. فقط برای اینکه در خروجی چیزی را مشاهده کنیم Hello, world را در تگ h1 قرار دادیم. آنگاه فایل های مورد نیاز جاوا اسکریپت را از پوشه ی js فراخوانی کردیم. اطمینان حاصل کنید که این فایل های جاوا اسکریپت در هر صفحه ای که با آن کار می کنید گنجانده شده است. مستندات توییتر بوت استراپ 3 توصیه می کند که فایل های جاوا اسکریپت را در آخر صفحه قرار دهید.

 

شیرجه درون توییتر بوت استراپ 3

حال که ساختار ابتدایی را آماده کردیم، می خواهیم اجزای مختلفی را درون صفحه اضافه کنیم. این اجزا بخش مهمی از هر وب سایت است که هر روز شاهد مشاهده آن هستیم. همانطور که در زیر می بینید، من این نمونه کار را به بخش های مختلفی تقسیم کرده ام.

boot3fig4

 

بخش منو

ایجاد یک منو در توییتر بوت استراپ 3 یکی از راحت ترین کارهایی است که می تواند در دنیای طراحی رخ دهد. این که آسان است، بیایید منویی را برای وب سایت خود درست کنیم.

در اینجا به تگ های صحیح نیاز داریم. تفاوت عمده در بوت استراپ 3 این است که بطور پیشفرض خودش را با اندازه ی دستگاه کوچکتر سازگار می کند. از آنجایی که ما CSSهای آماده در فایل bootstrap.css داریم، فقط نیاز داریم که کلاس های صحیح را برای هر عنصر استفاده کنیم.

به داخل تگ body در فایل HTML رفته و نشانه گذاری های زیر را وارد کنید:

از آنجایی که بوت استراپ از HTML5 پشتیبانی می کند، از تگ <nav> برای منوی خود استفاده می کنیم. بیایید هر کلاس اعمال شده به آن را درک کنیم. کلاس navbar-wrapper یک نام پیشنهادی است که نشان می دهد که کل عناصر منو در آن قرار دارد. کلاس navbar-default باعث می شود رنگ و خط خاصی به منو اعمال شود. کلاس navbar-fixed-top کمک می کند منو به بالای صفحه بچسبد و در هر بار پیمایش در صفحه از جای خود تکان نخورد. اگر این قابلیت را نمی خواهید می توانید آن را پاک کنید.

ادامه می دهیم، قطعه تگ ها را داخل تگ <nav> قرار دهید:

تگ div با کلاس container مطمئن می شود که محتوای شما تراز است، که یک حاشیه مناسب و معقول از در دو طرف به محتوا وارد می کند. تگ navbar-header برای مقاصد نام تجاری استفاده می شود. من از کلاس navbar-brand برای نمایش نام وب سایت استفاده کرده ام.

حال کد زیر را بیرون از تگ navbar-header قرار دهید:

کد بالا محتوای اصلی منو ما را تشکیل می دهد. navbar-collapse باعث می شود منو لمسی شود و فرم آن را در دستگاه های کوچکتر تغییر دهد. درک محتویات داخل آن بسیار آسان است. از تگ های ul و li برای لیست کردن آیتم های منو استفاده شده است.  توجه داشته باشید برای یادگیری بهتر تنها به این نوع از آموزش ها اکتفا نکنید و به مستندات رسمی بوت استراپ هم مراجعه کنید. حال منوی ما آماده است، در قسمت بعدی با بقیه کار های لازم آشنا می شویم. امیدوارم پست مفیدی برای شما باشد.