طراحی یک طرح ریسپانسیو با Twitter Bootstrap 3

طراحی یک طرح ریسپانسیو با Twitter Bootstrap 3

در این پست یاد خواهیم گرفت که چطور یک قالب ریسپانسیو یا همون واکنشگرا را با فریم ورک محبوب Bootstrap ایجاد کنیم. ما یک بنر و منو ریسپانسیو همراه با با دو ستون محتوا و یک پاورقی سه بخشی خواهیم ساخت.

 

نمایش [fa type=”eye”]

 دانلود [fa type=”download”]

 


 

 

bootstrap-tutorial-1

 

شروع

 

قبل از اینکه آموزش را شروع کنیم، به چند کتابخانه مختلف نیاز داریم. مراحل زیر را دنبال و راه اندازی کنید و آماده برای شروع آموزش باشید.

 

  1. Twitter Bootstrap را از طریق این لینک و از کتابخانه jQuery را از طریق این لینک دریافت کنید.
  2. هنگامی که این فایل ها را دانلود کردید، یک پوشه قالب دسترس با هر نامی که دوست دارید ایجاد کنید، bootstrap3tutorial
  3. درون این دایرکتوری، زیر پوشه ای با نام includes و داخل includes دو زیر پوشه ی دیگر با نام bootstrap و jquery ایجاد کنید.
  4. فایل فشرده ی بوت سترپ را از حالت فشرده خارج کنید و داخل پوشه bootstrap قرار دهید، و آخرین نسخه از jQuery را هم در پوشه jquery قرار دهید.
  5. آنگاه در داخل پوشه includes فایل سی اس اسی را با نام styles.css ایجاد کنید.
  6. سرانجام، در ریشه bootstrap3tutorial یک فایل اچ تی ام ال خالی با نام index.html ایجاد کنید.

 

بعد از اینکه مراحل بالا را انجام دادید، باید ساختار پوشه های شما به صورت زیر باشد:

 

bootstrap-tutorial-2

 

HTML

 

قبل از اینکه شروع کنیم به توسعه وب سایت ریسپانسیو، نیاز داریم که تنظیم سند HTML با فایل های ضروری و متا تگ های مناسب را انجام دهیم. کدهای HTML زیر را به فایل index.html اضافه کنید تا یک سند خالی HTML همراه با فایل های ضروری CSS و JS همراه با پلاگین jQuery ساخته شود.

 

 

 

فایل های جاوا سکریپت را به جای اینکه به صورت سنتی در <head> قرار دهیم، آن ها را در پایین صفحه اضافه می کنیم. این باعث صرفه جویی در بارگذاری صفحه می شود. به این دلیل این کار را می کنیم چون مرورگر ها محتوا را از بالا مورد پردازش قرار می دهند، پس بهتر است فایل های سنگین جاوا سکریپت را در پایین صفحه قرار دهیم، پس از اینکه محتوا و CSS بارگذاری شد، تجربه بهتری را به کاربر سایت انتقال می دهد.

 

درون <head> سند HTML، دو تگ meta استفاده شده است:

 

 

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

 

هدر و نوار منو ریسپانسیو بوت سترپ

 

Twitter Bootstrap مجموعه از از کلاس های CSS را فراهم می کند که به راحتی برای ایجاد منو ها مورد استفاده قرار می گیرد. علاوه بر این نیز قابلیت های اضافی برای ساخت منو ریسپانسیو با قابلیت سوئیچ آن به موبایل فراهم می کند. مثل همیشه مستندات بوت سترپ عــالی هستند، درباره این موضوع در وب سایت رسمی Bootstrap مطالعه کنید.

 

این آموزش بوت سترپ، به ما نشان می دهد که چطور یک نوار منو ریسپانسیو را به قالب خود اضافه کنیم. کدهای HTML زیر را درون تگ body از فایل index.html اضافه کنید.

 

 

 

header و nav تگ های جدید HTML5 هستند که اجازه استفاده آنها را در کد داریم، پیشنهاد می شود در هر کجا که لازم است از این تگ ها استفاده کنید.

 

عنصر button با کلاس navbar-toggle دکمه است که وقتی به شما نمایش داده می شود که، وب سایت را بر روی دستگاه های تلفن همراه با مرورگر کوچک آن مشاهده می کنید. این دکمه به کاربران اجازه بستن و باز کردن منو را می دهد، که برای صرفه جویی در فضا مناسب است.

 

 

اینها اضافه شده اند تا جاوا سکریپت بوت سترپ اجازه نمایش یا مخفی عنصر خاص را داشته باشد:

 

bootstrap-tutorial-3

 

بخش از عنصر که با کلاس container همراه است، محتوای تمام  هدر را در بر می گیرد. این باعث می شود محتوای هدر در وسط صفحه نمایش با حاشیه مناسب قرار گیرد. عرض عناصر container با اندازه های ۱۲۰۰px و ۹۹۲px یا ۷۶۸px بسته به اندازه مرورگر یا دستگاه تغییر خواهد کرد.

 

اضافه کردن بنر به قالب بوت استرپ

 

با استفاده از کلاس container به راحتی می توانیم بخش بنر را به قالب خود اضافه کنیم. کدهای HTML زیر را به تگ body بعد از header اضافه کنید.

 

 

 

استفاده از grid بوت سترپ برای ساخت بخش محتوا

 

Twitter Bootstrap با بهره گیری از یک سیستم شبکه ای ۱۲ ستونه، این اجازه را به توسعه دهندگان وب می دهد تا به راحتی گسترده ای از شبکه های ریسپانسیو از ستون ها را داشته باشند. برای یادگیری بیشتر درباره چگونگی انجام این کار به مستندات Bootstrap مراجعه کنید.

 

این آموزش Bootstrap به ما نشان می دهد که چطور از سیستم grid برای ایجاد ستون راست استفاده کنیم. کدهای HTML زیر را بعد از کدهای بنر اضافه کنید:

 

 

 

یک بار دیگر، کلاس container برای نگه داشتن محتوا به صورت خطی استفاده می کند. برای ساخت بخش های چپ و راست بخش محتوای اصلی، کلاس های col-md-9 و col-md-3 مورد استفاده قرار می گیرند. ۹ و ۳ نشان دهنده تعداد ستون ها جهت استفاده برای هر بخش است. آنگاه Bootstrap حاشیه و عرض مناسب بسته به اندازه مرورگر، هر کدام از بخش ها را تنظیم می کند.

 

md برای صفحه نمایش با اندازه متوسط است. این لینک را دنبال کنید تا درباره xs (برای صفحه نمایش خیلی کوچک)، sm (کوچک) و lg (بزرگ) آشنا شوید.

 

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

 

وقتی که وب سایت را با مرورگر موبایل مشاهده کنیم، ستون سمت راست به پایین ستون سمت چپ هل داده می شود، تا بازدید کننده تما محتوا را مشاهده کند.

 

bootstrap-tutorial-4

 

ساخت پاورقی ریسپانسیو

 

با استفاده از سیستم grid ما می توانیم footer با سه بخش مجزا را به قالب خود اضافه کنیم. کدهای زیر را به فایل index.html اضافه کنید.

 

 

 

این کد اساسا همان کد بخش اصل محتوا است، تنها تفاوت این است که از کلاس col-md-4 برای داشتن سه ستون استفاده کرده ایم.

 

سفارشی سازی قالب خود

 

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

 

کدهای CSS زیر را به فایل style.css اضافه کنید – شما آزاد هستید که هر طور که دوست دارید css های دلخواه خود را وارد کنید.

 

 

شما با سی اس اس های بالا محصول زیر را خواهید داشت.

 

bootstrap-tutorial-1 (1)

 

خلاصه

 

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