آموزش برنامه نویسی ، پایگاه داده sql server
آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server


آموزشگاه برنامه نویسی مجتمع فنی تهران میرداماد : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

آموزش Bootstrap > مقدمه آموزش Bootstrap
آموزش نصب Bootstrap در نرم افزار ویژوال استودیو و سایت های ASP.Net

مقدمه آموزش نصب Bootstrap در نرم افزار ویژوال استودیو و سایت های ASP.Net :

همانطور که در درس های قبل اشاره کردیم ، bootstrap مجموعه ای از کلاس ها و اسکریپت های آماده است که می توانید از آنها برای قالب دهی و طراحی عناصر صفحات خود استفاده نمایید .
در این درس ، شما را با نحوه اضافه کردن فایل ها و امکانات bootstrap به یک سایت ASP.Net در محیط ویژوال استودیو آشنا خواهیم کرد .
نرم افزار ویژوال استودیو ، دارای ابزار درون ساخته ای به نام Package Manager Console می باشد که به وسیله آن می توانید پکیج ها و ابزارهای آماده را به پروژه یا وب سایت خود اضافه نمایید . این ابزار به صورت خودکار ، به منبع هر پکیج متصل شده و فایل ها ، پوشه ها و سایر محتویات مربوط به هر پکیج را دانلود کرده و آن را درون پروژه یا سایت شما قرار می دهد .

نحوه دسترسی به ابزار Package Manager Console در نرم افزار ویژوال استودیو :

برای دسترسی به ابزار Package Manager Console ، از منوی Tools نرم افزار ویژوال استودیو ، همانطور که در تصویر زیر نشان داده شده است ، گزینه NuGet Package Manager را باز نموده و آیتم Package Manager Console را انتخاب نمایید .

نحوه دسترسی به ابزار Package Manager Console در نرم افزار ویژوال استودیو

سپس پنجره این ابزار در محیط برنامه Visual Studio به صورت زیر باز می شود :

نحوه دسترسی به ابزار Package Manager Console در نرم افزار ویژوال استودیو

نکته مهم : برای استفاده از ابزار Package Manager Console و نصب پکیج های مورد نظرتان ، بایستی حتما به اینترنت متصل باشید .

نحوه نصب پکیج bootstrap توسط ابزار Package Manager Console :

برای نصب هر پکیج توسط ابزار Package Manager Console در ویژوال استودیو ، بایستی عبارت install-package  و سپس نام پکیج مورد نظر را در خط فرمان تایپ نموده و دکمه Enter را بزنید .
برای نصب پکیج bootstrap نیز ، عبارت install-package bootstrap را همانند تصویر زیر ، در خط فرمان ابزار نوشته و دکمه Enter را بزنید .

نحوه نصب bootsratp در نرم افزار ویژوال استودیو

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

پوشه ها و فایل های bootsratp در نرم افزار ویژوال استودیو و ASP.Net
  1. پوشه content : این پوشه شامل فایل های CSS که محتوی کلاس های آماده bootstrap می باشد ، است .
  2. پوشه fonts : این پوشه شامل font های مرتبط با bootstrap می باشد .
  3. پوشه scripts : این پوشه نیز شامل فایل های اسکریپت bootstrap و jQuery است که امکان استفاده از ویجت ها و ابزار های bootstrap را فراهم می کنند .

نحوه استفاده از کلاس های آماده bootstrap در صفحات طراحی شده ASP.Net :

پس از اینکه ، فایل های لازم برای به کارگیری bootstrap را در سایت ASP.Net خود دانلود کردید ، برای استفاده از کلاس های آن ، بایتسی در ابتدای هر صفحه ، لینک اتصال به فایل های CSS و یا اسکریپت های bootstrap را همانند کد زیر در بخش <head> صفحه قرار دهید . از آن پس ، کلاس ها و ابزار های bootstrap به صورت نامحدود در صفحات ASP.Net یا HTML و ... در دسترس شما هستند :

Example
<head>
&nbootstrapp;&nbootstrapp;&nbootstrapp;&nbootstrapp; <title>عنوان صفحه </title>

&nbootstrapp;&nbootstrapp;&nbootstrapp; <link href="../../Content/bootstrap.css" rel="stylesheet" />
&nbootstrapp;&nbootstrapp;&nbootstrapp;&nbootstrapp; <link href="../../Content/bootstrap-theme.css" rel="stylesheet" />
&nbootstrapp;&nbootstrapp;&nbootstrapp;&nbootstrapp; <script src="../../Scripts/jquery-1.9.1.js"></script>
&nbootstrapp;&nbootstrapp;&nbootstrapp; &nbootstrapp;<script src="../../Scripts/bootstrap.js"></script>
</head>
کد

راهنمایی : بنا بر نیاز و ضرورت استفاده می توانید لینک اتصال به هر یک از فایل های CSS و یا اسکریپت های فوق را اضافه و کم نمایید .



راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1 حمایت نمایید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟      
حمایت از سایت Developer1