با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره آموزش کامل Bootstrap 3 را دنبال می کنند. محتوایی که در صفحات وب سایت شما قرار می گیرد، اغلب دارای بخش هایی مهم و پرکاربردی است که شما نیاز دارید برای نشان دادن تاکید بر آن بخش از محتوا و جلب توجه بیشتر کاربران، از ویژگی ها و عناصر خاصی از html استفاده کنید. اما فریم ورک Bootstrap 3 برای متمایز کردن بخش های مهم محتوا ، آنها را در یک box رنگی قرار می دهد، که اینکار با ویژگی jumbotron در Bootstrap 3 انجام می شود. همچنین می توان عباراتی را به عنوان page header یا سرصفحه در Bootstrap 3 تنظیم کرد.
یک jumbotron در واقع یک box بزرگ برای قرار دادن اطلاعات و محتوای مهم صفحه وب درون آن است.
jumbotron در Bootstrap 3 به صورت یک box خاکستری رنگ با گوشه های گرد شده نمایش داده می شود.
نکته: در jumbotron شما می توانید از عناصر و کلاسهای مختلف Bootstrap نیز، استفاده کنید.
برای ایجاد ویژگی jumbotron در Bootstrap 3 از یک تگ <div>
با کلاس .jumbotron
استفاده می شود:
عنصری که از کلاس jumbotron استفاده می کند را در داخل تگی با کلاس container قرار دهید:
1 2 3 4 5 6 7 8 9 | <div class="container"> <div class="jumbotron"> <h1>Bootstrap Tutorial</h1> <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p> </div> <p>This is some text.</p> <p>This is another text.</p> </div> |
همچنین می توانید عنصری که شامل کلاس jumbotron می شود را خارج از عنصر container قرار دهید:
1 2 3 4 5 6 7 8 9 | <div class="jumbotron"> <h1>Bootstrap Tutorial</h1> <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p> </div> <div class="container"> <p>This is some text.</p> <p>This is another text.</p> </div> |
یک page header در واقع مانند یک تقسیم کننده ی بخش ها، عمل می کند.
کلاس .page-header
باعث ایجاد یک خط افقی زیر page header می شود.
1 2 3 | <div class="page-header"> <h1>Example Page Header</h1> </div> |
با استفاده از ویژگی jumbotron در Bootstrap 3 محتوای مهم و پر تاکید صفحات وب خود را بصورت پر رنگ تر و برجسته تر از سایر محتوا نمایش دهید. همچنین می توانید از قابلیت page header یا سرصفحه در Bootstrap 3 عنواین و سر صفحه های محتوای خود را بصورت متمایز و برجسته نمایش دهید. امیدواریم که از مباحث آموزش آشنایی با ویژگی jumbotron و سرصفحه در Bootstrap 3 بخوبی استفاده کرده باشید.