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

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

مشخصات مقاله

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

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

 

در بخش اول از جلسه سوم سری آموزشی MVC نحوه نصب فریم ورک بوت استرپ را بوسیله نوگت (Nuget) ویژوال استودیو آموزش دادیم و طراحی قالب (view در MVC) را توسط بوت استرپ آغاز کردیم. نقاط شکست (Break points) آنرا بیان کردیم و چند سلکتور (selector) نسبتا پیچیده و تو در تو را نیز شرح دادیم. در بخش دوم از جلسه سوم، می خواهیم مباحث کاربردی دیگری در زمینه bootstrap را آموزش دهیم. مانند: پنل (Panel)، دکمه (Button)، جدول (Table)

 

پنل در بوت استرپ (Bootstrap Panel):

پنل ها ناحیه ای هستند که دارای گوشه های خمیده و شامل سه بخش می باشند : Heading , Body , Footer . هم می توان هر سه بخش را در یک پنل داشت و هم یک یا دو تا از آنها را ، ولی ترتیب آنها مهم است . پنل ها در بوت استرپ بسیار پر کاربرد هستند و یادگیری آن نیز آسان است . برای مثال میخواهیم دو پنل به شکل زیر طراحی کنیم :

پنل در bootstrap

 

برای رسیدن به پنل اول (پنل پیش فرض) باید به شکل زیر عمل کنیم :

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            Panel Heading (Default)
        </h3>
    </div>
    <div class="panel-body">
        Panel Body
    </div>
    <div class="panel-footer">
        Panel Footer
    </div>
</div>

 

انواع پنل‌ها در فریم ورک Bootstrap:

همانطور  که مشاهده می کنید ابتدا باید یک div با کلاس panel تعریف کنیم (اگر panel-default را ننویسیم فرقی نمیکند ، زیرا همان پیش فرض را نمایش میدهد) سپس یک یا دو یا هر سه بخش Heading-Body-Footer را تعریف میکنیم . بخش Heading با کلاس panel-heading و بخش بدنه پنل با panel-body و بخش فوتر آن با panel-footer تعریف می شود . برای بخش ابتدایی پنل ، کلاسهای زیر را میتوان تعریف کرد :

<div class="panel panel-primary">...</div> 
<div class="panel panel-success">...</div> 
<div class="panel panel-info">...</div> 
<div class="panel panel-warning">...</div> 
<div class="panel panel-danger">...</div>

 

در داخل heading نیز معمولا یک تگ heading (مانند h3) تعریف میکنیم و به آن کلاس panel-title میدهیم .

استایل‌دهی به پنل بوت استرپ:

برای استایل دادن به پنل می توان از css ای که خودمان مینویسیم استفاده کنیم . بطور مثال اگر بخواهیم قسمت فوتر تمام پنلهای سایت استایل خاصی داشته باشند باید کد css را به این صورت تعریف کنیم :

div.panel div.panel-footer { 
background-color: red; 
}

مثال بعد : میخواهیم هدر پنلهایی که danger هستند به رنگ قرمز در بیایند :

div.panel-danger div.panel-heading { 
color: white; 
font-weight: bold; 
background-color: red; 
}

تعریف استایل‌های شخصی در فایل جدا:

برای سفارشی سازی استایل های بوت استرپ نباید به هیچ وجه روی فایل اصلی bootstrap.min.css تغییراتمان را اعمال کنیم . بلکه باید فایلی بنام دلخواه مثلا myStyle.css را در فولدر content ایجاد کنیم و به پروژه خود اضافه کنیم . این استایل روی استایل پیش فرض بوت استرپ Override می شود . بنابراین باید css ها را بصورت زیر در تگ head تعریف کنیم :

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

نکته : برای تکمیل آموخته های خود درباره موضوع مهم پنل ، میتوانید به وب سایت مرجع بوت استرپ و یا وب سایت W3Schools مراجعه کنید .

 

دکمه در بوت استرپ (Bootstrap Button):

تعریف دکمه توسط تگ input:

در html دکمه را با تگ input تعریف میکردیم و انعطاف پذیری گرافیکی زیادی نداشت :

<input type="submit" value="My Button 1 (Submit)" />
<input type="reset" value="My Button 2 (Reset)" />
<input type="button" value="My Button 3 (Button)" />

تعریف دکمه توسط تگ button:

ولی در فریمورک بوت استرپ باید از تگ button استفاده کرد که بسیار شیک تر از دکمه های سابق می باشد :

<button type="submit">My Button 4 (Submit)</button>
<button type="reset">My Button 5 (Reset)</button>
<button type="button">My Button 6 (Button)</button>

استایل دهی به دکمه های بوت استرپی:

دکمه های بالا هنوز استایل بوت استرپی ندارند . برای اعمال این استایل باید مانند زیر کلاس css را به آن اضافه کنیم :

<!--– Standard button –--><button class="btn btn-default" type="button">Default</button>

رنگی کردن دکمه ها:

دکمه فوق پیش فرض bootstrap است یعنی هیچ گونه رنگ و استایلی ندارد و به رنگ طوسی است . برای رنگی کردن دکمه داریم :

<button class="btn btn-primary" type="button">Primary</button>
<!--– Indicates a successful or positive action –-->
<button class="btn btn-success" type="button">Success</button>
<!--– Contextual button for informational alert messages –-->
<button class="btn btn-info" type="button">Info</button>
<!--– Indicates caution should be taken with this action –-->
<button class="btn btn-warning" type="button">Warning</button>
<!--– Indicates a dangerous or potentially negative action –-->
<button class="btn btn-danger" type="button">Danger</button>

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

طراحی دکمه لینکی در بوت استرپ:

اگر بخواهیم دکمه ای بصورت لینک نمایش داده شود باید بصورت زیر انجام دهیم :

<button class="btn btn-link" type="button">Link</button>

طراحی لینک بصورت دکمه:

نکته 2) : اگر بخواهیم لینکی شبیه دکمه نمایش داده شود باید بصورت زیر انجام دهیم:

<a class="btn btn-primary" href="http://www.Mohtavaban.com">Link</a>

 

تغییر اندازه دکمه بوت استرپی :

به منظور تغییر سایز دکمه ها باید از کلاسهای زیر استفاده کنیم :

<button class="btn btn-primary btn-xs" type="button">Extra small button</button>
<button class="btn btn-info btn-sm" type="button">Small button</button>
<button class="btn btn-warning btn-md" type="button">Medium button</button>
<button class="btn btn-danger btn-lg" type="button">Large button</button>

خروجی بصورت زیر می شود :

انواع دکمه در بوت استرپ

اگر بخواهیم دکمه ای ، تا جایی که جا دارد بزرگ شود (مانند شکل فوق-دکمه بالا) باید به آن کلاس btn-block بدهیم :

<div class="row">
 <div class="col-sm-6">
  <button class="btn btn-primary btn-sm btn-block" type="button">Small Block Primary Button</button>
 </div>
</div>

 

نکته : با افزودن فایل bootstrap-theme.min.css به head صفحه خود ، مشاهده می کنیم که به تمامی المان های موجود در صفحه ، گرافیک بهتری اعمال می شود (مثلا دکمه ها حالت برجسته و دارای gradient می شوند) .

نکته : برای یادگیری بیشتر درباره button و button group میتوانید به وب سایت مرجع بوت استرپ مراجعه کنید .

 

جدول در بوت استرپ (Bootstrap Table):

 

اعمال کلاس table به تگ <table>:

جدول در html با تگ <table> مشخص میشود . با افزودن کلاس table به این تگ ، میتوان یک جدول بوت استرپی پیش فرض داشت ولی کلاس های زیادی برای جدول وجود دارند که به هر چه زیباتر شدن جداول در بوت استرپ کمک میکنند:

<table class="table"> 
 <tbody> 
  <tr> 
   <td> Content Here...! </td> 
  </tr> 
 </tbody> 
</table>

کلاس table-responsive برای اعمال واکنش گرایی:

برای افزودن قابلیت واکنش گرایی به جدول ، باید در تگ والد تگ table کلاس table-responsive را اضافه کنیم :

<div class="row"> 
 <div class="col-sm-12 table-responsive"> 
  <table class="table"> 
   <tbody> 
    <tr> 
     <td> Content Here </td> 
    </tr> 
   </tbody> 
  </table> 
 </div> 
</div>

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

کلاس‌های table-condensed و table-bordered:

با افزودن کلاس table-bordered جدول دارای حاشیه می شود . توسط کلاس table-condensed جدول کمی فشرده تر نمایش داده میشود .

کلاس‌های table-striped و table-hover:

توسط کلاس table-striped سطرهای جدول بصورت یکی در میان به رنگ کم رنگ و پررنگ در می آید . با کلاس table-hover با رفتن موس به روی هر سطر از جدول ، رنگ آن سطر پررنگ تر می شود .

بطور کلی داریم :

<div class=”row”>
 <div class=”col-sm-12 table-responsive”>
  <table class=”table table-bordered table-condensed table-striped table-hover”>
   <tbody>
    <tr>
     <th>
      #
     </th>
     <th>
      First Name
     </th>
     <th>
      Last Name
     </th>
     <th>
      Phone Number
     </th>
    </tr>
    <tr>
     <td>
      1
     </td>
     <td>
      Ehsan
     </td>
     <td>
      Safari
     </td>
     <td>
      09026660220
     </td>
    </tr>
   </tbody>
  </table>
 </div>
</div>

خروجی بصورت شکل زیر است :

جدول در bootstrap

 

شخصی سازی استایل های جدول بوت استرپ:

حالا میخواهیم به جدول بالا ، استایل دلخواه خود را اعمال کنیم (مثلا رنگ نوشته های جدول زرد شود) بدین منظور می بایست در بخش head صفحه استایل زیر را بدهیم :

div .table > tbody{ 
 color:yellow; 
}

و نیز میخواهیم رنگ سطرهای جدول بصورت یکی در میان بنفش کم رنگ و پررنگ شوند (توسط css3 امکان پذیر است) :

.table-striped > tbody > tr:nth-of-type(odd) { 
background-color: #9d6cc3; 
} 
.table-striped > tbody > tr:nth-of-type(even) { 
background-color: #7f39b5;
}

نکته : برای تکمیل اطلاعات درباره جداول در بوت استرپ ، به وب سایت مرجع بوت استرپ و یا وب سایت W3schools مراجعه شود .

 

طراحی فرم لاگین واکنش‌گرا در بوت استرپ:

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

فرم لاگین در بوت استرپ

 

طراحی یک div با کلاس container:

ابتدا یک div با کلاس container در خط اول بعد از تگ body تعریف میکنیم و سپس به آن margin-top میدهیم :

div.container { 
margin-top: 20px; 
}

ایجاد یک پنل برای طراحی فرم لاگین یا رجیستر:

سپس یک پنل تعریف میکنیم که هم heading دارد هم body هم footer . در بخش heading عنوان فرم را مینویسیم مانند Login یا Register که کد آن بصورت زیر است :

<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
Login
</h4>
</div>
</div>

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

<div class="panel-footer">
<a href="#">Forgot Password</a> | <a href="#">Register for free</a>
</div>

و اما قسمت اصلی فرم لاگین ، بخش body آن است . باید تمام المانهای فرم را از قبیل TextBox و Button و CheckBox را داخل تگ form قرار بدهیم .

خصوصیات تگ فرم در HTML :

یکی از خصوصیاتی که باید در تگ  فرم مقداردهی شود action می باشد که باید آدرس اکشنی را بنویسیم که میخواهیم اطلاعات ورودی کاربر را به آن ارسال کنیم . این ارسال میتواند بصورت post باشد یا get (برای فرمهای ورود اطلاعات معمولا post است) بنابراین خاصیت method را نیز post تعریف میکنیم .

یادآوری : در جلسه اول ، بخش سوم، با متدهای post و get و نیز اکشن آشنا شدید .

خاصیت autoComplete:

خاصیت autoComplete را نیز بهتر است off کنیم . به این معنیست که مثلا در فیلد ایمیل ، کاربری ایمیل خود را وارد کرده است (مثلا [email protected]) اگر کاربر دیگری روی همان سیستم بخواهد اطلاعات خود را وارد کند و حرف i را بزند ، ایمیل نفر قبلی را می بیند .

خاصیت spellcheck:

خاصیت spellcheck را نیز false میکنیم بویژه در فرمهای زبان فارسی . اگر فعال باشد غلط دیکته ای میگیرد و کارایی ندارد .

خاصیت translate:

خاصیت translate را نیز برابر no قرار می دهیم . این کار مانع نمایش پیغامهای translate که در پایین سایتها ظاهر می شود ، میگردد .

خاصیت name و id:

خاصیت name و id را نیز معمولا عین هم تعریف میکنند مثلا frmLogin .

خاصیت role:

خاصیت role را نیز form قرار میدهیم که معلوم شود فرم ورود اطلاعات است .

بنابراین تگ فرم بصورت زیر در می آید :

<form action="user/login" autocomplete="off" id="frmMain" method="post" name="frmMain" role="form" spellcheck="false" translate="no">
Form Content
</form>

کاربرد کلاس form-horizontal:

تمام TextBox ها و button ها و غیره باید درون یک div که کلاس آن form-horizontal است قرار گیرند :

<div class="form-horizontal">

برای هر سطر از فرم یک row تعریف میکنیم و برای label هر سطر معمولا 3 ستون و برای textbox متناظرش 9 ستون جا میگذاریم :

<div class="row form-group">
 <label class="col-sm-3 control-label" for="txtEmailAddress">Email Address</label>
 <div class="col-sm-9">
  <input class="form-control" id="txtEmail" name="txtEmail" placeholder="Sample: [email protected]" />
 </div>
</div>

نکات ایجاد فرم در بوت استرپ:

  • در هر سطر که با row مشخص می شوند باید کلاس دیگری بنام form-group را اضافه کنیم .
  • به input ها و یا button ها باید کلاسی بنام form-control بدهیم .
  • معمولا نام و آیدی هر المان را نیز برابر هم قرار میدهند (مانند تگ فرم) .

 

طراحی سطر رمز عبور در فرم لاگین:

برای سطر رمزعبور نیز داریم :

<div class="row form-group">
 <label class="col-sm-3 control-label" for="txtPassword">Password</label>
 <div class="col-sm-9">
  <input class="form-control" id="txtPass" name="txtPass" placeholder="Hello12345" type="password" />
 </div>
</div>

تنها تفاوت اساسی آن با سطر ایمیل اینست که type برای input پسورد برابر password است . چون میخواهیم رمز عبور را بصورت ستاره یا دایره نمایش دهد.

سطرهای دکمه Login و Reset:

در نهایت ، سطر مربوط به دکمه های Login و Reset را نیز بصورت زیر تعریف میکنیم :

<div class="row form-group">
 <div class="col-sm-9 col-sm-offset-3">
  <button accesskey="L" class="btn btn-primary" type="submit">(L)ogin</button><button accesskey="R" class="btn btn-default" type="reset">(R)eset</button>
 </div>
</div>

همانطور که مشاهده می کنید ، به دو دکمه Login و Reset تعداد 9 ستون اختصاص دادیم و نیز گفتیم که به اندازه 3 واحد به سمت راست شیفت شوند تا هم تراز بقیه المانها قرار گیرند .

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

 

فارسی سازی بوت استرپ:

برای فارسی سازی بوت استرپ (راست چین کردن) می بایست در یک فایل مجزا ، استایلهای مختص فارسی سازی را اعمال کنیم و سپس در صفحه خود و بعد از فایل اصلی استایل بوت استرپ آنرا include کنیم .

راست‌چین کردن فریم‌ورک بوت‌استرپ:

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

بعد از دانلود فایل مذکور باید بصورت زیر آنرا به صفحه خود اضافه کنیم :

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

در فرم لاگینی که در مقاله قبل آموختیم برخی جاها را باید ltr تعریف کنیم (یعنی بصورت پیش فرض چپ به راست) مانند آدرس ایمیل . پس استایل زیر را به ابتدای صفحه اضافه میکنیم :

.ltr { 
direction: ltr; 
text-align: left; 
font-family: Verdana; 
}

کد فرم لاگین بصورت زیر می شود :

<div class="panel panel-primary">
 <div class="panel-heading">
  <h4 class="panel-title">
  ورود به پایگاه
  </h4>
 </div>
 <div class="panel-body form-horizontal">
  <form action="نشانی جایی که می خواهیم اطلاعات به آنجا ارسال شود" autocomplete="off" id="frmMain" method="post" name="frmMain" role="form" spellcheck="false" translate="no">
   <div class="row form-group">
    <label class="col-sm-3 control-label" for="txtEmailAddress">نشانی پست الکترونیکی</label>
   <div class="col-sm-9">
    <input class="form-control ltr" id="txtEmailAddress" name="txtEmailAddress" placeholder="نمونه: [email protected]" type="search" />
   </div>
   </div>
   <div class="row form-group">
    <label class="col-sm-3 control-label" for="txtPassword">گذرواژه</label>
   <div class="col-sm-9">
    <input class="form-control ltr" id="txtPassword" name="txtPassword" placeholder="نمونه: Hello12345" type="password" />
   </div>
   </div>
   <div class="row form-group">
    <div class="col-sm-9 col-sm-offset-3">
    <button accesskey="S" class="btn btn-primary" type="submit">ورود</button><button accesskey="R" class="btn btn-default" type="reset">حالت اولیه</button>
   </div>
   </div>
  </form>
 </div>
 <div class="panel-footer">
 <a href="#">کلمه عبور را فراموش کرده&zwnj;ام</a> | <a href="#">رایگان ثبت نام کنید</a>
 </div>
</div>

 

همانطور که میبینیم تنها کاری که ما برای فارسی سازی انجام داده ایم افزودن استایل فارسی بود و تغییر عناوین فرم از انگلیسی به فارسی . همین

خروجی فرم فوق به شکل زیر است :

 

دانلود فایل فارسی‌ساز بوت استرپ:

برای دانلود فایل css مربوط به فارسی سازی بوت استرپ bootstrap-rtl.min را کلیک کنید .

0/5 (0 نظر)

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

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

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

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

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

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

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