در این قسمت، شیوهنامههایی را بررسی میکنیم که به المانهای پر کاربردی مانند دکمهها، لیستها و نشانها اعمال میشوند.
شیوهنامههای کار با دکمهها در بوت استرپ 4
کلاس پایه ایجاد دکمههای بوت استرپی، کلاس btn است. البته آنرا میتوان با کلاسهای دیگری نیز ترکیب کرد:
- کلاس btn را میتوان بر روی المانهایی مانند anchor، button و input نیز اعمال کرد:
در این حالت تمام این المانها یکسان به نظر میرسند:
- برای تعیین رنگ اجباری دکمههای بوت استرپ، از فرمول زیر استفاده میشود؛ مانند btn-primary:
با این خروجی:
همانطور که ملاحظه میکنید، رنگ این دکمهها نیز نسبت به نگارش سوم آن، به روز رسانی شدهاست.
همچنین نگارش outline آنها نیز قابل تعریف است؛ مانند btn-outline-primary:
با این خروجی:
- کلاس btn-size که در اینجا size میتواند sm یا lg باشد و سبب ایجاد دکمههایی کوچک یا بزرگ میشوند.
- کلاس btn-block سبب میشود تا دکمهای کل عرض container را پر کند.
با این خروجی:
- امکان اعمال کلاسهای active و disabled نیز در اینجا میسر است:
با این خروجی:
تشکیل گروهی از دکمهها در بوت استرپ 4
برای تبدیل تعدادی از دکمهها به یک گروه، از کلاس btn-group استفاده میشود. همچنین امکان تشکیل گزینهی عمودی آن، با کلاس btn-group-vertical نیز وجود دارد. در این حالت دکمهها بجای نمایش افقی، به صورت یک ستون نمایش داده میشوند. کلاس btn-toolbar نیز برای تشکیل نوار ابزاری از دکمهها در نظر گرفته شدهاست. توسط کلاسهای btn-group-sm و یا btn-group-lg میتوان اندازهی این گروهها را تغییر داد.
با این خروجی:
در اینجا دو گروه از دکمهها تشکیل شدهاند که اینها را داخل یک btn-toolbar قرار دادهایم. همچنین تعریف aria-labelها به screen readers و معلولین کمک میکند.
به علاوه با استفاده از کلاسهای mb-2 و mr-2، سبب ایجاد margin بین این نوار ابزار با متن زیر آن و همچنین بین خود آنها شدهایم.
و حالت عمودی آن:
چنین شکلی را پیدا میکند:
کلاسهای جدید تشکیل Badges در بوت استرپ 4
برای تشکیل نشان/آرم از کلاس badge استفاده میشود و برای تغییر شکل آن میتوان از کلاس badge-pill کمک گرفت. برای تغییر رنگ آن نیز فرمول زیر وجود دارد:
یک مثال:
با این خروجی:
همانطور که مشاهده میکنید، یک badge همواره به اندازهی container آن در آمده و نمایش داده میشود.
ایجاد لیستی از آیتمها در بوت استرپ 4
بوت استرپ، کلاسهایی را برای ایجاد لیستهایی با ظاهر لیستهای اندرویدی به همراه دارد که در ادامه با مثالهایی آنها را بررسی خواهیم کرد.
با این خروجی:
این list-group را بر روی لینکها و دکمهها نیز میتوان همانند قبل اعمال کرد:
با این خروجی:
در اینجا از کلاسهایی مانند list-group-item-warning برای تغییر رنگ پس زمینهی هر آیتم میتوان کمک گرفت.
برای تعریف badge برای هر آیتم، میتوان به صورت زیر عمل کرد:
با این خروجی:
با اعمال کلاسهای badge، این نشان نمایش داده میشود؛ اما دقیقا در کنار متن Nutrition در اینجا. برای اینکه آنرا به سمت دیگر این ردیف منتقل و همچنین تراز عمودی آنرا نیز به میانهی صفحه تنظیم کنیم، میتوان از Flexbox کمک گرفت. با اعمال d-flex، این ردیف تبدیل به یک Flexbox container میشود و سپس میتوان کلاسهای مخصوص Flexbox مانند justify-content-between و align-items-center را به این ردیف اعمال کرد تا ترازهای عمودی و افقی آیتمهای قرار گرفتهی درون آن تغییر کنند.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: Bootstrap4_08.zip
شیوهنامههای کار با دکمهها در بوت استرپ 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