در این بخش به بررسی کارت ها در بوت استرپ (Bootstrap cards) می‌پردازیم. کارت ها در بوت استرپ، قاب‌هایی انعطاف پذیر و قابل گسترش هستند که امکان نمایش محتوا را با گزینه ها و ترکیب های متنوع فراهم می‌کنند. یک کارت می‌تواند شامل بخش هایی مانند عنوان (header)، پاورقی (footer)، محتوای مختلف، رنگ پس زمینه متناسب با موضوع و گزینه های متنوع برای نمایش باشد.
کارت ساده در بوت استرپ
برای ایجاد یک کارت ساده، از کلاس .card استفاده کنید. توجه داشته باشید که کارت ها به صورت پیش‌فرض هیچ فاصله‌ای با اطراف ندارند. بنابراین برای ایجاد فاصله، باید از کلاس های مخصوص فاصله گذاری استفاده کنید.
در اینجا نمونه‌ای از یک کارت ساده با محتوای ترکیبی و عرض ثابت نمایش داده شده است. کارت ها به صورت پیش‌فرض تمام عرض عنصر والد خود را پوشش می‌دهند زیرا دارای عرض ثابت نیستند. البته با استفاده از گزینه های مختلف تنظیم اندازه، میتوانید به راحتی ظاهر کارت را مطابق نیاز خود تغییر دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card" style="width: 15rem;"> <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5>A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> <a href="#" class="btn btn-primary">Get More information</a> </div> </div> </body> </html> |
انواع محتوا
کارت ها در بوت استرپ از انواع مختلف محتوا پشتیبانی می‌کنند؛ از جمله تصویر، متن، گروه‌های لیستی (list groups) و لینک ها. در ادامه چند نمونه از محتواهایی که کارت از آن‌ها پشتیبانی می‌کند را مشاهده می‌کنید.
بدنه کارت (Card Body)
هر زمان که نیاز دارید بخشی از کارت دارای فضای داخلی (padding) باشد، از کلاس .card-body استفاده کنید. این کلاس محتوای داخل کارت را از لبه ها فاصله می‌دهد و باعث مرتب و خواناتر شدن نمایش عناصر داخلی می‌شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card"> <div class="card-body"> Card body section. </div> </div> </body> </html> |
عنوان، متن و لینک ها در کارت بوت استرپ
- برای افزودن عنوان به کارت، کافی است کلاس
.card-titleرا به تگ<h*>اختصاص دهید. به همین ترتیب، میتوانید لینک ها را نیز با استفاده از کلاس.card-linkدرون تگ<a>اضافه و استایل دهی کنید. - برای اینکه عنوان و زیرعنوان به صورت مرتب در کنار هم قرار بگیرند، باید عناصر
.card-titleو.card-subtitleرا داخل عنصر.card-bodyقرار دهید. برای تعریف زیرعنوان نیز از کلاس.card-subtitleروی یک تگ<h*>استفاده می‌شود. این ترکیب باعث هماهنگی بصری بهتر و ساختار منظم‌تر در نمایش کارت ها می‌شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Mr. Jhon</h5> <h6 class="card-subtitle mb-2 text-body-secondary">HR</h6> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> <a href="#" class="card-link">More info</a> </div> </div> </body> </html> |
تصاویر در کارت بوت استرپ
- برای قرار دادن تصویر در بالای کارت، از کلاس
.card-img-topاستفاده کنید. این کلاس تصویر را در بالاترین بخش کارت نمایش می‌دهد و به آن ساختار بصری جذاب‌تری می‌بخشد. - برای افزودن متن به کارت، از کلاس
.card-textبهره بگیرید. محتوای داخل این بخش را میتوانید با استفاده از تگ های استاندارد HTML استایل‌دهی کنید. این امکان باعث می‌شود متن ها نه تنها به خوبی در کارت نمایش داده شوند، بلکه بتوان آن‌ها را به شکل دلخواه نیز فرمت کرد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card" style="width: 18rem;"> <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."> <div class="card-body"> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> </div> </div> </body> </html> |
گروه‌های لیستی (List Groups)
برای ایجاد لیست محتوا در داخل کارت، میتوانید از گروه‌های لیستی استفاده کنید. اگر می‌خواهید این لیست ها بدون فاصله و به‌صورت هم‌سطح با لبه‌های کارت نمایش داده شوند، باید از کلاس .list-group-flush استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card" style="width: 18rem;"> <ul class="list-group list-group-flush"> <li class="list-group-item">Item 1</li> <li class="list-group-item">Item 2</li> <li class="list-group-item">Item 3</li> </ul> </div> </body> </html> |
برای ساخت لیست‌هایی که دارای عنوان (سربرگ) هستند، میتوانید از گروه‌های لیستی هم‌سطح (flush) استفاده کنید. برای این کار، عنوان را با استفاده از کلاس .card-header به گروه لیست کارت اضافه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card" style="width: 18rem;"> <div class="card-header"> Header </div> <ul class="list-group list-group-flush"> <li class="list-group-item">Item 1</li> <li class="list-group-item">Item 2</li> <li class="list-group-item">Item 3</li> </ul> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
برای ایجاد لیست‌هایی که دارای بخش پایانی (فوتر) هستند، میتوانید از گروه‌های لیستی هم‌سطح (flush) استفاده کنید. برای افزودن فوتر به گروه لیست کارت، کافی است از کلاس .card-footer استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card" style="width: 18rem;"> <ul class="list-group list-group-flush"> <li class="list-group-item">Item 1</li> <li class="list-group-item">Item 2</li> <li class="list-group-item">Item 3</li> </ul> <div class="card-footer"> Card Footer </div> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
ترکیب کامل محتوا (Kitchen Sink)
برای ساخت یک کارت کامل و غنی، میتوانید چندین نوع محتوا را با هم ترکیب کنید. این محتوا می‌تواند شامل تصویر، بلوک‌های متنی، استایل‌های مختلف متن و گروه های لیستی باشد. در نمونه زیر، تمام این عناصر درون یک کارت با عرض ثابت قرار گرفته‌اند تا ساختار کلی و یکپارچه‌ای ایجاد شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card" style="width: 18rem;"> <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item">Item 1</li> <li class="list-group-item">Item 2</li> <li class="list-group-item">Item 3</li> </ul> <div class="card-body"> <a href="#" class="card-link">Link 1</a> <a href="#" class="card-link">Link 2</a> </div> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
سربرگ و پاورقی در کارت بوت استرپ
در صورت نیاز، میتوانید به کارت خود سربرگ (header) و پاورقی (footer) اضافه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card"> <div class="card-header"> Card Header </div> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> <a href="#" class="btn btn-primary">Get more info</a> </div> <div class="card-footer"> Card Footer </div> </div> </body> </html> |
میتوانید ظاهر سربرگ کارت را با افزودن کلاس .card-header به یک عنصر عنوان مانند <h*> سفارشی‌سازی کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card"> <h5 class="card-header">Card Header</h5> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> <a href="#" class="btn btn-primary">Get more info</a> </div> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
برای برجسته کردن یک نقل قول درون کارت، میتوانید کلاس .blockquote را همراه با کلاس .mb-0 به عنصر نقل قول اضافه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card"> <div class="card-header"> Quote </div> <div class="card-body"> <blockquote class="blockquote mb-0"> <p>blockquote element</p> <footer class="blockquote-footer">Blockquote footer <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
برای تراز کردن تمام متن کارت در وسط، کافی است کلاس .text-center را به کارت اضافه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card text-center"> <div class="card-header"> Rose </div> <div class="card-body"> <h5 class="card-title">A rose is a flower that people in love give each other.</h5> <p class="card-text">Roses have multi-layered petals and smell wonderfully sweet. They come in a wide variety of colors that can convey various meanings.</p> <a href="#" class="btn btn-primary">More info</a> </div> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
اندازه کارت در بوت استرپ
عرض کارت به صورت پیش فرض 100 درصد است، مگر این که به شکل دیگری مشخص شود. میتوانید اندازه کارت را با استفاده از CSS سفارشی، کلاس های گرید، میکسین های Sass مربوط به گرید یا ابزارهای کمکی (utilities) تنظیم کنید.
استفاده از ساختار گرید در کارت
برای قرار دادن کارت ها در قالب ستون ها و ردیف ها، از سیستم گرید استفاده کنید. کافی است کارت ها را درون ساختار گرید قرار دهید تا بتوانید چیدمان آن ها را به صورت دلخواه مدیریت کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="row"> <div class="col-sm-6 mb-3 mb-sm-0"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> <a href="#" class="btn btn-primary">Get more info</a> </div> </div> </div> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> <a href="#" class="btn btn-primary">Get more info</a> </div> </div> </div> </div> </body> </html> |
استفاده از ابزارهای کمکی (Utilities)
برای تنظیم سریع عرض کارت، میتوانید از ابزارهای تغییر اندازه (resizing utilities) که در بوت استرپ موجود هستند استفاده کنید. این ابزارها به شما اجازه می‌دهند بدون نیاز به نوشتن CSS سفارشی، اندازه کارت را به سرعت تغییر دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card w-75 mb-3"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content..</p> <a href="#" class="btn btn-primary">Card Button</a> </div> </div> <div class="card w-50"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> <a href="#" class="btn btn-primary">Card Button</a> </div> </div> </body> </html> |
استفاده از CSS سفارشی
برای تعیین عرض کارت، میتوانید از CSS سفارشی در فایل استایل یا به صورت استایل داخلی (inline style) استفاده کنید. این روش به شما امکان می‌دهد اندازه کارت را دقیقاً مطابق نیاز خود تنظیم کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> <a href="#" class="btn btn-primary">Get more info</a> </div> </div> </body> </html> |
تراز متن کارت در بوت استرپ
کلاس های تراز متن (Text Alignment) به شما این امکان را می‌دهند که به سرعت نحوه قرارگیری متن را در کل کارت یا بخش های خاصی از آن تغییر دهید. با استفاده از این کلاس ها میتوانید متن را به صورت چپ‌چین، راست‌چین یا وسط‌چین نمایش دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card mb-3" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">The text alignment of the card at the left.</p> <a href="#" class="btn btn-primary">Get more info</a> </div> </div> <div class="card text-center mb-3" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">The text alignment of the card at the center.</p> <a href="#" class="btn btn-primary">Get more info</a> </div> </div> <div class="card text-end" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">The text alignment of the card at the right.</p> <a href="#" class="btn btn-primary">Get more info</a> </div> </div> </body> </html> |
ناوبری
برای افزودن بخش ناوبری به سربرگ یا بدنه کارت، میتوانید از کامپوننت های ناوبری بوت استرپ استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card text-center"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item"> <a class="nav-link active" aria-current="true" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link disabled">About us</a> </li> </ul> </div> <div class="card-body"> <h5 class="card-title">Rose</h5> <p class="card-text">Roses have multi-layered petals and smell wonderfully sweet. They come in a wide variety of colors that can convey various meanings.</p> <a href="#" class="btn btn-primary">Get more info</a> </div> </div> </body> </html> |
برای استفاده از کامپوننت های ناوبری بوت استرپ، کلاس .nav-pills را به عنصر ناوبری اضافه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card text-center"> <div class="card-header"> <ul class="nav nav-pills card-header-pills"> <li class="nav-item"> <a class="nav-link active" href="#" >Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link disabled">About us</a> </li> </ul> </div> <div class="card-body"> <h5 class="card-title">Rose</h5> <p class="card-text">Roses have multi-layered petals and smell wonderfully sweet. They come in a wide variety of colors that can convey various meanings.</p> <a href="#" class="btn btn-primary">Get more info</a> </div> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
تصاویر
کارت ها گزینه های متنوعی برای نمایش تصویر دارند. میتوانید تصویری را در بالا یا پایین کارت قرار دهید (مشابه بخش سرصفحه یا پاورقی)، تصویر را به صورت هم‌پوشانی روی محتوای کارت نمایش دهید، یا به سادگی تصویر را داخل کارت جاسازی کنید.
تصویر بالا و پایین کارت (Image Cap)
میتوانید تصویر را به عنوان بخش بالایی یا پایینی کارت قرار دهید. این نوع قرارگیری که به آن “image cap” گفته می‌شود، مشابه با عملکرد سرصفحه و پاورقی کارت است و ظاهر حرفه‌ای‌تری به کارت می‌دهد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card mb-3"> <img src="\bootstrap\images\tutimg2.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> <p class="card-text"><small class="text-body-secondary">2 mins ago</small></p> </div> </div> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> <p class="card-text"><small class="text-body-secondary">5 mins ago</small></p> </div> <img src="\bootstrap\images\tutimg2.jpg" class="card-img-bottom" alt="..."> </div> </body> </html> |
هم‌پوشانی تصویر (Image Overlay)
میتوانید یک تصویر را به عنوان پس زمینه کارت استفاده کنید و متن کارت را به صورت هم‌پوشانی روی آن قرار دهید. در این حالت، تصویر در پس‌زمینه قرار می‌گیرد و متن روی آن نمایش داده می‌شود. برای دستیابی به نتیجه بهتر، ممکن است برخی تصاویر نیاز به استایل‌دهی اضافی یا استفاده از کلاس های کمکی (utility classes) داشته باشند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card text-bg-dark"> <img src="\bootstrap\images\tutimg2.jpg" class="card-img" alt="..."> <div class="card-img-overlay"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> <p class="card-text"><small>2 mins ago</small></p> </div> </div> </body> </html> |
نکته: توجه داشته باشید که متن یا محتوای داخل کارت نباید از ارتفاع تصویر بیشتر شود، چون در این صورت بخشی از محتوا از قاب تصویر خارج خواهد شد و ظاهر کارت به هم می‌ریزد.
کارت افقی در بوت استرپ
با ترکیب کلاس های گرید و ابزارهای کمکی، میتوانید کارت ها را به صورت افقی طراحی کنید؛ به گونه‌ای که هم در دستگاه های موبایل به‌درستی نمایش داده شوند و هم واکنش گرا باشند. در نمونه زیر، استفاده از کلاس .g-0 فاصله بین ستون ها را حذف می‌کند و کلاس های .col-md-* باعث می‌شوند اجزای کارت در نقاط شکست (breakpoints) مربوط به سایز متوسط (md) به صورت ردیفی (افقی) در کنار هم قرار بگیرند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card mb-3" style="max-width: 540px;"> <div class="row g-0"> <div class="col-md-4"> <img src="\bootstrap\images\tutimg.png" class="img-fluid rounded-start" alt="..."> </div> <div class="col-md-8"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> <p class="card-text"><small class="text-body-secondary">1 mins ago</small></p> </div> </div> </div> </div> </body> </html> |
استایل کارت (Card Styles)
بوت استرپ گزینه های متنوعی برای سفارشی‌سازی پس زمینه، حاشیه و رنگ کارت ها در اختیار شما قرار می‌دهد.
پس زمینه و رنگ متن
- با استفاده از کلاس های کمکی
.text-bg-{color}میتوانید به راحتی رنگ پس زمینه کارت را تعیین کنید و متن را با رنگی متضاد نمایش دهید تا خوانایی حفظ شود. - در نسخه های قبلی، برای استایل‌دهی به کارت ها باید کلاس های
.text-{color}و.bg-{color}را به صورت جداگانه ترکیب می‌کردید. البته هنوز هم میتوانید از آن روش استفاده کنید اگر ترجیح می‌دهید کنترل دقیق‌تری روی رنگ‌ها داشته باشید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card text-bg-primary mb-3" style="max-width: 18rem;"> <div class="card-header">Primary</div> <div class="card-body"> <p class="card-text">A card with primary background-color.</p> </div> </div> <div class="card text-bg-secondary mb-3" style="max-width: 18rem;"> <div class="card-header">Secondary</div> <div class="card-body"> <p class="card-text">A card with secondary background-color.</p> </div> </div> <div class="card text-bg-success mb-3" style="max-width: 18rem;"> <div class="card-header">Success</div> <div class="card-body"> <p class="card-text">A card with success background-color.</p> </div> </div> <div class="card text-bg-danger mb-3" style="max-width: 18rem;"> <div class="card-header">Danger</div> <div class="card-body"> <p class="card-text">A card with danger background-color.</p> </div> </div> <div class="card text-bg-warning mb-3" style="max-width: 18rem;"> <div class="card-header">Warning</div> <div class="card-body"> <p class="card-text">A card with warning background-color.</p> </div> </div> <div class="card text-bg-info mb-3" style="max-width: 18rem;"> <div class="card-header">Info</div> <div class="card-body"> <p class="card-text">A card with info background-color.</p> </div> </div> <div class="card text-bg-light mb-3" style="max-width: 18rem;"> <div class="card-header">light</div> <div class="card-body"> <p class="card-text">A card with light background-color.</p> </div> </div> <div class="card text-bg-dark mb-3" style="max-width: 18rem;"> <div class="card-header">Dark</div> <div class="card-body"> <p class="card-text">A card with dark background-color.</p> </div> </div> </body> </html> |
حاشیه کارت در بوت استرپ
با استفاده از کلاس های کمکی مربوط به حاشیه (border-utilities) میتوانید رنگ حاشیه کارت را تغییر دهید.
توجه داشته باشید که کلاس .text-{color} را می‌توان هم روی خود عنصر .card اعمال کرد و هم فقط روی بخشی از محتوای کارت، بسته به این که بخواهید رنگ متن کل کارت تغییر کند یا فقط بخش خاصی از آن.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card border-primary mb-3" style="max-width: 18rem;"> <div class="card-header">Primary</div> <div class="card-body text-primary"> <p class="card-text">A card with primary border-color.</p> </div> </div> <div class="card border-dark mb-3" style="max-width: 18rem;"> <div class="card-header">Dark</div> <div class="card-body"> <p class="card-text">A card with dark border-color.</p> </div> </div> <div class="card border-secondary mb-3" style="max-width: 18rem;"> <div class="card-header">Secondary</div> <div class="card-body text-secondary"> <p class="card-text">A card with secondary border-color.</p> </div> </div> <div class="card border-light mb-3" style="max-width: 18rem;"> <div class="card-header">Light</div> <div class="card-body"> <p class="card-text">A card with light border-color.</p> </div> </div> <div class="card border-danger mb-3" style="max-width: 18rem;"> <div class="card-header">Danger</div> <div class="card-body text-danger"> <p class="card-text">A card with light border-color.</p> </div> </div> <div class="card border-warning mb-3" style="max-width: 18rem;"> <div class="card-header">Warning</div> <div class="card-body"> <p class="card-text">A card with warning border-color.</p> </div> </div> <div class="card border-success mb-3" style="max-width: 18rem;"> <div class="card-header">Success</div> <div class="card-body text-success"> <p class="card-text">A card with success border-color.</p> </div> </div> <div class="card border-info mb-3" style="max-width: 18rem;"> <div class="card-header">Info</div> <div class="card-body"> <p class="card-text">A card with info border-color.</p> </div> </div> </body> </html> |
ابزارهای میکسین (Mixins Utilities)
اگر بخواهید ظاهر کارت را بیشتر شخصی‌سازی کنید، میتوانید حاشیه های بخش سربرگ و پاورقی را نیز تغییر دهید. همچنین، در صورت نیاز میتوانید رنگ پس زمینه این بخش ها را با استفاده از کلاس .bg-transparent حذف کنید تا به صورت شفاف نمایش داده شوند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card border-info mb-3" style="max-width: 18rem;"> <div class="card-header bg-transparent border-info">Card Header</div> <div class="card-body text-info"> <h5 class="card-title">Info card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> </div> <div class="card-footer bg-transparent border-info">Card Footer</div> </div> </body> </html> |
چیدمان کارت (Card Layout)
علاوه بر استایل‌دهی و سفارشی‌سازی محتوای کارت، بوت استرپ گزینه‌هایی برای چیدمان چند کارت در کنار هم نیز ارائه می‌دهد. اگر در حال گذراندن دوره طراحی سایت با بوت استرپ باشید، احتمالاً با این ساختارها آشنا شده‌اید؛ ساختارهایی که امکان نمایش منظم و هماهنگ چندین کارت را فراهم می‌کنند. توجه داشته باشید که این گزینه‌های چیدمان، در حال حاضر واکنش‌گرا نیستند. بخش‌های زیر نمونه‌هایی از این چیدمان‌ها را نشان می‌دهند.
گروه کارت ها (Card Groups)
گروه کارت ها مجموعه‌ای از کارت ها را به صورت یک عنصر متصل نمایش می‌دهند که در آن همه ستون ها دارای عرض و ارتفاع یکسان هستند. این گروه‌ها به صورت پشته‌ای (stacked) نمایش داده می‌شوند. از ویژگی display: flex; استفاده می‌شود تا کارت ها از نقطه شکست sm به بعد، به صورت یکنواخت در کنار هم قرار بگیرند.
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
برای استفاده از گروه کارت همراه با پاورقی، کافی است کارت ها را درون یک عنصر با کلاس .card-group قرار دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="card-group"> <div class="card"> <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> </div> <div class="card-footer"> <small class="text-body-secondary">1 mins ago</small> </div> </div> <div class="card"> <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> </div> <div class="card-footer"> <small class="text-body-secondary">2 mins ago</small> </div> </div> <div class="card"> <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> </div> <div class="card-footer"> <small class="text-body-secondary">3 mins ago</small> </div> </div> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
کارت های گریدی در بوت استرپ
- برای کنترل تعداد ستون هایی که کارت ها در هر ردیف اشغال می‌کنند، میتوانید از سیستم گرید در بوت استرپ و کلاس
.row-colsاستفاده کنید. این کلاس ها مشخص می‌کنند چند ستون در هر ردیف نمایش داده شود. - به عنوان مثال، استفاده از کلاس
.row-cols-1باعث می‌شود کارت ها به صورت ستونی (یکی در هر ردیف) نمایش داده شوند. همچنین، با افزودن کلاس.row-cols-md-2میتوانید تعیین کنید که از نقطه شکستmdبه بالا، کارت ها در دو ستون قرار بگیرند. در این حالت، اگر چهار کارت داشته باشید، آن‌ها در دو ردیف با دو کارت در هر ردیف نمایش داده می‌شوند و همگی عرض یکسان خواهند داشت.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="row row-cols-1 row-cols-md-2 g-4"> <div class="col"> <div class="card"> <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> </div> <div class="col"> <div class="card"> <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> </div> </div> </div> <div class="col"> <div class="card"> <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> </div> </div> </div> <div class="col"> <div class="card"> <img src="\bootstrap\images\tutimg.png" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> </div> </div> </div> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
اگر کلاس را به .row-cols-3 تغییر دهید، کارت چهارم به ردیف بعدی منتقل می‌شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="row row-cols-1 row-cols-sm-3 g-5"> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> </div> </div> </div> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content.A card is a flexible and extensible container for content</p> </div> </div> </div> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content.</p> </div> </div> </div> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> </div> </div> </div> <div class="col"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> </div> </div> </div> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
زمانی که می‌خواهید همه کارت ها ارتفاع یکسانی داشته باشند، کافی است کلاس .h-100 را به هر کارت اضافه کنید. این کلاس باعث می‌شود ارتفاع کارت تا 100 درصد ارتفاع عنصر والد افزایش یابد.
اگر می‌خواهید این رفتار به صورت پیش فرض برای تمام کارت ها اعمال شود، میتوانید در فایل Sass مقدار متغیر $card-height را برابر با 100% قرار دهید. این کار باعث می‌شود تمام کارت ها به طور خودکار ارتفاع یکسان داشته باشند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="row row-cols-1 row-cols-sm-3 g-5"> <div class="col"> <div class="card h-100"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> </div> </div> </div> <div class="col"> <div class="card h-100"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content.A card is a flexible and extensible container for content</p> </div> </div> </div> <div class="col"> <div class="card h-100"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content.</p> </div> </div> </div> <div class="col"> <div class="card h-100"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> </div> </div> </div> <div class="col"> <div class="card h-100"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> </div> </div> </div> </div> </body> </html> |
مشابه گروه کارت ها، پاورقی کارت ها نیز به صورت خودکار تنظیم و هم‌تراز می‌شوند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Card</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="row row-cols-1 row-cols-sm-3 g-4"> <div class="col"> <div class="card h-100"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> </div> <div class="card-footer"> <small class="text-body-secondary">1 mins ago</small> </div> </div> </div> <div class="col"> <div class="card h-100"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> </div> <div class="card-footer"> <small class="text-body-secondary">2 mins ago</small> </div> </div> </div> <div class="col"> <div class="card h-100"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">A card is a flexible and extensible container for content. A card is a flexible and extensible container for content.</p> </div> <div class="card-footer"> <small class="text-body-secondary">3 mins ago</small> </div> </div> </div> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
دوره آموزش طراحی وب سایت مدرسه با PHP و MySql
- انتشار: ۶ خرداد ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
