Info@Afragraphic.ir
0912 22 460 22
خدمات و مطالب آموزشی

آموزش Bootstrap--کار با پنل ها در بوت استرپ

 

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام bootstrap را به شما عزیزان آموزش دهد. لذا قسمت هشتم آموزش در زیر قرار داده شده است.

 

 

کار با پنل ها در بوت استرپ                                       قسمت هشتم

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

پنل بوت استرپ شامل باکسی است که دارای بخش header برای نوشتن عنوان , بخش Body برای نوشتن محتویاتی که درون پنل قرار میگیرد و بخش footer می باشد

کد زیر یک پنل است که فقط قسمت body یا بدنه را دارد

<div class="panel panel-default">
  <div class="panel-body">A Basic Panel</div>
</div>

 

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

 6358205673157827761.png

کد زیر پنلی است که دارای footer,header می باشد

<div class="container">

  <h2>Panel Footer</h2>

  <div class="panel panel-default">

    <div class="panel-heading">Panel Heading</div>

    <div class="panel-body">Panel Content</div>

    <div class="panel-footer">Panel Footer</div>

  </div>

</div>

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

 6358205678322523162.png

همچنین می توانیم چند پنل را در یک گروه قرار دهیم

مثال زیر یک گروه بندی از پنل ها را نشان می دهد

<div class="container">

  <div class="panel-group">

    <div class="panel panel-default">

      <div class="panel-heading">Panel Header</div>

      <div class="panel-body">Panel Content</div>

    </div>

    <div class="panel panel-default">

      <div class="panel-heading">Panel Header</div>

      <div class="panel-body">Panel Content</div>

    </div>

    <div class="panel panel-default">

      <div class="panel-heading">Panel Header</div>

      <div class="panel-body">Panel Content</div>

    </div>

  </div>

</div>

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

 

 6358205682059036883.png

همچنین می توانیم با استفاده از کلاس های متی موجود در بوت استرپ به پنل هامون رنگ بدهیم

 (.panel-default.panel-primary.panel-success.panel-info.panel-warning, or .panel-danger)

 6358205685796150634.png

پایان قسمت هشتم

 

 ادامه آموزش در قسمت نهم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید.

 

نظــرات شما

نام :
وب سایت :
ایمیل :
پیغام :  

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

 


Runtime Error

Server Error in '/' Application.

Runtime Error

Description: An application error occurred on the server. The current custom error settings for this application prevent the details of the application error from being viewed remotely (for security reasons). It could, however, be viewed by browsers running on the local server machine.

Details: To enable the details of this specific error message to be viewable on remote machines, please create a <customErrors> tag within a "web.config" configuration file located in the root directory of the current web application. This <customErrors> tag should then have its "mode" attribute set to "Off".


<!-- Web.Config Configuration File -->

<configuration>
    <system.web>
        <customErrors mode="Off"/>
    </system.web>
</configuration>

Notes: The current error page you are seeing can be replaced by a custom error page by modifying the "defaultRedirect" attribute of the application's <customErrors> configuration tag to point to a custom error page URL.


<!-- Web.Config Configuration File -->

<configuration>
    <system.web>
        <customErrors mode="RemoteOnly" defaultRedirect="mycustompage.htm"/>
    </system.web>
</configuration>