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

الموضوعات المتعددة Bootstrap4 أدوات صغيرة Bootstrap4

تخطيط Flex (إلاستيكي) في Bootstrap4

Bootstrap4 يستخدم كلاس flex للتحكم في ترتيب الصفحة.

صناديق التقلب (flexbox)

الفرق الأكبر بين Bootstrap 3 وBootstrap 4 هو أن Bootstrap 4 يستخدم صناديق التقلب لتصميم التركيب، وليس الفواصل.

صناديق التقلب هي نموذج جديد للتركيب في CSS3، يفضل التصميم التفاعلي، إذا لم تكن تعرف flex، يمكنك قراءة صناديق التقلب CSS3 (Flex Box) دليل

ملاحظة: لا يدعم IE9 وأقل منه نظام الصناديق المتقلبة، لذا إذا كنت بحاجة إلى التكامل مع IE8-9، استخدم Bootstrap 3.

في هذا المثال، يتم إنشاء صندوق محول باستخدام كلاس d-flex، وضبط ثلاثة عناصر فرعية:

مثال

<!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　mt-3">
　　<h2>Flex</h2>
　　<p>لإنشاء صندوق محول باستخدام كلاس d-flex، وضبط ثلاثة عناصر فرعية:</p>
　　<div class="d-flex p-3 bg-secondary text-white">　　
　　　　<div　class="p-2　bg-info">Flex item 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
</div>
</body>
</html>

التحقق من ‹/›

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

لإنشاء صندوق محول يتم عرضه في نفس السطر يمكن استخدام كلاس d-inline-flex:

مثال

<!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　mt-3">
　　<h2>Flex داخلي</h2>
　　<p>لإنشاء صندوق محول يتم عرضه في نفس السطر يمكن استخدام كلاس d-inline-flex:</p>
　　<div class="d-inline-flex p-3 bg-secondary text-white">　　
　　　　<div　class="p-2　bg-info">Flex item 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
</div>
</body>
</html>

التحقق من ‹/›

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

اتجاه أفقي

.flex-row يمكنها تعيين عرض العناصر الفرعية الأفقية، وهو افتراضي.

استخدام كلاس .flex-row-reverse لتعيين عرض يميني، أي عكس اتجاه .flex-row.

مثال

<!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　mt-3">
　　<h2>اتجاه الأفق</h2>
　　<p>استخدام .flex-row لتحديد عرض العناصر التكيفية بشكل أفقي:</p>
　　<div　class="d-flex　flex-row　bg-secondary　mb-3">
　　　　<div　class="p-2　bg-info">Flex item 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
　　<p>.flex-row-reverse يُستخدم لتحديد التوجيه إلى اليمين:</p>
　　<div　class="d-flex　flex-row-reverse　bg-secondary">
　　　　<div　class="p-2　bg-info">Flex item 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
</div>
</body>
</html>

التحقق من ‹/›

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

اتجاه العمودي

.flex-column تستخدم لتحديد عرض العناصر التكيفية بشكل عمودي، .flex-column-reverse تستخدم لتحويل العناصر التكيفية:

مثال

<!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　mt-3">
　　<h2>اتجاه العمودي</h2>
　　<p>.flex-column تستخدم لتحديد عرض العناصر التكيفية بشكل عمودي:</p>
　　<div　class="d-flex　flex-column　mb-3">
　　　　<div　class="p-2　bg-info">Flex item 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
　　<p>.flex-column-reverse تستخدم لتحديد عرض العناصر التكيفية بشكل مقلوب أفقياً:</p>
　　<div　class="d-flex　flex-column-reverse">
　　　　<div　class="p-2　bg-info">Flex item 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
</div>
</body>
</html>

التحقق من ‹/›

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

ترتيب المحتوى

.justify-content-* يُستخدم لتحديد طريقة ترتيب العناصر التكيفية، و * يمكن أن يكون له القيم التالية:start (الافتراضي)، end، center، between أو around:

مثال

<!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　mt-3">
　　<h2>طريقة ترتيب المحتوى</h2>
　　<p>استخدام .justify-content-* يُستخدم لتحديد طريقة ترتيب العناصر التكيفية، و * يمكن أن يكون له القيم التالية: start (الافتراضي)، end، center، between أو around:</p>
　　<div　class="d-flex　justify-content-start　bg-secondary　mb-3">
　　　　<div　class="p-2　bg-info">Flex item 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
　　<div　class="d-flex　justify-content-end　bg-secondary　mb-3">
　　　　<div　class="p-2　bg-info">Flex item 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
　　<div　class="d-flex　justify-content-center　bg-secondary　mb-3">
　　　　<div　class="p-2　bg-info">Flex item 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
　　<div　class="d-flex　justify-content-between　bg-secondary　mb-3">
　　　　<div　class="p-2　bg-info">Flex item 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
　　<div　class="d-flex　justify-content-around　bg-secondary　mb-3">
　　　　<div　class="p-2　bg-info">Flex item 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
</div>
</body>
</html>

التحقق من ‹/›

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

تساوي العرض

.flex-fill يضمن ضبط عرض جميع العناصر التكيفية بشكل متساوٍ:

مثال

<!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　mt-3">
　　<h2>عرض متساوٍ</h2>
　　<p>.flex-fill تستخدم لتجعل عرض جميع العناصر المرنة متساوٍ:</p>
　　<div　class="d-flex　mb-3">
　　　　<div　class="p-2　flex-fill　bg-info">Flex item 1</div>
　　　　<div　class="p-2　flex-fill　bg-warning">Flex item 2</div>
　　　　<div　class="p-2　flex-fill　bg-primary">Flex item 3</div>
　　</div>
　　<p>مثال على عدم استخدام .flex-fill:</p>
　　<div　class="d-flex　mb-3　bg-secondary">
　　　　<div　class="p-2　bg-info">Flex item 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
</div>
</body>
</html>

التحقق من ‹/›

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

التوسع

.flex-grow-1 تستخدم لتعيين العناصر الفرعية لاستخدام المساحة المتبقية.في المثال التالي،تم تعيين المساحة المطلوبة لكل من العناصر الفرعية الاثنتين الأولتين،والعنصر الفرعي الثالث يحصل على المساحة المتبقية. :

مثال

<!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　mt-3">
　　<h2>تمديد</h2>
　　<p>.flex-grow-1 تستخدم لتعيين العناصر الفرعية لاستخدام المساحة المتبقية:</p>
　　<div　class="d-flex　mb-3">
　　　　<div　class="p-2　bg-info">Flex item 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　flex-grow-1　bg-primary">Flex item 3</div>
　　</div>
　　<p>مثال على عدم استخدام .flex-grow-1:</p>
　　<div　class="d-flex　mb-3　bg-secondary">
　　　　<div　class="p-2　bg-info">Flex item 1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
</div>
</body>
</html>

التحقق من ‹/›

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

إشارة: استخدام .flex-shrink-1 لتعيين قواعد التقلص للعناصر الفرعية.

ترتيب

.order يمكن استخدامها لتعيين ترتيب العناصر المرنة، من .order-1 إلى .order-12،كلما كان الرقم أقل كان الوزن أعلى( .order-1 يأتي قبل .order-2) :

مثال

<!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　mt-3">
　　<h2>ترتيب</h2>
　　<p>.order يمكن استخدامها لتعيين ترتيب العناصر المرنة، من .order-1 إلى .order-12،كلما كان الرقم أقل كان الوزن أعلى:</p>
　　<div　class="d-flex　mb-3">
　　　　<div　class="p-2　order-3　bg-info">Flex item 1</div>
　　　　<div　class="p-2　order-2　bg-warning">Flex item 2</div>
　　　　<div　class="p-2　order-1　bg-primary">Flex item 3</div>
　　</div>
</div>
</body>
</html>

التحقق من ‹/›

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

الحاجز الخارجي

.mr-auto يمكن استخدامها لضبط الحاجز الخارجي الأيمن للعناصر auto،يُمكنُ استخدام margin-right: auto!important;،.ml-auto للإعداد الحاجز الخارجي الأيسر للعناصر auto، أي margin-left: auto!important;:

مثال

<!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　mt-3">
　　<h2>الهوامش</h2>
　　<p>كلاس .mr-auto يمكنه ضبط الهوامش اليمنى للعنصر إلى auto، وكلاس .ml-auto يمكنه ضبط الهوامش اليسرى للعنصر إلى auto،</p>
　　<div　class="d-flex　mb-3　bg-secondary">
　　　　<div　class="p-2　mr-auto　bg-info">Flex　item　1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　bg-primary">Flex　item　3</div>
　　</div>
　　<div　class="d-flex　mb-3　bg-secondary">
　　　　<div　class="p-2　bg-info">Flex　item　1</div>
　　　　<div　class="p-2　bg-warning">Flex　item　2</div>
　　　　<div　class="p-2　ml-auto　bg-primary">Flex　item　3</div>
　　</div>
</div>
</body>
</html>

التحقق من ‹/›

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

التحميض

يمكن استخدام ثلاثة كلاسات التالية لضبط عناصر الاطارات المتراكبة: .flex-nowrap (الافتراضي), .flex-wrap أو .flex-wrap-reverse. يمكن ضبط طبيعة خط الاطارات المتراكبة كخط واحد أو خط متعدد.

مثال

<!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　mt-3">
　　<h2>التشطيب</h2>
　　<p>المدخلات المتراكبة يمكن استخدامها مع ثلاثة كلاسات التالية: .flex-nowrap (الافتراضي), .flex-wrap أو .flex-wrap-reverse:</p>
　　<p><code>.flex-wrap:</code></p>
　　<div　class="d-flex　flex-wrap　bg-light">
　　　　<div class="p-2 border">عنصر Flex 1</div>
　　　　<div　class="p-2　border">Flex item 2</div>
　　　　<div class="p-2 border">عنصر Flex 3</div>
　　　　<div class="p-2 border">Flex item 4</div>
　　　　<div class="p-2 border">Flex item 5</div>
　　　　<div class="p-2 border">Flex item 6</div>
　　　　<div class="p-2 border">Flex item 7</div>
　　　　<div class="p-2 border">Flex item 8</div>
　　　　<div class="p-2 border">Flex item 9</div>
　　　　<div class="p-2 border">Flex item 10</div>
　　　　<div class="p-2 border">Flex item 11</div>
　　　　<div class="p-2 border">Flex item 12</div>
　　　　<div class="p-2 border">Flex item 13</div>
　　　　<div class="p-2 border">Flex item 14</div>
　　　　<div class="p-2 border">Flex item 15</div>
　　　　<div class="p-2 border">Flex item 16</div>
　　　　<div class="p-2 border">Flex item 17</div>
　　　　<div class="p-2 border">Flex item 18</div>
　　　　<div class="p-2 border">Flex item 19</div>
　　　　<div class="p-2 border">Flex item 20</div>
　　　　<div　class="p-2　border">Flex item 21</div>
　　　　<div　class="p-2　border">Flex item 22</div>
　　　　<div　class="p-2　border">Flex item 23</div>
　　　　<div　class="p-2　border">Flex item 24</div>
　　　　<div　class="p-2　border">Flex item 25</div>
　　</div>
　　<br>
　　<p><code>.flex-wrap-reverse:</code></p>
　　<div　class="d-flex　flex-wrap-reverse　bg-light">
　　　　<div class="p-2 border">عنصر Flex 1</div>
　　　　<div　class="p-2　border">Flex item 2</div>
　　　　<div class="p-2 border">عنصر Flex 3</div>
　　　　<div class="p-2 border">Flex item 4</div>
　　　　<div class="p-2 border">Flex item 5</div>
　　　　<div class="p-2 border">Flex item 6</div>
　　　　<div class="p-2 border">Flex item 7</div>
　　　　<div class="p-2 border">Flex item 8</div>
　　　　<div class="p-2 border">Flex item 9</div>
　　　　<div class="p-2 border">Flex item 10</div>
　　　　<div class="p-2 border">Flex item 11</div>
　　　　<div class="p-2 border">Flex item 12</div>
　　　　<div class="p-2 border">Flex item 13</div>
　　　　<div class="p-2 border">Flex item 14</div>
　　　　<div class="p-2 border">Flex item 15</div>
　　　　<div class="p-2 border">Flex item 16</div>
　　　　<div class="p-2 border">Flex item 17</div>
　　　　<div class="p-2 border">Flex item 18</div>
　　　　<div class="p-2 border">Flex item 19</div>
　　　　<div class="p-2 border">Flex item 20</div>
　　　　<div　class="p-2　border">Flex item 21</div>
　　　　<div　class="p-2　border">Flex item 22</div>
　　　　<div　class="p-2　border">Flex item 23</div>
　　　　<div　class="p-2　border">Flex item 24</div>
　　　　<div　class="p-2　border">Flex item 25</div>
　　</div>
　　<br>
　　<p><code>.flex-nowrap:</code></p>
　　<div　class="d-flex　flex-nowrap　bg-light">
　　　　<div class="p-2 border">عنصر Flex 1</div>
　　　　<div　class="p-2　border">Flex item 2</div>
　　　　<div class="p-2 border">عنصر Flex 3</div>
　　　　<div class="p-2 border">Flex item 4</div>
　　　　<div class="p-2 border">Flex item 5</div>
　　　　<div class="p-2 border">Flex item 6</div>
　　　　<div class="p-2 border">Flex item 7</div>
　　　　<div class="p-2 border">Flex item 8</div>
　　　　<div class="p-2 border">Flex item 9</div>
　　　　<div class="p-2 border">Flex item 10</div>
　　　　<div class="p-2 border">Flex item 11</div>
　　　　<div class="p-2 border">Flex item 12</div>
　　　　<div class="p-2 border">Flex item 13</div>
　　　　<div class="p-2 border">Flex item 14</div>
　　　　<div class="p-2 border">Flex item 15</div>
　　　　<div class="p-2 border">Flex item 16</div>
　　　　<div class="p-2 border">Flex item 17</div>
　　　　<div class="p-2 border">Flex item 18</div>
　　　　<div class="p-2 border">Flex item 19</div>
　　　　<div class="p-2 border">Flex item 20</div>
　　　　<div　class="p-2　border">Flex item 21</div>
　　　　<div　class="p-2　border">Flex item 22</div>
　　　　<div　class="p-2　border">Flex item 23</div>
　　　　<div　class="p-2　border">Flex item 24</div>
　　　　<div　class="p-2　border">Flex item 25</div>
　　　　<div　class="p-2　border">Flex　item　26</div>
　　　　<div　class="p-2　border">Flex　item　27</div>
　　　　<div　class="p-2　border">Flex　item　28</div>
　　　　<div class="p-2 border">عنصر ربحي 29</div>
　　　　<div class="p-2 border">عنصر ربحي 30</div>
　　　　<div class="p-2 border">عنصر ربحي 31</div>
　　　　<div class="p-2 border">عنصر ربحي 32</div>
　　　　<div class="p-2 border">عنصر ربحي 33</div>
　　　　<div class="p-2 border">عنصر ربحي 34</div>
　　　　<div class="p-2 border">عنصر ربحي 35</div>
　　</div>
　　<br>
</div>
</body>
</html>

التحقق من ‹/›

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

تحديد التوجيه

يمكننا استخدام .align-content-* لتحكم في كيفية تثبيت العناصر الفرعية في الاتجاه العمودي، والقيم الممكنة هي: .align-content-start (الافتراضي), .align-content-end, .align-content-center, .align-content-between, .align-content-around و .align-content-stretch.

هذه الأنماط ليست فعالة في عناصر الربحية التي تحتوي على سطر واحد فقط.

مثال

<!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　mt-3">
　　<h2>تسوية المحتوى</h2>
　　<p>يمكننا استخدام .align-content-* لتحكم في كيفية تثبيت العناصر الفرعية في الاتجاه العمودي.</p>
　　<p><strong>الاحتياط:</strong> هذا المثال لا يظهر بشكل جيد على الأجهزة الصغيرة. هذه الأنماط ليست فعالة في عناصر الربحية التي تحتوي على سطر واحد فقط.</p>
　　<p>.align-content-start (الافتراضي):</p>
　　<div class="d-flex flex-wrap align-content-start bg-light" style="height:300px">
　　　　<div class="p-2 border">عنصر Flex 1</div>
　　　　<div　class="p-2　border">Flex item 2</div>
　　　　<div class="p-2 border">عنصر Flex 3</div>
　　　　<div class="p-2 border">Flex item 4</div>
　　　　<div class="p-2 border">Flex item 5</div>
　　　　<div class="p-2 border">Flex item 6</div>
　　　　<div class="p-2 border">Flex item 7</div>
　　　　<div class="p-2 border">Flex item 8</div>
　　　　<div class="p-2 border">Flex item 9</div>
　　　　<div class="p-2 border">Flex item 10</div>
　　　　<div class="p-2 border">Flex item 11</div>
　　　　<div class="p-2 border">Flex item 12</div>
　　　　<div class="p-2 border">Flex item 13</div>
　　　　<div class="p-2 border">Flex item 14</div>
　　　　<div class="p-2 border">Flex item 15</div>
　　　　<div class="p-2 border">Flex item 16</div>
　　　　<div class="p-2 border">Flex item 17</div>
　　　　<div class="p-2 border">Flex item 18</div>
　　　　<div class="p-2 border">Flex item 19</div>
　　　　<div class="p-2 border">Flex item 20</div>
　　　　<div　class="p-2　border">Flex item 21</div>
　　　　<div　class="p-2　border">Flex item 22</div>
　　　　<div　class="p-2　border">Flex item 23</div>
　　　　<div　class="p-2　border">Flex item 24</div>
　　　　<div　class="p-2　border">Flex item 25</div>
　　</div>
　　<br>
　　<p>.align-content-end:</p>
　　<div class="d-flex flex-wrap align-content-end bg-light" style="height:300px">
　　　　<div class="p-2 border">عنصر Flex 1</div>
　　　　<div　class="p-2　border">Flex item 2</div>
　　　　<div class="p-2 border">عنصر Flex 3</div>
　　　　<div class="p-2 border">Flex item 4</div>
　　　　<div class="p-2 border">Flex item 5</div>
　　　　<div class="p-2 border">Flex item 6</div>
　　　　<div class="p-2 border">Flex item 7</div>
　　　　<div class="p-2 border">Flex item 8</div>
　　　　<div class="p-2 border">Flex item 9</div>
　　　　<div class="p-2 border">Flex item 10</div>
　　　　<div class="p-2 border">Flex item 11</div>
　　　　<div class="p-2 border">Flex item 12</div>
　　　　<div class="p-2 border">Flex item 13</div>
　　　　<div class="p-2 border">Flex item 14</div>
　　　　<div class="p-2 border">Flex item 15</div>
　　　　<div class="p-2 border">Flex item 16</div>
　　　　<div class="p-2 border">Flex item 17</div>
　　　　<div class="p-2 border">Flex item 18</div>
　　　　<div class="p-2 border">Flex item 19</div>
　　　　<div class="p-2 border">Flex item 20</div>
　　　　<div　class="p-2　border">Flex item 21</div>
　　　　<div　class="p-2　border">Flex item 22</div>
　　　　<div　class="p-2　border">Flex item 23</div>
　　　　<div　class="p-2　border">Flex item 24</div>
　　　　<div　class="p-2　border">Flex item 25</div>
　　</div>
　　<br>
　　<p>.align-content-center:</p>
　　<div class="d-flex flex-wrap align-content-center bg-light" style="height:300px">
　　　　<div class="p-2 border">عنصر Flex 1</div>
　　　　<div　class="p-2　border">Flex item 2</div>
　　　　<div class="p-2 border">عنصر Flex 3</div>
　　　　<div class="p-2 border">Flex item 4</div>
　　　　<div class="p-2 border">Flex item 5</div>
　　　　<div class="p-2 border">Flex item 6</div>
　　　　<div class="p-2 border">Flex item 7</div>
　　　　<div class="p-2 border">Flex item 8</div>
　　　　<div class="p-2 border">Flex item 9</div>
　　　　<div class="p-2 border">Flex item 10</div>
　　　　<div class="p-2 border">Flex item 11</div>
　　　　<div class="p-2 border">Flex item 12</div>
　　　　<div class="p-2 border">Flex item 13</div>
　　　　<div class="p-2 border">Flex item 14</div>
　　　　<div class="p-2 border">Flex item 15</div>
　　　　<div class="p-2 border">Flex item 16</div>
　　　　<div class="p-2 border">Flex item 17</div>
　　　　<div class="p-2 border">Flex item 18</div>
　　　　<div class="p-2 border">Flex item 19</div>
　　　　<div class="p-2 border">Flex item 20</div>
　　　　<div　class="p-2　border">Flex item 21</div>
　　　　<div　class="p-2　border">Flex item 22</div>
　　　　<div　class="p-2　border">Flex item 23</div>
　　　　<div　class="p-2　border">Flex item 24</div>
　　　　<div　class="p-2　border">Flex item 25</div>
　　</div>
　　<br>
　　<p>.align-content-around:</p>
　　<div class="d-flex flex-wrap align-content-around bg-light" style="height:300px">
　　　　<div class="p-2 border">عنصر Flex 1</div>
　　　　<div　class="p-2　border">Flex item 2</div>
　　　　<div class="p-2 border">عنصر Flex 3</div>
　　　　<div class="p-2 border">Flex item 4</div>
　　　　<div class="p-2 border">Flex item 5</div>
　　　　<div class="p-2 border">Flex item 6</div>
　　　　<div class="p-2 border">Flex item 7</div>
　　　　<div class="p-2 border">Flex item 8</div>
　　　　<div class="p-2 border">Flex item 9</div>
　　　　<div class="p-2 border">Flex item 10</div>
　　　　<div class="p-2 border">Flex item 11</div>
　　　　<div class="p-2 border">Flex item 12</div>
　　　　<div class="p-2 border">Flex item 13</div>
　　　　<div class="p-2 border">Flex item 14</div>
　　　　<div class="p-2 border">Flex item 15</div>
　　　　<div class="p-2 border">Flex item 16</div>
　　　　<div class="p-2 border">Flex item 17</div>
　　　　<div class="p-2 border">Flex item 18</div>
　　　　<div class="p-2 border">Flex item 19</div>
　　　　<div class="p-2 border">Flex item 20</div>
　　　　<div　class="p-2　border">Flex item 21</div>
　　　　<div　class="p-2　border">Flex item 22</div>
　　　　<div　class="p-2　border">Flex item 23</div>
　　　　<div　class="p-2　border">Flex item 24</div>
　　　　<div　class="p-2　border">Flex item 25</div>
　　</div>
　　<br>
　　<p>.align-content-stretch:</p>
　　<div class="d-flex flex-wrap align-content-stretch bg-light" style="height:300px">
　　　　<div class="p-2 border">عنصر Flex 1</div>
　　　　<div　class="p-2　border">Flex item 2</div>
　　　　<div class="p-2 border">عنصر Flex 3</div>
　　　　<div class="p-2 border">Flex item 4</div>
　　　　<div class="p-2 border">Flex item 5</div>
　　　　<div class="p-2 border">Flex item 6</div>
　　　　<div class="p-2 border">Flex item 7</div>
　　　　<div class="p-2 border">Flex item 8</div>
　　　　<div class="p-2 border">Flex item 9</div>
　　　　<div class="p-2 border">Flex item 10</div>
　　　　<div class="p-2 border">Flex item 11</div>
　　　　<div class="p-2 border">Flex item 12</div>
　　　　<div class="p-2 border">Flex item 13</div>
　　　　<div class="p-2 border">Flex item 14</div>
　　　　<div class="p-2 border">Flex item 15</div>
　　　　<div class="p-2 border">Flex item 16</div>
　　　　<div class="p-2 border">Flex item 17</div>
　　　　<div class="p-2 border">Flex item 18</div>
　　　　<div class="p-2 border">Flex item 19</div>
　　　　<div class="p-2 border">Flex item 20</div>
　　　　<div　class="p-2　border">Flex item 21</div>
　　　　<div　class="p-2　border">Flex item 22</div>
　　　　<div　class="p-2　border">Flex item 23</div>
　　　　<div　class="p-2　border">Flex item 24</div>
　　　　<div　class="p-2　border">Flex item 25</div>
　　</div>
　　<br>
</div>
</body>
</html>

التحقق من ‹/›

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

تصحيح عناصر

إذا كنت تريد ضبط تصحيح عناصر سطر واحد يمكنك استخدام صيغة .align-items-* لتحكم فيها، وتشمل القيم:.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, و .align-items-stretch (الافتراضي)。

مثال

<!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　mt-3">
　　<h2>تصحيح عناصر</h2>
　　<p>إذا كنت تريد ضبط تصحيح عناصر سطر واحد يمكنك استخدام صيغة .align-content-* لتحكم فيها.</p>
　　<p>.align-items-start:</p>
　　<div　class="d-flex　align-items-start　bg-light"　style="height:150px">
　　　　<div class="p-2 border">عنصر Flex 1</div>
　　　　<div　class="p-2　border">Flex item 2</div>
　　　　<div class="p-2 border">عنصر Flex 3</div>
　　</div>
　　<br>
　　<p>.align-items-end:</p>
　　<div　class="d-flex　align-items-end　bg-light"　style="height:150px">
　　　　<div class="p-2 border">عنصر Flex 1</div>
　　　　<div　class="p-2　border">Flex item 2</div>
　　　　<div class="p-2 border">عنصر Flex 3</div>
　　</div>
　　<br>
　　<p>.align-items-center:</p>
　　<div　class="d-flex　align-items-center　bg-light"　style="height:150px">
　　　　<div class="p-2 border">عنصر Flex 1</div>
　　　　<div　class="p-2　border">Flex item 2</div>
　　　　<div class="p-2 border">عنصر Flex 3</div>
　　</div>
　　<br>
　　<p>.align-items-baseline:</p>
　　<div　class="d-flex　align-items-baseline　bg-light"　style="height:150px">
　　　　<div class="p-2 border">عنصر Flex 1</div>
　　　　<div　class="p-2　border">Flex item 2</div>
　　　　<div class="p-2 border">عنصر Flex 3</div>
　　</div>
　　<br>
　　<p>.align-items-stretch (الافتراضي):</p>
　　<div　class="d-flex　align-items-stretch　bg-light"　style="height:150px">
　　　　<div class="p-2 border">عنصر Flex 1</div>
　　　　<div　class="p-2　border">Flex item 2</div>
　　　　<div class="p-2 border">عنصر Flex 3</div>
　　</div>
　　<br>
</div>
</body>
</html>

التحقق من ‹/›

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

تحديد تنسيق عنصر فرعي

如果要设置指定子元素对齐，可以使用 .align-self-* 类来控制，包含的值有：.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, و .align-self-stretch (الافتراضي).

مثال

<!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　mt-3">
　　<h2>Align Self</h2>
　　<p>如果要设置指定子元素对齐，可以使用　.align-self-*　类来控制。</p>
　　<p>.align-self-start:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2 border">عنصر Flex 1</div>
　　　　<div　class="p-2　border　align-self-start">Flex item 2</div>
　　　　<div class="p-2 border">عنصر Flex 3</div>
　　</div>
　　<br>
　　<p>.align-self-end:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2 border">عنصر Flex 1</div>
　　　　<div　class="p-2　border　align-self-end">Flex item 2</div>
　　　　<div class="p-2 border">عنصر Flex 3</div>
　　</div>
　　<br>
　　<p>.align-self-center:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2 border">عنصر Flex 1</div>
　　　　<div class="p-2 border align-self-center">عنصر Flex 2</div>
　　　　<div class="p-2 border">عنصر Flex 3</div>
　　</div>
　　<br>
　　<p>.align-self-baseline:</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2 border">عنصر Flex 1</div>
　　　　<div class="p-2 border align-self-baseline">عنصر Flex 2</div>
　　　　<div class="p-2 border">عنصر Flex 3</div>
　　</div>
　　<br>
　　<p>.align-self-stretch (الافتراضي):</p>
　　<div class="d-flex bg-light" style="height:150px">
　　　　<div class="p-2 border">عنصر Flex 1</div>
　　　　<div class="p-2 border align-self-stretch">عنصر Flex 2</div>
　　　　<div class="p-2 border">عنصر Flex 3</div>
　　</div>
　　<br>
</div>
</body>
</html>

التحقق من ‹/›

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

فئة flex مروجة

يمكننا إعداد فئة flex بناءً على مختلف الأجهزة، لتحقيق تصميم منسق للصفحة، والنجم * في الجدول يمكن أن يكون له القيم: sm،md،lg أو xl، مما يعني الأجهزة الصغيرة، والأجهزة المتوسطة، والأجهزة الكبيرة، والأجهزة الضخمة.

مفردة	مثال	تحقيق
حاوية مروجة
.d-*-flex	إنشاء حاوية صندوق مروجة بناءً على مختلف أجهزة الشاشة	جربها
اتجاه
.flex-*-row	عرض العناصر المروجة في اتجاه أفقي بناءً على مختلف أجهزة الشاشة	جربها
.flex-*-column	عرض العناصر المروجة في اتجاه رأسي بناءً على مختلف أجهزة الشاشة	جربها
تحديد التوجيه
.justify-content-*-start	عرض العناصر المروجة في البداية (الترتيب الأيسر) بناءً على مختلف أجهزة الشاشة	جربها
.justify-content-*-center	عرض العناصر المروجة في منتصف حاوية flex بناءً على مختلف أجهزة الشاشة	جربها
.justify-content-*-around	استخدام "around" لعرض العناصر المروجة بناءً على مختلف أجهزة الشاشة	جربها
التوسع
.flex-*-grow-0	لا يتم إعداد توسع مختلف أجهزة الشاشة
.flex-*-grow-1	إعداد توسع مختلف أجهزة الشاشة
الانكماش
.flex-*-shrink-0	لا يتم إعداد انكماش مختلف أجهزة الشاشة
.flex-*-shrink-1	إعداد انكماش مختلف أجهزة الشاشة
التحميض
.flex-*-nowrap	لا تعيين تحميض العناصر في جهاز الشاشة المختلفة	جربها
.flex-*-wrap-reverse	تقلب العناصر في جهاز الشاشة المختلفة	جربها
.align-content-*-end	حسب جهاز الشاشة المختلفة، تجميع العناصر في نهاية الموقع	جربها
.align-content-*-around	حسب جهاز الشاشة المختلفة، استخدم "around" لتجميع العناصر	جربها
تسوية العناصر
.align-items-*-start	حسب جهاز الشاشة المختلفة، عرض العنصر في بداية الصف	جربها
.align-items-*-center	حسب جهاز الشاشة المختلفة، عرض العنصر في منتصف الصف	جربها
.align-items-*-stretch	حسب جهاز الشاشة المختلفة، تمدد طول العنصر وعرضه في نفس الصف	جربها
.align-self-*-end	حسب جهاز الشاشة المختلفة، عرض عنصر فرعي واحد في نهاية الخط	جربها
.align-self-*-baseline	حسب جهاز الشاشة المختلفة، عرض عنصر فرعي واحد في خط الأساس	جربها

الموضوعات المتعددة Bootstrap4 أدوات صغيرة Bootstrap4