آموزش ASP.NET MVC5 – فصل۳ – بخش۱

آموزش ASP.NET MVC5 – فصل۳ – بخش۱

مشخصات مقاله

آموزش ASP.NET MVC5 – فصل۳ – بخش۱

 آموزش ASP.NET MVC5 – فصل3 – بخش1 

با سلام خدمت دوستان و علاقه مندان به دنیای وب . به جلسه سوم از مقالات آموزشی MVC خوش آمدید . در جلسه دوم که شامل 2 بخش بود با View در mvc آشنا شدیم که سرفصلهای جلسه دوم عبارتند از :

  1. آموزش ASP.NET MVC5 – فصل۲ – بخش۱
  2. آموزش ASP.NET MVC5 – فصل۲ – بخش۲
 

نصب فریم‌ورک بوت‌استرپ توسط نوگت (Nuget)

بوت استرپ یک فریم ورک Grid Base می باشد که واکنش گراست . برای نصب بوت استرپ نیاز به نوگت داریم . در بخش بعدی با Nuget آشنا میشویم .

آشنایی با Nuget :

به منظور نصب فریم ورک Bootstrap در پروژه خود ، نیازمند Nuget هستیم . (وب سایت اصلی Nuget) بدین منظور به مسیری که در تصویر زیر نشان داده شده است می رویم :

فعال کردن Nuget

مراجعه به Package Manager Console:

مطابق تصویر به مسیر زیر می رویم و کنسول Nuget را باز میکنیم .

Tools > NuGet Package Manager > Package Manager Consoleپیش از نصب بوت استرپ توسط نوگت ، باید Jquery را نصب کنیم . برای اینکار دستور زیر را در خط فرمان(Command Line) کنسول نوگت می نویسیم :

Install-Package jQuery​

نصب bootstrap توسط nuget:

سپس سراغ نصب Bootstrap می رویم . برای اینکه بدانیم برای نصب بوت استرپ چه فرمانی را باید بنویسیم ، ابتدا در گوگل عبارت Nuget Bootstrap را سرچ می کنیم (مطابق تصویر زیر)

جستجوی Nuget در Google

 

اولین سایت پیدا شده توسط گوگل را باز میکنیم . در وب سایت NuGet دستور لازم برای نصب را مشاهده می کنیم (مطابق تصویر زیر)

دستور نصب بوت استرپ

 

خود سایت نوگت دستور نصب آخرین ورژن بوت استرپ را نمایش می دهد (در تاریخ نگارش این مقاله ، آخرین ورژن 3.3.6 می باشد) .

در خط فرمانی که در قسمت پایین ویژوال استودیو باز شده ، دستور نصب بوت استرپ را تایپ کرده و Enter میزنیم .

Install-Package bootstrap

با اجرای این فرمان ، سه فولدر به پروژه ما افزوده می شود :

Content : شامل فایلهای css است .

Scripts : فایلهای جاوا اسکریپت فریم ورک بوت استرپ را شامل می شود .

fonts : فونتهای مربوط به بوت استرپ در آن قرار دارند .

 

فریم ورک بوت استرپ محصول کمپانی توییتر (Twitter) می باشد که دو ویژگی مهم ریسپانسیو و Grid Base بودن را دارد .

لوگوی Bootstrap

 

شروع کار با فریم ورک بوت استرپ:

برای شروع کار ، ابتدا یک صفحه Html به پروژه خود Add میکنیم . سپس در برنامه ویژوال استودیو ، فولدر Content را از نوار Solution Explorer باز میکنیم و فایل Bootstrap.min.css را داخل صفحه html خود در تگ head وبعد از تایتل ، drag & drop میکنیم . باید چنین خطی به کد ما اضافه شده باشد :

<link href="Content/bootstrap.min.css" rel="stylesheet">

تگ‌های پرکاربرد در بوت استرپ:

در مرحله بعد ، وارد بدنه صفحه html یعنی تگ body میشویم . بعد از تگ <body> یک تگ div تعریف میکنیم بصورت زیر :

<div class="container">

دقت کنید که در یک صفحه میتوان چند div با کلاس container داشته باشیم ولی والد یا parent تمام آنها باید تگ body باشد .

برای شروع هر سطر در طراحی بوت استرپ ، از تگ div بصورت زیر استفاده میکنیم :

<div class="row">

و هر ستون در فریمورک بوت استرپ با div ای با کلاس col مشخص می شود :

<div class="col-md-6">

اندازه اسکرین‌های مختلف در بوت استرپ :

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

	Extra small devices : Phones (<768px) (xs) --> .col-xs-
	Small devices : Tablets (≥768px) (sm) --> .col-sm-
	Medium devices : Desktops (≥992px) (md) --> .col-md-
	Large devices : large Desktops (≥1200px) (lg) --> .col-lg-

توضیح : به هر کدام از اندازه های فوق Break Point میگویند.

معرفی نقاط شکست (break points) بوت استرپ:

  • دستگاه های خیلی کوچک با xs مشخص میشوند مانند موبایل ها که عرض آنها کوچکتر از 768 پیکسل معین شده است .
  • دستگاه های کوچک با sm مشخص میشوند مانند تبلت ها که عرض آنها بزرگتر یا مساوی 768 پیکسل معین شده است .
  • دستگاه های متوسط با md مشخص میشوند مانند دسکتاپ ها که عرض آنها بزرگتر یا مساوی 992 پیکسل معین شده است .
  • دستگاه های بزرگ با lg مشخص میشوند مانند دسکتاپ های عریض که عرض آنها بزرگتر یا مساوی 1200 پیکسل معین شده است .

 

نکته 1: مرجع مطالب فوق ، وب سایت بوت استرپ است .

نکته 2: هر بخش از صفحه از دید بوت استرپ میتواند به 12 قسمت تقسیم شود (علت عدد 12 اینست که کوچکترین عددی است که بیشترین اعداد بخش پذیر می باشد)

طراحی دو ستون با عرض یکسان در بوت استرپ:

بنابراین اگر بخواهیم در سطری ، دو بخش داشته باشیم که عرض آنها با هم برابر باشند ، باید اندازه هر دو را 6 در نظر بگیریم(6+6=12)

بعنوان مثال داریم :

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <p>
                Godard consequat plaid, deserunt fixie craft beer Cosby sweater Bushwick skateboard
            </p>
            <p>
                &nbsp;
            </p>
        </div>
        <div class="col-md-6">
            <p>
                Actually polaroid synth jean shorts Portland, street art nihil fixie bicycle rights
            </p>
           <p>
                &nbsp;
            </p>
        </div>
    </div>

ایجاد سه ستون با عرض یکسان در bootstrap:

اگر بخواهیم سطری به 24 قسمت تقسیم شود ، می توان ابتدا آنرا به 2 قسمت تقسیم کنیم و سپس هر کدام را به 12 بخش تقسیم کنیم . یا اگر بخواهیم سطری به سه قسمت تقسیم شود ، اندازه هر کدام را 4 در نظر میگیریم (12=4*3) :

<div class="row">
 <div class="col-md-4">
  <p>
  Godard consequat plaid, deserunt fixie craft beer Cosby sweater Bushwick skateboard
  </p>
 </div>
 <div class="col-md-4">
  <p>
  Actually polaroid synth jean shorts Portland, street art nihil fixie bicycle rights
  </p>
 </div>
 <div class="col-md-4">
  <p>
  single-origin coffee. Brunch forage fixie banh mi adipisicing, freegan mumblecore
  </p>
 </div>
</div>

کاربرد کلاس‌های container و container-fluid:

اگر div با کلاس container را ننویسیم ، بعد از اجرا میبینیم که محتویات داخل row به کناره های صفحه چسبیده اند و ظاهر جالبی ندارد .

برای اینکه یک طراحی بینابین داشته باشیم یعنی نه مانند کلاس container از لبه های صفحه فاصله داشته باشیم و نه مانند چسبیدن بهنگام حذف container ، میتوان از کلاس container-fluid بجای container استفاده کنیم .

 

همانطور که در بخش قبل دیدیم ، بوت استرپ برای اندازه دستگاه های مختلف موجود در بازار ، breakPoint تعریف کرده است :

نکته : در صورتی که برای هر کدام از break point های بوت استرپ خصوصیتی تعریف کنیم ، برای اندازه های بزرگتر از آن نیز اعمال می شود مثلا اگر داشته باشیم :

<div class="row">
 <div class="col-sm-6">
  <p>
  Godard consequat plaid, deserunt fixie craft beer Cosby sweater Bushwick skateboard single-origin coffee. Brunch forage fixie banh mi adipisicing, freegan mumblecore
  </p>
 </div>
 <div class="col-sm-6">
  <p>
  Actually polaroid synth jean shorts Portland, street art nihil fixie bicycle rights ugh cornhole organic selvage. Wayfarers Shoreditch nesciunt fap Vice. Tumblr master
  </p>
 </div>
</div>

کد بالا بدین صورت تفسیر می شود که در دستگاه های با اندازه sm و بزرگتر از آن ، سطر مذکور به دو بخش با اندازه یکسان تقسیم میشود (col-sm-6)

Bootstrap Grid

 

نکته : قسمت جالب قضیه اینجاست که میتوان در مثلا اندازه موبایل ، سطر مورد نظرمان تمام صفحه را پوشش دهد و در اندازه تبلت ، مثلا 8 قسمت از 12 قسمت را مال خود کند . به مثال زیر دقت کنید :

<div class="row">
 <div class="col-md-6 col-sm-4">
  <p>
  Godard consequat plaid, deserunt fixie craft beer Cosby sweater Bushwick skateboard single-origin coffee. Brunch forage fixie banh mi adipisicing, freegan mumblecore
  </p>
 </div>
 <div class="col-md-6 col-sm-8">
  <p>
  Actually polaroid synth jean shorts Portland, street art nihil fixie bicycle rights ugh cornhole organic selvage. Wayfarers Shoreditch nesciunt fap Vice. Tumblr master
  </p>
 </div>
</div>

توضیح : در مثال فوق می گوییم که پاراگراف ها در اندازه تبلت ، هر کدام نیمی از صفحه را بپوشانند و در اندازه sm پاراگراف اول در یک سوم صفحه و پاراگراف دوم نیز در دو سوم صفحه نمایش داده شود .

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

 

نحوه تعریف سلکتور css و تفسیر آن:

p.x {  color: red;  }
  • هر پاراگرافی که کلاس x دارد را انتخاب کن (select کن) و رنگ متن آنرا قرمز کن .
.x {  color: red;  }
  • هر تگی که کلاس x دارد را انتخاب کن و رنگ متن آنرا قرمز کن .
p#x {  color: red;  }
  • پاراگرافی که id آن x است را انتخاب کن و رنگ متن آنرا قرمز کن .
#x {  color: red;  }
  • تگی که id آن x است را انتخاب کن و رنگ متن آنرا قرمز کن.
p a {  color: red;  }
  • هر لینکی که داخل پاراگراف است را انتخاب کن و رنگ متن آنرا قرمز کن .
body div[class]
  • تمام div هایی که داخل body می باشند و دارای اتریبیوتی بنام class هستند را انتخاب کن .
body div[class="col"]
  • تمام div هایی که داخل body می باشند و دارای اتریبیوتی بنام class هستند که مقدار class برابر col باشد را انتخاب کن.
body div[class^="col-"]
  • تمام div هایی که داخل body می باشند و دارای اتریبیوتی بنام class هستند که مقدار class با -col شروع شود را انتخاب کن .

 

بعد از فراگیری مطالب فوق ، حالا میخواهیم کلاس زیر را در بخش head صفحه خود و داخل <style> بنویسیم :

body div[class^="col-"] { 
padding-top: 10px; 
padding-bottom: 10px; 
border: 1px solid rgba(86, 61, 124, 0.2); 
background-color: rgba(86, 61, 124, 0.15); 
}

در اینصورت ، ما می توانیم به تمامی تگ های بوت استرپی که کلاس آنها با -col شروع می شوند استایل گفته شده را بدهیم.

 

سطرهای تو در تو (Nested Row):

میخواهیم صفحه ای مطابق شکل زیر طراحی کنیم :

سطرهای تو در تو

ابتدا استایل زیر را در بخش مربوطه می نویسیم :

body div[class^="col-"] { 
padding-top: 10px; 
padding-bottom: 10px; 
border: 1px solid rgba(86, 61, 124, 0.2); 
background-color: rgba(86, 61, 124, 0.15); 
}

سپس div ای با کلاس container مینویسیم :

<div class="container">

و در این div یک row با دوبخش 3 تایی و 9 تایی تعریف میکنیم که خود این بخش 9 تایی شامل دو row است که هر کدام از این سطرها به دو بخش 6 تایی تقسیم شده اند:

<div class="row">
 <div class="col-md-3">
  <p>
  Asymmetrical YOLO banjo lomo fanny pack, shoreditch flexitarian dreamcatcher ethnic
  </p>
 </div>
 <div class="col-md-9">
 <div class="row">
  <div class="col-md-6">
   <p>
   Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis.
   </p>
  </div>
  <div class="col-md-6">
   <p>
   Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis.
   </p>
  </div>
 </div>
 <div class="row">
  <div class="col-md-6">
   <p>
   Wayfarers selvage YOLO, commodo assumenda eu est bespoke mlkshk. Helvetica reprehenderit
   </p>
  </div>
  <div class="col-md-6">
   <p>
   iPhone, aesthetic 90&#39;s literally chambray bicycle rights viral blog voluptate. Occupy
   </p>
  </div>
 </div>
 </div>
</div>

بدین ترتیب به طرح مورد نظرمان می رسیم .

کاربرد کلاس‌های offset و push در بوت استرپ:

کار offset اینست که به تعداد دلخواه ، یک ستون را به چپ یا راست شیفت (shift) می دهیم . یکی از کاربردهای offset ، وسط قرار دادن یک div است . مثلا میخواهیم یک div با 6 واحد را دقیقا وسط صفحه بندازیم . بدین منظور ، آنرا سه واحد به راست شیفت میدهیم :

<div class="row">
 <div class="col-md-6 col-md-offset-3">
  <p>
  Mohtavaban.com | Web Development Articles ;
  </p>
 </div>
</div>

 

کار push نیز شیفت دادن است و میتوان از آن برای وسط انداختن div استفاده کرد ولی فرق آن با offset اینست که در صورت push دادن یک div ، روی div های پیش روی خود ، overlap میشود ولی offset در واقع div های بعد از خود را هل می دهد !

مثالی با push و pull :

در این مثال ، با اعمال push و pull ، جای دو div عوض می شود :

<div class="row">
 <div class="col-md-9 col-md-push-3">
  (11,1)
 </div>
 <div class="col-md-3 col-md-pull-9">
  (11,2)
 </div>
</div>

به منظور تکمیل اطلاعات خود درباره مبحث این مقاله میتوانید به وب سایت مرجع بوت استرپ و یا وب سایت w3Schools مراجعه کنید .

با بخش دوم از جلسه سوم سری آموزشی ASP.NET MVC5 همراه ما باشید …

0/5 (0 نظر)

اطلاعات مقاله

آموزش ASP.NET MVC5 – فصل۳ – بخش۱

فرم ارسال دیدگاه درباره

آموزش ASP.NET MVC5 – فصل۳ – بخش۱

دیدگاه کاربران درباره

آموزش ASP.NET MVC5 – فصل۳ – بخش۱

دیدگاهی وجود ندارد