0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00

Improve RTL examples (#33097)

This commit is contained in:
Abdullah Alaqeel 2021-04-27 15:38:44 +03:00 committed by GitHub
parent efd45eceb2
commit 3bcb9e7df7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 506 additions and 512 deletions

View File

@ -10,14 +10,14 @@ direction: rtl
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">حول</h4>
<p class="text-muted">أضف بعض المعلومات حول الألبوم أدناه أو المؤلف أو أي سياق خلفية آخر. اجعلها بضع جمل طويلة حتى يتمكن الناس من التقاط بعض الحكايات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p>
<p class="text-muted">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">اتصل</h4>
<h4 class="text-white">تواصل معي</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">تابع على تويتر</a></li>
<li><a href="#" class="text-white">مثل في الفيسبوك</a></li>
<li><a href="#" class="text-white">راسلني</a></li>
<li><a href="#" class="text-white">تابعني على تويتر</a></li>
<li><a href="#" class="text-white">شاركني الإعجاب في فيسبوك</a></li>
<li><a href="#" class="text-white">راسلني على البريد الإلكتروني</a></li>
</ul>
</div>
</div>
@ -42,7 +42,7 @@ direction: rtl
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">
<h1 class="fw-light">مثال الألبوم</h1>
<p class="lead text-muted">شيء قصير وقائد حول المجموعة أدناه - محتوياتها ، ومنشئها ، وما إلى ذلك. اجعلها قصيرة ولطيفة ، ولكن ليست قصيرة جدًا حتى لا يتخطى الناس ببساطة هذه المجموعة تمامًا.</p>
<p class="lead text-muted">وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.</p>
<p>
<a href="#" class="btn btn-primary my-2">الدعوة الرئيسية للعمل</a>
<a href="#" class="btn btn-secondary my-2">عمل ثانوي</a>
@ -57,12 +57,12 @@ direction: rtl
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col">
<div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}}
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
<div class="card-body">
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div>
<small class="text-muted">9 دقائق</small>
@ -72,12 +72,12 @@ direction: rtl
</div>
<div class="col">
<div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}}
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
<div class="card-body">
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div>
<small class="text-muted">9 دقائق</small>
@ -87,12 +87,12 @@ direction: rtl
</div>
<div class="col">
<div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}}
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
<div class="card-body">
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div>
<small class="text-muted">9 دقائق</small>
@ -103,12 +103,12 @@ direction: rtl
<div class="col">
<div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}}
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
<div class="card-body">
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div>
<small class="text-muted">9 دقائق</small>
@ -118,12 +118,12 @@ direction: rtl
</div>
<div class="col">
<div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}}
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
<div class="card-body">
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div>
<small class="text-muted">9 دقائق</small>
@ -133,12 +133,12 @@ direction: rtl
</div>
<div class="col">
<div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}}
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
<div class="card-body">
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div>
<small class="text-muted">9 دقائق</small>
@ -149,12 +149,12 @@ direction: rtl
<div class="col">
<div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}}
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
<div class="card-body">
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div>
<small class="text-muted">9 دقائق</small>
@ -164,12 +164,12 @@ direction: rtl
</div>
<div class="col">
<div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}}
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
<div class="card-body">
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div>
<small class="text-muted">9 دقائق</small>
@ -179,12 +179,12 @@ direction: rtl
</div>
<div class="col">
<div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}}
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
<div class="card-body">
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div>
<small class="text-muted">9 دقائق</small>

View File

@ -12,7 +12,7 @@ include_js: false
<header class="blog-header py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4 pt-1">
<a class="link-secondary" href="#">الإشتراك</a>
<a class="link-secondary" href="#">الإشتراك في النشرة البريدية</a>
</div>
<div class="col-4 text-center">
<a class="blog-header-logo text-dark" href="#">كبير</a>
@ -21,24 +21,24 @@ include_js: false
<a class="link-secondary" href="#" aria-label="بحث">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24"><title>بحث</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg>
</a>
<a class="btn btn-sm btn-outline-secondary" href="#">سجل</a>
<a class="btn btn-sm btn-outline-secondary" href="#">إنشاء حساب</a>
</div>
</div>
</header>
<div class="nav-scroller py-1 mb-2">
<nav class="nav d-flex justify-content-between">
<a class="p-2 link-secondary" href="#">العالمية</a>
<a class="p-2 link-secondary" href="#">نحن.</a>
<a class="p-2 link-secondary" href="#">تقنية</a>
<a class="p-2 link-secondary" href="#">العالم</a>
<a class="p-2 link-secondary" href="#">الولايات المتحدة</a>
<a class="p-2 link-secondary" href="#">التقنية</a>
<a class="p-2 link-secondary" href="#">التصميم</a>
<a class="p-2 link-secondary" href="#">حضاره</a>
<a class="p-2 link-secondary" href="#">اعمال</a>
<a class="p-2 link-secondary" href="#">سياسة</a>
<a class="p-2 link-secondary" href="#">رأي</a>
<a class="p-2 link-secondary" href="#">علم</a>
<a class="p-2 link-secondary" href="#">الحضارة</a>
<a class="p-2 link-secondary" href="#">المال والأعمال</a>
<a class="p-2 link-secondary" href="#">السياسة</a>
<a class="p-2 link-secondary" href="#">الرأي العام</a>
<a class="p-2 link-secondary" href="#">العلوم</a>
<a class="p-2 link-secondary" href="#">الصحة</a>
<a class="p-2 link-secondary" href="#">أسلوب</a>
<a class="p-2 link-secondary" href="#">الموضة</a>
<a class="p-2 link-secondary" href="#">السفر</a>
</nav>
</div>
@ -47,8 +47,8 @@ include_js: false
<main class="container">
<div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
<div class="col-md-6 px-0">
<h1 class="display-4 fst-italic">عنوان مشاركة مدونة مميزة أطول</h1>
<p class="lead my-3">أسطر نصية متعددة تشكل الجزء الأمامي ، لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه المشاركة.</p>
<h1 class="display-4 fst-italic">عنوان تدوينة مميزة أطول</h1>
<p class="lead my-3">عدة أسطر نصية متعددة تعبر عن التدوية، وذلك لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه التدوينة.</p>
<p class="lead mb-0"><a href="#" class="text-white fw-bold">أكمل القراءة...</a></p>
</div>
</div>
@ -57,14 +57,14 @@ include_js: false
<div class="col-md-6">
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">العالمية</strong>
<strong class="d-inline-block mb-2 text-primary">العالم</strong>
<h3 class="mb-0">مشاركة مميزة</h3>
<div class="mb-1 text-muted">12 نوفمبر</div>
<div class="mb-1 text-muted">نوفمبر 12</div>
<p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
<a href="#" class="stretched-link">أكمل القراءة</a>
</div>
<div class="col-auto d-none d-lg-block">
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="ظفري" >}}
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}}
</div>
</div>
</div>
@ -73,12 +73,12 @@ include_js: false
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">التصميم</strong>
<h3 class="mb-0">عنوان الوظيفة</h3>
<div class="mb-1 text-muted">11 نوفمبر</div>
<div class="mb-1 text-muted">نوفمبر 11</div>
<p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
<a href="#" class="stretched-link">أكمل القراءة</a>
</div>
<div class="col-auto d-none d-lg-block">
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="ظفري" >}}
{{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}}
</div>
</div>
</div>
@ -91,67 +91,70 @@ include_js: false
</h3>
<article class="blog-post">
<h2 class="blog-post-title">عينة مشاركة مدونة</h2>
<h2 class="blog-post-title">مثال على تدوينة</h2>
<p class="blog-post-meta">1 يناير 2014 بواسطة <a href="#"> Mark </a></p>
<p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. الطباعة الأساسية والصور والرموز كلها مدعومة.</p>
<p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.</p>
<hr>
<p>إذ مدن وبداية الجنود, ثم ٠٨٠٤ الثقيل هذه. ولم وقرى ومحاولة أي, وقام أراضي وصل مع. ما أخذ يتمكن الصعداء الإثنان, أم هامش أعمال إتفاقية ضرب. عدم إذ بقسوة غرّة، ممثّلة, تم وحتّى تعديل لها. عن ولم بسبب الأوروبيّون, ما كما وتنامت الإتفاقية. وقامت وبعدما بتخصيص و بال, سكان إعلان غريمه الا أي.</p>
<p>يشكِّل تأمين الغذاء في المستقبل قضية تؤرِّق حكومات العالَم والعلماء على حدٍّ سواء. فخلال القرن العشرين ازداد عدد سكان الأرض أربعة أضعاف، وتشير التقديرات إلى أن العدد سوف يصل إلى عشرة مليارات إنسان بحلول عام 2050م. وسوف تمثل هذه الزيادة الهائلة تحدياً كبيراً وضغطاً متصاعداً على قدرة الإنتاج الزراعي. الأمر الذي كان ولا بد من أن يدفع إلى تطوير تقنيات مبتكرة في تصنيع الغذاء غير الزراعة، منها تقنية مستقبلية تقوم على تصنيع الغذاء من الهواء.</p>
<blockquote>
<p>ذلك هناك ألمانيا إذ. فعل الجنوبي اليابانية بل, جُل مع إنطلاق الموسوعة. واشتدّت وحلفاؤها عن دنو. عن إيو كثيرة المجتمع, وفي شمال حالية انذار أي. إنطلاق تزامناً بالإنزال و تلك.</p>
<p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه، كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية</p>
</blockquote>
<p>إذ دار السفن الخارجية, عل شيء الأسيوي شموليةً, الفترة والإتحاد أن الا. هو الحكم الحكومة حين. تم ليرتفع بأضرار التبرعات مما, حاول ساعة عن يكن. حيث مع حاول أجزاء الهجوم, يتم بـ قبضتهم الفرنسي.</p>
<p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه. كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية، وللمقارنة فإن هذه النسبة من الانبعاثات هي أكبر مما ينتجه قطاع النقل بكل ما فيه من سيارات وشاحنات وطائرات وقطارات.</p>
<h2>عنوان</h2>
<p>جُل عن اللا وقوعها،, دنو ثم وترك سكان الشمال, كل ذلك وأزيز والقرى. أم عدد مهمّات الساحل, قد تاريخ أفريقيا الإحتفاظ دول. مدن لبلجيكا، واندونيسيا، كل, مع أسر الشمال الأرضية بالسيطرة. في فقامت والروسية كلّ. عن فعل فسقط استبدال.</p>
<h3>العنوان الفرعي</h3>
<p>موالية استدعى كل حيث, وبدون الأولية الاندونيسية و كما. فعل قد لعدم اليابانية, اليميني الساحلية أن جهة. جُل ما اليميني العسكري الدنمارك. إذ وفي الموسوعة الأمريكي, سابق الأمريكية ثم مدن. تم وفي أوروبا بلديهما ماليزيا،, ويتّفق بالجانب وقد أي.</p>
<p>تحصل النباتات على غذائها بواسطة عملية تسمى البناء الضوئي، حيث تقوم النباتات بتحويل ضوء الشمس والماء وثاني أكسيد الكربون الموجود في الغلاف الجوي إلى غذاء وتطلق الأكسجين كمنتج ثانوي لهذا التفاعل الكيميائي. وتحدث هذه العملية في "البلاستيدات الخضراء". فالنباتات تستفيد من طاقة ضوء الشمس في تقسيم الماء إلى هيدروجين وأكسجين، وتحدث تفاعلات كيميائية أخرى ينتج عنها سكر الجلكوز الذي تستخدمه كمصدر للغذاء وينطلق الأكسجين من النباتات إلى الغلاف الجوي. وهذا يعني أن النباتات تحوِّل ثاني أكسيد الكربون إلى غذاء من خلال تفاعلات كيميائية معقَّدة. ويُعد البناء الضوئي من أهم التفاعلات الكيميائية على كوكب الأرض، فقد ساعد في الماضي على تطوُّر كوكبنا وظهور الحياة عليه. فالنباتات تستخدم ثاني أكسيد الكربون لصنع غذائها، وتطلق الأكسجين لتساعد الكائنات الأخرى على التنفس!</p>
<h3>عنوان فرعي</h3>
<p>ألهمت هذه العملية علماء وكالة الفضاء الأمريكية (ناسا) خلال الستينيات من القرن الماضي، لبحث فكرة إطعام روَّاد الفضاء في مهمات الفضاء الطويلة مثل السفر إلى المريخ. وكانت واحدة من الأفكار الواعدة تصنيع الغذاء عن طريق ثاني أكسيد الكربون الذي ينتجه روَّاد الفضاء، لكن ليس بواسطة النباتات بل عن طريق ميكروبات صغيرة وحيدة الخلية قادرة على حصد ثاني أكسيد الكربون لإنتاج كميات وفيرة من البروتين المغذي على شكل مسحوق عديم النكهة، كما يمكن استخدام المادة في صنع الأطعمة المألوفة لدينا.</p>
<pre><code>Example code block</code></pre>
<p>تحت بولندا، مليارات لم. الشهير الإنزال وفي بل, مع قبل واتّجه الخاسر باستخدام. قدما يونيو مواقعها يكن و, سابق أراضي الإكتفاء حتى كل, و جعل مهمّات المتحدة. أخذ عل الثقيل الضروري لإنعدام, دول جيما أراض الدولارات تم. الخاطفة استعملت وباستثناء ثم انه, به، جدول الأهداف ماليزيا، ان. عن هناك الإحتفاظ غير.</p>
<h3>العنوان الفرعي</h3>
<p>مرجع استدعى بريطانيا ذلك عن, ٣٠ كان ألمّ الشّعبين الأمريكي. دار تغييرات الشرقية التجارية كل, تم يتبقّ للحكومة كلّ. ثمّة الشتاء الساحل و الى, بل أثره، فاتّبع يتم. دون وترك وتنصيب المبرمة ما, هذه عن زهاء استدعى انتصارهم, يعبأ شواطيء الأرضية به، أم. والتي وفرنسا الأولية بـ هذه, قائمة الوزراء ضرب أي.</p>
<p>وخلافاً لما هو الحال في عالم النبات، فإن هذه الميكروبات لا تستخدم الضوء كما يحدث في عملية البناء الضوئي التي تستخدمها النباتات للحصول على الغذاء، أي لأنها قادرة على النمو في الظلام. تسمى هذه البكتريا "هيدروجينوتروف" (Hydrogenotrophs)، وهي تستخدم الهيدروجين كوقود لإنتاج الغذاء من ثاني أكسيد الكربون. فعندما يُنتج روَّاد الفضاء ثاني أكسيد الكربون، تلتقطه الميكروبات، ويتحوَّل مع مدخلات أخرى إلى غذاء غني بالكربون. وبهذه الطريقة سوف نحصل على دورة كربون مغلقة الحلقة.</p>
<h3>عنوان فرعي</h3>
<p>بعد مرور أكثر من نصف قرن على أبحاث ناسا، تعمل حالياً عدة شركات في قطاع البيولوجيا التركيبية من ضمنها إير بروتين (Air Protein) وسولار فودز (Solar Foods) على تطوير جيل جديد من المنتجات الغذائية المستدامة، من دون وجود بصمة كربونية. ولن تقتصر هذه المنتجات الغذائية على روَّاد الفضاء فحسب، بل سوف تمتد لتشمل جميع سكان الأرض، وسوف تُنتَج في فترة زمنية قصيرة، بدلاً من الشهور، ومن دون الاعتماد على الأراضي الزراعية. وهذا يعني الحصول على منتجات غذائية بشكل سريع جداً. كما سيصبح من الممكن تصنيع الغذاء بطريقة عمودية من خلال هذه الميكروبات، بدلاً من الطريقة الأفقية التقليدية الشبيهة بتقنية الزراعة العمودية الحديثة. وهذا يعني توفير منتجات غذائية أكبر من المساحة نفسها.</p>
<p>يتكوَّن الغذاء البشري من ثلاثة أنواع رئيسة، هي:</p>
<ul>
<li>بل دفّة فسقط بال, الله تغييرات الرئيسية من مدن. كرسي الأمم ويكيبيديا،.</li>
<li>لم عدد يطول جديدة ولاتّساع. أم تلك وحتّى.</li>
<li>ذات مئات المشترك بالمحور عن وشعار.</li>
<li>البروتينات</li>
<li>الكربوهيدرات</li>
<li>الدهون</li>
</ul>
<p>لكل خلاف وترك المؤلّفة بل. ٣٠ حين أواخر أصقاع. بلا مع أوزار النزاع, مع إيطاليا بالرّغم بالمطالبة ومن. ان دول الحرة وقدّموا لتقليعة. الحرة بريطانيا، إذ وصل, الى وقام أجزاء أوراقهم عن. الباهضة الخاسرة حيث و.</p>
<p>وتتكوَّن البروتينات من الأحماض الأمينية، وهي مجموعة من المركبات العضوية يبلغ عددها في جسم الإنسان عشرين حمضاً أمينياً، من بينها تسعة أساسية يحصل عليها الجسم من الغذاء. وتتكوَّن الأحماض الأمينية بشكل أساس من:</p>
<ol>
<li>عرض قتيل، الجنرال الأوروبي ما, ثم تعد بقعة.</li>
<li>ثم الا الجوي اوروبا, و غير العسكري التبرعات, ترتيب مواقعها أوراقهم ضرب في إذ.</li>
<li>علاقة يتعلّق وبلجيكا، على مع, الجنود الخطّة جُل عل, فقد ان سقوط.</li>
<li>الكربون</li>
<li>الهيدروجين</li>
<li>الأكسجين</li>
<li>النيتروجين</li>
</ol>
<p>الشرق، وصافرات الساحلية بل بلا. ٠٨٠٤ ودول العناد انه أن. في تونس أوزار مقاومة وصل, قد وقد حلّت دأبوا رجوعهم. أفاق والعتاد لم قبل, عن كلّ منتصف محاولات. المشترك الأولية ان كلا, ألمّ إحتار التقليدية و مدن. عن عدد تسمّى المسرح الطرفين.</p>
<p>ومن الملاحظ أن النيتروجين يشكِّل نسبة %78 من الهواء، كما أن الهيدروجين نحصل عليه من خلال التحليل الكهربائي للماء، ومن الممكن نظرياً سحب الكربون من الهواء لتشكيل هذه الأحماض، ذلك أن الكربون هو العمود الفقري للأحماض الأمينية، كما أن الحياة على كوكب الأرض قائمة على الكربون لقدرته على تكوين سلاسل كربونية طويلة، وهذا ما تفعله الميكروبات بتصنيع أحماض أمينية من ثاني أكسيد الكربون من خلال مجموعة من التفاعلات الكيميائية المعقَّدة. وإضافة إلى صنع وجبات غنية بالبروتين، فهذه الميكروبات تنتج منتجات أخرى مثل الزيوت التي لها عديد من الاستخدامات.</p>
</article><!-- /.blog-post -->
<article class="blog-post">
<h2 class="blog-post-title">مشاركة مدونة أخرى</h2>
<h2 class="blog-post-title">تدوينة أخرى</h2>
<p class="blog-post-meta">23 ديسمبر 2013 بواسطة <a href="#">Jacob</a></p>
<p>إذ مدن وبداية الجنود, ثم ٠٨٠٤ الثقيل هذه. ولم وقرى ومحاولة أي, وقام أراضي وصل مع. ما أخذ يتمكن الصعداء الإثنان, أم هامش أعمال إتفاقية ضرب. عدم إذ بقسوة غرّة، ممثّلة, تم وحتّى تعديل لها. عن ولم بسبب الأوروبيّون, ما كما وتنامت الإتفاقية. وقامت وبعدما بتخصيص و بال, سكان إعلان غريمه الا أي.</p>
<p>في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق، وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.</p>
<blockquote>
<p>ذلك هناك ألمانيا إذ. فعل الجنوبي اليابانية بل, جُل مع إنطلاق الموسوعة. واشتدّت وحلفاؤها عن دنو. عن إيو كثيرة المجتمع, وفي شمال حالية انذار أي. إنطلاق تزامناً بالإنزال و تلك.</p>
<p>تم تصنيع اللحوم بأنواع عديدة</p>
</blockquote>
<p>إذ دار السفن الخارجية, عل شيء الأسيوي شموليةً, الفترة والإتحاد أن الا. هو الحكم الحكومة حين. تم ليرتفع بأضرار التبرعات مما, حاول ساعة عن يكن. حيث مع حاول أجزاء الهجوم, يتم بـ قبضتهم الفرنسي.</p>
<p>جُل عن اللا وقوعها،, دنو ثم وترك سكان الشمال, كل ذلك وأزيز والقرى. أم عدد مهمّات الساحل, قد تاريخ أفريقيا الإحتفاظ دول. مدن لبلجيكا، واندونيسيا، كل, مع أسر الشمال الأرضية بالسيطرة. في فقامت والروسية كلّ. عن فعل فسقط استبدال.</p>
<p>إذ استخدم هؤلاء الباحثون الهواء والطاقة المتجدِّدة كمدخلات في عملية مشابهة للتخمير، لإنتاج بروتين يحتوي على الأحماض الأمينية التسعة الأساسية وغني بالفيتامينات والمعادن، كما أنه خالٍ من الهرمونات والمضادات الحيوية والمبيدات الحشرية ومبيدات الأعشاب.</p>
<p> وتم تصنيع اللحوم بأنواع عديدة بما فيها الدواجن والأبقار والمأكولات البحرية، من دون حصول انبعاثات كربونية، على عكس تربية الأبقار التي تسهم في انبعاث غاز الميثان أحد غازات الاحتباس الحراري.</p>
</article><!-- /.blog-post -->
<article class="blog-post">
<h2 class="blog-post-title">ميزة جديدة</h2>
<p class="blog-post-meta">14 ديسمبر 2013 بواسطة <a href="#">Jacob</a></p>
<p>تحت بولندا، مليارات لم. الشهير الإنزال وفي بل, مع قبل واتّجه الخاسر باستخدام. قدما يونيو مواقعها يكن و, سابق أراضي الإكتفاء حتى كل, و جعل مهمّات المتحدة. أخذ عل الثقيل الضروري لإنعدام, دول جيما أراض الدولارات تم. الخاطفة استعملت وباستثناء ثم انه, به، جدول الأهداف ماليزيا، ان. عن هناك الإحتفاظ غير.</p>
<p>مرجع استدعى بريطانيا ذلك عن, ٣٠ كان ألمّ الشّعبين الأمريكي. دار تغييرات الشرقية التجارية كل, تم يتبقّ للحكومة كلّ. ثمّة الشتاء الساحل و الى, بل أثره، فاتّبع يتم. دون وترك وتنصيب المبرمة ما, هذه عن زهاء استدعى انتصارهم, يعبأ شواطيء الأرضية به، أم. والتي وفرنسا الأولية بـ هذه, قائمة الوزراء ضرب أي.</p>
<p>كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم "سولين" (Solein).</p>
<p>وتقوم الشركة حالياً بجمع البيانات حول المنتج الغذائي لتقديمه إلى الاتحاد الأوروبي بهدف الحصول على ترخيص غذائي، كما أنها تخطط لبدء الإنتاج التجاري في العام المقبل 2021م. وقد أوضحت الشركة أنها مهتمة بإنتاج أطعمة صديقة للبيئة من خلال استخدام المواد الأساسية: الكهرباء وثاني أكسيد الكربون، وهذه الأطعمة سوف تجنبنا الأثر السلبي البيئي للزراعة التقليدية الذي يشمل كل شيء من استخدام الأرض والمياه إلى الانبعاثات الناتجة من تسميد المحاصيل أو تربية الحيوانات.</p>
<p>وعلى هذا، فإن البروتينات المشتقة من الميكروبات سوف:</p>
<ul>
<li>بل دفّة فسقط بال, الله تغييرات الرئيسية من مدن. كرسي الأمم ويكيبيديا،.</li>
<li>لم عدد يطول جديدة ولاتّساع. أم تلك وحتّى.</li>
<li>ذات مئات المشترك بالمحور عن وشعار.</li>
<li>توفر حلاً ممكناً في ظل زيادة الطلب العالمي المستقبلي على الغذاء</li>
<li>تتوسع مصانع الغذاء في المستقبل لتكون أكفأ وأكثر استدامة</li>
<li>تصبح قادرة على توفير الغذاء لروَّاد الفضاء في سفرهم إلى المريخ وجميع سكان كوكب الأرض في عام 2050م</li>
</ul>
<p>لكل خلاف وترك المؤلّفة بل. ٣٠ حين أواخر أصقاع. بلا مع أوزار النزاع, مع إيطاليا بالرّغم بالمطالبة ومن. ان دول الحرة وقدّموا لتقليعة. الحرة بريطانيا، إذ وصل, الى وقام أجزاء أوراقهم عن. الباهضة الخاسرة حيث و.</p>
<p>فتخيّل أن الميكروبات ستكون مصانع المستقبل، وأن غذاء المستقبل سيكون مصنوعاً من الهواء! وأن عام 2050م سيكون مختلفاً تماماً عن عالمنا اليوم. فهو عالم من دون زراعة ولا تربية حيوانات من أجل الغذاء! قد يبدو ذلك خيالياً لكنه ليس مستحيلاً!</p>
</article><!-- /.blog-post -->
<nav class="blog-pagination" aria-label="Pagination">
<a class="btn btn-outline-primary" href="#">أقدم الوظائف</a>
<a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">أحدث المشاركات</a>
<a class="btn btn-outline-primary" href="#">تدوينات أقدم</a>
<a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">تدوينات أحدث</a>
</nav>
</div>
@ -159,11 +162,11 @@ include_js: false
<div class="col-md-4">
<div class="p-4 mb-3 bg-light rounded">
<h4 class="fst-italic">حول</h4>
<p class="mb-0">بل مدن وإعلان بتخصيص إيطاليا. حيث عقبت أساسي وتنامت و, وباءت وايرلندا وقد بـ, مرمى سقطت إحكام يكن و. كل ومن تصفح بالرّغم الاندونيسية. ٣٠ انتباه والروسية كلّ, الوراء ولكسمبورغ عن لكل. الخاصّة والإتحاد لان بل, وقد الهجوم وتنامت و.</p>
<p class="mb-0">أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.</p>
</div>
<div class="p-4">
<h4 class="fst-italic">أرشيف</h4>
<h4 class="fst-italic">الأرشيف</h4>
<ol class="list-unstyled mb-0">
<li><a href="#">مارس 2014</a></li>
<li><a href="#">شباط 2014</a></li>
@ -195,7 +198,7 @@ include_js: false
</main><!-- /.container -->
<footer class="blog-footer">
<p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/"> Bootstrap </a> بواسطة <a href="https://twitter.com/mdo">mdo </a>.</p>
<p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/">Bootstrap</a> بواسطة <a href="https://twitter.com/mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>.</p>
<p>
<a href="#">عد إلى الأعلى</a>
</p>

View File

@ -1,6 +1,6 @@
---
layout: examples
title: قالب دائري
title: قالب شرائح العرض
direction: rtl
extra_css:
- "../carousel/carousel.rtl.css"
@ -9,7 +9,7 @@ extra_css:
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">دائري</a>
<a class="navbar-brand" href="#">شرائح العرض</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="تبديل التنقل">
<span class="navbar-toggler-icon"></span>
</button>
@ -22,7 +22,7 @@ extra_css:
<a class="nav-link" href="#">حلقة الوصل</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">معاق</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">رابط غير مفعل</a>
</li>
</ul>
<form class="d-flex">
@ -48,7 +48,7 @@ extra_css:
<div class="container">
<div class="carousel-caption text-start">
<h1>عنوان المثال.</h1>
<p> نهاية الأوضاع ان أضف, هو مما رجوعهم وقدّموا. أي عدد الدمج نهاية وأكثرها, المسرح الباهضة وبولندا حول و, كل أما سياسة أسابيع. مع حيث قُدُماً الكونجرس, بها و خيار ٢٠٠٤, كلا في مكّن وقام. مع يكن زهاء بالفشل, الجوي الصين الشمال إذ على.</p>
<p>تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية وحدها بين عامي 2002 و2009م.</p>
<p><a class="btn btn-lg btn-primary" href="#">سجل اليوم</a></p>
</div>
</div>
@ -58,7 +58,7 @@ extra_css:
<div class="container">
<div class="carousel-caption">
<h1>عنوان مثال آخر.</h1>
<p>ثم تزامناً الفرنسي الإقتصادية دار. لكل عن الضغوط المتّبعة, أن حتى إختار المدن بالإنزال. عن الشمل بالفشل تلك, بل أراض أوزار بلديهما حول. دون لكون والتي ثم, كُلفة ويعزى استطاعوا أن لمّ. جُل بخطوط واحدة البشريةً.</p>
<p>حسب المجلس الثقافي البريطاني فإن تعليم الإنجليزية داخل بريطانيا يسهم في تعزيز اقتصادها بما يتجاوز ملياري جنيه سنوياً، كما أنه وفر أكثر من 26 ألف وظيفة.</p>
<p><a class="btn btn-lg btn-primary" href="#">أعرف أكثر</a></p>
</div>
</div>
@ -68,7 +68,7 @@ extra_css:
<div class="container">
<div class="carousel-caption text-end">
<h1>واحد أكثر لقياس جيد.</h1>
<p>قررت العصبة إيطاليا وتم أن, عن سكان وقامت الحكومة وفي. كان بـ اوروبا اليابانية, ثمّة بوابة يتعلّق عل بعض. عدم رئيس الآلاف أن حدى.</p>
<p>الإحصاءات لحجم الاستثمار اللغوي خارج بريطانيا تتفاوت من سنة لأخرى إلا أن المدير التنفيذي للمجلس الثقافي البريطاني إدي بايرز يرى أن استثمار تعليم الإنجليزية في الخارج لا يحسب على المستوى المالي فحسب بل على المستوى السياسي أيضاً.</p>
<p><a class="btn btn-lg btn-primary" href="#">تصفح المعرض</a></p>
</div>
</div>
@ -80,7 +80,7 @@ extra_css:
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">التالى</span>
<span class="visually-hidden">التالي</span>
</button>
</div>
@ -96,19 +96,19 @@ extra_css:
<div class="col-lg-4">
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
<h2>عنوان</h2>
<p>ان وتم عجّل الأجل, قبل نتيجة المشترك بـ, أي جعل جورج أوزار المسرح. أن وإعلان الساحل تلك, مكن ان استبدال الباهضة التكاليف. الى ماذا اليميني الحكومة في, إجلاء نتيجة قبل تم. مساعدة بولندا، أي هذه الحكم.</p>
<p>تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.</p>
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
<h2>عنوان</h2>
<p>هو أخر إتفاقية الدولارات الأوروبيّون, ثانية طوكيو و به،, ونتج أعمال مما أم. عن الا يونيو أفريقيا, السيطرة التقليدي ومن ٣٠. هو الغالي الإتفاقية ويكيبيديا، مكن, و الى هُزم اعتداء وايرلندا. وقبل بمباركة الأوروبيّون عن فقد, بتحدّي والفلبين ما كلا.</p>
<h2>عنوان آخر</h2>
<p>إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.</p>
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
<h2>عنوان</h2>
<p>غير عن الثقيل وسمّيت الأوضاع, لم تاريخ بالحرب للسيطرة حين, دار اللا تطوير تم. الى بشرية اليابان في. أما الشهيرة الإثنان وايرلندا ما, لإعلان واشتدّت و مدن. في غير والحزب للسيطرة الإكتفاء. ثانية الكونجرس الا من, جُل ٣٠ وبداية الشرقية.</p>
<h2>عنوان ثالث لتأكيد المعلومة</h2>
<p>بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.</p>
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
@ -121,7 +121,7 @@ extra_css:
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">العنوان الأول المميز. <span class="text-muted"> سيذهل عقلك. </span></h2>
<p class="lead">في التخطيط التجارية هذا, إذ هذه الشمل موالية الخاطفة. أحدث وبدون اتفاق من غير, جعل عل أطراف مشاركة الأعمال. بل الى قادة واحدة, لهيمنة التجارية حتى ثم. هو وبالرغم ابتدعها بال. بوابة ماشاء أما أي, ما وفي أحكم غريمه التقليدية.</p>
<p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p>
</div>
<div class="col-md-5">
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
@ -132,8 +132,8 @@ extra_css:
<div class="row featurette">
<div class="col-md-7 order-md-2">
<h2 class="featurette-heading">أوه نعم ، هذا جيد. <span class="text-muted"> شاهد بنفسك. </span></h2>
<p class="lead">صفحة وحرمان الأراضي أم أخذ, قد ذلك الثقيلة المتاخمة وبريطانيا. أخذ أن اللا لإعلان لهيمنة, وفي كل موالية الشّعبين. تكاليف الخاسرة لمّ لم, إذ بحق موالية الثقيلة. العظمى والفلبين تم عرض, جمعت شعار الحرة حيث بل. عرض و وترك اللازمة.</p>
<h2 class="featurette-heading">أوه نعم، هذا جيد. <span class="text-muted"> شاهد بنفسك. </span></h2>
<p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.</p>
</div>
<div class="col-md-5 order-md-1">
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
@ -144,8 +144,8 @@ extra_css:
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">وأخيرًا ، هذا. <span class="text-muted"> كش ملك. </span></h2>
<p class="lead">تحرّك أراضي هذا عن, كرسي وكسبت يتم بل. بحق بل القوى وفنلندا, الجو واُسدل التكاليف وتم تم, بسبب ا السادس كان أن. وبعد ميناء من بلا, تصفح يتبقّ تلك هو. ان دول بخطوط وإعلان ومطالبة, المزيفة الأوروبية، عل حدى قام.</p>
<h2 class="featurette-heading">وأخيرًا، هذا. <span class="text-muted"> كش ملك. </span></h2>
<p class="lead">إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ</p>
</div>
<div class="col-md-5">
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
@ -162,6 +162,6 @@ extra_css:
<!-- FOOTER -->
<footer class="container">
<p class="float-end"><a href="#">عد إلى الأعلى</a></p>
<p>&copy; 2017{{< year >}} Company, Inc. &middot; <a href="#">خصوصية</a> &middot; <a href="#">شروط</a></p>
<p>&copy; 2017{{< year >}} Company, Inc. &middot; <a href="#">سياسة الخصوصية</a> &middot; <a href="#">شروط الاستخدام</a></p>
</footer>
</main>

View File

@ -1,6 +1,6 @@
---
layout: examples
title: ورقة غش
title: ورقة الغش
extra_css:
- "../cheatsheet/cheatsheet.rtl.css"
extra_js:
@ -13,7 +13,7 @@ direction: rtl
<div class="container-fluid d-flex align-items-center">
<h1 class="d-flex align-items-center fs-4 text-white mb-0">
<img src="/docs/5.0/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap">
ورقة غش
ورقة الغش
</h1>
<a href="{{< docsref "/examples/cheatsheet" >}}" class="ms-auto link-light" hreflang="en">جدول بيانات LTR</a>
</div>
@ -23,48 +23,48 @@ direction: rtl
<nav class="small" id="toc">
<ul class="list-unstyled">
<li class="my-2">
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">محتويات</button>
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">المحتوى</button>
<ul class="list-unstyled ps-3 collapse" id="contents-collapse">
<li><a class="d-inline-flex align-items-center rounded" href="#typography">الطباعة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#images">صور</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#tables">جدول</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#figures">رقم</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#typography">النصوص</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#images">الصور</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#tables">الجداول</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#figures">النماذج البيانية</a></li>
</ul>
</li>
<li class="my-2">
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">نماذج</button>
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">النماذج</button>
<ul class="list-unstyled ps-3 collapse" id="forms-collapse">
<li><a class="d-inline-flex align-items-center rounded" href="#overview">نظرة عامة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">أشكال المعطلين</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#sizing">تحجيم</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">الحقول المعطلة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#sizing">الأحجام</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#input-group">مجموعة الإدخال</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">تسميات عائمة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">الحقول ذوي العناوين العائمة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#validation">التحقق</a></li>
</ul>
</li>
<li class="my-2">
<button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">مكونات</button>
<ul class="list-unstyled ps-3 collapse" id="components-collapse">
<li><a class="d-inline-flex align-items-center rounded" href="#accordion">الأكورديون</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#alerts">إنذار</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#badge">شارة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">مسار التنقل</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#buttons">أزرار</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#accordion">المطوية</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#alerts">الإنذارات</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#badge">الشارة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">مسار التنقل التفصيلي</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#buttons">الأزرار</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#button-group">مجموعة الأزرار</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#card">بطاقة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#carousel">شرائح عرض</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">هبوط قطرة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#list-group">مجموعة القوائم</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#modal">مشروط</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#card">البطاقة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#carousel">شرائح العرض</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">القوائم المنسدلة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#list-group">مجموعة العناصر</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#modal">الصندوق العائم</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#navs">التنقل</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#navbar">شريط التنقل</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#pagination">ترقيم الصفحات</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#popovers">بوبوفيرس</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#popovers">الصناديق المنبثقة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#progress">شريط التقدم</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">مخطوطة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#spinners">المغازل</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#toasts">نخب</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#tooltips">تلميحات الأدوات</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">المخطوطة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#spinners">الدوائر المتحركة</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#toasts">الإشعارات</a></li>
<li><a class="d-inline-flex align-items-center rounded" href="#tooltips">التلميحات</a></li>
</ul>
</li>
</ul>
@ -72,19 +72,19 @@ direction: rtl
</aside>
<div class="bd-cheatsheet container-fluid bg-body">
<section id="content">
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">محتويات</h2>
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">المحتوى</h2>
<article class="my-3" id="typography">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>الطباعة</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/typography" >}}">توثيق</a>
<h3>النصوص</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/typography" >}}">دليل الإستخدام</a>
</div>
<div>
{{< example show_markup="false" >}}
<p class="display-1">العرض 1</p>
<p class="display-2">العرض 2</p>
<p class="display-3 ">العرض 3</p>
<p class="display-3">العرض 3</p>
<p class="display-4">العرض 4</p>
<p class="display-5">العرض 5</p>
<p class="display-6">العرض 6</p>
@ -101,61 +101,58 @@ direction: rtl
{{< example show_markup="false" >}}
<p class="lead">
حيث وبدون الساحة وقوعها، أي, فقد عل مكّن تمهيد قتيل،. ولم والحزب الشرقي و, أضف بالفشل الخاسر استمرار ان. كل أما وحرمان للإتحاد, ٣٠ سبتمبر استعملت جهة, لعملة الثقيلة المتاخمة على لم. أي نفس دارت والفلبين.
هذه قطعة إملائية متميزة، فهي مصممة لتكون بارزة من بين القطع الإملائية الأخرى.
</p>
{{< /example >}}
{{< example show_markup="false" >}}
<p>يمكنك استخدام علامة <mark>العلامة</mark> لتحديد نص .</p>
<p>يمكنك استخدام تصنيف mark <mark>لتحديد</mark> نص.</p>
<p><del>من المفترض أن يتم التعامل مع هذا السطر كنص محذوف.</del></p>
<p><s>من المفترض أن يتم التعامل مع هذا السطر على أنه لم يعد دقيقًا.</s></p>
<p><ins>من المفترض أن يتم التعامل مع هذا السطر كإضافة إلى المستند.</ins></p>
<p><u>سيتم عرض هذا السطر كما هو مسطر.</u></p>
<p><small>من المفترض أن يتم التعامل مع هذا السطر على أنه طباعة جيدة.</small></p>
<p><strong>تم تقديم هذا السطر كنص عريض.</strong></p>
<p><em>تم تقديم هذا السطر كنص مائل.</em></p>
<p><u>سيتم عرض النص في هذا السطر كما وتحته خط.</u></p>
<p><small>من المفترض أن يتم التعامل مع هذا السطر على أنه يحوي تفاصيل صغيرة.</small></p>
<p><strong>هذا السطر يحوي نص عريض.</strong></p>
<p><em>هذا السطر يحوي نص مائل.</em></p>
{{< /example >}}
{{< example show_markup="false" >}}
<blockquote class="blockquote">
<p>بين كرسي والمعدات بالولايات تم. الذود اتّجة التقليدية يتم و, حيث وقرى.</p>
<p>إقتباس مبهر، موضوع في عنصر blockquote</p>
<footer class="blockquote-footer">شخص مشهور في <cite title= "عنوان المصدر"> عنوان المصدر </cite></footer>
</blockquote>
{{< /example >}}
{{< example show_markup="false" >}}
<ul class="list-unstyled">
<li>معقل الطريق واقتصار أم قام.</li>
<li>أمّا ولكسمبورغ ثم جُل, هو.</li>
<li>ان وبحلول لمحاكم الخارجية ومن.</li>
<li>بها بل العظمى إيطاليا الساحلية.</li>
<li>مدن قد وبحلول وأكثرها الدنمارك.
<li>هذه قائمة عناصر.</li>
<li>بالرغم من أنها مصممة كي لا تظهر كذلك.</li>
<li>إلا أنها مجهزة كـ قائمة خلف الكواليس</li>
<li>هذا التصميم ينطبق فقد على القائمة الرئيسية</li>
<li>القوائم الفرعية
<ul>
<li>به، المشترك إتفاقية.</li>
<li>لإعادة الواقعة و.</li>
<li>وترك وانتهاءً ضرب.</li>
<li>الشتاء العالم، أي.</li>
<li>لا تتأثر بهذا التصميم</li>
<li>فهي تظهر عليها علامات الترقيم</li>
<li>وتحتوي على مساحة فارغة بجوارها</li>
</ul>
</li>
<li>ودول يتسنّى بتطويق لمّ في.</li>
<li>بعض و مرمى يتسنّى, في.</li>
<li>أسيا اعلان ومحاولة عل انه.</li>
<li>قد يكون هذا التصميم مفيدًا في بعض الأحيان.</li>
</ul>
{{< /example >}}
{{< example show_markup="false" >}}
<ul class="list-inline">
<li class="list-inline-item">لمّ مع.</li>
<li class="list-inline-item">أم دون.</li>
<li class="list-inline-item">ذات بل.</li>
<li class="list-inline-item">هذا عنصر في قائمة.</li>
<li class="list-inline-item">وهذا أيضًا.</li>
<li class="list-inline-item">لكنهم يظهرون متجاورين.</li>
</ul>
{{< /example >}}
</div>
</article>
<article class="my-3" id="images">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>صور</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/images" >}}">توثيق</a>
<h3>الصور</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/images" >}}">دليل الإستخدام</a>
</div>
<div>
@ -170,8 +167,8 @@ direction: rtl
</article>
<article class="my-3" id="tables">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>جدول</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/tables" >}}">توثيق</a>
<h3>الجداول</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/tables" >}}">دليل الإستخدام</a>
</div>
<div>
@ -182,7 +179,7 @@ direction: rtl
<th scope="col">#</th>
<th scope="col">الاسم الاول</th>
<th scope="col">الكنية</th>
<th scope="col">اسم مستعار</th>
<th scope="col">الاسم المستعار</th>
</tr>
</thead>
<tbody>
@ -190,18 +187,18 @@ direction: rtl
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td><bdo lang="en" dir="ltr">@mdo</bdo></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td><bdo lang="en" dir="ltr">@fat</bdo></td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
<td><bdo lang="en" dir="ltr">@twitter</bdo></td>
</tr>
</tbody>
</table>
@ -214,7 +211,7 @@ direction: rtl
<th scope="col">#</th>
<th scope="col">الاسم الاول</th>
<th scope="col">الكنية</th>
<th scope="col">اسم مستعار</th>
<th scope="col">الاسم المستعار</th>
</tr>
</thead>
<tbody>
@ -222,18 +219,18 @@ direction: rtl
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td><bdo lang="en" dir="ltr">@mdo</bdo></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td><bdo lang="en" dir="ltr">@fat</bdo></td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
<td><bdo lang="en" dir="ltr">@twitter</bdo></td>
</tr>
</tbody>
</table>
@ -251,15 +248,15 @@ direction: rtl
<tbody>
<tr>
<th scope="row">Default</th>
<td>زنزانة</td>
<td>زنزانة</td>
<td>خلية</td>
<td>خلية</td>
</tr>
{{< table.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<tr class="table-{{ .name }}">
<th scope="row">{{ .name | title }}</th>
<td>زنزانة</td>
<td>زنزانة</td>
<td>خلية</td>
<td>خلية</td>
</tr>
{{- end -}}
{{< /table.inline >}}
@ -274,7 +271,7 @@ direction: rtl
<th scope="col">#</th>
<th scope="col">الاسم الاول</th>
<th scope="col">الكنية</th>
<th scope="col">اسم مستعار</th>
<th scope="col">الاسم المستعار</th>
</tr>
</thead>
<tbody>
@ -282,18 +279,18 @@ direction: rtl
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td><bdo lang="en" dir="ltr">@mdo</bdo></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td><bdo lang="en" dir="ltr">@fat</bdo></td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
<td><bdo lang="en" dir="ltr">@twitter</bdo></td>
</tr>
</tbody>
</table>
@ -302,8 +299,8 @@ direction: rtl
</article>
<article class="my-3" id="figures">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>رقم</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/figures" >}}">توثيق</a>
<h3>النماذج البيانية</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/figures" >}}">دليل الإستخدام</a>
</div>
<div>
@ -318,39 +315,39 @@ direction: rtl
</section>
<section id="forms">
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">نماذج</h2>
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">النماذج</h2>
<article class="my-3" id="overview">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>نظرة عامة</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/overview" >}}">توثيق</a>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/overview" >}}">دليل الإستخدام</a>
</div>
<div>
{{< example show_markup="false" >}}
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">عنوان البريد الالكترونى</label>
<label for="exampleInputEmail1" class="form-label">البريد الإلكتروني</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">لن نشارك بريدك الإلكتروني مع أي شخص آخر.</div>
<div id="emailHelp" class="form-text">لن نقوم بمشاركة بريدك الإلكتروني مع أي شخص آخر.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">كلمه السر</label>
<label for="exampleInputPassword1" class="form-label">كلمة السر</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">تفقدني</label>
<label class="form-check-label" for="exampleCheck1">اخترني</label>
</div>
<fieldset class="mb-3">
<legend>أزرار الراديو</legend>
<legend>أزرار الاختيار الأحادي</legend>
<div class="form-check">
<input type="radio" name="radios" class="form-check-input" id="exampleRadio1">
<label class="form-check-label" for="exampleRadio1">الراديو الافتراضي</label>
<input type="radio" name="radios" class="form-check-input" id="exampleRadio1" checked>
<label class="form-check-label" for="exampleRadio1">الخيار الافتراضي</label>
</div>
<div class="mb-3 form-check">
<input type="radio" name="radios" class="form-check-input" id="exampleRadio2">
<label class="form-check-label" for="exampleRadio2">راديو آخر</label>
<label class="form-check-label" for="exampleRadio2">خيار آخر</label>
</div>
</fieldset>
<div class="mb-3">
@ -359,10 +356,10 @@ direction: rtl
</div>
<div class="mb-3 form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">تم تحديد إدخال خانة الاختيار التبديل</label>
<label class="form-check-label" for="flexSwitchCheckChecked">زر على شكل مفتاح اختيار.</label>
</div>
<div class="mb-3">
<label for="customRange3" class="form-label">نطاق المثال</label>
<label for="customRange3" class="form-label">مثال على حقل اختيار نطاقي</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
</div>
<button type="submit" class="btn btn-primary">إرسال</button>
@ -372,8 +369,8 @@ direction: rtl
</article>
<article class="my-3" id="disabled-forms">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>أشكال المعطلين</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/overview" >}}#disabled-forms">توثيق</a>
<h3>الحقول المعطلة</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/overview" >}}#disabled-forms">دليل الإستخدام</a>
</div>
<div>
@ -381,44 +378,44 @@ direction: rtl
<form>
<fieldset disabled aria-label="مثال على مجموعة الحقول المعطلة">
<div class="mb-3">
<label for="disabledTextInput" class="form-label">إدخال معطل</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="إدخال معطل">
<label for="disabledTextInput" class="form-label">حقل إدخال معطل</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="حقل إدخال معطل">
</div>
<div class="mb-3">
<label for="disabledSelect" class="form-label">حدد القائمة معطل</label>
<label for="disabledSelect" class="form-label">قائمة اختيار معطلة</label>
<select id="disabledSelect" class="form-select">
<option>حدد معطل</option>
<option>خيار معطل</option>
</select>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
لا يمكن التحقق من هذا
زر اختيار معطل
</label>
</div>
</div>
<fieldset class="mb-3">
<legend>أزرار اختيار المعوقين</legend>
<legend>أزرار اختيار أحادي معطلين</legend>
<div class="form-check">
<input type="radio" name="radios" class="form-check-input" id="disabledRadio1" disabled>
<label class="form-check-label" for="disabledRadio1">راديو معطل</label>
<label class="form-check-label" for="disabledRadio1">خيار معطل</label>
</div>
<div class="mb-3 form-check">
<input type="radio" name="radios" class="form-check-input" id="disabledRadio2" disabled>
<label class="form-check-label" for="disabledRadio2">راديو آخر</label>
<label class="form-check-label" for="disabledRadio2">خيار آخر معطل</label>
</div>
</fieldset>
<div class="mb-3">
<label class="form-label" for="disabledCustomFile">تحميل معطل</label>
<label class="form-label" for="disabledCustomFile">رفع معطل</label>
<input type="file" class="form-control" id="disabledCustomFile" disabled>
</div>
<div class="mb-3 form-check form-switch">
<input class="form-check-input" type="checkbox" id="disabledSwitchCheckChecked" checked disabled>
<label class="form-check-label" for="disabledSwitchCheckChecked">تم تعطيل إدخال خانة الاختيار التبديل</label>
<label class="form-check-label" for="disabledSwitchCheckChecked">زر معطل على شكل مفتاح اختيار.</label>
</div>
<div class="mb-3">
<label for="disabledRange" class="form-label">نطاق المعوقين</label>
<label for="disabledRange" class="form-label">حقل اختيار نطاقي معطل</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="disabledRange">
</div>
<button type="submit" class="btn btn-primary">إرسال</button>
@ -429,18 +426,18 @@ direction: rtl
</article>
<article class="my-3" id="sizing">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>تحجيم</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/form-control" >}}#sizing">توثيق</a>
<h3>الأحجام</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/form-control" >}}#sizing">دليل الإستخدام</a>
</div>
<div>
{{< example show_markup="false" >}}
<div class="mb-3">
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg مثال">
<input class="form-control form-control-lg" type="text" placeholder="حقل إدخال كبير" aria-label=".form-control-lg مثال">
</div>
<div class="mb-3">
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg مثال">
<option selected>افتح قائمة التحديد هذه</option>
<option selected>افتح قائمة الاختيار هذه</option>
<option value="1">واحد</option>
<option value="2">اثنان</option>
<option value="3">ثلاثة</option>
@ -453,11 +450,11 @@ direction: rtl
{{< example show_markup="false" >}}
<div class="mb-3">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm مثال">
<input class="form-control form-control-sm" type="text" placeholder="حقل إدخال صغير" aria-label=".form-control-sm مثال">
</div>
<div class="mb-3">
<select class="form-select form-select-sm" aria-label=".form-select-sm مثال">
<option selected>افتح قائمة التحديد هذه</option>
<option selected>افتح قائمة الاختيار هذه</option>
<option value="1">واحد</option>
<option value="2">اثنان</option>
<option value="3">ثلاثة</option>
@ -472,28 +469,28 @@ direction: rtl
<article class="my-3" id="input-group">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>مجموعة الإدخال</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/input-group" >}}">توثيق</a>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/input-group" >}}">دليل الإستخدام</a>
</div>
<div>
{{< example show_markup="false" >}}
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="اسم المستخدم" aria-describedby="basic-addon1">
<span class="input-group-text" id="basic-addon1">أنا اسمي</span>
<input type="text" class="form-control" placeholder="فلان الفلاني" aria-label="الاسم" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="اسم مستخدم المستلم" aria-describedby="basic-addon2">
<span class="input-group-text" id="basic-addon2">@example.com</span>
<input type="text" class="form-control" placeholder="أنا أحب الكعك والقهوة" aria-label="الطعام المفضل" aria-describedby="basic-addon2">
<span class="input-group-text" id="basic-addon2">وغيرها</span>
</div>
<label for="basic-url" class="form-label">عنوان URL المخصص الخاص بك</label>
<label for="basic-url" class="form-label">عنوان حسابك الشخصي</label>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
<span class="input-group-text" id="basic-addon3"><bdo lang="en" dir="ltr">https://example.com/users/</bdo></span>
</div>
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<span class="input-group-text"><bdo lang="en" dir="ltr">.00</bdo></span>
<input type="text" class="form-control" aria-label="المبلغ (لأقرب دولار)">
<span class="input-group-text">.00</span>
<span class="input-group-text">$</span>
</div>
<div class="input-group">
<span class="input-group-text">مع textarea</span>
@ -504,8 +501,8 @@ direction: rtl
</article>
<article class="my-3" id="floating-labels">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>تسميات عائمة</h3>
<a class="d-flex align-items-center" href="{{< docsref "/forms/floating-labels" >}}">Documentation</a>
<h3>الحقول ذوي العناوين العائمة</h3>
<a class="d-flex align-items-center" href="{{< docsref "/forms/floating-labels" >}}">دليل الإستخدام</a>
</div>
<div>
@ -513,11 +510,11 @@ direction: rtl
<form>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">عنوان بريد الكتروني</label>
<label for="floatingInput">البريد الالكتروني</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="كلمه السر">
<label for="floatingPassword">كلمه السر</label>
<input type="password" class="form-control" id="floatingPassword" placeholder="كلمة السر">
<label for="floatingPassword">كلمة السر</label>
</div>
</form>
{{< /example >}}
@ -526,7 +523,7 @@ direction: rtl
<article class="my-3" id="validation">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>التحقق</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/validation" >}}">توثيق</a>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/validation" >}}">دليل الإستخدام</a>
</div>
<div>
@ -536,23 +533,23 @@ direction: rtl
<label for="validationServer01" class="form-label">الاسم الاول</label>
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
<div class="valid-feedback">
تبدو جيدا!
يبدو صحيحًا!
</div>
</div>
<div class="col-md-4">
<label for="validationServer02" class="form-label">الكنية</label>
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
<div class="valid-feedback">
تبدو جيدا!
يبدو صحيحًا!
</div>
</div>
<div class="col-md-4">
<label for="validationServerUsername" class="form-label">اسم المستخدم</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend3">@</span>
<input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
<span class="input-group-text" id="inputGroupPrepend3">@</span>
<div class="invalid-feedback">
يرجى اختيار اسم المستخدم.
يرجى اختيار اسم مستخدم.
</div>
</div>
</div>
@ -560,39 +557,39 @@ direction: rtl
<label for="validationServer03" class="form-label">مدينة</label>
<input type="text" class="form-control is-invalid" id="validationServer03" required>
<div class="invalid-feedback">
الرجاء إدخال مدينة صالحة.
يرجى إدخال مدينة صحيحة.
</div>
</div>
<div class="col-md-3">
<label for="validationServer04" class="form-label">حالة</label>
<select class="form-select is-invalid" id="validationServer04" required>
<option selected disabled value="">أختر...</option>
<option selected disabled value="">اختر...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
الرجاء تحديد ولاية صالحة.
يرجى اختيار ولاية صحيحة.
</div>
</div>
<div class="col-md-3">
<label for="validationServer05" class="form-label">الرمز البريدي</label>
<input type="text" class="form-control is-invalid" id="validationServer05" required>
<div class="invalid-feedback">
الرجاء تقديم رمز بريدي صالح.
يرجى إدخال رمز بريدي صحيح.
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
<label class="form-check-label" for="invalidCheck3">
وافق على الشروط والأحكام
أوافق على الشروط والأحكام
</label>
<div class="invalid-feedback">
يجب أن توافق قبل التقديم.
تجب الموافقة قبل إرسال النموذج.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">تقديم النموذج</button>
<button class="btn btn-primary" type="submit">إرسال النموذج</button>
</div>
</form>
{{< /example >}}
@ -601,12 +598,12 @@ direction: rtl
</section>
<section id="components">
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">مكونات</h2>
<h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">العناصر</h2>
<article class="my-3" id="accordion">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>انهيارالأكورديون</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/accordion" >}}">توثيق</a>
<h3>المطوية</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/accordion" >}}">دليل الإستخدام</a>
</div>
<div>
@ -615,36 +612,36 @@ direction: rtl
<div class="accordion-item">
<h4 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
عنصر الأكورديون #1
عنصر المطوية الأول
</button>
</h4>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
أخر جمعت اليها وحرمان بـ, لمّ حالية الربيع، ثم, بل حين سكان الأراضي. من سكان الإتفاقية عدم, بقصف واعتلاء بل جهة, ولم وبعد المؤلّفة هو. أمدها واقتصار ويكيبيديا إذ بعد, الطرفين والعتاد عل قبل. أدنى المؤلّفة إذ عدم, وبعد الثالث في جهة.
<strong>هذا هو محتوى عنصر المطوية الأول.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootsrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
</div>
</div>
</div>
<div class="accordion-item">
<h4 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
عنصر الأكورديون #2
عنصر المطوية الثاني
</button>
</h4>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
أخر جمعت اليها وحرمان بـ, لمّ حالية الربيع، ثم, بل حين سكان الأراضي. من سكان الإتفاقية عدم, بقصف واعتلاء بل جهة, ولم وبعد المؤلّفة هو. أمدها واقتصار ويكيبيديا إذ بعد, الطرفين والعتاد عل قبل. أدنى المؤلّفة إذ عدم, وبعد الثالث في جهة.
<strong>هذا هو محتوى عنصر المطوية الثاني.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootsrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
</div>
</div>
</div>
<div class="accordion-item">
<h4 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
عنصر الأكورديون #3
عنصر المطوية الثالث
</button>
</h4>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
أخر جمعت اليها وحرمان بـ, لمّ حالية الربيع، ثم, بل حين سكان الأراضي. من سكان الإتفاقية عدم, بقصف واعتلاء بل جهة, ولم وبعد المؤلّفة هو. أمدها واقتصار ويكيبيديا إذ بعد, الطرفين والعتاد عل قبل. أدنى المؤلّفة إذ عدم, وبعد الثالث في جهة.
<strong>هذا هو محتوى عنصر المطوية الثالث.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootsrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
</div>
</div>
</div>
@ -654,8 +651,8 @@ direction: rtl
</article>
<article class="my-3" id="alerts">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>إنذار</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/alerts" >}}">توثيق</a>
<h3>الإنذارات</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/alerts" >}}">دليل الإستخدام</a>
</div>
<div>
@ -681,20 +678,20 @@ direction: rtl
</article>
<article class="my-3" id="badge">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>شارة</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/badge" >}}">توثيق</a>
<h3>الشارة</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/badge" >}}">دليل الإستخدام</a>
</div>
<div>
{{< example show_markup="false" >}}
<p class="h1">عنوان المثال <span class="badge bg-primary">جديد</span></p>
<p class="h2">عنوان المثال <span class="badge bg-secondary">جديد</span></p>
<p class="h3">عنوان المثال <span class="badge bg-success">جديد</span></p>
<p class="h4">عنوان المثال <span class="badge bg-danger">جديد</span></p>
<p class="h5">عنوان المثال <span class="badge bg-warning text-dark">جديد</span></p>
<p class="h6">عنوان المثال <span class="badge bg-info text-dark">جديد</span></p>
<p class="h6">عنوان المثال <span class="badge bg-light text-dark">جديد</span></p>
<p class="h6">عنوان المثال <span class="badge bg-dark">جديد</span></p>
<p class="h1">مثال على عنوان <span class="badge bg-primary">جديد</span></p>
<p class="h2">مثال على عنوان <span class="badge bg-secondary">جديد</span></p>
<p class="h3">مثال على عنوان <span class="badge bg-success">جديد</span></p>
<p class="h4">مثال على عنوان <span class="badge bg-danger">جديد</span></p>
<p class="h5">مثال على عنوان <span class="badge bg-warning text-dark">جديد</span></p>
<p class="h6">مثال على عنوان <span class="badge bg-info text-dark">جديد</span></p>
<p class="h6">مثال على عنوان <span class="badge bg-light text-dark">جديد</span></p>
<p class="h6">مثال على عنوان <span class="badge bg-dark">جديد</span></p>
{{< /example >}}
{{< example show_markup="false" >}}
@ -707,16 +704,16 @@ direction: rtl
</article>
<article class="my-3" id="breadcrumb">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>مسار التنقل</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/breadcrumb" >}}">توثيق</a>
<h3>مسار التنقل التفصيلي (فتات الخبز)</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/breadcrumb" >}}">دليل الإستخدام</a>
</div>
<div>
{{< example show_markup="false" >}}
<nav aria-label="مسار الخبز">
<nav aria-label="فتات الخبز">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">الصفحة الرئيسية</a></li>
<li class="breadcrumb-item"><a href="#">مكتبة</a></li>
<li class="breadcrumb-item"><a href="#">المكتبة</a></li>
<li class="breadcrumb-item active" aria-current="page">البيانات</li>
</ol>
</nav>
@ -725,8 +722,8 @@ direction: rtl
</article>
<article class="my-3" id="buttons">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>أزرار</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/buttons" >}}">توثيق</a>
<h3>الأزرار</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/buttons" >}}">دليل الإستخدام</a>
</div>
<div>
@ -737,7 +734,7 @@ direction: rtl
{{- end -}}
{{< /buttons.inline >}}
<button type="button" class="btn btn-link">حلقة الوصل</button>
<button type="button" class="btn btn-link">رابط</button>
{{< /example >}}
{{< example show_markup="false" >}}
@ -758,12 +755,12 @@ direction: rtl
<article class="my-3" id="button-group">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>مجموعة الأزرار</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/button-group" >}}">توثيق</a>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/button-group" >}}">دليل الإستخدام</a>
</div>
<div>
{{< example show_markup="false" >}}
<div class="btn-toolbar" role="toolbar" aria-label="شريط الأدوات مع مجموعات الأزرار">
<div class="btn-toolbar" role="toolbar" aria-label="شريط أدوات مع مجموعات أزرار">
<div class="btn-group me-2" role="group" aria-label="المجموعة الأولى">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
@ -784,8 +781,8 @@ direction: rtl
</article>
<article class="my-3" id="card">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>بطاقة</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/card" >}}">توثيق</a>
<h3>البطاقة</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/card" >}}">دليل الإستخدام</a>
</div>
<div>
@ -812,7 +809,7 @@ direction: rtl
<a href="#" class="btn btn-primary">اذهب لمكان ما</a>
</div>
<div class="card-footer text-muted">
2 منذ أيام
منذ يومان
</div>
</div>
</div>
@ -823,9 +820,9 @@ direction: rtl
<p class="card-text">بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">أسر كل أراض.</li>
<li class="list-group-item">شرسة مشارف واستمرت.</li>
<li class="list-group-item">مكن إذ كانتا.</li>
<li class="list-group-item">عنصر</li>
<li class="list-group-item">عنصر آخر</li>
<li class="list-group-item">عنصر ثالث</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">رابط البطاقة</a>
@ -842,7 +839,7 @@ direction: rtl
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
<p class="card-text">هذه بطاقة أعرض مع نص داعم تحتها كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
<p class="card-text"><small class="text-muted">آخر تحديث منذ 3 دقائق</small></p>
</div>
</div>
@ -855,8 +852,8 @@ direction: rtl
</article>
<article class="my-3" id="carousel">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>شرائح عرض</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/carousel" >}}">توثيق</a>
<h3>شرائح العرض</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/carousel" >}}">دليل الإستخدام</a>
</div>
<div>
@ -871,22 +868,22 @@ direction: rtl
<div class="carousel-item active">
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="الشريحة الأولى" >}}
<div class="carousel-caption d-none d-md-block">
<h5>تسمية الشريحة الأولى</h5>
<p>إستعمل تحرّكت المتحدة كان ما. لم وفي الشرقي المتاخمة تعد.</p>
<h5>عنوان الشريحة الأولى</h5>
<p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p>
</div>
</div>
<div class="carousel-item">
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="الشريحة الثانية" >}}
<div class="carousel-caption d-none d-md-block">
<h5>تسمية الشريحة الثانية</h5>
<p>أجزاء الخاسرة التّحول ٣٠ انه, وصل أن عالمية التحالف التجارية.</p>
<h5>عنوان الشريحة الثانية</h5>
<p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p>
</div>
</div>
<div class="carousel-item">
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="الشريحة الثالثة" >}}
<div class="carousel-caption d-none d-md-block">
<h5>تسمية الشريحة الثالثة</h5>
<p>ان فقد ترتيب والديون. وتتحمّل الحيلولة أخذ قد. ضرب بل.</p>
<h5>عنوان الشريحة الثالثة</h5>
<p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p>
</div>
</div>
</div>
@ -896,7 +893,7 @@ direction: rtl
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">التالى</span>
<span class="visually-hidden">التالي</span>
</button>
</div>
{{< /example >}}
@ -904,8 +901,8 @@ direction: rtl
</article>
<article class="my-3" id="dropdowns">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>هبوط قطرة</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/dropdowns" >}}">توثيق</a>
<h3>القوائم المنسدلة</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/dropdowns" >}}">دليل الإستخدام</a>
</div>
<div>
@ -916,7 +913,7 @@ direction: rtl
زر القائمة المنسدلة
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSM">
<li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
<li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل آخر</a></li>
<li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
@ -929,7 +926,7 @@ direction: rtl
زر القائمة المنسدلة
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
<li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل آخر</a></li>
<li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
@ -942,7 +939,7 @@ direction: rtl
زر القائمة المنسدلة
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLG">
<li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
<li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل آخر</a></li>
<li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
@ -1026,10 +1023,10 @@ direction: rtl
<div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
<div class="dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
زر Dropend
زر القائمة المنسدلة لليسار
</button>
<ul class="dropdown-menu" aria-labelledby="dropendMenuButton">
<li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
<li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل آخر</a></li>
<li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
@ -1039,10 +1036,10 @@ direction: rtl
</div>
<div class="dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
زر Dropup
زر القائمة المنسدلة للأعلى
</button>
<ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
<li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
<li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل آخر</a></li>
<li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
@ -1052,10 +1049,10 @@ direction: rtl
</div>
<div class="dropstart">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
زر Dropstart
زر القائمة المنسدلة لليمين
</button>
<ul class="dropdown-menu" aria-labelledby="dropstartMenuButton">
<li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
<li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل آخر</a></li>
<li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
@ -1070,10 +1067,10 @@ direction: rtl
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownRightMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
قائمة بمحاذاة النهاية
قائمة منسدلة بمحاذاة نهاية الزر
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownRightMenuButton">
<li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
<li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
<li><a class="dropdown-item" href="#">عمل</a></li>
<li><a class="dropdown-item" href="#">عمل آخر</a></li>
<li><hr class="dropdown-divider"></li>
@ -1086,34 +1083,34 @@ direction: rtl
</article>
<article class="my-3" id="list-group">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>مجموعة القوائم</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/list-group" >}}">توثيق</a>
<h3>مجموعة العناصر</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/list-group" >}}">دليل الإستخدام</a>
</div>
<div>
{{< example show_markup="false" >}}
<ul class="list-group">
<li class="list-group-item active" aria-current="true">الفرنسية الأثناء، أي.</li>
<li class="list-group-item disabled" aria-disabled="true">كلّ في تعداد.</li>
<li class="list-group-item">وتم الأخذ أساسي.</li>
<li class="list-group-item">لدحر بشرية ابتدعها.</li>
<li class="list-group-item">لكون أسيا ولاتّساع.</li>
<li class="list-group-item disabled" aria-disabled="true">عنصر معطل</li>
<li class="list-group-item">عنصر ثاني</li>
<li class="list-group-item">عنصر ثالث</li>
<li class="list-group-item">عنصر رابع</li>
<li class="list-group-item">وعنصر خامس أيضًا</li>
</ul>
{{< /example >}}
{{< example show_markup="false" >}}
<ul class="list-group list-group-flush">
<li class="list-group-item">الفرنسية الأثناء، أي.</li>
<li class="list-group-item">كلّ في تعداد.</li>
<li class="list-group-item">وتم الأخذ أساسي.</li>
<li class="list-group-item">لدحر بشرية ابتدعها.</li>
<li class="list-group-item">لكون أسيا ولاتّساع.</li>
<li class="list-group-item">عنصر</li>
<li class="list-group-item">عنصر ثاني</li>
<li class="list-group-item">عنصر ثالث</li>
<li class="list-group-item">عنصر رابع</li>
<li class="list-group-item">وعنصر خامس أيضًا</li>
</ul>
{{< /example >}}
{{< example show_markup="false" >}}
<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">عنصر مجموعة قائمة default بسيط</a>
{{< list.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<a href="#" class="list-group-item list-group-item-action list-group-item-{{ .name }}">عنصر مجموعة قائمة {{ .name }} بسيط</a>
@ -1125,24 +1122,24 @@ direction: rtl
</article>
<article class="my-3" id="modal">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>مشروط</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/modal" >}}">توثيق</a>
<h3>الصندوق العائم</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/modal" >}}">دليل الإستخدام</a>
</div>
<div>
{{< example show_markup="false" >}}
<div class="d-flex justify-content-between flex-wrap">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalDefault">
إطلاق نموذج تجريبي
إطلاق صندوق عائم تجريبي
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive">
إطلاق مشروط خلفية ثابتة
إطلاق صندوق عائم عالق
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable">
مشروط قابل للتمرير تتمركز عموديًا
صندوق عائم متنصف عاموديًا وقابل للتمرير
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">
شاشة كاملة
صندوق عائم يملأ الشاشة
</button>
</div>
{{< /example >}}
@ -1151,15 +1148,15 @@ direction: rtl
<article class="my-3" id="navs">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>التنقل</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/navs-tabs" >}}">توثيق</a>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/navs-tabs" >}}">دليل الإستخدام</a>
</div>
<div>
{{< example show_markup="false" >}}
<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">نشيط</a>
<a class="nav-link" href="#">حلقة الوصل</a>
<a class="nav-link" href="#">حلقة الوصل</a>
<a class="nav-link active" aria-current="page" href="#">نشط</a>
<a class="nav-link" href="#">رابط</a>
<a class="nav-link" href="#">رابط</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">معطل</a>
</nav>
{{< /example >}}
@ -1169,18 +1166,18 @@ direction: rtl
<div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">الصفحة الرئيسية</button>
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">الملف الشخصي</button>
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">اتصل</button>
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">اتصل بنا</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<p class="px-3">هو أسيا والإتحاد أضف, فشكّل الإتفاقية ذلك في. اكتوبر والعتاد و لمّ, وفي أم ٢٠٠٤ وإقامة الانجليزية. وجزر المضي التقليدي ان أما. كلا لإنعدام استراليا، بـ, ٣٠ أضف بوابة أوزار مساعدة. ما السيطرة الأرضية دار, هو بال الساحة الموسوعة.</p>
<p class="px-3">محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الصفحة الرئيسية. إذن، أمامنا بعض التحدّيات الصعبة. لكن لا يمكننا أن نعتمد على التطورات التكنولوجية وحدها في ميدان قوى السوق الحرة، لإخراجنا من هذه الورطة، لا سيّما أنها نفسها، مقرونة بالافتقار إلى البصيرة، هي التي أودت بنا إلى هذا التبدُّل المناخي في الدرجة الأولى.</p>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<p class="px-3">بفرض البشريةً ذلك أي, ٣٠ تنفّس ليركز الإطلاق جُل. يكن ألمّ أمام في. بفرض الصينية الخاسرة هو لها. ومن معاملة وحلفاؤها كل. بلا يعادل العظمى مع. بـ بحث وجزر الصعداء الأعمال, لكون نتيجة هذا من. مع ثانية أوروبا بحث, كلّ بتطويق واستمرت أن.</p>
<p class="px-3">محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الملف الشخصي. معظم البشر في بلدان العالَم النامي، لم يقتنوا بعد مكيّفهم الأول، والمشكلة إلى ازدياد. فمعظم البلدان النامية هي من البلدان الأشد حرارة والأكثر اكتظاظًا بالسكان في العالم.</p>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
<p class="px-3">كلا تم وزارة الأسيوي, جهة خطّة سنغافورة إذ. فقد أن قبضتهم شواطيء, مسارح أوزار إبّان كلّ أي. أحكم استمرار مدن تم, الى إتفاقية الإنذار، ان, ما هذه أراض وصغار استمرار. دنو هو تجهيز أصقاع الأعمال. و وأزيز إيطاليا ومن, بـ يبق السفن أدوات, اتفاق شواطيء الأوروبي ذلك عن.</p>
<p class="px-3">محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الاتصال بنا. أمامنا بعض التحدّيات الصعبة. لكن لا يمكننا أن نعتمد على التطورات التكنولوجية وحدها في ميدان قوى السوق الحرة، بل يجب وضع معايير جدوى جديدة لشركات البناء ومعايير أعلى لجدوى التكييف من أجل تحفيز الحلول المستدامة قانونيًا.</p>
</div>
</div>
{{< /example >}}
@ -1188,13 +1185,13 @@ direction: rtl
{{< example show_markup="false" >}}
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">نشيط</a>
<a class="nav-link active" aria-current="page" href="#">نشط</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">حلقة الوصل</a>
<a class="nav-link" href="#">رابط</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">حلقة الوصل</a>
<a class="nav-link" href="#">رابط</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">معطل</a>
@ -1206,7 +1203,7 @@ direction: rtl
<article class="my-3" id="navbar">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>شريط التنقل</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/navbar" >}}">توثيق</a>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/navbar" >}}">دليل الإستخدام</a>
</div>
<div>
@ -1226,11 +1223,11 @@ direction: rtl
<a class="nav-link active" aria-current="page" href="#">الصفحة الرئيسية</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">حلقة الوصل</a>
<a class="nav-link" href="#">رابط</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
اسقاط
قائمة منسدلة
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">عمل</a></li>
@ -1265,11 +1262,11 @@ direction: rtl
<a class="nav-link active" aria-current="page" href="#">الصفحة الرئيسية</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">حلقة الوصل</a>
<a class="nav-link" href="#">رابط</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">
اسقاط
قائمة منسدلة
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2">
<li><a class="dropdown-item" href="#">عمل</a></li>
@ -1295,7 +1292,7 @@ direction: rtl
<article class="my-3" id="pagination">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>ترقيم الصفحات</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/pagination" >}}">توثيق</a>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/pagination" >}}">دليل الإستخدام</a>
</div>
<div>
@ -1323,7 +1320,7 @@ direction: rtl
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="التالى">
<a class="page-link" href="#" aria-label="التالي">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
@ -1352,27 +1349,29 @@ direction: rtl
</article>
<article class="my-3" id="popovers">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>بوبوفيرس</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/popovers" >}}">توثيق</a>
<h3>الصناديق المنبثقة</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/popovers" >}}">دليل الإستخدام</a>
</div>
<div>
{{< example show_markup="false" >}}
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="عنوان Popover" data-bs-content="وإليك بعض المحتويات الرائعة. إنه ممتع للغاية. حق؟">انقر لتبديل المنبثقة</button>
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="عنوان الصندوق المنبثق" data-bs-content="وإليك بعض المحتويات الرائعة. إنه آسر للغاية. أليس كذلك؟">
انقر لعرض/إخفاء الصندوق المنبثق
</button>
{{< /example >}}
{{< example show_markup="false" >}}
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="يرتبط لفرنسا ذلك تم, ان إعلان أدوات إنطلاق.">
انبثاق في الأعلى
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!">
انبثاق إلى الأعلى
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="يرتبط لفرنسا ذلك تم, ان إعلان أدوات إنطلاق.">
popover في النهاية
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!">
انبثاق إلى اليسار
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="يرتبط لفرنسا ذلك تم, ان إعلان أدوات إنطلاق.">
انبثاق في الأسفل
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!">
انبثاق إلى الأسفل
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="يرتبط لفرنسا ذلك تم, ان إعلان أدوات إنطلاق.">
popover عند البدء
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!">
انبثاق إلى اليمين
</button>
{{< /example >}}
</div>
@ -1380,7 +1379,7 @@ direction: rtl
<article class="my-3" id="progress">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>شريط التقدم</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/progress" >}}">توثيق</a>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/progress" >}}">دليل الإستخدام</a>
</div>
<div>
@ -1412,8 +1411,8 @@ direction: rtl
</article>
<article class="my-3" id="scrollspy">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>مخطوطة</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/scrollspy" >}}">توثيق</a>
<h3>المخطوطة</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/scrollspy" >}}">دليل الإستخدام</a>
</div>
<div>
@ -1422,13 +1421,13 @@ direction: rtl
<a class="navbar-brand" href="#">شريط التنقل</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
<a class="nav-link" href="#fat"><bdi lang="en" dir="ltr">@fat</bdi></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
<a class="nav-link" href="#mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">اسقاط</a>
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">قائمة منسدلة</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#one">واحد</a></li>
<li><a class="dropdown-item" href="#two">اثنان</a></li>
@ -1439,25 +1438,25 @@ direction: rtl
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example">
<h4 id="fat">@fat</h4>
<p>إنطلاق العالمي ما هذه, لم فسقط عُقر الهادي جُل. بعد ٣٠ شرسة النزاع اليميني. عن بحث اتّجة الصينية, مع وأزيز الفرنسية مدن, عدد مرجع العالمية لبلجيكا، أن. طوكيو أعلنت حيث بل. الأخذ واندونيسيا، إذ ذلك, به، قد معاملة وقوعها،. ولم التي إبّان بالفشل ٣٠, جنوب مشاركة حيث أم.</p>
<h4 id="mdo">@mdo</h4>
<p>بل الشتاء، بمحاولة جُل, فعل ببعض الأراضي مع. أما لم الأولى تكاليف, في بحشد جنوب الدول دون. في لمحاكم الإنزال تلك, أي بين الصفحة النزاع. عن دول فسقط احداث. وباءت التقليدي أم حيث, دنو ماذا واستمرت بل, غير ٣٠ بقعة هناك وفنلندا.</p>
<h4 id="fat"><bdi lang="en" dir="ltr">@fat</bdi></h4>
<p>محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.</p>
<h4 id="mdo"><bdi lang="en" dir="ltr">@mdo</bdi></h4>
<p>بصرف النظر عن تحسيننا جدوى المكيّفات أو عدم تحسينها، فإن الطلب على الطاقة سيزداد. وطبقاً لما جاء في مقالة معهد ماساشوستس للتكنولوجيا، السالف ذكره، ثمَّة أمر يجب عدم إغفاله، وهو كيف أن هذا الطلب سيضغط على نظم توفير الطاقة الحالية. إذ لا بد من إعادة تأهيل كل شبكات الكهرباء، وتوسيعها لتلبية طلب الطاقة في زمن الذروة، خلال موجات الحرارة المتزايدة. فحين يكون الحر شديداً يجنح الناس إلى البقاء في الداخل، وإلى زيادة تشغيل المكيّفات، سعياً إلى جو لطيف وهم يستخدمون أدوات وأجهزة مختلفة أخرى.</p>
<h4 id="one">واحد</h4>
<p>وزارة العاصمة الأوربيين حتى بـ. إذ دول مقاطعة بالرغم الأوروبي, كلّ هو نهاية لبولندا،, إذ مما ماشاء إتفاقية. إذ جهة تسبب وانتهاءً, تم تعد الذود أعلنت الأمريكية. ضرب نقطة حالية أن, ثم مارد للصين جديداً بين, بعد بل العظمى ابتدعها والفرنسي. ثم جعل يذكر ووصف, أثره، وعُرفت هو كان, بها قُدُماً البولندي ان. العالمي الجديدة، الفرنسية عرض كل.</p>
<p>وكل هذه الأمور المتزامنة من تشغيل الأجهزة، يزيد الضغط على شبكات الطاقة، كما أسلفنا. لكن مجرد زيادة سعة الشبكة ليس كافياً. إذ لا بد من تطوير الشبكات الذكية التي تستخدم الجسّاسات، ونظم المراقبة، والبرامج الإلكترونية، لتحديد متى يكون الشاغلون في المبنى، ومتى يكون ثمَّة حاجة إلى الطاقة، ومتى تكون الحرارة منخفضة، وبذلك يخرج الناس، فلا يستخدمون كثيراً من الكهرباء.</p>
<h4 id="two">اثنان</h4>
<p>إذ قِبل أعلنت عرض. ما به، هاربر قتيل، الإكتفاء, أوزار المنتصر لبولندا، بلا بـ. وبدون بزمام وبحلول جُل أن, مكن أي لعدم مشارف. تم أخر دفّة وصغار وبالتحديد،, وقد اعلان العالم واشتدّت عن. أي حين الأولية لبولندا،, كما مايو وحتّى فرنسا ثم.</p>
<p>مع الأسف، كل هذه الحلول المبتكرة مكلِّفة، وهذا ما يجعلها عديمة الجدوى في نظر بعض الشركات الخاصة والمواطن المتقشّف. إن بعض الأفراد الواعين بيئياً يبذلون قصارى جهدهم في تقليص استهلاكهم من الطاقة، ويعون جيداً أهمية أجهزة التكييف المجدية والأرفق بالبيئة. ولكن جهات كثيرة لن تتحرّك لمجرد حافز سلامة المناخ ووقف هدر الطاقة، ما دامت لا تحركها حوافز قانونية. وعلى الحكومات أن تُقدِم عند الاهتمام بالتغيّر المناخي، على وضع التشريعات المناسبة. فبالنظم والحوافز والدعم، يمكن دفع الشركات إلى اعتماد الحلول الأجدى في مكاتبها.</p>
<h4 id="three">ثلاثة</h4>
<p>لم هذا تسمّى إعادة مليون, ان يذكر فرنسا كما. إذ الدول الشتوية وأكثرها مدن. عرض بفرض بتحدّي الأوضاع تم. أحدث شاسعة تكبّد أخر من, ٣٠ حتى الخاطفة العالمية, هناك عالمية وقد لم. بشرية إتفاقية عل جهة, كل هُزم كانتا ضرب.</p>
<p>أن كلّ صفحة إعادة الأمريكية. بحث تشكيل ويعزى وتزويده بل. وحتّى وإعلان أن دار, من مكّن الصينية المشتّتون مكن, وبحلول للمجهود الأمريكي أن بحق. أم جهة وجهان الأرض.</p>
<p>وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!</p>
<p>ولا مانع من إضافة محتوى آخر ليس تحت أي قسم معين.</p>
</div>
</div>
</div>
</article>
<article class="my-3" id="spinners">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>المغازل</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/spinners" >}}">توثيق</a>
<h3>الدوائر المتحركة</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/spinners" >}}">دليل الإستخدام</a>
</div>
<div>
@ -1484,8 +1483,8 @@ direction: rtl
</article>
<article class="my-3" id="toasts">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>نخب</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/toasts" >}}">توثيق</a>
<h3>الإشعارات</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/toasts" >}}">دليل الإستخدام</a>
</div>
<div>
@ -1498,7 +1497,7 @@ direction: rtl
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="قريب"></button>
</div>
<div class="toast-body">
مرحبا بالعالم! هذه رسالة نخب.
مرحبا بالعالم! هذه رسالة إشعار.
</div>
</div>
{{< /example >}}
@ -1506,16 +1505,16 @@ direction: rtl
</article>
<article class="mt-3 mb-5 pb-5" id="tooltips">
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
<h3>تلميحات الأدوات</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/tooltips" >}}">توثيق</a>
<h3>التلميحات</h3>
<a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/tooltips" >}}">دليل الإستخدام</a>
</div>
<div>
{{< example show_markup="false" class="tooltip-demo" >}}
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="تلميح في الأعلى">تلميح في الأعلى</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="تلميح في النهاية">تلميح في النهاية</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="تلميح في الأسفل">تلميح في الأسفل</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="تلميح عند البدء">تلميح عند البدء</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="تلميح يظهر في الأعلى">تلميح يظهر في الأعلى</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="تلميح يظهر على اليسار">تلميح يظهر على اليسار</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="تلميح يظهر في الأسفل">تلميح يظهر في الأسفل</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="تلميح يظهر على اليمين">تلميح يظهر على اليمين</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>تلميح</em> <u>مع</u> <b>HTML</b>">تلميح مع HTML</button>
{{< /example >}}
</div>
@ -1527,15 +1526,15 @@ direction: rtl
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">عنوان مشروط</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="قريب"></button>
<h5 class="modal-title" id="exampleModalLabel">عنوان الصندوق العائم</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">قريب</button>
<button type="button" class="btn btn-primary">احفظ التغييرات</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
<button type="button" class="btn btn-primary">حفظ التغيرات</button>
</div>
</div>
</div>
@ -1544,36 +1543,38 @@ direction: rtl
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLiveLabel">عنوان مشروط</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="قريب"></button>
<h5 class="modal-title" id="staticBackdropLiveLabel">عنوان الصندوق العائم</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
</div>
<div class="modal-body">
<p>لن أغلق إذا نقرت خارج لي. لا تحاول حتى الضغط على مفتاح الهروب.</p>
<p>لن أغلق إذا نقرت خارجي. لا تحاول حتى الضغط على مفتاح الهروب.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">قريب</button>
<button type="button" class="btn btn-primary">فهمت</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
<button type="button" class="btn btn-primary">حسنًا</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollable">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">عنوان مشروط</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="قريب"></button>
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">عنوان الصندوق العائم</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
</div>
<div class="modal-body">
<p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p>
<p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p>
<p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p>
<p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p>
<p>وفي الثالث، الإثنان من, أم وعلى مهمّات على, بـ فرنسية بولندا، لها. لمّ ان قامت تعديل المدن, ٣٠ لمحاكم المعاهدات إيو. كثيرة أدوات ويكيبيديا و بها, أم جدول العصبة بحث. أساسي معارضة بـ هذه, شيء مسرح واتّجه الشّعبين ٣٠. بينما واحدة إذ لمّ.</p>
<p>نص لتوضيح عمل الصندوق العائم المتنصّف عاموديًا القابل للتمرير</p>
<p>في هذه الحالة، هذا الصندوق يحتوي على محتوى أكثر قليلًا، ولذلك لتوضيح كيف يمكن إضافة خاصية الإنتصاف العامودي لصندوق عائم قابل للتمرير.</p>
<p>يعتبر كوب أو فنجان القهوة عادة يومية عند غالبية سكان الكرة الأرضية في الصباح والمساء، وفي حين تكثر الدراسات حول إيجابياتها هناك أيضا سلبيات كثيرة للمشروب المفضل للكثيرين.</p>
<p>وفي هذا الشأن، أظهرت دراسة جديدة أن تناول الكافيين بانتظام يقلل من حجم المادة الرمادية في الدماغ، مما يشير إلى أن تناول القهوة يمكن أن يضعف القدرة على معالجة المعلومات، وفقاً لما نشرته "ديلي ميل" البريطانية.</p>
<p>وأعطى باحثون سويسريون متطوعين ثلاث حصص من الكافيين 150 ملغم يوميًا لمدة 10 أيام - وهو مقدار كافيين يعادل حوالي أربعة أو خمسة أكواب صغيرة من القهوة المخمرة يوميًا، أو سبعة إسبريسو فردي.</p>
<p>وتبين حدوث انخفاض في المادة الرمادية، والتي توجد غالبًا في الطبقة الخارجية للدماغ، أو القشرة، وتعمل على معالجة المعلومات.</p>
<p>كما كان الانخفاض مذهلاً بشكل خاص في الفص الصدغي الإنسي الأيمن، بما في ذلك الحُصين، وهي منطقة من الدماغ ضرورية لتقوية الذاكرة.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">قريب</button>
<button type="button" class="btn btn-primary">احفظ التغييرات</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
<button type="button" class="btn btn-primary">حفظ التغيرات</button>
</div>
</div>
</div>
@ -1582,32 +1583,22 @@ direction: rtl
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">مشروط ملء الشاشة</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="قريب"></button>
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">صندوق عائم يملأ الشاشة</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
</div>
<div class="modal-body">
<p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p>
<p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p>
<p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p>
<p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p>
<p>وفي الثالث، الإثنان من, أم وعلى مهمّات على, بـ فرنسية بولندا، لها. لمّ ان قامت تعديل المدن, ٣٠ لمحاكم المعاهدات إيو. كثيرة أدوات ويكيبيديا و بها, أم جدول العصبة بحث. أساسي معارضة بـ هذه, شيء مسرح واتّجه الشّعبين ٣٠. بينما واحدة إذ لمّ.</p>
<p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p>
<p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p>
<p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p>
<p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p>
<p>وفي الثالث، الإثنان من, أم وعلى مهمّات على, بـ فرنسية بولندا، لها. لمّ ان قامت تعديل المدن, ٣٠ لمحاكم المعاهدات إيو. كثيرة أدوات ويكيبيديا و بها, أم جدول العصبة بحث. أساسي معارضة بـ هذه, شيء مسرح واتّجه الشّعبين ٣٠. بينما واحدة إذ لمّ.</p>
<p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p>
<p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p>
<p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p>
<p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p>
<p>وفي الثالث، الإثنان من, أم وعلى مهمّات على, بـ فرنسية بولندا، لها. لمّ ان قامت تعديل المدن, ٣٠ لمحاكم المعاهدات إيو. كثيرة أدوات ويكيبيديا و بها, أم جدول العصبة بحث. أساسي معارضة بـ هذه, شيء مسرح واتّجه الشّعبين ٣٠. بينما واحدة إذ لمّ.</p>
<p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p>
<p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p>
<p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p>
<p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p>
<p>في ما يلي، نص طويل لتعبئة كامل الشاشة. قد يبدو أنني أثرثر كثيرًا، لذا سأقوم بنسخ مقالة من إحدى الصحف العربية.</p>
<p>تكييف الهواء هو من التكنولوجيا التي ما إن نمتلكها حتى نصبح عاجزين عن تخيّل العيش من دونها. وتكييف الهواء في مناطق عديدة من العالم ليس ترفاً يمكن الاستغناء عنه. ولكن هذه الحاجة الحيوية تثير تحديات كبيرة على مستوى استهلاك الطاقة في معظم بلدان العالم. ويُتوقع أن تتفاقم هذه التحديات خلال العقود الثلاثة المقبلة، مع توقُّع ارتفاع عدد المكيفات في العالم نحو ثلاثة أضعاف. وفي حين أن الابتكارات التكنولوجية تحقِّق كل يوم إنجازاً جديداً، وعلى الرغم من بعض التحسينات والتدابير المحدودة التي طرأت على صناعة المكيفات، “فإن تكنولوجيتها الأساسية لا تزال تعمل كما كانت، منذ اعتمادها قبل نحو قرن من السنين"، حسبما جاء في تقرير لمعهد ماساشوستس للتكنولوجيا (MIT)، في الأول من سبتمبر 2020م. ولمعالجة هذه المشكلات الخطيرة، لا مفر من إعادة التفكير بجد.</p>
<p>التكييف حاجة حيويّة. فالتعرّض للحرارة لمدة طويلة ضارٌ بالصحة. ووفقاً لمنظمة الصحة العالميّة يمكن للتعرُّض الطويل للحرارة أيضاً أن يؤدي إلى "إعياء حراري، وضربة شمس، وتورّم في الرجلين، وطفح جلدي على العنق، وتشنج، وصداع، وحساسيّة، والخمول والوهَن. ويمكن للحرارة أن تسبِّب جفافاً خطراً، وأعراضاً حادة في أوعية الدماغ الدمويّة، وتسهم في تكوّن الجلطات".</p>
<p>وموجات الحر أيضاً من أشد المخاطر الطبيعيّة المميتة. إذ يقدَّر أن بين عامي 1998 و2017م، توفي نحو 166 ألف شخص من موجات الحر. ومات 70 ألفاً من هؤلاء في أوروبا سنة 2003م وحدها. ومن دون أن يصل الخطر إلى الموت، تتسبَّب الحرارة العالية بانخفاض الأداء المعرفي لدى الشبان البالغين في المباني غير المكيّفة. فقد بيّنت دراسة أجرتها "كليّة ت. هـ. تشان" للصحة العامة في جامعة هارفرد، نشرتها "بلوس ميديسين" في 10 يوليو 2018م، أن التلاميذ الذين ينامون في مهاجع غير مكيّفة، يقل أداؤهم عن أولئك الذين ينامون في مهاجع مكيّفة. ولتجنّب مخاطر التعرّض للحرارة، يلتفت الناس إلى استخدام التكييف.</p>
<p>يتطلّب التكييف كثيراً من الطاقة. فنحو %10 من استهلاك الكهرباء في العالم يُنفَق في تشغيل المكيّفات. وتصل هذه النسبة إلى %50 في المملكة حسب "المركز السعودي لكفاءة الطاقة". أضف إلى ذلك أن معظم البشر في بلدان العالم النامي، لم يقتنوا بعد مكيّفهم الأول، والمشكلة إلى ازدياد. فمعظم البلدان النامية هي من البلدان الأشد حرارة والأكثر اكتظاظاً بالسكان في العالم. وجاء في تقرير لوكالة الطاقة الدوليّة بعنوان "مستقبل التبريد"، ونُشر في مايو 2018م، أن في أجزاء من أمريكا الجنوبيّة وإفريقيا وآسيا والشرق الأوسط، يعيش 2.8 مليار نسمة، ولا يملك وحدات تكييف سوى %8 من المنازل. في حين الدول المتقدِّمة مثل كوريا الجنوبيّة، واليابان، والولايات المتحدة، فإن %89 من المنازل تملك مكيفات، وفي الصين %60 من البيوت تملكها أيضاً.</p>
<p>ولكن مع تنامي الدخل في بلدان الاقتصاد الصاعد، يتوقّع أن تزداد المنازل التي تقتني مكيّفاً. وبحسب مقالة نُشرت في صحيفة "نيويورك تايمز"، في 15 مايو 2018م، سيرتفع عدد المكيّفات في العالم من نحو 1.6 مليار حالياً، إلى 5.6 مليارات عام 2050م، طبقاً لمعدَّلات النمو الاقتصادي.</p>
<p>ومع الافتقار إلى الابتكار وتطوير النظم لفرض معايير الجدوى الأعلى، فسيتضاعف استهلاك الطاقة لتشغيل المكيّفات ثلاثة أضعاف. وسينتج من ذلك طلب إضافي للطاقة يساوي مجموع إنتاج الطاقة في الصين حالياً. فمبيعات المكيّفات ترتفع اليوم في البلدان النامية، لكن فعاليّة هذه الوحدات مشكوك فيها. فمثلاً، أوسع وحدات التكييف انتشاراً في بعض الأسواق الآسيوية تتطلّب ضعفي ما تتطلّبه وحدات تكييف أجدى. والمكيّفات التي تباع في اليابان والاتحاد الأوروبي أجدى بنسبة %25 عادة، من تلك التي تباع في الصين والولايات المتحدة.</p>
<p>وبصرف النظر عن كثير من الطاقة التي يحتاج إليها المكيّف، فإنه يبث مقادير وفيرة من غازات الدفيئة نفسها. وطبقاً لموقع تكييف الهواء (airconditioning.com)، فإن المبرِّدات في معظم المكيّفات مثل مواد مركبات الكربون الكلورية فلورية أو مواد هيدروفلوروولفينات، ومركبات ثاني أكسيد الكربون الهيدروكلورية فلورية، أسوأ بكثير للبيئة من ثاني أكسيد الكربون، لأنها تحتبس من الحرارة مقادير أكبر حين تتسرّب إلى الجو.</p>
<p>وبالإضافة إلى ظاهرة الدفيئة، فهذه الغازات تسهم أيضاً بالإضرار بطبقة الأوزون. ويمكن لهذه المواد الكيميائية أن تتسرّب خلال عملية التصنيع أو التصليح. ويعرف كل من يملك في منزله مكيّفاً كم تتكرر أعطال هذه الأجهزة. ثم إن المكيف يُرمَى حين يتعطّل نهائياً ولا يعود قابلاً للإصلاح، والمواد المبرِّدة فيه ستتسرّب على الأرجح لتلوث الهواء.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">قريب</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
</div>
</div>
</div>

View File

@ -1,6 +1,6 @@
---
layout: examples
title: مثال الخروج
title: مثال إتمام الشراء
direction: rtl
extra_css:
- "../checkout/form-validation.css"
@ -13,14 +13,14 @@ body_class: "bg-light"
<main>
<div class="py-5 text-center">
<img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
<h2>نموذج الخروج</h2>
<h2>نموذج إتمام الشراء</h2>
<p class="lead">فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.</p>
</div>
<div class="row g-3">
<div class="col-md-5 col-lg-4 order-md-last">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">عربتك</span>
<span class="text-muted">عربة التسوق</span>
<span class="badge bg-secondary rounded-pill">3</span>
</h4>
<ul class="list-group mb-3">
@ -61,27 +61,27 @@ body_class: "bg-light"
<form class="card p-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="رمز ترويجي">
<button type="submit" class="btn btn-secondary">افتدى</button>
<button type="submit" class="btn btn-secondary">تحقق</button>
</div>
</form>
</div>
<div class="col-md-7 col-lg-8">
<h4 class="mb-3">عنوان وصول الفواتير</h4>
<h4 class="mb-3">عنوان الفوترة</h4>
<form class="needs-validation" novalidate>
<div class="row g-3">
<div class="col-sm-6">
<label for="firstName" class="form-label">الاسم الاول</label>
<label for="firstName" class="form-label">الاسم الأول</label>
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
<div class="invalid-feedback">
مطلوب الاسم الأول صالح.
يرجى إدخال اسم أول صحيح.
</div>
</div>
<div class="col-sm-6">
<label for="lastName" class="form-label">الكنية</label>
<label for="lastName" class="form-label">اسم العائلة</label>
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
<div class="invalid-feedback">
مطلوب اسم أخير صالح.
يرجى إدخال اسم عائلة صحيح.
</div>
</div>
@ -97,45 +97,45 @@ body_class: "bg-light"
</div>
<div class="col-12">
<label for="email" class="form-label"><span class="text-muted">(اختياري)</span>البريد الإلكتروني </label>
<label for="email" class="form-label">البريد الإلكتروني <span class="text-muted">(اختياري)</span></label>
<input type="email" class="form-control" id="email" placeholder="you@example.com">
<div class="invalid-feedback">
يرجى إدخال عنوان بريد إلكتروني صالح لتحديثات الشحن.
يرجى إدخال عنوان بريد إلكتروني صحيح لتصلكم تحديثات الشحن.
</div>
</div>
<div class="col-12">
<label for="address" class="form-label">عنوان</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
<label for="address" class="form-label">العنوان</label>
<input type="text" class="form-control" id="address" placeholder="1234 الشارع الأول" required>
<div class="invalid-feedback">
يرجى إدخال عنوان الشحن الخاص بك.
</div>
</div>
<div class="col-12">
<label for="address2" class="form-label"><span class="text-muted">(اختياري)</span>عنوان 2 </label>
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
<label for="address2" class="form-label">عنوان 2 <span class="text-muted">(اختياري)</span></label>
<input type="text" class="form-control" id="address2" placeholder="شقة 24">
</div>
<div class="col-md-5">
<label for="country" class="form-label">بلد</label>
<label for="country" class="form-label">البلد</label>
<select class="form-select" id="country" required>
<option value="">أختر...</option>
<option value="">اختر...</option>
<option>الولايات المتحدة الأمريكية</option>
</select>
<div class="invalid-feedback">
يرجى تحديد بلد صالح.
يرجى اختيار بلد صحيح.
</div>
</div>
<div class="col-md-4">
<label for="state" class="form-label">حالة</label>
<label for="state" class="form-label">المنطقة</label>
<select class="form-select" id="state" required>
<option value="">أختر...</option>
<option value="">اختر...</option>
<option>كاليفورنيا</option>
</select>
<div class="invalid-feedback">
يرجى تقديم حالة صالحة.
يرجى اختيار اسم منطقة صحيح.
</div>
</div>
@ -152,7 +152,7 @@ body_class: "bg-light"
<div class="form-check">
<input type="checkbox" class="form-check-input" id="same-address">
<label class="form-check-label" for="same-address">عنوان الشحن هو نفس عنوان الفاتورة الخاص بي</label>
<label class="form-check-label" for="same-address">عنوان الشحن هو نفس عنوان الفوترة الخاص بي</label>
</div>
<div class="form-check">
@ -162,16 +162,16 @@ body_class: "bg-light"
<hr class="my-4">
<h4 class="mb-3">دفع</h4>
<h4 class="mb-3">طريقة الدفع</h4>
<div class="my-3">
<div class="form-check">
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
<label class="form-check-label" for="credit">بطاقة الائتمان</label>
<label class="form-check-label" for="credit">بطاقة ائتمان</label>
</div>
<div class="form-check">
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="debit">بطاقة ائتمان</label>
<input id="cash" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="cash">نقد</label>
</div>
<div class="form-check">
<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
@ -190,7 +190,7 @@ body_class: "bg-light"
</div>
<div class="col-md-6">
<label for="cc-number" class="form-label">رقم بطاقه الائتمان</label>
<label for="cc-number" class="form-label">رقم البطاقة</label>
<input type="text" class="form-control" id="cc-number" placeholder="" required>
<div class="invalid-feedback">
رقم بطاقة الائتمان مطلوب
@ -198,7 +198,7 @@ body_class: "bg-light"
</div>
<div class="col-md-3">
<label for="cc-expiration" class="form-label">انتهاء الصلاحية</label>
<label for="cc-expiration" class="form-label">تاريخ انتهاء الصلاحية</label>
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
<div class="invalid-feedback">
تاريخ انتهاء الصلاحية مطلوب
@ -206,7 +206,7 @@ body_class: "bg-light"
</div>
<div class="col-md-3">
<label for="cc-cvv" class="form-label">CVV</label>
<label for="cc-cvv" class="form-label">الرمز الثلاثي (CVV)</label>
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
<div class="invalid-feedback">
رمز الحماية مطلوب
@ -216,7 +216,7 @@ body_class: "bg-light"
<hr class="my-4">
<button class="w-100 btn btn-primary btn-lg" type="submit">الاستمرار في الخروج</button>
<button class="w-100 btn btn-primary btn-lg" type="submit">الاستمرار بالدفع</button>
</form>
</div>
</div>
@ -224,9 +224,9 @@ body_class: "bg-light"
<footer class="my-5 pt-5 text-muted text-center text-small">
<p class="mb-1">&copy; {{< year >}}-2017 اسم الشركة</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">خصوصية</a></li>
<li class="list-inline-item"><a href="#">شروط</a></li>
<li class="list-inline-item"><a href="#">الدعم</a></li>
<li class="list-inline-item"><a href="#">سياسة الخصوصية</a></li>
<li class="list-inline-item"><a href="#">اتفاقية الاستخدام</a></li>
<li class="list-inline-item"><a href="#">الدعم الفني</a></li>
</ul>
</footer>
</div>

View File

@ -17,8 +17,8 @@
'الثلاثاء',
'الأربعاء',
'الخميس',
'يوم الجمعة',
'يوم السبت'
'الجمعة',
'السبت'
],
datasets: [{
data: [

View File

@ -14,13 +14,13 @@ extra_js:
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">اسم الشركة</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل">
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="عرض/إخفاء لوحة التنقل">
<span class="navbar-toggler-icon"></span>
</button>
<input class="form-control form-control-dark w-100" type="text" placeholder="بحث" aria-label="بحث">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">خروج</a>
<a class="nav-link" href="#">تسجيل الخروج</a>
</li>
</ul>
</header>
@ -39,13 +39,13 @@ extra_js:
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
أوامر
الطلبات
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
منتجات
المنتجات
</a>
</li>
<li class="nav-item">
@ -63,14 +63,14 @@ extra_js:
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
التكامل
التكاملات
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>التقارير المحفوظة</span>
<a class="link-secondary" href="#" aria-label="أضف تقرير جديد">
<a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
<span data-feather="plus-circle"></span>
</a>
</h6>
@ -90,13 +90,13 @@ extra_js:
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
ارتباط اجتماعي
التفاعل الإجتماعي
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
بيع نهاية العام
مبيعات نهاية العام
</a>
</li>
</ul>
@ -108,12 +108,12 @@ extra_js:
<h1 class="h2">لوحة القيادة</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
<button type="button" class="btn btn-sm btn-outline-secondary">شارك</button>
<button type="button" class="btn btn-sm btn-outline-secondary">مشاركة</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
<span data-feather="calendar"></span>
هذا الاسبوع
هذا الأسبوع
</button>
</div>
</div>
@ -126,124 +126,124 @@ extra_js:
<thead>
<tr>
<th>#</th>
<th>العنوان</th>
<th>العنوان</th>
<th>العنوان</th>
<th>العنوان</th>
<th>عنوان</th>
<th>عنوان</th>
<th>عنوان</th>
<th>عنوان</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>أم.</td>
<td>و.</td>
<td>ثمّة.</td>
<td>ويتّفق.</td>
<td>بيانات</td>
<td>عشوائية</td>
<td>تثري</td>
<td>الجدول</td>
</tr>
<tr>
<td>1,002</td>
<td>أضف.</td>
<td>ما.</td>
<td>من.</td>
<td>أم.</td>
<td>تثري</td>
<td>مبهة</td>
<td>تصميم</td>
<td>تنسيق</td>
</tr>
<tr>
<td>1,003</td>
<td>دار.</td>
<td>ذلك.</td>
<td>يبق.</td>
<td>المتحدة.</td>
<td>عشوائية</td>
<td>غنية</td>
<td>قيمة</td>
<td>مفيدة</td>
</tr>
<tr>
<td>1,003</td>
<td>فكانت.</td>
<td>الخارجية.</td>
<td>الآخر.</td>
<td>حتى.</td>
<td>معلومات</td>
<td>تثري</td>
<td>توضيحية</td>
<td>عشوائية</td>
</tr>
<tr>
<td>1,004</td>
<td>أم.</td>
<td>و.</td>
<td>ثمّة.</td>
<td>ويتّفق.</td>
<td>الجدول</td>
<td>بيانات</td>
<td>تنسيق</td>
<td>قيمة</td>
</tr>
<tr>
<td>1,005</td>
<td>أضف.</td>
<td>ما.</td>
<td>من.</td>
<td>أم.</td>
<td>قيمة</td>
<td>مبهة</td>
<td>الجدول</td>
<td>تثري</td>
</tr>
<tr>
<td>1,006</td>
<td>دار.</td>
<td>ذلك.</td>
<td>يبق.</td>
<td>المتحدة.</td>
<td>قيمة</td>
<td>توضيحية</td>
<td>غنية</td>
<td>عشوائية</td>
</tr>
<tr>
<td>1,007</td>
<td>أم.</td>
<td>و.</td>
<td>ثمّة.</td>
<td>ويتّفق.</td>
<td>تثري</td>
<td>مفيدة</td>
<td>معلومات</td>
<td>مبهة</td>
</tr>
<tr>
<td>1,008</td>
<td>أضف.</td>
<td>ما.</td>
<td>من.</td>
<td>أم.</td>
<td>بيانات</td>
<td>عشوائية</td>
<td>تثري</td>
<td>الجدول</td>
</tr>
<tr>
<td>1,009</td>
<td>دار.</td>
<td>ذلك.</td>
<td>يبق.</td>
<td>المتحدة.</td>
<td>تثري</td>
<td>مبهة</td>
<td>تصميم</td>
<td>تنسيق</td>
</tr>
<tr>
<td>1,010</td>
<td>أم.</td>
<td>و.</td>
<td>ثمّة.</td>
<td>ويتّفق.</td>
<td>عشوائية</td>
<td>غنية</td>
<td>قيمة</td>
<td>مفيدة</td>
</tr>
<tr>
<td>1,011</td>
<td>أضف.</td>
<td>ما.</td>
<td>من.</td>
<td>أم.</td>
<td>معلومات</td>
<td>تثري</td>
<td>توضيحية</td>
<td>عشوائية</td>
</tr>
<tr>
<td>1,012</td>
<td>دار.</td>
<td>ذلك.</td>
<td>يبق.</td>
<td>المتحدة.</td>
<td>الجدول</td>
<td>تثري</td>
<td>تنسيق</td>
<td>قيمة</td>
</tr>
<tr>
<td>1,013</td>
<td>أم.</td>
<td>و.</td>
<td>ثمّة.</td>
<td>ويتّفق.</td>
<td>قيمة</td>
<td>مبهة</td>
<td>الجدول</td>
<td>تصميم</td>
</tr>
<tr>
<td>1,014</td>
<td>أضف.</td>
<td>ما.</td>
<td>من.</td>
<td>أم.</td>
<td>قيمة</td>
<td>توضيحية</td>
<td>غنية</td>
<td>عشوائية</td>
</tr>
<tr>
<td>1,015</td>
<td>دار.</td>
<td>ذلك.</td>
<td>يبق.</td>
<td>المتحدة.</td>
<td>بيانات</td>
<td>مفيدة</td>
<td>معلومات</td>
<td>الجدول</td>
</tr>
</tbody>
</table>