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

التنقل Bootstrap4 قائمة التوسع Bootstrap4

الطي Bootstrap4

يمكن لـ 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>
　　<p>بضغطة الزر، سيتم تبديل العرض والإخفاء للمحتوى.</p>
　　<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">تمديد بسيط</button>
　　<div id="demo" class="collapse">
　　　　أنا أتمنى لك، أنا أقدم لك،
لدينا تجارب محض في العمل والحياة. لدينا حياة صغيرة،
أنا الآن أعمل في وظيفة تدريبية غير مناسبة لي.
　　</div>
</div>
</body>
</html>

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

تحليل المثال

كلاس .collapse يستخدم لتعريف عنصر التمديد (مثل <div> في المثال). بعد الضغط على الزر، سيتم التبديل بين إخفاء وتظهر.

للتحكم في إخفاء وتظهر المحتويات، يجب إضافة خاصية data-toggle="collapse" على عناصر <a> أو <button>. خصية data-target="#id" تشير إلى المحتوى المتباين (مثل <div id="demo">).

ملاحظة: <a> يمكنك استخدام خاصية href على العنصر لتحل محل data-target خصائص:

مثال

<!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>
　　<a href="#demo" class="btn btn-primary" data-toggle="collapse">تمديد بسيط</a>
　　<div id="demo" class="collapse">
　　　　أنا أتمنى لك، أنا أقدم لك،
لدينا تجارب محض في العمل والحياة. لدينا حياة صغيرة،
أنا الآن أعمل في وظيفة تدريبية غير مناسبة لي.
　　</div>
</div>
</body>
</html>

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

بالتأكيد، يتم إخفاء محتويات التمديد بشكل افتراضي، يمكنك إضافة كلاس .show لتظهر المحتويات بشكل افتراضي:

مثال

<!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>يمكنك إضافة كلاس .show لتظهر المحتويات بشكل افتراضي:</p>
　　<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">تمديد بسيط</button>
　　<div id="demo" class="collapse show">
　　　　أنا أتمنى لك، أنا أقدم لك،
لدينا تجارب محض في العمل والحياة. لدينا حياة صغيرة،
أنا الآن أعمل في وظيفة تدريبية غير مناسبة لي.
　　</div>
</div>
</body>
</html>

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

في هذا المثال، يتم عرض الأكورديون البسيط من خلال توسيع عنصر البطاقة.

ملاحظة: استخدام خاصية data-parent لضمان أن جميع عناصر التبويب في العنصر الأم المحدد، مما يتيح إخفاء العناصر الأخرى عند عرض خيار التبويب.

مثال

<!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><strong>ملاحظة:</strong> استخدم خاصية <strong>data-parent</strong> لضمان أن تكون جميع عناصر التقليل في العنصر الأم المحدد، وبذلك يمكنك إخفاء الخيارات الأخرى عند عرض خيار واحد.</p>
　　<div id="accordion">
　　　　<div class="card">
　　　　　　<div class="card-header">
　　　　　　　　<a class="card-link" data-toggle="collapse" href="#collapseOne">
　　　　　　　　　　خيار واحد
　　　　　　　　</a>
　　　　　　</div>
　　　　　　<div id="collapseOne" class="collapse show" data-parent="#accordion">
　　　　　　　　<div class="card-body">
　　　　　　　　　　#1 محتوى: تعليم الأساسيات (oldtoolbag.com) -- تعلم الأساسيات، حتى تستطيع الذهاب أبعد！！!
　　　　　　　　</div>
　　　　　　</div>
　　　　</div>
　　　　<div class="card">
　　　　　　<div class="card-header">
　　　　　　　　<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
　　　　　　　　خيار ثان
　　　　　　</a>
　　　　　　</div>
　　　　　　<div id="collapseTwo" class="collapse" data-parent="#accordion">
　　　　　　　　<div class="card-body">
　　　　　　　　　　#2 محتوى: تعليمية الأساس (oldtoolbag.com) -- تعلم الأساسيات لتحقيق المسافة الأكبر！！！
　　　　　　　　</div>
　　　　　　</div>
　　　　</div>
　　　　<div class="card">
　　　　　　<div class="card-header">
　　　　　　　　<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
　　　　　　　　　　خيار ثالث
　　　　　　　　</a>
　　　　　　</div>
　　　　　　<div id="collapseThree" class="collapse" data-parent="#accordion">
　　　　　　　　<div class="card-body">
　　　　　　　　　　#3 محتوى: تعليمية الأساس (oldtoolbag.com) -- تعلم الأساسيات لتحقيق المسافة الأكبر！！！
　　　　　　　　</div>
　　　　　　</div>
　　　　</div>
　　</div>
</div>
　　　　
</body>
</html>

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

التنقل Bootstrap4 قائمة التوسع Bootstrap4