جلسه ۰۶ : ویژگی jumbotron و سرصفحه در Bootstrap 3

• جزئیات
• نوع محتواآموزش تصویری

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره آموزش کامل Bootstrap 3 را دنبال می کنند. محتوایی که در صفحات وب سایت شما قرار می گیرد، اغلب دارای بخش هایی مهم و پرکاربردی است که شما نیاز دارید برای نشان دادن تاکید بر آن بخش از محتوا و جلب توجه بیشتر کاربران، از ویژگی ها و عناصر خاصی از html استفاده کنید. اما فریم ورک Bootstrap 3 برای متمایز کردن بخش های مهم محتوا ، آنها را در یک box رنگی قرار می دهد، که اینکار با ویژگی jumbotron در Bootstrap 3 انجام می شود. همچنین می توان عباراتی را به عنوان page header یا سرصفحه در Bootstrap 3 تنظیم کرد.

ویژگی jumbotron و سرصفحه در Bootstrap 3

آشنایی با ویژگی jumbotron در Bootstrap 3

یک jumbotron در واقع یک box بزرگ برای قرار دادن اطلاعات و محتوای مهم صفحه وب درون آن است.

jumbotron در Bootstrap 3 به صورت یک box خاکستری رنگ با گوشه های گرد شده نمایش داده می شود.

نکته: در jumbotron شما می توانید از عناصر و کلاسهای مختلف Bootstrap نیز، استفاده کنید.

برای ایجاد ویژگی jumbotron در Bootstrap 3 از یک تگ <div> با کلاس .jumbotron استفاده می شود:

ویژگی jumbotron در Bootstrap 3

قرار دادن jumbotron داخل کلاس container

عنصری که از کلاس jumbotron استفاده می کند را در داخل تگی با کلاس container قرار دهید:

استفاده از jumbotron خارج از کلاس container

همچنین می توانید عنصری که شامل کلاس jumbotron می شود را خارج از عنصر container قرار دهید:

page header یا سرصفحه در Bootstrap 3

ایجاد سرصفحه در Bootstrap 3

page header یا سرصفحه در Bootstrap 3

یک page header در واقع مانند یک تقسیم کننده ی بخش ها، عمل می کند.

کلاس .page-header باعث ایجاد یک خط افقی زیر page header می شود.

مثالی از page header

کلام آخر

با استفاده از ویژگی jumbotron در Bootstrap 3 محتوای مهم و پر تاکید صفحات وب خود را بصورت پر رنگ تر و برجسته تر از سایر محتوا نمایش دهید. همچنین می توانید از قابلیت page header یا سرصفحه در Bootstrap 3 عنواین و سر صفحه های محتوای خود را بصورت متمایز و برجسته نمایش دهید. امیدواریم که از مباحث آموزش آشنایی با ویژگی jumbotron و سرصفحه در Bootstrap 3 بخوبی استفاده کرده باشید.