بوت استرپ، به همراه کامپوننتهایی برای پیاده سازی اعمال متداول طرحبندی صفحات است؛ مانند jumbotron ،media ،table و card.
کامپوننت jumbotron
از Jumbotron برای نمایش متنی مشخص در بالای یک صفحه، استفاده میشود. دو روش استفادهی از آن در بوت استرپ 4 وجود دارند:
- داخل container:
<div class="container">
<header class="jumbotron mt-4">
<div class="display-2 mb-4">Our Mission</div>
<p class="lead">Wisdom Pet Medicine strives to blend the best in
traditional and alternative medicine in the diagnosis and
treatment of companion animals including dogs, cats, birds,
reptiles, rodents, and fish. We apply the wisdom garnered in
the centuries old tradition of veterinary medicine, to find the
safest treatments and cures.</p>
</header>
با این خروجی:
در اینجا با اعمال کلاس jumbotron، متن header، داخل یک قاب با گوشههای گرد قرار میگیرد و مشخصتر نمایش داده خواهد شد. همچنین با mt-4، فاصلهای را بین آن و بالای صفحه ایجاد کردهایم.
- خارج از container:
<header class="jumbotron jumbotron-fluid">
<div class="container">
<div class="display-2 mb-4">Our Mission</div>
<p class="lead">Wisdom Pet Medicine strives to blend the best in
traditional and alternative medicine in the diagnosis and
treatment of companion animals including dogs, cats, birds,
reptiles, rodents, and fish. We apply the wisdom garnered in
the centuries old tradition of veterinary medicine, to find the
safest treatments and cures.</p>
</div>
</header>
با این خروجی:
اگر میخواهیم این قاب، تمام عرض صفحه را پر کند و همچمنین لبههای گرد آن نیز حذف شوند، میتوان از کلاس jumbotron-fluid استفاده کرد و آنرا خارج از container قرار داد. سپس برای اینکه متن داخل آن با container زیر آن تراز شود، میتوان یک container را در اینجا داخل jumbotron تعریف کرد.
کنترل ظاهر جداول، در بوت استرپ 4
بوت استرپ 4 به همراه تعدادی کلاس ویژه است که برای بهبود ظاهر المان استاندارد جدول، ارائه شدهاند. آنها را در طی مثالهایی بررسی خواهیم کرد.
برای رسیدن به چنین تصویری، تغییرات زیر را بر روی یک جدول استاندارد HTML اعمال کردهایم:
<table class="table table-striped table-hover table-bordered table-responsive">
<thead class="thead-light">
- کلاس table، کلاس پایه اعمال شیوهنامههای بوت استرپ 4 به المان جدول است که سبب خواهد شد آیتمهای آن با فاصلهی بهتری نسبت به یکدیگر ظاهر شوند. با استفاده از کلاس table-dark میتوان یک قالب مشکی را به جدول اعمال کرد.
- کلاس table-striped سبب میشود تا ردیفها، یک در میان با رنگی متمایز نمایش داده شوند.
- با افزودن table-hover، رنگ ردیفهای جدول با عبور اشارهگر ماوس از روی آنها تغییر میکند.
- کلاس table-bordered کار نمایش قاب جدول را انجام میدهد.
- کلاس table-responsive سبب میشود تا در اندازههای کوچک صفحه، یک اسکرول بار افقی برای نمایش آیتمهای جدول ظاهر شود و یا میتوان از کلاس table-sm نیز استفاده کرد تا padding تعریف شدهی در جدول، کاهش یابند. این کلاس، قابلیت پذیرش break-pointها را نیز دارد؛ مانند table-responsive-md.
- کلاسهای thead-light و یا thead-dark که بر روی تگ thead قرار میگیرند، رنگ پس زمینهی هدر جدول را مشخص میکنند.
- برای تغییر رنگ پس زمینه و متن یک ردیف میتوان از کلاسهای bg-color و text-color استفاده کرد:
<tr class="bg-danger text-light">
- برای تغییر رنگ سلولهای جدول از کلاسهای table-color استفاده میکنیم:
<td class="table-success">$100.00 </td>
فرمولهای رنگهای قابل اعمال به ردیفها، سلولها و متون جداول بوت استرپ 4 را در تصویر ذیل مشاهده میکنید:
کامپوننت جدید card در بوت استرپ 4
پنلهای بوت استرپ 3 حذف و بجای آن کامپوننت جدیدی به نام card در نگارش 4 آن ارائه شدهاست که با افزودن کلاس آن به یک div، بلافاصله قابی با گوشههای گرد به آن اضافه میشود.
<section class="card mb-5" id="drwinthrop">
<div class="card-body">
<img class="card-img img-fluid" src="images/testimonial-mcphersons.jpg"
alt="Doctor Winthrop Photo">
<h2 class="card-title">Dr. Stanley Winthrop</h2>
<h5 class="card-subtitle">Behaviorist</h5>
<p class="card-text">Dr. Winthrop is the guardian of Missy, a
three-year old Llaso mix, who he adopted at the shelter.
Dr. Winthrop is passionate about spay and neuter and pet
adoption, and works tireless hours outside the clinic,
performing free spay and neuter surgeries for the shelter.</p>
<a class="card-link" href="#">About Me</a>
<a class="card-link" href="#">My Pets</a>
<a class="card-link" href="#">Client Slideshow</a>
</div>
</section>
- برای اینکه عناصر داخل card با فاصلهی مناسبی از لبههای آن قرار گیرند و همچنین شیوهنامههای قسمتهای مختلف آن به درستی اعمال شوند، نیاز است محتوای section ای که با کلاس card مشخص شده (تعیین container)، داخل یک div با کلاس card-body قرار گیرد. در اینجا امکان تعریف card-header و card-footer نیز وجود دارد.
- سپس یک card میتواند دارای تصویری واکنشگرا باشد که عرض card را پوشش میدهد. این تصویر با کلاس card-img مشخص میشود.
در اینجا امکان تعریف card-img-top و card-img-bottom نیز وجود دارند. این موارد تصویر card را در بالا و یا پایین آن، بدون padding، نمایش میدهند. اگر میخواهید متنی را بر روی این تصویر نمایش دهید، از کلاس card-img-overlay استفاده کنید. در این حالتها باید تصویر را خارج از card-body قرار دهید.
- عنوان و زیرعنوان یک card، توسط کلاسهای card-title و card-subtitle تعیین میشوند.
- متن داخل آنرا با کلاس card-text مشخص میکنیم.
- لینکهای ذیل آن نیز توسط کلاس card-link در طی یک ردیف نمایش داده میشوند.
امکان تعیین رنگ پس زمینه، حاشیه و متن یک card نیز وجود دارند:
<section class="card mb-5 bg-primary text-light border-warning" id="drchase">
با این خروجی:
و فرمول کلی رنگهای آن نیز به صورت زیر میباشد:
میتوان برای یک card، هدر و فوتر نیز تعریف کرد:
<section class="card mb-5" id="drsanders">
<div class="card-header">
<h2 class="card-title">Dr. Kenneth Sanders</h2>
<h5 class="card-subtitle">Nutritionist</h5>
</div>
<div class="card-body">
<img class="card-img img-fluid" src="images/testimonial-mcphersons.jpg"
alt="Doctor Sanders Photo">
<p class="card-text">Leroy walked into Dr. Sanders front door
when she was moving into a new house. After searching for
weeks for Leroy's guardians, she decided to make Leroy a
part of her pet family, and now has three cats.</p>
</div>
<div class="card-footer">
<a class="card-link" href="#">About Me</a>
<a class="card-link" href="#">My Pets</a>
<a class="card-link" href="#">Client Slideshow</a>
</div>
</section>
در اینجا همان card قبلی را مشاهده میکنید که عناوین آن به card-header و لینکهای ذیل آن به card-footer منتقل شدهاند:
برای تعریف یک list-group در داخل یک card، به صورت زیر عمل میکنیم:
<section class="card mb-5" id="drwong">
<div class="card-body">
<img class="card-img img-fluid" src="images/testimonial-mcphersons.jpg"
alt="Doctor Wong Photo">
<h2 class="card-title">Dr. Olivia Wong</h2>
<h5 class="card-subtitle">Preventive Care</h5>
<p class="card-text">Dr. Wong is a cancer survivor who was
fortunate enough to get to spend time with a therapy dog
during her recovery. She became passionate about therapy
animals, and has started her own foundation to train and
provide education to patients in recovery. Now she gets her
own dose of daily therapy from her husky, Lilla.</p>
</div>
<div class="list-group list-group-flush">
<a class="list-group-item" href="#">About Me</a>
<a class="list-group-item" href="#">My Pets</a>
<a class="list-group-item" href="#">
Client Slideshow
</a>
</div>
</section>
ابتدا list-group را به خارج از card-body منتقل میکنیم. سپس برای حذف حاشیهی آن و همچنین گوشههای گرد آن، جهت یکی شدن با قاب card، کلاس list-group-flush را به آن اضافه میکنیم:
تعیین نحوهی چیدمان cards در بوت استرپ 4
اگر چندین card در یک صفحه تعریف شدهاند، برای تعیین نحوهی قرارگیری آنها در کنار یکدیگر میتوان یا از سیستم طرحبندی متداول بوت استرپ استفاده کرده و یا امکان تعریف گروهی از آنها نیز وجود دارد. برای اینکار کافی است یک div با کلاس card-group را تعریف و سپس تمام cards را داخل آن قرار دهیم:
<div class="container">
<div class="card-group">
که سبب خواهد شد تمام cards در کنار یکدیگر بدون فاصلهای نمایش داده شوند. اگر بجای آن از کلاس card-deck استفاده شود، فاصلهای بین cards قرار میگیرد.
اگر از کلاس card-columns استفاده کنیم، تمام cards را به صورت خودکار در ستونها و ردیفها، قرار میدهد که بعضی از آنها بلندتر و بعضی دیگر کوتاهتر هستند (نوعی نمایش کاشیکاری شدهاست):
ولی در کل اگر نیاز به کنترل بیشتری دارید، از همان روش متداول تعریف ردیفها و ستونهای سیستم طرحبندی بوت استرپ استفاده کنید.
المان media در بوت استرپ 4
برای نمایش متداول متن و تصویر که قرار است تصویر، در یک ستون و متن، در ستونی دیگر باشد، بوت استرپ 4 به همراه کلاس media است که بر اساس Flexbox بازنویسی شدهاست.
<body>
<div class="container">
<section class="media mb-5" id="drwinthrop">
<img class="d-flex align-self-center img-fluid rounded mr-3" style="width:30%"
src="images/testimonial-mcphersons.jpg" alt="Doctor Winthrop Photo">
<div class="media-body">
<h2>Dr. Stanley Winthrop</h2>
<h5>Behaviorist</h5>
<p>Dr. Winthrop is the guardian of Missy,
a three-year old Llaso mix, who he adopted at the
shelter. Dr. Winthrop is passionate about spay and neuter
and pet adoption, and works tireless hours outside the
clinic, performing free spay and neuter surgeries for the
shelter.</p>
</section>
</div>
</body>
با این خروجی:
ابتدا توسط کلاس media یک container را تعریف میکنیم. سپس تصویر، یک ستون و media-body ستون دیگر را تشکیل میدهد.
با استفاده از d-flex، المان تصویر را به یک Flexbox container تبدیل کرده و با استفاده از کلاس align-self-center، آنرا در میانهی ستون قرار میدهیم. همچنین در اینجا توسط mr-3، فاصلهی آنرا با متن ستون کناری تنظیم کردهایم.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: Bootstrap4_09.zip