در این قسمت، شیوهنامههایی را بررسی میکنیم که به المانهای پر کاربردی مانند دکمهها، لیستها و نشانها اعمال میشوند.
شیوهنامههای کار با دکمهها در بوت استرپ 4
کلاس پایه ایجاد دکمههای بوت استرپی، کلاس btn است. البته آنرا میتوان با کلاسهای دیگری نیز ترکیب کرد:
- کلاس btn را میتوان بر روی المانهایی مانند anchor، button و input نیز اعمال کرد:
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="submit" value="Input">
در این حالت تمام این المانها یکسان به نظر میرسند:
- برای تعیین رنگ اجباری دکمههای بوت استرپ، از فرمول زیر استفاده میشود؛ مانند btn-primary:
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
با این خروجی:
همانطور که ملاحظه میکنید، رنگ این دکمهها نیز نسبت به نگارش سوم آن، به روز رسانی شدهاست.
همچنین نگارش outline آنها نیز قابل تعریف است؛ مانند btn-outline-primary:
<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-info">Info</button>
<button class="btn btn-outline-light">Light</button>
<button class="btn btn-outline-dark">Dark</button>
با این خروجی:
- کلاس btn-size که در اینجا size میتواند sm یا lg باشد و سبب ایجاد دکمههایی کوچک یا بزرگ میشوند.
- کلاس btn-block سبب میشود تا دکمهای کل عرض container را پر کند.
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-block">Block</button>
با این خروجی:
- امکان اعمال کلاسهای active و disabled نیز در اینجا میسر است:
<h2>States</h2>
<h3>Active</h3>
<button class="btn btn-primary active">Active Button</button>
<h3>Disabled</h3>
<button class="btn btn-primary disabled">Disabled Button</button>
<a class="btn btn-primary disabled" href="#">Disabled Link Button</a>
با این خروجی:
تشکیل گروهی از دکمهها در بوت استرپ 4
برای تبدیل تعدادی از دکمهها به یک گروه، از کلاس btn-group استفاده میشود. همچنین امکان تشکیل گزینهی عمودی آن، با کلاس btn-group-vertical نیز وجود دارد. در این حالت دکمهها بجای نمایش افقی، به صورت یک ستون نمایش داده میشوند. کلاس btn-toolbar نیز برای تشکیل نوار ابزاری از دکمهها در نظر گرفته شدهاست. توسط کلاسهای btn-group-sm و یا btn-group-lg میتوان اندازهی این گروهها را تغییر داد.
<div class="btn-toolbar" aria-label="All pets">
<div class="btn-group mb-2 mr-2" aria-label="Common pets">
<button type="button" class="btn btn-primary active">Cat</button>
<button type="button" class="btn btn-primary">Dog</button>
<button type="button" class="btn btn-primary">Fish</button>
<button type="button" class="btn btn-primary">Bird</button>
</div>
<div class="btn-group mb-2" aria-label="Exotic pets">
<button type="button" class="btn btn-primary">Amphibian</button>
<button type="button" class="btn btn-primary active">Reptile</button>
<button type="button" class="btn btn-primary">Other</button>
</div>
</div>
با این خروجی:
در اینجا دو گروه از دکمهها تشکیل شدهاند که اینها را داخل یک btn-toolbar قرار دادهایم. همچنین تعریف aria-labelها به screen readers و معلولین کمک میکند.
به علاوه با استفاده از کلاسهای mb-2 و mr-2، سبب ایجاد margin بین این نوار ابزار با متن زیر آن و همچنین بین خود آنها شدهایم.
و حالت عمودی آن:
<div class="btn-group-vertical mb-2" aria-label="Exotic pets">
<button type="button" class="btn btn-primary">Amphibian</button>
<button type="button" class="btn btn-primary active">Reptile</button>
<button type="button" class="btn btn-primary">Other</button>
</div>
چنین شکلی را پیدا میکند:
کلاسهای جدید تشکیل Badges در بوت استرپ 4
برای تشکیل نشان/آرم از کلاس badge استفاده میشود و برای تغییر شکل آن میتوان از کلاس badge-pill کمک گرفت. برای تغییر رنگ آن نیز فرمول زیر وجود دارد:
یک مثال:
<div class="container">
<div class="row">
<section class="col-12">
<h1>Our Commitment <span class="badge badge-info">to you</span></h1>
<h3>Grooming <span class="badge badge-danger badge-pill">new</span></h3>
</section>
</div><!-- row -->
</div><!-- content container -->
با این خروجی:
همانطور که مشاهده میکنید، یک badge همواره به اندازهی container آن در آمده و نمایش داده میشود.
ایجاد لیستی از آیتمها در بوت استرپ 4
بوت استرپ، کلاسهایی را برای ایجاد لیستهایی با ظاهر لیستهای اندرویدی به همراه دارد که در ادامه با مثالهایی آنها را بررسی خواهیم کرد.
<ul class="list-group mb-3">
<li class="list-group-item active">Grooming</li>
<li class="list-group-item list-group-item-action">
General Health
</li>
<li class="list-group-item list-group-item-action">Nutrition</li>
<li class="list-group-item list-group-item-action">
Pest Control
</li>
<li class="list-group-item list-group-item-action">Vaccinations</li>
</ul>
با این خروجی:
در اینجا برای تشکیل لیستی با ظاهری شکیلتر، میتوان ابتدا کلاس list-group را به ul انتساب داد و سپس به هر کدام از liهای آن کلاس list-group-item انتساب داده میشود. با افزودن کلاس active به اولین مورد، ظاهر آن با رنگی متمایز نمایان میشود. همچنین اگر علاقمند بودیم تا هر کدام از آیتمها با عبور ماوس بر روی آنها، با رنگ ملایمی مشخص شوند، میتوان از کلاس list-group-item-action استفاده کرد.
این list-group را بر روی لینکها و دکمهها نیز میتوان همانند قبل اعمال کرد:
<div class="list-group mb-3">
<a class="list-group-item active" href="#">Grooming</a>
<a class="list-group-item list-group-item-action list-group-item-success"
href="#">Nutrition</a>
<a class="list-group-item list-group-item-action list-group-item-info"
href="#">
Pest Control
</a>
<a class="list-group-item list-group-item-action list-group-item-warning"
href="#">Vaccinations</a>
</div>
با این خروجی:
در اینجا از کلاسهایی مانند list-group-item-warning برای تغییر رنگ پس زمینهی هر آیتم میتوان کمک گرفت.
برای تعریف badge برای هر آیتم، میتوان به صورت زیر عمل کرد:
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
Nutrition
<span class="badge badge-info badge-pill">12</span>
</li>
با این خروجی:
با اعمال کلاسهای badge، این نشان نمایش داده میشود؛ اما دقیقا در کنار متن Nutrition در اینجا. برای اینکه آنرا به سمت دیگر این ردیف منتقل و همچنین تراز عمودی آنرا نیز به میانهی صفحه تنظیم کنیم، میتوان از Flexbox کمک گرفت. با اعمال d-flex، این ردیف تبدیل به یک Flexbox container میشود و سپس میتوان کلاسهای مخصوص Flexbox مانند justify-content-between و align-items-center را به این ردیف اعمال کرد تا ترازهای عمودی و افقی آیتمهای قرار گرفتهی درون آن تغییر کنند.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: Bootstrap4_08.zip