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

مجري و مشاوركليه امور تبليغاتي شامل:چاپ(آفست و ديجيتال)،طراحي(كاتالوگ، بروشور، لوگو، ست اداري، پوستر) ،طراحي سايت،مالتي مديا،عكاسي صنعتي، غرفه سازي

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

۱۴۱ بازديد

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

 

 

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

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

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

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


  A Basic Panel


 

نتيجه  كد بالا به صورت زير مي باشد :

 6358205673157827761.png

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

 

Panel Footer

 

   

Panel Heading

   

Panel Content

   

 

نتيجه  كد بالا به صورت زير مي باشد :

 6358205678322523162.png

همچنين مي توانيم چند پنل را در يك گروه قرار دهيم

مثال زير يك گروه بندي از پنل ها را نشان مي دهد

 

   

     

Panel Header

     

Panel Content

   

   

     

Panel Header

     

Panel Content

   

   

     

Panel Header

     

Panel Content

   

 

نتيجه  كد بالا به صورت زير مي باشد :

 

 6358205682059036883.png

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

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

 6358205685796150634.png

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

 

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

تا كنون نظري ثبت نشده است
ارسال نظر آزاد است، اما اگر قبلا در مونوبلاگ ثبت نام کرده اید می توانید ابتدا وارد شوید.