توفر بطاقات Bootstrap حاوية محتوى مرنة وقابلة للتوسيع مع متغيرات وخيارات متعددة.
حول
البطاقة عبارة عن حاوية محتوى مرنة وقابلة للتوسيع. يتضمن خيارات للرؤوس والتذييلات ومجموعة متنوعة من المحتوى وألوان الخلفية السياقية وخيارات العرض القوية. إذا كنت معتادًا على Bootstrap 3 ، فإن البطاقات تحل محل اللوحات القديمة والآبار والصور المصغرة. تتوفر وظائف مماثلة لتلك المكونات كفئة معدلة للبطاقات.
مثال
تم تصميم البطاقات بأقل قدر ممكن من الترميز والأنماط ، ولكنها لا تزال قادرة على توفير قدر كبير من التحكم والتخصيص. تم تصميمها باستخدام flexbox ، فهي توفر محاذاة سهلة وتختلط جيدًا مع مكونات Bootstrap الأخرى. ليس لديهم marginافتراضيًا ، لذا استخدم أدوات التباعد حسب الحاجة.
يوجد أدناه مثال على بطاقة أساسية ذات محتوى مختلط وعرض ثابت. ليس للبطاقات عرض ثابت للبدء ، لذلك سوف تملأ بشكل طبيعي العرض الكامل لعنصرها الأصلي. يتم تخصيص هذا بسهولة من خلال خيارات التحجيم المختلفة لدينا .
عنوان البطاقة
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
تدعم البطاقات مجموعة متنوعة من المحتويات ، بما في ذلك الصور والنصوص ومجموعات القوائم والروابط والمزيد. فيما يلي أمثلة على ما هو مدعوم.
الجسم
اللبنة الأساسية للبطاقة هي .card-body. استخدمه كلما احتجت إلى قسم مبطن داخل البطاقة.
هذا بعض النص داخل نص البطاقة.
العناوين والنصوص والروابط
يتم استخدام عناوين البطاقة عن طريق الإضافة .card-titleإلى <h*>العلامة. بنفس الطريقة ، يتم إضافة الروابط ووضعها بجانب بعضها البعض عن طريق إضافتها .card-linkإلى <a>علامة.
يتم استخدام الترجمات بإضافة علامة .card-subtitleإلى <h*>علامة. إذا تم وضع العناصر .card-titleوالعناصر .card-subtitleفي .card-bodyعنصر ، فسيتم محاذاة عنوان البطاقة والعنوان الفرعي بشكل جيد.
عنوان البطاقة
العنوان الفرعي للبطاقة
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
.card-img-topيضع صورة في الجزء العلوي من البطاقة. باستخدام .card-text، يمكن إضافة نص إلى البطاقة. يمكن أيضًا تصميم النص .card-textالموجود بعلامات HTML القياسية.
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
قائمة المجموعات
أنشئ قوائم محتويات في بطاقة بمجموعة قائمة متدفقة.
كراس جوستو أوديو
Dapibus ac facilisis في
الدهليز في إيروس
متميز
كراس جوستو أوديو
Dapibus ac facilisis في
الدهليز في إيروس
كراس جوستو أوديو
Dapibus ac facilisis في
الدهليز في إيروس
حوض المطبخ
امزج وطابق أنواع محتوى متعددة لإنشاء البطاقة التي تحتاجها ، أو قم برمي كل شيء فيها. الموضح أدناه هو أنماط الصور ، والكتل ، وأنماط النص ، ومجموعة القوائم — كلها ملفوفة في بطاقة ذات عرض ثابت.
عنوان البطاقة
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
لا تفترض البطاقات تحديدًا widthللبدء ، لذا ستكون بعرض 100٪ ما لم يُنص على خلاف ذلك. يمكنك تغيير هذا حسب الحاجة باستخدام CSS المخصص ، أو فئات الشبكة ، أو مزيج Sass الشبكي ، أو الأدوات المساعدة.
استخدام الترميز الشبكي
باستخدام الشبكة ، قم بلف البطاقات في أعمدة وصفوف حسب الحاجة.
تتضمن البطاقات بعض الخيارات للعمل مع الصور. اختر من بين إلحاق "قبعات صور" في أي من طرفي البطاقة ، أو تراكب الصور مع محتوى البطاقة ، أو ببساطة دمج الصورة في بطاقة.
قبعات الصورة
على غرار الرؤوس والتذييلات ، يمكن أن تشتمل البطاقات على "أحرف كبيرة للصور" أعلى وأسفل - صور أعلى أو أسفل البطاقة.
عنوان البطاقة
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
آخر تحديث منذ 3 دقائق
عنوان البطاقة
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
آخر تحديث منذ 3 دقائق
تراكبات الصور
حوّل صورة إلى خلفية بطاقة وقم بتراكب نص بطاقتك. اعتمادًا على الصورة ، قد تحتاج أو لا تحتاج إلى أنماط أو أدوات مساعدة إضافية.
عنوان البطاقة
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
آخر تحديث منذ 3 دقائق
لاحظ أن المحتوى يجب ألا يكون أكبر من ارتفاع الصورة. إذا كان المحتوى أكبر من الصورة ، فسيتم عرض المحتوى خارج الصورة.
أفقي
باستخدام مجموعة من فئات الشبكة والمرافق ، يمكن جعل البطاقات أفقية بطريقة سهلة الاستخدام وسريعة الاستجابة. في المثال أدناه ، نزيل المزاريب الشبكية .no-guttersونستخدم .col-md-*الفئات لجعل البطاقة أفقية عند mdنقطة التوقف. قد تكون هناك حاجة إلى مزيد من التعديلات اعتمادًا على محتوى بطاقتك.
عنوان البطاقة
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
آخر تحديث منذ 3 دقائق
أنماط البطاقة
تتضمن البطاقات خيارات متنوعة لتخصيص خلفياتها وحدودها ولونها.
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
رأس
عنوان البطاقة الثانوية
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
رأس
عنوان بطاقة النجاح
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
رأس
عنوان بطاقة الخطر
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
رأس
عنوان بطاقة التحذير
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
رأس
عنوان بطاقة المعلومات
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
رأس
عنوان بطاقة خفيف
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
رأس
عنوان بطاقة معتم
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
إيصال المعنى للتقنيات المساعدة
يوفر استخدام اللون لإضافة معنى فقط إشارة مرئية ، والتي لن يتم نقلها إلى مستخدمي التقنيات المساعدة - مثل قارئات الشاشة. تأكد من أن المعلومات التي يشير إليها اللون إما واضحة من المحتوى نفسه (مثل النص المرئي) ، أو يتم تضمينها من خلال وسائل بديلة ، مثل النص الإضافي المخفي مع .sr-onlyالفصل.
الحدود
استخدم أدوات الحدود لتغيير border-colorالبطاقة فقط. لاحظ أنه يمكنك وضع .text-{color}فئات على الوالد .cardأو مجموعة فرعية من محتويات البطاقة كما هو موضح أدناه.
رأس
عنوان البطاقة الأساسية
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
رأس
عنوان البطاقة الثانوية
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
رأس
عنوان بطاقة النجاح
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
رأس
عنوان بطاقة الخطر
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
رأس
عنوان بطاقة التحذير
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
رأس
عنوان بطاقة المعلومات
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
رأس
عنوان بطاقة خفيف
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
رأس
عنوان بطاقة معتم
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
المرافق Mixins
يمكنك أيضًا تغيير الحدود على رأس البطاقة وتذييلها حسب الحاجة ، وحتى إزالتها background-colorبـ .bg-transparent.
رأس
عنوان بطاقة النجاح
بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.
تخطيط البطاقة
بالإضافة إلى تصميم المحتوى داخل البطاقات ، يتضمن Bootstrap بعض الخيارات لوضع سلسلة من البطاقات. في الوقت الحالي ، لا تستجيب خيارات التخطيط هذه بعد .
مجموعات البطاقات
استخدم مجموعات البطاقات لعرض البطاقات كعنصر واحد متصل بأعمدة عرض وارتفاع متساوية. تبدأ مجموعات البطاقات مكدسة وتستخدم display: flex;لتصبح متصلة بأبعاد موحدة بدءًا من smنقطة التوقف.
عنوان البطاقة
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
آخر تحديث منذ 3 دقائق
عنوان البطاقة
تحتوي هذه البطاقة على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
آخر تحديث منذ 3 دقائق
عنوان البطاقة
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. تحتوي هذه البطاقة على محتوى أطول من البطاقة الأولى التي تظهر حركة الارتفاع المتساوية.
آخر تحديث منذ 3 دقائق
عند استخدام مجموعات البطاقات مع التذييلات ، سيصطف محتواها تلقائيًا.
عنوان البطاقة
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
عنوان البطاقة
تحتوي هذه البطاقة على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
عنوان البطاقة
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. تحتوي هذه البطاقة على محتوى أطول من البطاقة الأولى التي تظهر حركة الارتفاع المتساوية.
طوابق البطاقة
هل تحتاج إلى مجموعة من بطاقات العرض والارتفاع المتساوية غير المرفقة ببعضها البعض؟ استخدم أوراق اللعب.
عنوان البطاقة
هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
آخر تحديث منذ 3 دقائق
عنوان البطاقة
تحتوي هذه البطاقة على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
آخر تحديث منذ 3 دقائق
عنوان البطاقة
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. تحتوي هذه البطاقة على محتوى أطول من البطاقة الأولى التي تظهر حركة الارتفاع المتساوية.
آخر تحديث منذ 3 دقائق
تمامًا كما هو الحال مع مجموعات البطاقات ، سيتم ترتيب تذييلات البطاقات في الطوابق تلقائيًا.
عنوان البطاقة
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
عنوان البطاقة
تحتوي هذه البطاقة على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
عنوان البطاقة
هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. تحتوي هذه البطاقة على محتوى أطول من البطاقة الأولى التي تظهر حركة الارتفاع المتساوية.
بطاقات الشبكة
استخدم نظام شبكة Bootstrap وفئاته .row-colsللتحكم في عدد أعمدة الشبكة (الملتفة حول البطاقات) التي تظهر في كل صف. على سبيل المثال ، فيما .row-cols-1يلي تخطيط البطاقات على عمود واحد ، .row-cols-md-2وتقسيم أربع بطاقات لعرض متساوٍ عبر صفوف متعددة ، من نقطة الفصل المتوسطة إلى الأعلى.
عنوان البطاقة
هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
عنوان البطاقة
هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
عنوان البطاقة
هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
عنوان البطاقة
هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
قم بتغييره إلى .row-cols-3وسترى التفاف البطاقة الرابع.
عنوان البطاقة
هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
عنوان البطاقة
هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
عنوان البطاقة
هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
عنوان البطاقة
هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
عندما تحتاج إلى ارتفاع متساوٍ ، أضف .h-100إلى البطاقات. إذا كنت تريد ارتفاعات متساوية افتراضيًا ، فيمكنك تعيينها $card-height: 100%في Sass.
عنوان البطاقة
هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
عنوان البطاقة
هذه بطاقة قصيرة.
عنوان البطاقة
هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
عنوان البطاقة
هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
أعمدة البطاقة
يمكن تنظيم البطاقات في أعمدة تشبه الماسونية.card-columns باستخدام CSS فقط عن طريق تغليفها . تم تصميم البطاقات columnبخصائص CSS بدلاً من flexbox لتسهيل المحاذاة. يتم ترتيب البطاقات من أعلى إلى أسفل ومن اليسار إلى اليمين.
انتباه! قد تختلف الأميال الخاصة بك مع أعمدة البطاقة. لمنع البطاقات من كسر الأعمدة ، يجب علينا تعيينها على display: inline-blockأنها column-break-inside: avoidليست حلاً مضادًا للرصاص حتى الآن.
عنوان البطاقة الذي يلتف بسطر جديد
هذه بطاقة أطول تحتوي على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.
Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح قبل ذلك.
عنوان البطاقة
تحتوي هذه البطاقة على نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.
آخر تحديث منذ 3 دقائق
Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح.
عنوان البطاقة
تحتوي هذه البطاقة على عنوان منتظم وفقرة قصيرة من النص تحتها.
آخر تحديث منذ 3 دقائق
Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح قبل ذلك.
عنوان البطاقة
هذه بطاقة أخرى بعنوان ونص داعم أدناه. تحتوي هذه البطاقة على بعض المحتوى الإضافي لجعلها أطول قليلاً بشكل عام.
آخر تحديث منذ 3 دقائق
يمكن أيضًا تمديد أعمدة البطاقة وتخصيصها ببعض التعليمات البرمجية الإضافية. الموضح أدناه هو امتداد .card-columnsللفئة باستخدام نفس CSS التي نستخدمها - أعمدة CSS - لإنشاء مجموعة من المستويات المتجاوبة لتغيير عدد الأعمدة.