جستجو برای:
سبد خرید 0
  • خانه
  • آموزش وردپرس
  • قالب وردپرس
    • افزونه وردپرس
    • آموزش html
    • آموزش php
  • درباره ما
  • حساب کاربری
  • تماس با ما

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت
  • 02433763920 (ساعت 10 الی 14)
  • info@parniantarh.ir
perm_identity
سبد خرید 0
  • آخرین محصولات
  • آخرین مطالب آموزشی
0
پرنیان طرح
  • خانه
  • وردپرس
    • آموزش وردپرس
    • قالب وردپرس
    • افزونه وردپرس
  • آموزش برنامه نویسی
    • آموزش bootstrap
    • آموزش android
    • آموزش php
    • آموزش html
    • آموزش css
    • آموزش JavaScript
    • مقالات آموزشی
  • آموزش فتوشاپ
  • تماس با ما
  • درباره ما
ورود و ثبت نام

وبلاگ

آموزش کارت ها (cards) در بوت استرپ

access_time۱۳۹۸-۰۷-۲۱
perm_identity ارسال شده توسط بهاره حسنی
folder_open آموزش bootstrap
visibility 324 بازدید

کارت ها در بوت استرپ به معنای جعبه هایی هستند که دور آن ها حاشیه دارد.

و داخل این حاشیه مقداری فاصله ما بین محتوا و حاشیه وجود دارد.

کارت ها شامل بخش های مختلفی هستند مثلا قسمت headers ، footers ، محتوا ، رنگ ها و غیره.

با عرض سلام و وقت بخیر خدمت کاربران عزیز وب سایت پرنیان طرح

در این آموزش مبحث cadrs ، کارت ها در بوت استرپ ۴ را به شما همراهان عزیز خواهیم آموخت.

کارت ها در بوت استرپ به معنای جعبه هایی هستند که دور آن ها حاشیه دارد.

در بوت استرپ کلاسهای آماده ای برای استفاده از کارت وجود دارد که انواع آن را به شما نشان میدهیم.

کارت ساده (Basic Card):

یک کارت ساده با استفاده از کلاس card. ایجاد میشود و محتویات داخل کارت کلاس card-body.  دارند.

مثال:

PHP
1
2
3
4
5
6
<div class="container">
<h2>Basic Card</h2>
<div class="card">
<div class="card-body">Basic card</div>
</div>
</div>

تصویر یک کارت ساده:

basic card

Header & Footer :

کلاس card-header.  یک عنوان را به کارت اضافه میکند و کلاس card-footer. یک پاورقی را به کارت اضافه میکند.

برای توضیح بیشتر این مثال را ببینید:

PHP
1
2
3
4
5
6
7
8
<div class="container">
<h2>Card Header and Footer</h2>
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
</div>

تصویر کلاسهای header & footer :

header & footer

کارت های متنی (Contextual Cards) :

برای افزودن رنگ پس زمینه به کارت از کلاسهای متنی استفاده کنید چند نمونه از کلاسهای متنی را در تمرین زیر استفاده کرده ایم.

مثال:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="container">
<h2>Cards with Contextual Classes</h2>
<div class="card">
<div class="card-body">Basic card</div>
</div>
<br>
<div class="card bg-primary text-white">
<div class="card-body">Primary card</div>
</div>
<br>
<div class="card bg-success text-white">
<div class="card-body">Success card</div>
</div>
<br>
<div class="card bg-info text-white">
<div class="card-body">Info card</div>
</div>
<br>
<div class="card bg-warning text-white">
<div class="card-body">Warning card</div>
</div>
</div>

تصویر پس زمینه با کلاس های متنی در کارت ها:

contexual cards

Titles ، Text and Links :

برای افزودن عنوان ها ، متن و لینک ها داخل محتوای کارت باید کلاس های آن را تعریف کنیم .

برای مثال در تمرین زیر کلاس های مربوط به افزودن عنوان و متن و لینک ها افزوده ایم.

مثال :

PHP
1
2
3
4
5
6
7
8
9
10
11
12
<div class="container">
<h2>Card titles, text, and links</h2>
<p>Use .card-title to add card titles to any heading element. The .card-text class is used to remove bottom margins for a p element if it is the last child (or the only one) in card-body. The .card-link class adds a blue color to any link, and a hover effect.</p>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>

در تصویر زیر خروجی مثال بالا را ببینید:

title link & text

Card Images :

میتوانید داخل کارت ها از تصاویر استفاده کنید تنها باید کلاس های مربوط به قرار گرفتن عکس در بالا یا پایین کارت را ببنویسید.

به مثال زبر توجه کنید:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="container">
<h2>Card Image</h2>
<p>Image at the top (card-img-top):</p>
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
<br>
 
<p>Image at the bottom (card-img-bottom):</p>
<div class="card" style="width:400px">
<div class="card-body">
<h4 class="card-title">Jane Doe</h4>
<p class="card-text">Some example text some example text. Jane Doe is an architect and engineer</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
<img class="card-img-bottom" src="img_avatar6.png" alt="Card image" style="width:100%">
</div>
</div>

تصویر مثال بالا:

card images

Card Image Overlay :

شما میتوانید تصویر را به پس زمینه تبدیل کنید و در کارت ها استفاده کنید کافیست کلاس پس زمینه کردن تصویر را به کدهای خود اضافه نمایید.

یک نمونه مثال :

PHP
1
2
3
4
5
6
7
8
9
10
11
12
<div class="container">
<h2>Card Image Overlay</h2>
<p>Turn an image into a card background and use .card-img-overlay to overlay the card's text:</p>
<div class="card img-fluid" style="width:500px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>

در تصویر زیر ، عکس به صورت پس زمینه استفاده شده است:

card image overlay

ستون های کارت (Card Calumns) :

کلاس card-calumns. شبکه ای از کارت ها را ایجاد میکند.

با اضافه کردن کارت های بیشتر ، طرح به طور خودکار تنطیم میشود.

به این مثال توجه کنید:

PHP
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
<div class="container">
<h2>Cards Columns</h2>
<p>The .card-columns class creates a masonry-like grid of cards. The layout will automatically adjust as you insert more cards.</p>
<p><strong>Note:</strong> The cards are displayed vertically on small screens (less than 576px):</p>
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
</div>
</div>
</div>

طرز قرار گرفتن کارت ها همانند تصویر زیر است:

card columns

Card Deck :

کلاس card-deck. یک شبکه از کارت ها ایجاد میکند که از نظر قد و عرض برابر هستند.

با وارد کردن کارت های بیشتر ، طرح به طور خودکار تنظیم میشود.

برای مثال:

PHP
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
<div class="container">
<h2>Card Deck</h2>
<p>The .card-deck class creates an <strong>equal height and width</strong> grid of cards. The layout will automatically adjust as you insert more cards.</p>
<p>In this example we have added extra content to the first card, to make it taller. Notice how the other cards follow.</p>
<p><strong>Note:</strong> The cards are displayed vertically on small screens (less than 576px):</p>
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
<p class="card-text">Some more text to increase the height</p>
<p class="card-text">Some more text to increase the height</p>
<p class="card-text">Some more text to increase the height</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
</div>
</div>

تصویر خروجی مثال بالا :

card deck

گروه کارت ها (Card Group):

این کلاس از کارتها نیز مانند مثال قبل است با این تفاوت که حاشیه های راست و چپ مابین کارت ها حذف میشود و کارت ها به هم میچسبند.

مثال :

PHP
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
<div class="container">
<h2>Card Group</h2>
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
</div>
</div>

در این تصویر خروجی کلاس کارت های به هم چسبیده را ببینید:

card group
Rate this post
برچسب ها: Basic cardbootstrap cardscard imagescardsستون های کارتکارت هاکارت ها در بوت استرپ


ارسال این مطلب برای دوستان خود :
مطالب زیر را حتما بخوانید
  • جستجو
    آموزش Filters در بوت استرپ

    147 بازدید

  • اشیا رسانه ای
    آموزش اشیاء رسانه ای در بوت استرپ

    162 بازدید

  • آیکون ها
    آیکون ها (Icons) در بوت استرپ

    177 بازدید

  • جعبه ی محتوا
    آموزش Flexbox در بوت استرپ

    190 بازدید

  • کلاس های کاربردی
    آموزش کلاس های کاربردی (Utilities) در بوت استرپ

    193 بازدید

جدید تر گروه های لیست (List Groups) در بوت استرپ
قدیمی تر چگونه مهندس کامپیوتر شویم

پاسخی بگذارید لغو پاسخ

جستجو برای:
  • جدید
  • محبوب
  • دیدگاه ها
قبلی بعدی
فروش ویژه
  • دانلود افزونه visual composer ویژوال کامپوزر + آموزش 45,000 تومان 28,000 تومان
  • دانلود افزونه ARForms نسخه نهایی - فرم ساز پیشرفته 25,000 تومان 19,000 تومان
  • دانلود افزونه WP Rocket -افزایش سرعت سایت وردپرس 57,000 تومان 26,000 تومان
  • ipts نرم افزار افزایش بازدید سایت و کاهش رتبه ipts نسخه نهایی
    امتیاز 2.00 از 5
    19,900 تومان 7,900 تومان
  • آموزش ووکامرس راه اندازه فروشگاه اینترنتی با ووکامرس
    امتیاز 5.00 از 5
    35,000 تومان 9,900 تومان
  • Munza | قالب چند منظوره وردپرس Munza | قالب چند منظوره وردپرس | قویترین پوسته 2019 79,000 تومان 49,000 تومان
  • فرم لاگین (ورود) متحرک و جذاب ورژن 1 - Login form 15,000 تومان 1,000 تومان
  • سئوی وردپرس Yoast پرمیوم | Yoast SEO Premium 49,000 تومان 34,000 تومان
دسته‌ها
  • #ویدئوها
  • آموزش
  • آموزش bootstrap
  • آموزش css
  • آموزش html
  • آموزش JavaScript
  • آموزش اندروید
  • آموزش قالب
  • آموزش های دامنه
  • اخبار وردپرس
  • برنامه نویسی php
  • دسته‌بندی نشده
  • فتوشاپ
  • قالب های html – css
  • کسب و کار آنلاین
  • مقاله ها
  • هاست سی پنل Cpanel
  • وردپرس
جدیدترین نوشته ها
  • نحوه افزودن افزونه های (plugins) فتوشاپ به عناصر فتوشاپ ۱۳۹۸-۰۹-۲۴
  • آماده سازی تصاویر برای پرینت کردن در فتوشاپ ۱۳۹۸-۰۹-۲۳
  • آموزش قدم به قدم استفاده از ابزار Fading در Photoshop ۱۳۹۸-۰۹-۲۲
  • آموزش قدم به قدم زوم کردن روی بخش هایی از تصویر ۱۳۹۸-۰۹-۲۱
  • نحوه افزودن رنگ به تصویر اسکن شده با فتوشاپ ۱۳۹۸-۰۹-۲۰
  • ۳ راه برای حذف متن از یک عکس در فتوشاپ (روش سوم) ۱۳۹۸-۰۹-۱۹
  • ۳ راه برای حذف متن از یک عکس در فتوشاپ (روش دوم) ۱۳۹۸-۰۹-۱۸
  • ۳ راه برای حذف متن از یک عکس در فتوشاپ (روش اول) ۱۳۹۸-۰۹-۱۷

درباره پرنیان طرح

ما در پرنیان طرح به دنبال جلب رضایت مشتری و تبدیل کاربران موقت به کاربران دائمی هستیم و با تیمی 4 نفره همه روزه در تلاشیم تا بهترین کیفیت و خدمات را برای شما محیا سازیم.




  • location_on
    زنجان ، میدان شورا ، مرکز رشد جهاد ، واحد 15
  • phone_android
    024-33763920
  • perm_phone_msg
    09190605638
  • email
    info@parniantarh.ir
تمامی حقوق متعلق به وبسایت پرنیان طرح میباشد.
طراحی شده با ❤️ در پرنیان طرح
keyboard_arrow_up