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

مجموعة القوائم Bootstrap4

مجموعات القائمة هي مكونات مفيدة ومرنة تستخدم لعرض قوائم العناصر بشكل جميل. في شكلها الأساسي، تكون قائمة الأساسيات مجرد قائمة غير مرتبة تحتوي على class .list-group، وعناصر القائمة تحتوي على class .list-group-item.

معظم مجموعات القائمة الأساسية غير مرتبة.

لإنشاء مجموعة قائمة، يمكنك إضافة class .list-group إلى عناصر <ul>، وفي يتم إضافة class .list-group إلى عناصر <li>:

مثال

<!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>
　　<ul　class="list-group">
　　　　<li class="list-group-item">البند الأول</li>
　　　　<li class="list-group-item">البند الثاني</li>
　　　　<li class="list-group-item">البند الثالث</li>
　　</ul>
</div>
</body>
</html>

اختبار النظرية <›/›

بعد التشغيل، النتيجة ستكون كالتالي:

عناصر القائمة في حالة التفعيل

لضبط عناصر القائمة في حالة التفعيل، يمكنك إضافة .active class:

مثال

<!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>
　　<ul　class="list-group">
　　　　<li class="list-group-item active">البند الفعّال</li>
　　　　<li class="list-group-item">البند الثاني</li>
　　　　<li class="list-group-item">البند الثالث</li>
　　</ul>
</div>
</body>
</html>

اختبار النظرية <›/›

عناصر القائمة غير الفعّالة

.disabled يتم استخدامها لضبط عناصر القائمة غير الفعّالة:

مثال

<!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>
　　<ul　class="list-group">
　　　　<li class="list-group-item disabled">البند غير الفعّال</li>
　　　　<li class="list-group-item">البند الثاني</li>
　　　　<li class="list-group-item">البند الثالث</li>
　　</ul>
</div>
</body>
</html>

اختبار النظرية <›/›

عنصر قائمة الروابط

لإنشاء قائمة من عناصر الروابط، يمكنك استبدال <ul> بـ <div> ، <a> استبدل <li>. إذا كنت تريد عرض خلفية رمادية عند التأمل في الفأرة، أضف كلاس .list-group-item-action:

مثال

<!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="list-group">
　　　　<a　href="#"　class="list-group-item　list-group-item-action">النقطة الأولى</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-action">النقطة الثانية</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-action">النقطة الثالثة</a>
　　</div>
</div>
</body>
</html>

اختبار النظرية <›/›

عناصر قائمة متعددة الألوان

لون عناصر القائمة يمكن تعيينه باستخدام القوائم التالية: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark و list-group-item-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>
　　<ul　class="list-group">
　　　　<li　class="list-group-item　list-group-item-success">النقطة الناجحة</li>
　　　　<li　class="list-group-item　list-group-item-secondary">النقطة الثانوية</li>
　　　　<li　class="list-group-item　list-group-item-info">النقطة المعلوماتية</li>
　　　　<li　class="list-group-item　list-group-item-warning">النقطة التحذيرية</li>
　　　　<li　class="list-group-item　list-group-item-danger">النقطة الخطيرة</li>
　　　　<li　class="list-group-item　list-group-item-primary">النقطة الرئيسية</li>
　　　　<li　class="list-group-item　list-group-item-dark">لائحة باللون الأزرق الفاتح</li>
　　　　<li　class="list-group-item　list-group-item-light">قائمة فاتحة</li>
　　</ul>
</div>
</body>
</html>

اختبار النظرية <›/›

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

مثال

<!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="list-group">
　　　　<a　href="#"　class="list-group-item　list-group-item-action">قائمة مفعمة</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-success">قائمة ناجحة</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-secondary">قائمة ثانوية</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-info">معلومات القائمة</a>
　　　　<a href="#" class="list-group-item list-group-item-warning">نموذج القائمة التحذيرية</a>
　　　　<a href="#" class="list-group-item list-group-item-danger">نموذج القائمة الخطيرة</a>
　　　　<a href="#" class="list-group-item list-group-item-primary">نموذج القائمة الرئيسية</a>
　　　　<a href="#" class="list-group-item list-group-item-dark">نموذج القائمة الداكنة</a>
　　　　<a href="#" class="list-group-item list-group-item-light">نموذج القائمة الفاتح</a>
　　</div>
</div>
</body>
</html>

اختبار النظرية <›/›

البطاقات Bootstrap4 الصفحات Bootstrap4