دليل Bootstrap4 الأساسي

قائمة التساقط Bootstrap4 مجموعة القوائم Bootstrap4

بطاقة Bootstrap4 (Card)

أدخل Bootstrap4 عنصرًا جديدًا ومرنًا ومتسعًا لصندوق المحتوى card لتحل محل العناصر القديمة مثل panel وwell وthumbnail. يشمل خيارات الرأس والقدم، أنواع مختلفة من المحتوى، ألوان سياقية وأدوات عرض قوية. في الجزء التالي، ستشاهد كيفية استخدام عنصر card.

بطاقة بسيطة

نستطيع إنشاء بطاقة بسيطة باستخدام .card و .card-body في Bootstrap4، مثل المثال التالي:

مثال

<!DOCTYPE　html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>بطاقة بسيطة</h2>
　　<div　class="card">
　　　　<div　class="card-body">بطاقة بسيطة</div>
　　</div>
</div>
</body>

اختبار النظرية </>',

بطاقات Bootstrap4 تشبه لوحات Bootstrap 3، صور النماذج، well.

الرأس والجزء السفلي

.card-header用于إنشاء تنسيق رأس البطاقة، .card-footer用于إنشاء تنسيق الجزء السفلي للبطاقة:

مثال

<!DOCTYPE　html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>الرأس والجزء السفلي للبطاقة</h2>
　　<div　class="card">
　　　　<div　class="card-header">الرأس</div>
　　　　<div　class="card-body">المحتوى</div>　
　　　　<div　class="card-footer">الجزء السفلي</div>
　　</div>
</div>
</body>

اختبار النظرية </>',

بطاقات بألوان متعددة

Bootstrap 4 يقدم مجموعة متنوعة من أنواع بطاقات الألوان الخلفية: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark و .bg-light。

مثال

<!DOCTYPE　html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>بطاقات بألوان متعددة</h2>
　　<div　class="card">
　　　　<div　class="card-body">بطاقة أساسية</div>
　　</div>
　　<br>
　　<div　class="card　bg-primary　text-white">
　　　　<div　class="card-body">بطاقة رئيسية</div>
　　</div>
　　<br>
　　<div　class="card　bg-success　text-white">
　　　　<div　class="card-body">بطاقة نجاح</div>
　　</div>
　　<br>
　　<div　class="card　bg-info　text-white">
　　　　<div　class="card-body">بطاقة معلوماتية</div>
　　</div>
　　<br>
　　<div　class="card　bg-warning　text-white">
　　　　<div　class="card-body">بطاقة تحذيرية</div>
　　</div>
　　<br>
　　<div　class="card　bg-danger　text-white">
　　　　<div　class="card-body">بطاقة خطيرة</div>
　　</div>
　　<br>
　　<div　class="card　bg-secondary　text-white">
　　　　<div　class="card-body">بطاقة ثانوية</div>
　　</div>
　　<br>
　　<div　class="card　bg-dark　text-white">
　　　　<div　class="card-body">بطاقة مظلمة</div>
　　</div>
　　<br>
　　<div　class="card　bg-light　text-dark">
　　　　<div　class="card-body">بطاقة خفيفة</div>
　　</div>
</div>
</body>

اختبار النظرية </>',

العناوين، النصوص والروابط

يمكننا استخدام .card-title في عنصر الرأس لضبط عنوان البطاقة. .card-text تستخدم لضبط محتوى النص الداخلي للبطاقة. .card-link تستخدم لضبط لون الروابط.

مثال

<!DOCTYPE　html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>العناوين، النصوص والروابط</h2>
　　<div　class="card">
　　　　<div　class="card-body">
　　　　　　<h4　class="card-title">عنوان بطاقة</h4>
　　　　　　<p　class="card-text">نصُ عينةُ نصي بعض نصي بعض نصي.</p>
　　　　　　<a　href="#"　class="card-link">رابط بطاقة</a>
　　　　　　<a　href="#"　class="card-link">رابط آخر</a>
　　　　</div>
　　</div>
</div>
</body>

اختبار النظرية </>',

بطاقة الصورة

يمكننا منح <img> إضافة .card-img-top (صورة في نص) أو .card-img-bottom (صورة في نص أسفل) لضبط بطاقة الصورة:

مثال

<!DOCTYPE　html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>بطاقة صورة</h2>
　　<p>صورة في الأعلى (card-img-top):</p>
　　<div　class="card"　style="width:400px">
　　　　<img　class="card-img-top"　src="https://static.oldtoolbag.com/images/mix/img_avatar.png"　alt="Card　image"　style="width:100%">
　　　　<div　class="card-body">
　　　　　　<h4 class="card-title">جون دو</h4>
　　　　　　<p　class="card-text">نصُ عينةُ نصي بعض نصي بعض نصي. جون دوي هو مهندس معماري ومهندس</p>
　　　　　　<a href="#" class="btn btn-primary">انظر الملف الشخصي</a>
　　　　</div>
　　</div>
　　<br>
　　
　　<p>صورة في الأسفل (card-img-bottom):</p>
　　<div　class="card"　style="width:400px">
　　　　<div　class="card-body">
　　　　　　<h4　class="card-title">جين دوي</h4>
　　　　　　<p　class="card-text">نصُ عينةُ نصي بعض نصي بعض نصي. جين دوي هي مهندسة معمارية ومهندسة</p>
　　　　　　<a href="#" class="btn btn-primary">انظر الملف الشخصي</a>
　　　　</div>
　　　　<img　class="card-img-bottom"　src="https://static.oldtoolbag.com/images/mix/img_avatar.png"　alt="Card　image"　style="width:100%">
　　</div>
</div>
</body>

اختبار النظرية </>',

إذا كان يتم إعداد الصورة كخلفية، يمكن استخدام صفتي .card-img-overlay:

مثال

<!DOCTYPE　html>
<html>
<head>
　　<title>مثال Bootstrap</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　نص غطاء الصورة
　　إذا كان يتم إعداد الصورة كخلفية، يمكن استخدام صفتي .card-img-overlay:
　　<div　class="card　img-fluid"　style="width:500px">
　　　　<img　class="card-img-top"　src="https://static.oldtoolbag.com/images/mix/img_avatar.png"　alt="Card　image"　style="width:100%">
　　　　<div class="card-img-overlay">
　　　　　　<h4 class="card-title">جون دو</h4>
　　　　　　<p class="card-text">نص مثال نصي بعض النصوص المثالية. نص مثال نصي بعض النصوص المثالية. نص مثال نصي بعض النصوص المثالية. نص مثال نصي بعض النصوص المثالية. نص مثال نصي بعض النصوص المثالية.</p>
　　　　　　<a href="#" class="btn btn-primary">انظر الملف الشخصي</a>
　　　　</div>
　　</div>
</div>
</body>

اختبار النظرية </>',

قائمة التساقط Bootstrap4 مجموعة القوائم Bootstrap4