آموزش استفاده از بوت استرپ در ASP.NET به زبان ساده به همراه نکات

چگونه از Bootstrap در ASP.NET استفاده کنیم؟ افزایش روز افزون استفاده از ابزارهای مختلف در طراحی سایت و همچنین تلاش طراحان سایت برای ایجاد سایتی کاربر پسند و زیبا موجب این شده است که استفاده از طرح های پیش ساخته در طراحی سایت امروزه بیشتر متداول شود .دلیل دیگر این که با افزایش استفاده از تبلت ها و موبایل ها موجب ترغیب طراحان شده تا سایت هایی با قابلیت واکنشگرا responsive تولید کنند تا سایت خود را طبق صفحه نمایش دستگاههای مختلف نمایش دهند bootstrap نیز یکی از ابزارهای بسیار کاربردی است وتا به امروز نسخه سوم این ابزار کاربردی منتشر شده است.

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
وب سایت توسینسو

برای استفاده از این مجموعه باید مراحل زیر را طی کنید:

  1. دانلود فایلbootstrap از سایت اصلی http://getbootstrap.com
  2. اضافه کردن به پروژه
  3. اضافه کردن آدرس فایلها در قسمت header
  4. اضافه کردن meta دیتا های مورد نیاز

پس از طی این مراحل میتوان از bootstrap استفاده کرد.

مرحله اول

به سایت http://getbootstrap.com رفته در قسمت دانلود فایل bootstrap را دانلود کنید. از دو روش میتوان استفاده کرد :

  1. دانلود فایل bootstrap
  2. استفاده از bootstrap cdn

در روش اول بر روی دکمه download bootstrap کلیک کرده . فایل های زیپ دانلود شده ; شامل سه پوشهcssو js وfontsمی باشد.

وب سایت توسینسو

مرحله دوم :

پروژه ای ایجاد واین سه فایل ( فایل های دانلود شده)را به پروژه اضافه کنید.

وب سایت توسینسو

مرحله سوم

در فایل css باید bootstrap.css و bootstrap-theme.cs واز فایل js باید bootstrap.js به پروژه لینک کنید. (لینک آن را در قسمت header پروژه قرار دهید) .نکته: از هر فایل دو نوع در پوشه وجود دارد که یکی فشرده شده است . ویرایش فایل فشرده بوت استرپ مشکل است .اما فایل فشرده دارای حجم کمتری ست. توصیه می کنم در ابتدای کار از فایل فشرده شده استفاده نکنید .

وب سایت توسینسو

مرحله چهارم

اضافه کردن meta دیتا های مورد نیاز

<meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
وب سایت توسینسو

پس از طی این مراحل پروژه می تواند از کلاسها و ابزارهای bootstrap استفاده کنید

نکات مهم در خصوص Bootstrap

  1. اگر از Theme در پروژه استفاده کردید فایل css و fonts را به Theme انتقال دهید و دیگر نیازی به لینک کردن این دو فایل به پروژه نیست زیرا Theme این امکان را می دهد که از آنها استفاده شود .
  2. در صورت استفاده از master page لینکها را در master پروژه قرار دهید زیرا همه صفحات از master ارث بری می کنند .
  3. در صورت استفاده هم زمان از master page و Theme فقط لازم است فایل js را در قسمت header صفحه master page قرار دهید.

استفاده از CDN در Bootstrap

برای این کار دیگر نیازی به دانلود فایل بوت استرپ نیست و تنها کافیست از سایت این CDN ها را کپی کرده و در پروژه در قسمت header پروژه قرار دهیم.

وب سایت توسینسو

نظرات