مردان وردپرس آموزش بوت استرپ آموزش بوت استرپ ، پنل ها ( Bootstrap Panel )

آموزش بوت استرپ ، پنل ها ( Bootstrap Panel )

آموزش بوت استرپ ، پنل ها ( Bootstrap Panel )

پیجر( Pager ) چیست؟

پیجر ( Pager ) نیز نمونه ای از صفحه بندی ( Pagination ) می باشد. پیجر( Pager ) دکمه ها یا لینک های مربوط به صفحه ی بعد یا صفحه ی قبل را فراهم می نماید. برای ایجادِ دکمه های قبلی/بعدی ( next/previous )، کلاسِ pager را به عنصرِ <ul> اضافه نمایید:

 

تراز نمودنِ دکمه ها

برای اینکه هر دکمه را در دو طرف صفحه تراز نمایید، از کلاس های .previous و.next استفاده کنید

با استفاده از دستور زیر و استفاده از کلاس .sticky می توان بر روی صفحه، المانی به عنوان یک استیکی نوت داشته باشم:

Bootstrap Panel

پنل در BootStrap به صورت یک جعبه ی کادر دار است که متن موجود در آن دارای Padding می باشد. پنل ها بوسیله ی کلاسِ panel و متنِ محتواییِ آن توسط کلاسِ panel-body ایجاد می شوند:

کلاسِ panel-default برای استایل بندیِ رنگ پنل، مورد استفاده قرار می گیرد.

 

عنوان پنل ( Panel Heading )

کلاسِ panel-heading موجب افزودن عنوان به پنل می شود.

Panel Group

برای این که چند پنل را با یکدیگر گروه بندی نمود، آنها را درونِ یک عنصرِ <div> به همراهِ کلاسِ panel-group قرار دهید.

کلاسِ panel-group موجب پاک شدن حاشیه ی انتهایی ( Bottom Margin ) در هر پنل می شود.

پنل ها همراه با کلاس های Contextual

برای رنگ کردن پنل، از کلاس های Contextual استفاده نمایید panel-default ، panel-primary ، panel-success ، panel-info ، panel-warning ، و یا panel-danger .

 

تاریخ آخرین بروزرسانی : ۱۰ آذر ۱۳۹۶
منبع :‌ مردان وردپرس
سجاد رحمانی نژاد

کارشناس طراحی UI وب ، بیش از سه سال سابقه طراحی و کار اجرایی در سازمان های مختلف و به صورت مستقل ( Freelance ) همچنین مدرس دوره های طراحی وب در آموزشگاه های تهران و کرج.

Advertising MiSaCo.

نظرات خود را اینجا بنویسید

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.