diff options
Diffstat (limited to 'site/content/docs/5.0/examples')
47 files changed, 2362 insertions, 945 deletions
diff --git a/site/content/docs/5.0/examples/_index.md b/site/content/docs/5.0/examples/_index.md index 4d747cd78..3d5bfab2f 100644 --- a/site/content/docs/5.0/examples/_index.md +++ b/site/content/docs/5.0/examples/_index.md @@ -19,7 +19,7 @@ aliases: "/examples/" {{- $len := len $entry.examples -}} {{ if (eq $i 0) }}<div class="row">{{ end }} <div class="col-sm-6 col-md-4 col-xl-3 mb-3"> - <a href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}> + <a class="d-block" href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}> <img class="img-thumbnail mb-3" srcset="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png, /docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}@2x.png 2x" src="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png" diff --git a/site/content/docs/5.0/examples/album-rtl/index.html b/site/content/docs/5.0/examples/album-rtl/index.html index 5142c4cec..3408056bc 100644 --- a/site/content/docs/5.0/examples/album-rtl/index.html +++ b/site/content/docs/5.0/examples/album-rtl/index.html @@ -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> @@ -41,8 +41,8 @@ direction: rtl <section class="py-5 text-center container"> <div class="row py-lg-5"> <div class="col-lg-6 col-md-8 mx-auto"> - <h1 class="font-weight-light">مثال الألبوم</h1> - <p class="lead text-muted">شيء قصير وقائد حول المجموعة أدناه - محتوياتها ، ومنشئها ، وما إلى ذلك. اجعلها قصيرة ولطيفة ، ولكن ليست قصيرة جدًا حتى لا يتخطى الناس ببساطة هذه المجموعة تمامًا.</p> + <h1 class="fw-light">مثال الألبوم</h1> + <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> diff --git a/site/content/docs/5.0/examples/blog-rtl/index.html b/site/content/docs/5.0/examples/blog-rtl/index.html index 883ef7b44..8fb4d05b4 100644 --- a/site/content/docs/5.0/examples/blog-rtl/index.html +++ b/site/content/docs/5.0/examples/blog-rtl/index.html @@ -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,9 +47,9 @@ 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 font-italic">عنوان مشاركة مدونة مميزة أطول</h1> - <p class="lead my-3">أسطر نصية متعددة تشكل الجزء الأمامي ، لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه المشاركة.</p> - <p class="lead mb-0"><a href="#" class="text-white font-weight-bold">أكمل القراءة...</a></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> @@ -86,84 +86,87 @@ include_js: false <div class="row"> <div class="col-md-8"> - <h3 class="pb-4 mb-4 font-italic border-bottom"> + <h3 class="pb-4 mb-4 fst-italic border-bottom"> من Firehose </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> <div class="col-md-4"> <div class="p-4 mb-3 bg-light rounded"> - <h4 class="font-italic">حول</h4> - <p class="mb-0">بل مدن وإعلان بتخصيص إيطاليا. حيث عقبت أساسي وتنامت و, وباءت وايرلندا وقد بـ, مرمى سقطت إحكام يكن و. كل ومن تصفح بالرّغم الاندونيسية. ٣٠ انتباه والروسية كلّ, الوراء ولكسمبورغ عن لكل. الخاصّة والإتحاد لان بل, وقد الهجوم وتنامت و.</p> + <h4 class="fst-italic">حول</h4> + <p class="mb-0">أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.</p> </div> <div class="p-4"> - <h4 class="font-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> @@ -181,7 +184,7 @@ include_js: false </div> <div class="p-4"> - <h4 class="font-italic">في مكان آخر</h4> + <h4 class="fst-italic">في مكان آخر</h4> <ol class="list-unstyled"> <li><a href="#">GitHub</a></li> <li><a href="#">Twitter</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> diff --git a/site/content/docs/5.0/examples/blog/index.html b/site/content/docs/5.0/examples/blog/index.html index e7db04a63..e25d740b9 100644 --- a/site/content/docs/5.0/examples/blog/index.html +++ b/site/content/docs/5.0/examples/blog/index.html @@ -46,7 +46,7 @@ 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 font-italic">Title of a longer featured blog post</h1> + <h1 class="display-4 fst-italic">Title of a longer featured blog post</h1> <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p> <p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p> </div> @@ -85,7 +85,7 @@ include_js: false <div class="row"> <div class="col-md-8"> - <h3 class="pb-4 mb-4 font-italic border-bottom"> + <h3 class="pb-4 mb-4 fst-italic border-bottom"> From the Firehose </h3> @@ -95,57 +95,56 @@ include_js: false <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p> <hr> - <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p> + <p>Yeah, she dances to her own beat. Oh, no. You could've been the greatest. 'Cause, baby, <a href="#">you're a firework</a>. Maybe a reason why all the doors are closed. Open up your heart and just let it begin. So très chic, yeah, she's a classic.</p> <blockquote> - <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + <p>Bikinis, zucchinis, Martinis, no weenies. I know there will be sacrifice but that's the price. <strong>This is how we do it</strong>. I'm not sticking around to watch you go down. You think you're so rock and roll, but you're really just a joke. I know one spark will shock the world, yeah yeah. Can't replace you with a million rings.</p> </blockquote> - <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> + <p>Trying to connect the dots, don't know what to tell my boss. Before you met me I was alright but things were kinda heavy. You just gotta ignite the light and let it shine. Glitter all over the room <em>pink flamingos</em> in the pool. </p> <h2>Heading</h2> - <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> + <p>Suiting up for my crowning battle. If you only knew what the future holds. Bring the beat back. Peach-pink lips, yeah, everybody stares.</p> <h3>Sub-heading</h3> - <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + <p>You give a hundred reasons why, and you say you're really gonna try. Straight stuntin' yeah we do it like that. Calling out my name. ‘Cause I, I’m capable of anything.</p> <pre><code>Example code block</code></pre> - <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p> + <p>Before you met me I was alright but things were kinda heavy. You just gotta ignite the light and let it shine.</p> <h3>Sub-heading</h3> - <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> + <p>You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out.</p> <ul> - <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li> - <li>Donec id elit non mi porta gravida at eget metus.</li> - <li>Nulla vitae elit libero, a pharetra augue.</li> + <li>Got a motel and built a fort out of sheets.</li> + <li>Your kiss is cosmic, every move is magic.</li> + <li>Suiting up for my crowning battle.</li> </ul> - <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p> + <p>Takes you miles high, so high, 'cause she’s got that one international smile.</p> <ol> - <li>Vestibulum id ligula porta felis euismod semper.</li> - <li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li> - <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li> + <li>Scared to rock the boat and make a mess.</li> + <li>I could have rewrite your addiction.</li> + <li>I know you get me so I let my walls come down.</li> </ol> - <p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p> + <p>After a hurricane comes a rainbow.</p> </article><!-- /.blog-post --> <article class="blog-post"> <h2 class="blog-post-title">Another blog post</h2> <p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p> - <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p> + <p>I am ready for the road less traveled. Already <a href="#">brushing off the dust</a>. Yeah, you're lucky if you're on her plane. I used to bite my tongue and hold my breath. Uh, She’s a beast. I call her Karma (come back). Black ray-bans, you know she's with the band. I can't sleep let's run away and don't ever look back, don't ever look back.</p> <blockquote> - <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + <p>Growing fast into a <strong>bolt of lightning</strong>. Be careful Try not to lead her on</p> </blockquote> - <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> - <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> + <p>I'm intrigued, for a peek, heard it's fascinating. Oh oh! Wanna be a victim ready for abduction. She's got that international smile, oh yeah, she's got that one international smile. Do you ever feel, feel so paper thin. I’m gon’ put her in a coma. Sun-kissed skin so hot we'll melt your popsicle.</p> + <p>This is transcendental, on another level, boy, you're my lucky star.</p> </article><!-- /.blog-post --> <article class="blog-post"> <h2 class="blog-post-title">New feature</h2> <p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p> - <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> + <p>From Tokyo to Mexico, to Rio. Yeah, you take me to utopia. I'm walking on air. We'd make out in your Mustang to Radiohead. I mean the ones, I mean like she's the one. Sun-kissed skin so hot we'll melt your popsicle. Slow cooking pancakes for my boy, still up, still fresh as a Daisy.</p> <ul> - <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li> - <li>Donec id elit non mi porta gravida at eget metus.</li> - <li>Nulla vitae elit libero, a pharetra augue.</li> + <li>I hope you got a healthy appetite.</li> + <li>You're never gonna be unsatisfied.</li> + <li>Got a motel and built a fort out of sheets.</li> </ul> - <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> - <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p> + <p>Don't need apologies. Boy, you're an alien your touch so foreign, it's <em>supernatural</em>, extraterrestrial. Talk about our future like we had a clue. I can feel a phoenix inside of me.</p> </article><!-- /.blog-post --> <nav class="blog-pagination" aria-label="Pagination"> @@ -157,12 +156,12 @@ include_js: false <div class="col-md-4"> <div class="p-4 mb-3 bg-light rounded"> - <h4 class="font-italic">About</h4> - <p class="mb-0">Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> + <h4 class="fst-italic">About</h4> + <p class="mb-0">Saw you downtown singing the Blues. Watch you circle the drain. Why don't you let me stop by? Heavy is the head that <em>wears the crown</em>. Yes, we make angels cry, raining down on earth from up above.</p> </div> <div class="p-4"> - <h4 class="font-italic">Archives</h4> + <h4 class="fst-italic">Archives</h4> <ol class="list-unstyled mb-0"> <li><a href="#">March 2014</a></li> <li><a href="#">February 2014</a></li> @@ -180,7 +179,7 @@ include_js: false </div> <div class="p-4"> - <h4 class="font-italic">Elsewhere</h4> + <h4 class="fst-italic">Elsewhere</h4> <ol class="list-unstyled"> <li><a href="#">GitHub</a></li> <li><a href="#">Twitter</a></li> diff --git a/site/content/docs/5.0/examples/carousel-rtl/index.html b/site/content/docs/5.0/examples/carousel-rtl/index.html index 7555fc783..4e0285686 100644 --- a/site/content/docs/5.0/examples/carousel-rtl/index.html +++ b/site/content/docs/5.0/examples/carousel-rtl/index.html @@ -1,6 +1,6 @@ --- layout: examples -title: قالب دائري +title: قالب شرائح العرض direction: rtl extra_css: - "../carousel/carousel.rtl.css" @@ -9,20 +9,20 @@ 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> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">الصفحة الرئيسية</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">الصفحة الرئيسية</a> </li> <li class="nav-item"> <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"> @@ -37,19 +37,19 @@ extra_css: <main> <div id="myCarousel" class="carousel slide" data-bs-ride="carousel"> - <ol class="carousel-indicators"> - <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li> - <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li> - <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li> - </ol> + <div class="carousel-indicators"> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button> + </div> <div class="carousel-inner"> <div class="carousel-item active"> {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} <div class="container"> <div class="carousel-caption text-start"> <h1>عنوان المثال.</h1> - <p> نهاية الأوضاع ان أضف, هو مما رجوعهم وقدّموا. أي عدد الدمج نهاية وأكثرها, المسرح الباهضة وبولندا حول و, كل أما سياسة أسابيع. مع حيث قُدُماً الكونجرس, بها و خيار ٢٠٠٤, كلا في مكّن وقام. مع يكن زهاء بالفشل, الجوي الصين الشمال إذ على.</p> - <p><a class="btn btn-lg btn-primary" href="#" role="button">سجل اليوم</a></p> + <p>تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية وحدها بين عامي 2002 و2009م.</p> + <p><a class="btn btn-lg btn-primary" href="#">سجل اليوم</a></p> </div> </div> </div> @@ -58,8 +58,8 @@ extra_css: <div class="container"> <div class="carousel-caption"> <h1>عنوان مثال آخر.</h1> - <p>ثم تزامناً الفرنسي الإقتصادية دار. لكل عن الضغوط المتّبعة, أن حتى إختار المدن بالإنزال. عن الشمل بالفشل تلك, بل أراض أوزار بلديهما حول. دون لكون والتي ثم, كُلفة ويعزى استطاعوا أن لمّ. جُل بخطوط واحدة البشريةً.</p> - <p><a class="btn btn-lg btn-primary" href="#" role="button">أعرف أكثر</a></p> + <p>حسب المجلس الثقافي البريطاني فإن تعليم الإنجليزية داخل بريطانيا يسهم في تعزيز اقتصادها بما يتجاوز ملياري جنيه سنوياً، كما أنه وفر أكثر من 26 ألف وظيفة.</p> + <p><a class="btn btn-lg btn-primary" href="#">أعرف أكثر</a></p> </div> </div> </div> @@ -68,20 +68,20 @@ extra_css: <div class="container"> <div class="carousel-caption text-end"> <h1>واحد أكثر لقياس جيد.</h1> - <p>قررت العصبة إيطاليا وتم أن, عن سكان وقامت الحكومة وفي. كان بـ اوروبا اليابانية, ثمّة بوابة يتعلّق عل بعض. عدم رئيس الآلاف أن حدى.</p> - <p><a class="btn btn-lg btn-primary" href="#" role="button">تصفح المعرض</a></p> + <p>الإحصاءات لحجم الاستثمار اللغوي خارج بريطانيا تتفاوت من سنة لأخرى إلا أن المدير التنفيذي للمجلس الثقافي البريطاني إدي بايرز يرى أن استثمار تعليم الإنجليزية في الخارج لا يحسب على المستوى المالي فحسب بل على المستوى السياسي أيضاً.</p> + <p><a class="btn btn-lg btn-primary" href="#">تصفح المعرض</a></p> </div> </div> </div> </div> - <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev"> + <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">السابق</span> - </a> - <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next"> + </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> - </a> + <span class="visually-hidden">التالي</span> + </button> </div> @@ -96,20 +96,20 @@ extra_css: <div class="col-lg-4"> {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} <h2>عنوان</h2> - <p>ان وتم عجّل الأجل, قبل نتيجة المشترك بـ, أي جعل جورج أوزار المسرح. أن وإعلان الساحل تلك, مكن ان استبدال الباهضة التكاليف. الى ماذا اليميني الحكومة في, إجلاء نتيجة قبل تم. مساعدة بولندا، أي هذه الحكم.</p> - <p><a class="btn btn-secondary" href="#" role="button">عرض التفاصيل</a></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> - <p><a class="btn btn-secondary" href="#" role="button">عرض التفاصيل</a></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> - <p><a class="btn btn-secondary" href="#" role="button">عرض التفاصيل</a></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>© 2017-{{< year >}} Company, Inc. · <a href="#">خصوصية</a> · <a href="#">شروط</a></p> + <p>© 2017–{{< year >}} Company, Inc. · <a href="#">سياسة الخصوصية</a> · <a href="#">شروط الاستخدام</a></p> </footer> </main> diff --git a/site/content/docs/5.0/examples/carousel/index.html b/site/content/docs/5.0/examples/carousel/index.html index 54cd34bc3..da5f3ab7a 100644 --- a/site/content/docs/5.0/examples/carousel/index.html +++ b/site/content/docs/5.0/examples/carousel/index.html @@ -14,8 +14,8 @@ extra_css: </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -36,19 +36,19 @@ extra_css: <main> <div id="myCarousel" class="carousel slide" data-bs-ride="carousel"> - <ol class="carousel-indicators"> - <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li> - <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li> - <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li> - </ol> + <div class="carousel-indicators"> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button> + </div> <div class="carousel-inner"> <div class="carousel-item active"> {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} <div class="container"> <div class="carousel-caption text-start"> <h1>Example headline.</h1> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> + <p>Some representative placeholder content for the first slide of the carousel.</p> + <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p> </div> </div> </div> @@ -57,8 +57,8 @@ extra_css: <div class="container"> <div class="carousel-caption"> <h1>Another example headline.</h1> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> + <p>Some representative placeholder content for the second slide of the carousel.</p> + <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p> </div> </div> </div> @@ -67,20 +67,20 @@ extra_css: <div class="container"> <div class="carousel-caption text-end"> <h1>One more for good measure.</h1> - <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> - <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> + <p>Some representative placeholder content for the third slide of this carousel.</p> + <p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p> </div> </div> </div> </div> - <a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev"> + <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> - </a> - <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next"> + </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">Next</span> - </a> + </button> </div> @@ -95,20 +95,20 @@ extra_css: <div class="col-lg-4"> {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} <h2>Heading</h2> - <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p> - <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> + <p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p> + <p><a class="btn btn-secondary" href="#">View details »</a></p> </div><!-- /.col-lg-4 --> <div class="col-lg-4"> {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} <h2>Heading</h2> - <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p> - <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> + <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p> + <p><a class="btn btn-secondary" href="#">View details »</a></p> </div><!-- /.col-lg-4 --> <div class="col-lg-4"> {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} <h2>Heading</h2> - <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> - <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p> + <p>And lastly this, the third column of representative placeholder content.</p> + <p><a class="btn btn-secondary" href="#">View details »</a></p> </div><!-- /.col-lg-4 --> </div><!-- /.row --> @@ -120,7 +120,7 @@ extra_css: <div class="row featurette"> <div class="col-md-7"> <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2> - <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> + <p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</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,7 +132,7 @@ extra_css: <div class="row featurette"> <div class="col-md-7 order-md-2"> <h2 class="featurette-heading">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2> - <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> + <p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</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,7 +144,7 @@ extra_css: <div class="row featurette"> <div class="col-md-7"> <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2> - <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p> + <p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</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" >}} @@ -161,6 +161,6 @@ extra_css: <!-- FOOTER --> <footer class="container"> <p class="float-end"><a href="#">Back to top</a></p> - <p>© 2017-{{< year >}} Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p> + <p>© 2017–{{< year >}} Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p> </footer> </main> diff --git a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html b/site/content/docs/5.0/examples/cheatsheet-rtl/index.html index e01b15bfd..7728e5036 100644 --- a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html +++ b/site/content/docs/5.0/examples/cheatsheet-rtl/index.html @@ -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,68 +23,68 @@ 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> </nav> </aside> -<div class="bd-cheatsheet container-fluid bg-white"> +<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="[email protected]"> - <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,57 +852,57 @@ 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> {{< example show_markup="false" >}} <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> - <ol class="carousel-indicators"> - <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li> - <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li> - <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li> - </ol> + <div class="carousel-indicators"> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="الشريحة الأولى"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="الشريحة الثانية"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="الشريحة الثالثة"></button> + </div> <div class="carousel-inner"> <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> - <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev"> + <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">السابق</span> - </a> - <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next"> + </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> - </a> + <span class="visually-hidden">التالي</span> + </button> </div> {{< /example >}} </div> </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 >}} @@ -1167,20 +1164,20 @@ direction: rtl {{< example show_markup="false" >}} <nav> <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist"> - <a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">الصفحة الرئيسية</a> - <a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">الملف الشخصي</a> - <a class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">اتصل</a> + <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> </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> @@ -1304,7 +1301,7 @@ direction: rtl <ul class="pagination pagination-sm"> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active" aria-current="page"> - <a class="page-link" href="#">2 <span class="visually-hidden">(تيار)</span></a> + <a class="page-link" href="#">2</a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> </ul> @@ -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">»</span> </a> </li> @@ -1339,7 +1336,7 @@ direction: rtl </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active" aria-current="page"> - <a class="page-link" href="#">2 <span class="visually-hidden">(تيار)</span></a> + <a class="page-link" href="#">2</a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> @@ -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> diff --git a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.css b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.css index 16ffb65be..77aa0f23c 100644 --- a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.css +++ b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.css @@ -63,6 +63,10 @@ body { line-height: 0; content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); transition: transform .35s ease; + + /* rtl:raw: + transform: rotate(180deg) translateX(-2px); + */ transform-origin: .5em 50%; } diff --git a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.js b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.js index bafea8e92..541cf9350 100644 --- a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.js +++ b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.js @@ -28,8 +28,8 @@ // Disable empty links document.querySelectorAll('[href="#"]') .forEach(function (link) { - link.addEventListener('click', function (e) { - e.preventDefault() + link.addEventListener('click', function (event) { + event.preventDefault() }) }) diff --git a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css index 6d66a1d5d..c1a4a1ccc 100644 --- a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css +++ b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css @@ -63,6 +63,7 @@ body { line-height: 0; content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); transition: transform .35s ease; + transform: rotate(180deg) translateX(-2px); transform-origin: .5em 50%; } diff --git a/site/content/docs/5.0/examples/cheatsheet/index.html b/site/content/docs/5.0/examples/cheatsheet/index.html index 790bf546b..de9817845 100644 --- a/site/content/docs/5.0/examples/cheatsheet/index.html +++ b/site/content/docs/5.0/examples/cheatsheet/index.html @@ -69,7 +69,7 @@ body_class: "bg-light" </ul> </nav> </aside> -<div class="bd-cheatsheet container-fluid bg-white"> +<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">Contents</h2> @@ -83,7 +83,7 @@ body_class: "bg-light" {{< example show_markup="false" >}} <p class="display-1">Display 1</p> <p class="display-2">Display 2</p> - <p class="display-3 ">Display 3</p> + <p class="display-3">Display 3</p> <p class="display-4">Display 4</p> <p class="display-5">Display 5</p> <p class="display-6">Display 6</p> @@ -100,7 +100,7 @@ body_class: "bg-light" {{< example show_markup="false" >}} <p class="lead"> - Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. + This is a lead paragraph. It stands out from regular paragraphs. </p> {{< /example >}} @@ -117,36 +117,33 @@ body_class: "bg-light" {{< example show_markup="false" >}} <blockquote class="blockquote"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <p>A well-known quote, contained in a blockquote element.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> {{< /example >}} {{< example show_markup="false" >}} <ul class="list-unstyled"> - <li>Lorem ipsum dolor sit amet</li> - <li>Consectetur adipiscing elit</li> - <li>Integer molestie lorem at massa</li> - <li>Facilisis in pretium nisl aliquet</li> - <li>Nulla volutpat aliquam velit + <li>This is a list.</li> + <li>It appears completely unstyled.</li> + <li>Structurally, it's still a list.</li> + <li>However, this style only applies to immediate child elements.</li> + <li>Nested lists: <ul> - <li>Phasellus iaculis neque</li> - <li>Purus sodales ultricies</li> - <li>Vestibulum laoreet porttitor sem</li> - <li>Ac tristique libero volutpat at</li> + <li>are unaffected by this style</li> + <li>will still show a bullet</li> + <li>and have appropriate left margin</li> </ul> </li> - <li>Faucibus porta lacus fringilla vel</li> - <li>Aenean sit amet erat nunc</li> - <li>Eget porttitor lorem</li> + <li>This may still come in handy in some situations.</li> </ul> {{< /example >}} {{< example show_markup="false" >}} <ul class="list-inline"> - <li class="list-inline-item">Lorem ipsum</li> - <li class="list-inline-item">Phasellus iaculis</li> - <li class="list-inline-item">Nulla volutpat</li> + <li class="list-inline-item">This is a list item.</li> + <li class="list-inline-item">And another one.</li> + <li class="list-inline-item">But they're displayed inline.</li> </ul> {{< /example >}} </div> @@ -619,7 +616,7 @@ body_class: "bg-light" </h4> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> @@ -631,7 +628,7 @@ body_class: "bg-light" </h4> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> @@ -643,7 +640,7 @@ body_class: "bg-light" </h4> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div class="accordion-body"> - Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> @@ -822,9 +819,9 @@ body_class: "bg-light" <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> <ul class="list-group list-group-flush"> - <li class="list-group-item">Cras justo odio</li> - <li class="list-group-item">Dapibus ac facilisis in</li> - <li class="list-group-item">Vestibulum at eros</li> + <li class="list-group-item">An item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> </ul> <div class="card-body"> <a href="#" class="card-link">Card link</a> @@ -861,42 +858,42 @@ body_class: "bg-light" <div> {{< example show_markup="false" >}} <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> - <ol class="carousel-indicators"> - <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li> - <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li> - <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li> - </ol> + <div class="carousel-indicators"> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button> + <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button> + </div> <div class="carousel-inner"> <div class="carousel-item active"> {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}} <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> - <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> + <p>Some representative placeholder content for the first slide.</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="Second slide" >}} <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> + <p>Some representative placeholder content for the second slide.</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="Third slide" >}} <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> + <p>Some representative placeholder content for the third slide.</p> </div> </div> </div> - <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev"> + <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> - </a> - <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next"> + </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">Next</span> - </a> + </button> </div> {{< /example >}} </div> @@ -1092,27 +1089,27 @@ body_class: "bg-light" <div> {{< example show_markup="false" >}} <ul class="list-group"> - <li class="list-group-item active" aria-current="true">Cras justo odio</li> - <li class="list-group-item disabled" aria-disabled="true">Dapibus ac facilisis in</li> - <li class="list-group-item">Morbi leo risus</li> - <li class="list-group-item">Porta ac consectetur ac</li> - <li class="list-group-item">Vestibulum at eros</li> + <li class="list-group-item disabled" aria-disabled="true">A disabled item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> + <li class="list-group-item">A fourth item</li> + <li class="list-group-item">And a fifth one</li> </ul> {{< /example >}} {{< example show_markup="false" >}} <ul class="list-group list-group-flush"> - <li class="list-group-item">Cras justo odio</li> - <li class="list-group-item">Dapibus ac facilisis in</li> - <li class="list-group-item">Morbi leo risus</li> - <li class="list-group-item">Porta ac consectetur ac</li> - <li class="list-group-item">Vestibulum at eros</li> + <li class="list-group-item">An item</li> + <li class="list-group-item">A second item</li> + <li class="list-group-item">A third item</li> + <li class="list-group-item">A fourth item</li> + <li class="list-group-item">And a fifth one</li> </ul> {{< /example >}} {{< example show_markup="false" >}} <div class="list-group"> - <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> + <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a> {{< list.inline >}} {{- range (index $.Site.Data "theme-colors") }} <a href="#" class="list-group-item list-group-item-action list-group-item-{{ .name }}">A simple {{ .name }} list group item</a> @@ -1166,20 +1163,20 @@ body_class: "bg-light" {{< example show_markup="false" >}} <nav> <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist"> - <a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> - <a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> - <a class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> + <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">Home</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">Profile</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">Contact</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">Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.</p> + <p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p> </div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> - <p class="px-3">Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.</p> + <p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p> </div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"> - <p class="px-3">Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.</p> + <p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p> </div> </div> {{< /example >}} @@ -1303,7 +1300,7 @@ body_class: "bg-light" <ul class="pagination pagination-sm"> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active" aria-current="page"> - <a class="page-link" href="#">2 <span class="visually-hidden">(current)</span></a> + <a class="page-link" href="#">2</a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> </ul> @@ -1338,7 +1335,7 @@ body_class: "bg-light" </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active" aria-current="page"> - <a class="page-link" href="#">2 <span class="visually-hidden">(current)</span></a> + <a class="page-link" href="#">2</a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> @@ -1437,19 +1434,18 @@ body_class: "bg-light" </li> </ul> </nav> - <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example"> + <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0"> <h4 id="fat">@fat</h4> - <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p> + <p>Placeholder content for the scrollspy example. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p> <h4 id="mdo">@mdo</h4> - <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p> + <p>Placeholder content for the scrollspy example. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk.</p> <h4 id="one">one</h4> - <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p> + <p>Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p> <h4 id="two">two</h4> - <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p> + <p>Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.</p> <h4 id="three">three</h4> - <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p> - <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats. - </p> + <p>Placeholder content for the scrollspy example. If you wanna dance, if you want it all, you know that I'm the girl that you should call. Walk through the storm I would. So let me get you in your birthday suit. The one that got away. Last Friday night, yeah I think we broke the law, always say we're gonna stop. 'Cause she's a little bit of Yoko, And she's a little bit of 'Oh no'. I want the jaw droppin', eye poppin', head turnin', body shockin'. Yeah, we maxed our credit cards and got kicked out of the bar.</p> + <p>And some more placeholder content, for good measure.</p> </div> </div> </div> @@ -1558,18 +1554,17 @@ body_class: "bg-light" </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">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> + <p>Placeholder text for this demonstration of a vertically centered modal dialog.</p> + <p>In this case, the dialog has a bit more content, just to show how vertical centering can be added to a scrollable modal.</p> + <p>What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.</p> + <p>We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> @@ -1586,24 +1581,14 @@ body_class: "bg-light" <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> - <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> - <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> - <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> + <p>What follows is just some placeholder text for this modal dialog. I feel like I'm already there. I’m gon’ put her in a coma. Boom, boom, boom. You're reading me like erotica, boy, you make me feel exotic, yeah. Happy birthday. From Tokyo to Mexico, to Rio. I knew you were.</p> + <p>Last Friday night. Calling out my name. Kiss her, touch her, squeeze her buns. Heavy is the head that wears the crown. So open up your heart and just let it begin. Boy all this time was worth the waiting. You know that I'm the girl that you should call. End of the rainbow looking treasure. You're reading me like erotica, boy, you make me feel exotic, yeah. Do you know that there's still a chance for you 'Cause there's a spark in you? So I sat quietly, agreed politely. From Tokyo to Mexico, to Rio.</p> + <p>Don't be a shy kinda guy I'll bet it's beautiful. You fall asleep during foreplay, 'Cause the pills you take, are more your forte. Open up your heart. You're never gonna be unsatisfied. Know that you are worthy. This one goes out to the ladies at breakfast in last night's dress. You think you've seen her in a magazine. I should've told you what you meant to me 'Cause now I pay the price. Takes you miles high, so high, 'cause she’s got that one international smile.</p> + <p>Yo, shout out to all you kids, buying bottle service, with your rent money. So I sat quietly, agreed politely. They say, be afraid you're not like the others, futuristic lover. Boom, boom, boom. Don't need apologies. We can dance, until we die, you and I, will be young forever. If you choose to walk away, don’t walk away. You know that I'm the girl that you should call. This Friday night, do it all again.</p> + <p>I'm walking on air. But lil' mama so dope. It's time to bring out the big balloons. Are you ready for, ready for. The boys break their necks try'na to creep a little sneak peek. Summer after high school when we first met. If you want it all. (This is how we do) You open my eyes and I'm ready to go, lead me into the light.</p> + <p>Growing fast into a bolt of lightning. We freak in my jeep, Snoop Doggy Dogg on the stereo. Baby do you dare to do this? Open up your heart and just let it begin. Peach-pink lips, yeah, everybody stares. Be your teenage dream tonight. Are you brave enough to let me see your peacock? You think I'm funny when I tell the punchline wrong. Woo! I knew you were. All this money can't buy me a time machine. I can't sleep let's run away and don't ever look back, don't ever look back.</p> + <p>Make it like your birthday everyday. I'm not sticking around to watch you go down. Uh-huh, I see you. For you I'll risk it all, all. I’m gon’ put her in a coma. She ride me like a roller coaster. You hear my voice, you hear that sound. 'Cause I will love you unconditionally (oh yeah). They say, be afraid you're not like the others, futuristic lover. There is no fear now, let go and just be free, I will love you unconditionally.</p> + <p>We can dance, until we die, you and I, will be young forever. Pop your Pérignon. Last Friday night, yeah I think we broke the law, always say we're gonna stop. Don't need apologies. Give you something good to celebrate. But don’t make me your enemy, your enemy, your enemy. Flowers in her hair, she don't care. Tone, tan fit and ready, turn it up cause its gettin' heavy.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> diff --git a/site/content/docs/5.0/examples/checkout-rtl/index.html b/site/content/docs/5.0/examples/checkout-rtl/index.html index c4a60443d..e0ca621b1 100644 --- a/site/content/docs/5.0/examples/checkout-rtl/index.html +++ b/site/content/docs/5.0/examples/checkout-rtl/index.html @@ -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,33 +61,33 @@ 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> <div class="col-12"> <label for="username" class="form-label">اسم المستخدم</label> - <div class="input-group"> + <div class="input-group has-validation"> <span class="input-group-text">@</span> <input type="text" class="form-control" id="username" placeholder="اسم المستخدم" required> <div class="invalid-feedback"> @@ -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="[email protected]"> <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">© {{< 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> diff --git a/site/content/docs/5.0/examples/checkout/index.html b/site/content/docs/5.0/examples/checkout/index.html index a8bf348b2..4809dc4bb 100644 --- a/site/content/docs/5.0/examples/checkout/index.html +++ b/site/content/docs/5.0/examples/checkout/index.html @@ -16,11 +16,11 @@ body_class: "bg-light" <p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p> </div> - <div class="row g-3"> + <div class="row g-5"> <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">Your cart</span> - <span class="badge bg-secondary rounded-pill">3</span> + <span class="text-primary">Your cart</span> + <span class="badge bg-primary rounded-pill">3</span> </h4> <ul class="list-group mb-3"> <li class="list-group-item d-flex justify-content-between lh-sm"> @@ -86,7 +86,7 @@ body_class: "bg-light" <div class="col-12"> <label for="username" class="form-label">Username</label> - <div class="input-group"> + <div class="input-group has-validation"> <span class="input-group-text">@</span> <input type="text" class="form-control" id="username" placeholder="Username" required> <div class="invalid-feedback"> diff --git a/site/content/docs/5.0/examples/dashboard-rtl/dashboard.js b/site/content/docs/5.0/examples/dashboard-rtl/dashboard.js index 2a511ef8b..2e348137c 100644 --- a/site/content/docs/5.0/examples/dashboard-rtl/dashboard.js +++ b/site/content/docs/5.0/examples/dashboard-rtl/dashboard.js @@ -17,8 +17,8 @@ 'الثلاثاء', 'الأربعاء', 'الخميس', - 'يوم الجمعة', - 'يوم السبت' + 'الجمعة', + 'السبت' ], datasets: [{ data: [ diff --git a/site/content/docs/5.0/examples/dashboard-rtl/index.html b/site/content/docs/5.0/examples/dashboard-rtl/index.html index 848c67c0b..a92704159 100644 --- a/site/content/docs/5.0/examples/dashboard-rtl/index.html +++ b/site/content/docs/5.0/examples/dashboard-rtl/index.html @@ -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> diff --git a/site/content/docs/5.0/examples/dashboard/index.html b/site/content/docs/5.0/examples/dashboard/index.html index ab324331a..21d78e47f 100644 --- a/site/content/docs/5.0/examples/dashboard/index.html +++ b/site/content/docs/5.0/examples/dashboard/index.html @@ -134,115 +134,115 @@ extra_js: <tbody> <tr> <td>1,001</td> - <td>Lorem</td> - <td>ipsum</td> - <td>dolor</td> - <td>sit</td> + <td>random</td> + <td>data</td> + <td>placeholder</td> + <td>text</td> </tr> <tr> <td>1,002</td> - <td>amet</td> - <td>consectetur</td> - <td>adipiscing</td> - <td>elit</td> + <td>placeholder</td> + <td>irrelevant</td> + <td>visual</td> + <td>layout</td> </tr> <tr> <td>1,003</td> - <td>Integer</td> - <td>nec</td> - <td>odio</td> - <td>Praesent</td> + <td>data</td> + <td>rich</td> + <td>dashboard</td> + <td>tabular</td> </tr> <tr> <td>1,003</td> - <td>libero</td> - <td>Sed</td> - <td>cursus</td> - <td>ante</td> + <td>information</td> + <td>placeholder</td> + <td>illustrative</td> + <td>data</td> </tr> <tr> <td>1,004</td> - <td>dapibus</td> - <td>diam</td> - <td>Sed</td> - <td>nisi</td> + <td>text</td> + <td>random</td> + <td>layout</td> + <td>dashboard</td> </tr> <tr> <td>1,005</td> - <td>Nulla</td> - <td>quis</td> - <td>sem</td> - <td>at</td> + <td>dashboard</td> + <td>irrelevant</td> + <td>text</td> + <td>placeholder</td> </tr> <tr> <td>1,006</td> - <td>nibh</td> - <td>elementum</td> - <td>imperdiet</td> - <td>Duis</td> + <td>dashboard</td> + <td>illustrative</td> + <td>rich</td> + <td>data</td> </tr> <tr> <td>1,007</td> - <td>sagittis</td> - <td>ipsum</td> - <td>Praesent</td> - <td>mauris</td> + <td>placeholder</td> + <td>tabular</td> + <td>information</td> + <td>irrelevant</td> </tr> <tr> <td>1,008</td> - <td>Fusce</td> - <td>nec</td> - <td>tellus</td> - <td>sed</td> + <td>random</td> + <td>data</td> + <td>placeholder</td> + <td>text</td> </tr> <tr> <td>1,009</td> - <td>augue</td> - <td>semper</td> - <td>porta</td> - <td>Mauris</td> + <td>placeholder</td> + <td>irrelevant</td> + <td>visual</td> + <td>layout</td> </tr> <tr> <td>1,010</td> - <td>massa</td> - <td>Vestibulum</td> - <td>lacinia</td> - <td>arcu</td> + <td>data</td> + <td>rich</td> + <td>dashboard</td> + <td>tabular</td> </tr> <tr> <td>1,011</td> - <td>eget</td> - <td>nulla</td> - <td>Class</td> - <td>aptent</td> + <td>information</td> + <td>placeholder</td> + <td>illustrative</td> + <td>data</td> </tr> <tr> <td>1,012</td> - <td>taciti</td> - <td>sociosqu</td> - <td>ad</td> - <td>litora</td> + <td>text</td> + <td>placeholder</td> + <td>layout</td> + <td>dashboard</td> </tr> <tr> <td>1,013</td> - <td>torquent</td> - <td>per</td> - <td>conubia</td> - <td>nostra</td> + <td>dashboard</td> + <td>irrelevant</td> + <td>text</td> + <td>visual</td> </tr> <tr> <td>1,014</td> - <td>per</td> - <td>inceptos</td> - <td>himenaeos</td> - <td>Curabitur</td> + <td>dashboard</td> + <td>illustrative</td> + <td>rich</td> + <td>data</td> </tr> <tr> <td>1,015</td> - <td>sodales</td> - <td>ligula</td> - <td>in</td> - <td>libero</td> + <td>random</td> + <td>tabular</td> + <td>information</td> + <td>text</td> </tr> </tbody> </table> diff --git a/site/content/docs/5.0/examples/features/features.css b/site/content/docs/5.0/examples/features/features.css new file mode 100644 index 000000000..33942f7f1 --- /dev/null +++ b/site/content/docs/5.0/examples/features/features.css @@ -0,0 +1,61 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.feature-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 4rem; + height: 4rem; + margin-bottom: 1rem; + font-size: 2rem; + color: #fff; + border-radius: .75rem; +} + +.icon-link { + display: inline-flex; + align-items: center; +} +.icon-link > .bi { + margin-top: .125rem; + margin-left: .125rem; + transition: transform .25s ease-in-out; + fill: currentColor; +} +.icon-link:hover > .bi { + transform: translate(.25rem); +} + +.icon-square { + display: inline-flex; + align-items: center; + justify-content: center; + width: 3rem; + height: 3rem; + font-size: 1.5rem; + border-radius: .75rem; +} + +.rounded-4 { border-radius: .5rem; } +.rounded-5 { border-radius: 1rem; } + +.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); } +.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); } +.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); } + +.card-cover { + background-repeat: no-repeat; + background-position: center center; + background-size: cover; +} diff --git a/site/content/docs/5.0/examples/features/index.html b/site/content/docs/5.0/examples/features/index.html new file mode 100644 index 000000000..1e331f00a --- /dev/null +++ b/site/content/docs/5.0/examples/features/index.html @@ -0,0 +1,288 @@ +--- +layout: examples +title: Features +extra_css: + - "features.css" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="bootstrap" viewBox="0 0 118 94"> + <title>Bootstrap</title> + <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path> + </symbol> + <symbol id="home" viewBox="0 0 16 16"> + <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/> + </symbol> + <symbol id="speedometer2" viewBox="0 0 16 16"> + <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/> + <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/> + </symbol> + <symbol id="table" viewBox="0 0 16 16"> + <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/> + </symbol> + <symbol id="people-circle" viewBox="0 0 16 16"> + <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/> + <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/> + </symbol> + <symbol id="grid" viewBox="0 0 16 16"> + <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> + </symbol> + <symbol id="collection" viewBox="0 0 16 16"> + <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/> + </symbol> + <symbol id="calendar3" viewBox="0 0 16 16"> + <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/> + <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/> + </symbol> + <symbol id="chat-quote-fill" viewBox="0 0 16 16"> + <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/> + </symbol> + <symbol id="cpu-fill" viewBox="0 0 16 16"> + <path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> + <path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/> + </symbol> + <symbol id="gear-fill" viewBox="0 0 16 16"> + <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/> + </symbol> + <symbol id="speedometer" viewBox="0 0 16 16"> + <path d="M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z"/> + <path fill-rule="evenodd" d="M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z"/> + </symbol> + <symbol id="toggles2" viewBox="0 0 16 16"> + <path d="M9.465 10H12a2 2 0 1 1 0 4H9.465c.34-.588.535-1.271.535-2 0-.729-.195-1.412-.535-2z"/> + <path d="M6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm.535-10a3.975 3.975 0 0 1-.409-1H4a1 1 0 0 1 0-2h2.126c.091-.355.23-.69.41-1H4a2 2 0 1 0 0 4h2.535z"/> + <path d="M14 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/> + </symbol> + <symbol id="tools" viewBox="0 0 16 16"> + <path d="M1 0L0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/> + </symbol> + <symbol id="chevron-right" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/> + </symbol> + <symbol id="geo-fill" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/> + </symbol> +</svg> +<main> + <h1 class="visually-hidden">Features examples</h1> + + <div class="container px-4 py-5" id="featured-3"> + <h2 class="pb-2 border-bottom">Columns with icons</h2> + <div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> + <div class="feature col"> + <div class="feature-icon bg-primary bg-gradient"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg> + </div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="icon-link"> + Call to action + <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> + </a> + </div> + <div class="feature col"> + <div class="feature-icon bg-primary bg-gradient"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg> + </div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="icon-link"> + Call to action + <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> + </a> + </div> + <div class="feature col"> + <div class="feature-icon bg-primary bg-gradient"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> + </div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="icon-link"> + Call to action + <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> + </a> + </div> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="container px-4 py-5" id="hanging-icons"> + <h2 class="pb-2 border-bottom">Hanging icons</h2> + <div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> + <div class="col d-flex align-items-start"> + <div class="icon-square bg-light text-dark flex-shrink-0 me-3"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> + </div> + <div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="btn btn-primary"> + Primary button + </a> + </div> + </div> + <div class="col d-flex align-items-start"> + <div class="icon-square bg-light text-dark flex-shrink-0 me-3"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg> + </div> + <div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="btn btn-primary"> + Primary button + </a> + </div> + </div> + <div class="col d-flex align-items-start"> + <div class="icon-square bg-light text-dark flex-shrink-0 me-3"> + <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg> + </div> + <div> + <h2>Featured title</h2> + <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="btn btn-primary"> + Primary button + </a> + </div> + </div> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="container px-4 py-5" id="custom-cards"> + <h2 class="pb-2 border-bottom">Custom cards</h2> + + <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5"> + <div class="col"> + <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');"> + <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1"> + <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h2> + <ul class="d-flex list-unstyled mt-auto"> + <li class="me-auto"> + <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> + </li> + <li class="d-flex align-items-center me-3"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> + <small>Earth</small> + </li> + <li class="d-flex align-items-center"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> + <small>3d</small> + </li> + </ul> + </div> + </div> + </div> + + <div class="col"> + <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');"> + <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1"> + <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h2> + <ul class="d-flex list-unstyled mt-auto"> + <li class="me-auto"> + <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> + </li> + <li class="d-flex align-items-center me-3"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> + <small>Pakistan</small> + </li> + <li class="d-flex align-items-center"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> + <small>4d</small> + </li> + </ul> + </div> + </div> + </div> + + <div class="col"> + <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');"> + <div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1"> + <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h2> + <ul class="d-flex list-unstyled mt-auto"> + <li class="me-auto"> + <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> + </li> + <li class="d-flex align-items-center me-3"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> + <small>California</small> + </li> + <li class="d-flex align-items-center"> + <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> + <small>5d</small> + </li> + </ul> + </div> + </div> + </div> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="container px-4 py-5" id="icon-grid"> + <h2 class="pb-2 border-bottom">Icon grid</h2> + + <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5"> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + <div class="col d-flex align-items-start"> + <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg> + <div> + <h4 class="fw-bold mb-0">Featured title</h4> + <p>Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + </div> + </div> +</main> diff --git a/site/content/docs/5.0/examples/features/unsplash-photo-1.jpg b/site/content/docs/5.0/examples/features/unsplash-photo-1.jpg Binary files differnew file mode 100644 index 000000000..ed2e36a78 --- /dev/null +++ b/site/content/docs/5.0/examples/features/unsplash-photo-1.jpg diff --git a/site/content/docs/5.0/examples/features/unsplash-photo-2.jpg b/site/content/docs/5.0/examples/features/unsplash-photo-2.jpg Binary files differnew file mode 100644 index 000000000..b66864a00 --- /dev/null +++ b/site/content/docs/5.0/examples/features/unsplash-photo-2.jpg diff --git a/site/content/docs/5.0/examples/features/unsplash-photo-3.jpg b/site/content/docs/5.0/examples/features/unsplash-photo-3.jpg Binary files differnew file mode 100644 index 000000000..c411b17ec --- /dev/null +++ b/site/content/docs/5.0/examples/features/unsplash-photo-3.jpg diff --git a/site/content/docs/5.0/examples/headers/headers.css b/site/content/docs/5.0/examples/headers/headers.css new file mode 100644 index 000000000..661a74d55 --- /dev/null +++ b/site/content/docs/5.0/examples/headers/headers.css @@ -0,0 +1,32 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.form-control-dark { + color: #fff; + background-color: var(--bs-dark); + border-color: var(--bs-gray); +} +.form-control-dark:focus { + color: #fff; + background-color: var(--bs-dark); + border-color: #fff; + box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25); +} + +.bi { + vertical-align: -.125em; + fill: currentColor; +} + +.text-small { + font-size: 85%; +} + +.dropdown-toggle { + outline: 0; +} diff --git a/site/content/docs/5.0/examples/headers/index.html b/site/content/docs/5.0/examples/headers/index.html new file mode 100644 index 000000000..e15b47e5f --- /dev/null +++ b/site/content/docs/5.0/examples/headers/index.html @@ -0,0 +1,295 @@ +--- +layout: examples +title: Headers +extra_css: + - "headers.css" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="bootstrap" viewBox="0 0 118 94"> + <title>Bootstrap</title> + <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path> + </symbol> + <symbol id="home" viewBox="0 0 16 16"> + <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/> + </symbol> + <symbol id="speedometer2" viewBox="0 0 16 16"> + <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/> + <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/> + </symbol> + <symbol id="table" viewBox="0 0 16 16"> + <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/> + </symbol> + <symbol id="people-circle" viewBox="0 0 16 16"> + <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/> + <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/> + </symbol> + <symbol id="grid" viewBox="0 0 16 16"> + <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> + </symbol> +</svg> + +<main> + <h1 class="visually-hidden">Headers examples</h1> + + <div class="container"> + <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom"> + <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="fs-4">Simple header</span> + </a> + + <ul class="nav nav-pills"> + <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li> + <li class="nav-item"><a href="#" class="nav-link">Features</a></li> + <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li> + <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li> + <li class="nav-item"><a href="#" class="nav-link">About</a></li> + </ul> + </header> + </div> + + <div class="b-example-divider"></div> + + <div class="container"> + <header class="d-flex justify-content-center py-3"> + <ul class="nav nav-pills"> + <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li> + <li class="nav-item"><a href="#" class="nav-link">Features</a></li> + <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li> + <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li> + <li class="nav-item"><a href="#" class="nav-link">About</a></li> + </ul> + </header> + </div> + + <div class="b-example-divider"></div> + + <div class="container"> + <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom"> + <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg> + </a> + + <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0"> + <li><a href="#" class="nav-link px-2 link-secondary">Home</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Features</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Pricing</a></li> + <li><a href="#" class="nav-link px-2 link-dark">FAQs</a></li> + <li><a href="#" class="nav-link px-2 link-dark">About</a></li> + </ul> + + <div class="col-md-3 text-end"> + <button type="button" class="btn btn-outline-primary me-2">Login</button> + <button type="button" class="btn btn-primary">Sign-up</button> + </div> + </header> + </div> + + <div class="b-example-divider"></div> + + <header class="p-3 bg-dark text-white"> + <div class="container"> + <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> + <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"> + <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg> + </a> + + <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> + <li><a href="#" class="nav-link px-2 text-secondary">Home</a></li> + <li><a href="#" class="nav-link px-2 text-white">Features</a></li> + <li><a href="#" class="nav-link px-2 text-white">Pricing</a></li> + <li><a href="#" class="nav-link px-2 text-white">FAQs</a></li> + <li><a href="#" class="nav-link px-2 text-white">About</a></li> + </ul> + + <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3"> + <input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search"> + </form> + + <div class="text-end"> + <button type="button" class="btn btn-outline-light me-2">Login</button> + <button type="button" class="btn btn-warning">Sign-up</button> + </div> + </div> + </div> + </header> + + <div class="b-example-divider"></div> + + <header class="p-3 mb-3 border-bottom"> + <div class="container"> + <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> + <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg> + </a> + + <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> + <li><a href="#" class="nav-link px-2 link-secondary">Overview</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Inventory</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Customers</a></li> + <li><a href="#" class="nav-link px-2 link-dark">Products</a></li> + </ul> + + <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3"> + <input type="search" class="form-control" placeholder="Search..." aria-label="Search"> + </form> + + <div class="dropdown text-end"> + <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> + <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle"> + </a> + <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1"> + <li><a class="dropdown-item" href="#">New project...</a></li> + <li><a class="dropdown-item" href="#">Settings</a></li> + <li><a class="dropdown-item" href="#">Profile</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Sign out</a></li> + </ul> + </div> + </div> + </div> + </header> + + <div class="b-example-divider"></div> + + <header class="py-3 mb-3 border-bottom"> + <div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;"> + <div class="dropdown"> + <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-dark text-decoration-none dropdown-toggle" id="dropdownNavLink" data-bs-toggle="dropdown" aria-expanded="false"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + </a> + <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownNavLink"> + <li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li> + <li><a class="dropdown-item" href="#">Inventory</a></li> + <li><a class="dropdown-item" href="#">Customers</a></li> + <li><a class="dropdown-item" href="#">Products</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Reports</a></li> + <li><a class="dropdown-item" href="#">Analytics</a></li> + </ul> + </div> + + <div class="d-flex align-items-center"> + <form class="w-100 me-3"> + <input type="search" class="form-control" placeholder="Search..." aria-label="Search"> + </form> + + <div class="flex-shrink-0 dropdown"> + <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false"> + <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle"> + </a> + <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2"> + <li><a class="dropdown-item" href="#">New project...</a></li> + <li><a class="dropdown-item" href="#">Settings</a></li> + <li><a class="dropdown-item" href="#">Profile</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Sign out</a></li> + </ul> + </div> + </div> + </div> + </header> + + <div class="container-fluid pb-3"> + <div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;"> + <div class="bg-light border rounded-3"> + <br><br><br><br><br><br><br><br><br><br> + </div> + <div class="bg-light border rounded-3"> + <br><br><br><br><br><br><br><br><br><br> + </div> + </div> + </div> + + <div class="b-example-divider"></div> + + <nav class="py-2 bg-light border-bottom"> + <div class="container d-flex flex-wrap"> + <ul class="nav me-auto"> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2 active" aria-current="page">Home</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">About</a></li> + </ul> + <ul class="nav"> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Login</a></li> + <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Sign up</a></li> + </ul> + </div> + </nav> + <header class="py-3 mb-4 border-bottom"> + <div class="container d-flex flex-wrap justify-content-center"> + <a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="fs-4">Double header</span> + </a> + <form class="col-12 col-lg-auto mb-3 mb-lg-0"> + <input type="search" class="form-control" placeholder="Search..." aria-label="Search"> + </form> + </div> + </header> + + <div class="b-example-divider"></div> + + <header> + <div class="px-3 py-2 bg-dark text-white"> + <div class="container"> + <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> + <a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none"> + <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg> + </a> + + <ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small"> + <li> + <a href="#" class="nav-link text-secondary"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#home"/></svg> + Home + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#speedometer2"/></svg> + Dashboard + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#table"/></svg> + Orders + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#grid"/></svg> + Products + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#people-circle"/></svg> + Customers + </a> + </li> + </ul> + </div> + </div> + </div> + <div class="px-3 py-2 border-bottom mb-3"> + <div class="container d-flex flex-wrap justify-content-center"> + <form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto"> + <input type="search" class="form-control" placeholder="Search..." aria-label="Search"> + </form> + + <div class="text-end"> + <button type="button" class="btn btn-light text-dark me-2">Login</button> + <button type="button" class="btn btn-primary">Sign-up</button> + </div> + </div> + </div> + </header> + + <div class="b-example-divider"></div> +</main> diff --git a/site/content/docs/5.0/examples/heroes/bootstrap-docs.png b/site/content/docs/5.0/examples/heroes/bootstrap-docs.png Binary files differnew file mode 100644 index 000000000..471a9eddf --- /dev/null +++ b/site/content/docs/5.0/examples/heroes/bootstrap-docs.png diff --git a/site/content/docs/5.0/examples/heroes/bootstrap-themes.png b/site/content/docs/5.0/examples/heroes/bootstrap-themes.png Binary files differnew file mode 100644 index 000000000..13c32337d --- /dev/null +++ b/site/content/docs/5.0/examples/heroes/bootstrap-themes.png diff --git a/site/content/docs/5.0/examples/heroes/heroes.css b/site/content/docs/5.0/examples/heroes/heroes.css new file mode 100644 index 000000000..380b70a4a --- /dev/null +++ b/site/content/docs/5.0/examples/heroes/heroes.css @@ -0,0 +1,11 @@ +.b-example-divider { + height: 3rem; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +@media (min-width: 992px) { + .rounded-lg-3 { border-radius: .3rem; } +} diff --git a/site/content/docs/5.0/examples/heroes/index.html b/site/content/docs/5.0/examples/heroes/index.html new file mode 100644 index 000000000..4d97292a8 --- /dev/null +++ b/site/content/docs/5.0/examples/heroes/index.html @@ -0,0 +1,127 @@ +--- +layout: examples +title: Heroes +extra_css: + - "heroes.css" +body_class: "" +--- + +<main> + <h1 class="visually-hidden">Heroes examples</h1> + + <div class="px-4 py-5 my-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"> + <h1 class="display-5 fw-bold">Centered hero</h1> + <div class="col-lg-6 mx-auto"> + <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> + <div class="d-grid gap-2 d-sm-flex justify-content-sm-center"> + <button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button> + <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button> + </div> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="px-4 pt-5 my-5 text-center border-bottom"> + <h1 class="display-4 fw-bold">Centered screenshot</h1> + <div class="col-lg-6 mx-auto"> + <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> + <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5"> + <button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button> + <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button> + </div> + </div> + <div class="overflow-hidden" style="max-height: 30vh;"> + <div class="container px-5"> + <img src="bootstrap-docs.png" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy"> + </div> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="container col-xxl-8 px-4 py-5"> + <div class="row flex-lg-row-reverse align-items-center g-5 py-5"> + <div class="col-10 col-sm-8 col-lg-6"> + <img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy"> + </div> + <div class="col-lg-6"> + <h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1> + <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> + <div class="d-grid gap-2 d-md-flex justify-content-md-start"> + <button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button> + <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button> + </div> + </div> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="container col-xl-10 col-xxl-8 px-4 py-5"> + <div class="row align-items-center g-lg-5 py-5"> + <div class="col-lg-7 text-center text-lg-start"> + <h1 class="display-4 fw-bold lh-1 mb-3">Vertically centered hero sign-up form</h1> + <p class="col-lg-10 fs-4">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p> + </div> + <div class="col-md-10 mx-auto col-lg-5"> + <form class="p-4 p-md-5 border rounded-3 bg-light"> + <div class="form-floating mb-3"> + <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]"> + <label for="floatingInput">Email address</label> + </div> + <div class="form-floating mb-3"> + <input type="password" class="form-control" id="floatingPassword" placeholder="Password"> + <label for="floatingPassword">Password</label> + </div> + <div class="checkbox mb-3"> + <label> + <input type="checkbox" value="remember-me"> Remember me + </label> + </div> + <button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button> + <hr class="my-4"> + <small class="text-muted">By clicking Sign up, you agree to the terms of use.</small> + </form> + </div> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="container my-5"> + <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg"> + <div class="col-lg-7 p-3 p-lg-5 pt-lg-3"> + <h1 class="display-4 fw-bold lh-1">Border hero with cropped image and shadows</h1> + <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> + <div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3"> + <button type="button" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Primary</button> + <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button> + </div> + </div> + <div class="col-lg-4 offset-lg-1 p-0 position-relative overflow-hidden shadow-lg"> + <div class="position-lg-absolute top-0 left-0 overflow-hidden"> + <img class="d-block rounded-lg-3" src="bootstrap-docs.png" alt="" width="720"> + </div> + </div> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="bg-dark text-secondary px-4 py-5 text-center"> + <div class="py-5"> + <h1 class="display-5 fw-bold text-white">Dark mode hero</h1> + <div class="col-lg-6 mx-auto"> + <p class="fs-5 mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> + <div class="d-grid gap-2 d-sm-flex justify-content-sm-center"> + <button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Custom button</button> + <button type="button" class="btn btn-outline-light btn-lg px-4">Secondary</button> + </div> + </div> + </div> + </div> + + <div class="b-example-divider mb-0"></div> +</main> diff --git a/site/content/docs/5.0/examples/jumbotron/index.html b/site/content/docs/5.0/examples/jumbotron/index.html new file mode 100644 index 000000000..99cc61dee --- /dev/null +++ b/site/content/docs/5.0/examples/jumbotron/index.html @@ -0,0 +1,45 @@ +--- +layout: examples +title: Jumbotron example +include_js: false +--- + +<main> + <div class="container py-4"> + <header class="pb-3 mb-4 border-bottom"> + <a href="/" class="d-flex align-items-center text-dark text-decoration-none"> + <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg> + <span class="fs-4">Jumbotron example</span> + </a> + </header> + + <div class="p-5 mb-4 bg-light rounded-3"> + <div class="container-fluid py-5"> + <h1 class="display-5 fw-bold">Custom jumbotron</h1> + <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> + <button class="btn btn-primary btn-lg" type="button">Example button</button> + </div> + </div> + + <div class="row align-items-md-stretch"> + <div class="col-md-6"> + <div class="h-100 p-5 text-white bg-dark rounded-3"> + <h2>Change the background</h2> + <p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p> + <button class="btn btn-outline-light" type="button">Example button</button> + </div> + </div> + <div class="col-md-6"> + <div class="h-100 p-5 bg-light border rounded-3"> + <h2>Add borders</h2> + <p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p> + <button class="btn btn-outline-secondary" type="button">Example button</button> + </div> + </div> + </div> + + <footer class="pt-3 mt-4 text-muted border-top"> + © {{< year >}} + </footer> + </div> +</main> diff --git a/site/content/docs/5.0/examples/masonry/index.html b/site/content/docs/5.0/examples/masonry/index.html index 2dc091df9..9061d7cce 100644 --- a/site/content/docs/5.0/examples/masonry/index.html +++ b/site/content/docs/5.0/examples/masonry/index.html @@ -35,7 +35,7 @@ extra_js: <div class="card p-3"> <figure class="p-3 mb-0"> <blockquote class="blockquote"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <p>A well-known quote, contained in a blockquote element.</p> </blockquote> <figcaption class="blockquote-footer mb-0 text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> @@ -57,7 +57,7 @@ extra_js: <div class="card bg-primary text-white text-center p-3"> <figure class="mb-0"> <blockquote class="blockquote"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> + <p>A well-known quote, contained in a blockquote element.</p> </blockquote> <figcaption class="blockquote-footer mb-0 text-white"> Someone famous in <cite title="Source Title">Source Title</cite> @@ -83,7 +83,7 @@ extra_js: <div class="card p-3 text-end"> <figure class="mb-0"> <blockquote class="blockquote"> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <p>A well-known quote, contained in a blockquote element.</p> </blockquote> <figcaption class="blockquote-footer mb-0 text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> diff --git a/site/content/docs/5.0/examples/navbar-bottom/index.html b/site/content/docs/5.0/examples/navbar-bottom/index.html index 8f4e2635c..aee772e20 100644 --- a/site/content/docs/5.0/examples/navbar-bottom/index.html +++ b/site/content/docs/5.0/examples/navbar-bottom/index.html @@ -18,8 +18,8 @@ title: Bottom navbar example </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> diff --git a/site/content/docs/5.0/examples/navbar-fixed/index.html b/site/content/docs/5.0/examples/navbar-fixed/index.html index 9b09b713c..848137eff 100644 --- a/site/content/docs/5.0/examples/navbar-fixed/index.html +++ b/site/content/docs/5.0/examples/navbar-fixed/index.html @@ -13,8 +13,8 @@ extra_css: </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> diff --git a/site/content/docs/5.0/examples/navbar-static/index.html b/site/content/docs/5.0/examples/navbar-static/index.html index 51010d7ed..fe95dab47 100644 --- a/site/content/docs/5.0/examples/navbar-static/index.html +++ b/site/content/docs/5.0/examples/navbar-static/index.html @@ -13,8 +13,8 @@ extra_css: </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> diff --git a/site/content/docs/5.0/examples/navbars/index.html b/site/content/docs/5.0/examples/navbars/index.html index b4a29bdae..38281f3dd 100644 --- a/site/content/docs/5.0/examples/navbars/index.html +++ b/site/content/docs/5.0/examples/navbars/index.html @@ -15,8 +15,8 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample01"> <ul class="navbar-nav me-auto mb-2"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -49,8 +49,8 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample02"> <ul class="navbar-nav me-auto"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -72,8 +72,8 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample03"> <ul class="navbar-nav me-auto mb-2 mb-sm-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -106,8 +106,8 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample04"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -140,8 +140,8 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample05"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -174,8 +174,8 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample06"> <ul class="navbar-nav me-auto mb-2 mb-xl-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -208,8 +208,8 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExampleXxl"> <ul class="navbar-nav me-auto mb-2 mb-xl-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -242,8 +242,8 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample07"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -276,8 +276,8 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample07XL"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -313,8 +313,8 @@ extra_css: <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08"> <ul class="navbar-nav"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Centered nav only</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Centered nav only</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -345,8 +345,8 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample09"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -378,8 +378,8 @@ extra_css: <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10"> <ul class="navbar-nav"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Centered nav only</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Centered nav only</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> diff --git a/site/content/docs/5.0/examples/offcanvas/index.html b/site/content/docs/5.0/examples/offcanvas-navbar/index.html index 3fce0cc51..5d6b2f3d3 100644 --- a/site/content/docs/5.0/examples/offcanvas/index.html +++ b/site/content/docs/5.0/examples/offcanvas-navbar/index.html @@ -1,11 +1,12 @@ --- layout: examples -title: Offcanvas template +title: Offcanvas navbar template extra_css: - "offcanvas.css" extra_js: - src: "offcanvas.js" body_class: "bg-light" +aliases: "/docs/5.0/examples/offcanvas/" --- <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation"> @@ -17,8 +18,8 @@ body_class: "bg-light" <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Dashboard</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Dashboard</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Notifications</a> @@ -46,7 +47,7 @@ body_class: "bg-light" </div> </nav> -<div class="nav-scroller bg-white shadow-sm"> +<div class="nav-scroller bg-body shadow-sm"> <nav class="nav nav-underline" aria-label="Secondary navigation"> <a class="nav-link active" aria-current="page" href="#">Dashboard</a> <a class="nav-link" href="#"> @@ -72,27 +73,27 @@ body_class: "bg-light" </div> </div> - <div class="my-3 p-3 bg-white rounded shadow-sm"> + <div class="my-3 p-3 bg-body rounded shadow-sm"> <h6 class="border-bottom pb-2 mb-0">Recent updates</h6> <div class="d-flex text-muted pt-3"> {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} <p class="pb-3 mb-0 small lh-sm border-bottom"> <strong class="d-block text-gray-dark">@username</strong> - Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. + Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps? </p> </div> <div class="d-flex text-muted pt-3"> {{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" >}} <p class="pb-3 mb-0 small lh-sm border-bottom"> <strong class="d-block text-gray-dark">@username</strong> - Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. + Some more representative placeholder content, related to this other user. Another status update, perhaps. </p> </div> <div class="d-flex text-muted pt-3"> {{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" >}} <p class="pb-3 mb-0 small lh-sm border-bottom"> <strong class="d-block text-gray-dark">@username</strong> - Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. + This user also gets some representative placeholder content. Maybe they did something interesting, and you really want to highlight this in the recent updates. </p> </div> <small class="d-block text-end mt-3"> @@ -100,7 +101,7 @@ body_class: "bg-light" </small> </div> - <div class="my-3 p-3 bg-white rounded shadow-sm"> + <div class="my-3 p-3 bg-body rounded shadow-sm"> <h6 class="border-bottom pb-2 mb-0">Suggestions</h6> <div class="d-flex text-muted pt-3"> {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} diff --git a/site/content/docs/5.0/examples/offcanvas/offcanvas.css b/site/content/docs/5.0/examples/offcanvas-navbar/offcanvas.css index 29e26b11b..29e26b11b 100644 --- a/site/content/docs/5.0/examples/offcanvas/offcanvas.css +++ b/site/content/docs/5.0/examples/offcanvas-navbar/offcanvas.css diff --git a/site/content/docs/5.0/examples/offcanvas/offcanvas.js b/site/content/docs/5.0/examples/offcanvas-navbar/offcanvas.js index 793ea86cd..793ea86cd 100644 --- a/site/content/docs/5.0/examples/offcanvas/offcanvas.js +++ b/site/content/docs/5.0/examples/offcanvas-navbar/offcanvas.js diff --git a/site/content/docs/5.0/examples/pricing/index.html b/site/content/docs/5.0/examples/pricing/index.html index 714283bad..c62c68c70 100644 --- a/site/content/docs/5.0/examples/pricing/index.html +++ b/site/content/docs/5.0/examples/pricing/index.html @@ -6,112 +6,182 @@ extra_css: include_js: false --- -<header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm"> - <p class="h5 my-0 me-md-auto fw-normal">Company name</p> - <nav class="my-2 my-md-0 me-md-3"> - <a class="p-2 text-dark" href="#">Features</a> - <a class="p-2 text-dark" href="#">Enterprise</a> - <a class="p-2 text-dark" href="#">Support</a> - <a class="p-2 text-dark" href="#">Pricing</a> - </nav> - <a class="btn btn-outline-primary" href="#">Sign up</a> -</header> +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="check" viewBox="0 0 16 16"> + <title>Check</title> + <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/> + </symbol> +</svg> -<main class="container"> - <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center"> - <h1 class="display-4">Pricing</h1> - <p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p> - </div> +<div class="container py-3"> + <header> + <div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom"> + <a href="/" class="d-flex align-items-center text-dark text-decoration-none"> + <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg> + <span class="fs-4">Pricing example</span> + </a> - <div class="row row-cols-1 row-cols-md-3 mb-3 text-center"> - <div class="col"> - <div class="card mb-4 shadow-sm"> - <div class="card-header"> - <h4 class="my-0 fw-normal">Free</h4> - </div> - <div class="card-body"> - <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1> - <ul class="list-unstyled mt-3 mb-4"> - <li>10 users included</li> - <li>2 GB of storage</li> - <li>Email support</li> - <li>Help center access</li> - </ul> - <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free</button> - </div> + <nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto"> + <a class="me-3 py-2 text-dark text-decoration-none" href="#">Features</a> + <a class="me-3 py-2 text-dark text-decoration-none" href="#">Enterprise</a> + <a class="me-3 py-2 text-dark text-decoration-none" href="#">Support</a> + <a class="py-2 text-dark text-decoration-none" href="#">Pricing</a> + </nav> </div> + + <div class="pricing-header p-3 pb-md-4 mx-auto text-center"> + <h1 class="display-4 fw-normal">Pricing</h1> + <p class="fs-5 text-muted">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p> </div> - <div class="col"> - <div class="card mb-4 shadow-sm"> - <div class="card-header"> - <h4 class="my-0 fw-normal">Pro</h4> + </header> + + <main> + <div class="row row-cols-1 row-cols-md-3 mb-3 text-center"> + <div class="col"> + <div class="card mb-4 rounded-3 shadow-sm"> + <div class="card-header py-3"> + <h4 class="my-0 fw-normal">Free</h4> + </div> + <div class="card-body"> + <h1 class="card-title pricing-card-title">$0<small class="text-muted fw-light">/mo</small></h1> + <ul class="list-unstyled mt-3 mb-4"> + <li>10 users included</li> + <li>2 GB of storage</li> + <li>Email support</li> + <li>Help center access</li> + </ul> + <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free</button> + </div> + </div> </div> - <div class="card-body"> - <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1> - <ul class="list-unstyled mt-3 mb-4"> - <li>20 users included</li> - <li>10 GB of storage</li> - <li>Priority email support</li> - <li>Help center access</li> - </ul> - <button type="button" class="w-100 btn btn-lg btn-primary">Get started</button> + <div class="col"> + <div class="card mb-4 rounded-3 shadow-sm"> + <div class="card-header py-3"> + <h4 class="my-0 fw-normal">Pro</h4> + </div> + <div class="card-body"> + <h1 class="card-title pricing-card-title">$15<small class="text-muted fw-light">/mo</small></h1> + <ul class="list-unstyled mt-3 mb-4"> + <li>20 users included</li> + <li>10 GB of storage</li> + <li>Priority email support</li> + <li>Help center access</li> + </ul> + <button type="button" class="w-100 btn btn-lg btn-primary">Get started</button> + </div> + </div> </div> - </div> - </div> - <div class="col"> - <div class="card mb-4 shadow-sm"> - <div class="card-header"> - <h4 class="my-0 fw-normal">Enterprise</h4> - </div> - <div class="card-body"> - <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1> - <ul class="list-unstyled mt-3 mb-4"> - <li>30 users included</li> - <li>15 GB of storage</li> - <li>Phone and email support</li> - <li>Help center access</li> - </ul> - <button type="button" class="w-100 btn btn-lg btn-primary">Contact us</button> + <div class="col"> + <div class="card mb-4 rounded-3 shadow-sm border-primary"> + <div class="card-header py-3 text-white bg-primary border-primary"> + <h4 class="my-0 fw-normal">Enterprise</h4> + </div> + <div class="card-body"> + <h1 class="card-title pricing-card-title">$29<small class="text-muted fw-light">/mo</small></h1> + <ul class="list-unstyled mt-3 mb-4"> + <li>30 users included</li> + <li>15 GB of storage</li> + <li>Phone and email support</li> + <li>Help center access</li> + </ul> + <button type="button" class="w-100 btn btn-lg btn-primary">Contact us</button> + </div> + </div> </div> </div> + + <h2 class="display-6 text-center mb-4">Compare plans</h2> + + <div class="table-responsive"> + <table class="table text-center"> + <thead> + <tr> + <th style="width: 34%;"></th> + <th style="width: 22%;">Free</th> + <th style="width: 22%;">Pro</th> + <th style="width: 22%;">Enterprise</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row" class="text-start">Public</th> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + <tr> + <th scope="row" class="text-start">Private</th> + <td></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + </tbody> + + <tbody> + <tr> + <th scope="row" class="text-start">Permissions</th> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + <tr> + <th scope="row" class="text-start">Sharing</th> + <td></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + <tr> + <th scope="row" class="text-start">Unlimited members</th> + <td></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + <tr> + <th scope="row" class="text-start">Extra security</th> + <td></td> + <td></td> + <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> + </tr> + </tbody> + </table> </div> - </div> + </main> <footer class="pt-4 my-md-5 pt-md-5 border-top"> <div class="row"> <div class="col-12 col-md"> <img class="mb-2" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="24" height="19"> - <small class="d-block mb-3 text-muted">© 2017-{{< year >}}</small> + <small class="d-block mb-3 text-muted">© 2017–{{< year >}}</small> </div> <div class="col-6 col-md"> <h5>Features</h5> <ul class="list-unstyled text-small"> - <li><a class="link-secondary" href="#">Cool stuff</a></li> - <li><a class="link-secondary" href="#">Random feature</a></li> - <li><a class="link-secondary" href="#">Team feature</a></li> - <li><a class="link-secondary" href="#">Stuff for developers</a></li> - <li><a class="link-secondary" href="#">Another one</a></li> - <li><a class="link-secondary" href="#">Last time</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Cool stuff</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Random feature</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team feature</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Stuff for developers</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another one</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Last time</a></li> </ul> </div> <div class="col-6 col-md"> <h5>Resources</h5> <ul class="list-unstyled text-small"> - <li><a class="link-secondary" href="#">Resource</a></li> - <li><a class="link-secondary" href="#">Resource name</a></li> - <li><a class="link-secondary" href="#">Another resource</a></li> - <li><a class="link-secondary" href="#">Final resource</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource name</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another resource</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Final resource</a></li> </ul> </div> <div class="col-6 col-md"> <h5>About</h5> <ul class="list-unstyled text-small"> - <li><a class="link-secondary" href="#">Team</a></li> - <li><a class="link-secondary" href="#">Locations</a></li> - <li><a class="link-secondary" href="#">Privacy</a></li> - <li><a class="link-secondary" href="#">Terms</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Locations</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Privacy</a></li> + <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Terms</a></li> </ul> </div> </div> </footer> -</main> +</div> diff --git a/site/content/docs/5.0/examples/pricing/pricing.css b/site/content/docs/5.0/examples/pricing/pricing.css index 70afca134..c7304d10b 100644 --- a/site/content/docs/5.0/examples/pricing/pricing.css +++ b/site/content/docs/5.0/examples/pricing/pricing.css @@ -1,3 +1,7 @@ +body { + background-image: linear-gradient(180deg, #eee, #fff 100px, #fff); +} + .container { max-width: 960px; } diff --git a/site/content/docs/5.0/examples/product/index.html b/site/content/docs/5.0/examples/product/index.html index 8a25fe1dd..291901efa 100644 --- a/site/content/docs/5.0/examples/product/index.html +++ b/site/content/docs/5.0/examples/product/index.html @@ -71,14 +71,14 @@ extra_css: <h2 class="display-5">Another headline</h2> <p class="lead">And an even wittier subheading.</p> </div> - <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> + <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> </div> <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> <div class="my-3 py-3"> <h2 class="display-5">Another headline</h2> <p class="lead">And an even wittier subheading.</p> </div> - <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> + <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> </div> </div> @@ -88,14 +88,14 @@ extra_css: <h2 class="display-5">Another headline</h2> <p class="lead">And an even wittier subheading.</p> </div> - <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> + <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> </div> <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> <div class="my-3 py-3"> <h2 class="display-5">Another headline</h2> <p class="lead">And an even wittier subheading.</p> </div> - <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> + <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> </div> </div> </main> @@ -104,7 +104,7 @@ extra_css: <div class="row"> <div class="col-12 col-md"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg> - <small class="d-block mb-3 text-muted">© 2017-{{< year >}}</small> + <small class="d-block mb-3 text-muted">© 2017–{{< year >}}</small> </div> <div class="col-6 col-md"> <h5>Features</h5> diff --git a/site/content/docs/5.0/examples/sidebars/index.html b/site/content/docs/5.0/examples/sidebars/index.html new file mode 100644 index 000000000..cdb7d8eac --- /dev/null +++ b/site/content/docs/5.0/examples/sidebars/index.html @@ -0,0 +1,391 @@ +--- +layout: examples +title: Sidebars +extra_css: + - "sidebars.css" +extra_js: + - src: "sidebars.js" +body_class: "" +--- + +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="bootstrap" viewBox="0 0 118 94"> + <title>Bootstrap</title> + <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path> + </symbol> + <symbol id="home" viewBox="0 0 16 16"> + <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/> + </symbol> + <symbol id="speedometer2" viewBox="0 0 16 16"> + <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/> + <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/> + </symbol> + <symbol id="table" viewBox="0 0 16 16"> + <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/> + </symbol> + <symbol id="people-circle" viewBox="0 0 16 16"> + <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/> + <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/> + </symbol> + <symbol id="grid" viewBox="0 0 16 16"> + <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> + </symbol> + <symbol id="collection" viewBox="0 0 16 16"> + <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/> + </symbol> + <symbol id="calendar3" viewBox="0 0 16 16"> + <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/> + <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/> + </symbol> + <symbol id="chat-quote-fill" viewBox="0 0 16 16"> + <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/> + </symbol> + <symbol id="cpu-fill" viewBox="0 0 16 16"> + <path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> + <path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/> + </symbol> + <symbol id="gear-fill" viewBox="0 0 16 16"> + <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/> + </symbol> + <symbol id="speedometer" viewBox="0 0 16 16"> + <path d="M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z"/> + <path fill-rule="evenodd" d="M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z"/> + </symbol> + <symbol id="toggles2" viewBox="0 0 16 16"> + <path d="M9.465 10H12a2 2 0 1 1 0 4H9.465c.34-.588.535-1.271.535-2 0-.729-.195-1.412-.535-2z"/> + <path d="M6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm.535-10a3.975 3.975 0 0 1-.409-1H4a1 1 0 0 1 0-2h2.126c.091-.355.23-.69.41-1H4a2 2 0 1 0 0 4h2.535z"/> + <path d="M14 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/> + </symbol> + <symbol id="tools" viewBox="0 0 16 16"> + <path d="M1 0L0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/> + </symbol> + <symbol id="chevron-right" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/> + </symbol> + <symbol id="geo-fill" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/> + </symbol> +</svg> + +<main> + <h1 class="visually-hidden">Sidebars examples</h1> + + <div class="d-flex flex-column p-3 text-white bg-dark" style="width: 280px;"> + <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="fs-4">Sidebar</span> + </a> + <hr> + <ul class="nav nav-pills flex-column mb-auto"> + <li class="nav-item"> + <a href="#" class="nav-link active" aria-current="page"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg> + Home + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg> + Dashboard + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg> + Orders + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg> + Products + </a> + </li> + <li> + <a href="#" class="nav-link text-white"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg> + Customers + </a> + </li> + </ul> + <hr> + <div class="dropdown"> + <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> + <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2"> + <strong>mdo</strong> + </a> + <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1"> + <li><a class="dropdown-item" href="#">New project...</a></li> + <li><a class="dropdown-item" href="#">Settings</a></li> + <li><a class="dropdown-item" href="#">Profile</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Sign out</a></li> + </ul> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="d-flex flex-column p-3 bg-light" style="width: 280px;"> + <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="fs-4">Sidebar</span> + </a> + <hr> + <ul class="nav nav-pills flex-column mb-auto"> + <li class="nav-item"> + <a href="#" class="nav-link active" aria-current="page"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg> + Home + </a> + </li> + <li> + <a href="#" class="nav-link link-dark"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg> + Dashboard + </a> + </li> + <li> + <a href="#" class="nav-link link-dark"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg> + Orders + </a> + </li> + <li> + <a href="#" class="nav-link link-dark"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg> + Products + </a> + </li> + <li> + <a href="#" class="nav-link link-dark"> + <svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg> + Customers + </a> + </li> + </ul> + <hr> + <div class="dropdown"> + <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false"> + <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2"> + <strong>mdo</strong> + </a> + <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2"> + <li><a class="dropdown-item" href="#">New project...</a></li> + <li><a class="dropdown-item" href="#">Settings</a></li> + <li><a class="dropdown-item" href="#">Profile</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Sign out</a></li> + </ul> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="d-flex flex-column bg-light" style="width: 4.5rem;"> + <a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="40" height="32"><use xlink:href="#bootstrap"/></svg> + <span class="visually-hidden">Icon-only</span> + </a> + <ul class="nav nav-pills nav-flush flex-column mb-auto text-center"> + <li class="nav-item"> + <a href="#" class="nav-link active py-3 border-bottom" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="24" height="24" role="img" aria-label="Home"><use xlink:href="#home"/></svg> + </a> + </li> + <li> + <a href="#" class="nav-link py-3 border-bottom" title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="24" height="24"><use xlink:href="#speedometer2"/></svg> + </a> + </li> + <li> + <a href="#" class="nav-link py-3 border-bottom" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="24" height="24"><use xlink:href="#table"/></svg> + </a> + </li> + <li> + <a href="#" class="nav-link py-3 border-bottom" title="Products" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="24" height="24"><use xlink:href="#grid"/></svg> + </a> + </li> + <li> + <a href="#" class="nav-link py-3 border-bottom" title="Customers" data-bs-toggle="tooltip" data-bs-placement="right"> + <svg class="bi" width="24" height="24"><use xlink:href="#people-circle"/></svg> + </a> + </li> + </ul> + <div class="dropdown border-top"> + <a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" id="dropdownUser3" data-bs-toggle="dropdown" aria-expanded="false"> + <img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle"> + </a> + <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser3"> + <li><a class="dropdown-item" href="#">New project...</a></li> + <li><a class="dropdown-item" href="#">Settings</a></li> + <li><a class="dropdown-item" href="#">Profile</a></li> + <li><hr class="dropdown-divider"></li> + <li><a class="dropdown-item" href="#">Sign out</a></li> + </ul> + </div> + </div> + + <div class="b-example-divider"></div> + + <div class="p-3 bg-white" style="width: 280px;"> + <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"> + <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> + <span class="fs-5 fw-semibold">Collapsible</span> + </a> + <ul class="list-unstyled ps-0"> + <li class="mb-1"> + <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true"> + Home + </button> + <div class="collapse show" id="home-collapse"> + <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> + <li><a href="#" class="link-dark rounded">Overview</a></li> + <li><a href="#" class="link-dark rounded">Updates</a></li> + <li><a href="#" class="link-dark rounded">Reports</a></li> + </ul> + </div> + </li> + <li class="mb-1"> + <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false"> + Dashboard + </button> + <div class="collapse" id="dashboard-collapse"> + <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> + <li><a href="#" class="link-dark rounded">Overview</a></li> + <li><a href="#" class="link-dark rounded">Weekly</a></li> + <li><a href="#" class="link-dark rounded">Monthly</a></li> + <li><a href="#" class="link-dark rounded">Annually</a></li> + </ul> + </div> + </li> + <li class="mb-1"> + <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false"> + Orders + </button> + <div class="collapse" id="orders-collapse"> + <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> + <li><a href="#" class="link-dark rounded">New</a></li> + <li><a href="#" class="link-dark rounded">Processed</a></li> + <li><a href="#" class="link-dark rounded">Shipped</a></li> + <li><a href="#" class="link-dark rounded">Returned</a></li> + </ul> + </div> + </li> + <li class="border-top my-3"></li> + <li class="mb-1"> + <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false"> + Account + </button> + <div class="collapse" id="account-collapse"> + <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> + <li><a href="#" class="link-dark rounded">New...</a></li> + <li><a href="#" class="link-dark rounded">Profile</a></li> + <li><a href="#" class="link-dark rounded">Settings</a></li> + <li><a href="#" class="link-dark rounded">Sign out</a></li> + </ul> + </div> + </li> + </ul> + </div> + + <div class="b-example-divider"></div> + + <div class="d-flex flex-column align-items-stretch bg-white" style="width: 380px;"> + <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom"> + <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> + <span class="fs-5 fw-semibold">List group</span> + </a> + <div class="list-group list-group-flush border-bottom scrollarea"> + <a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small>Wed</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Tues</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Mon</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Wed</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Tues</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Mon</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Wed</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Tues</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Mon</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Wed</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Tues</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + <a href="#" class="list-group-item list-group-item-action py-3 lh-tight"> + <div class="d-flex w-100 align-items-center justify-content-between"> + <strong class="mb-1">List group item heading</strong> + <small class="text-muted">Mon</small> + </div> + <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> + </a> + </div> + </div> + + <div class="b-example-divider"></div> +</main> diff --git a/site/content/docs/5.0/examples/sidebars/sidebars.css b/site/content/docs/5.0/examples/sidebars/sidebars.css new file mode 100644 index 000000000..22678b93a --- /dev/null +++ b/site/content/docs/5.0/examples/sidebars/sidebars.css @@ -0,0 +1,82 @@ +main { + display: flex; + flex-wrap: nowrap; + height: 100vh; + height: -webkit-fill-available; + overflow-x: auto; + overflow-y: hidden; +} +main > * { + flex-shrink: 0; + min-height: -webkit-fill-available; +} + +.b-example-divider { + width: 1.5rem; + height: 100%; + background-color: rgba(0, 0, 0, .1); + border: solid rgba(0, 0, 0, .15); + border-width: 1px 0; + box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15); +} + +.bi { + vertical-align: -.125em; + pointer-events: none; + fill: currentColor; +} + +.dropdown-toggle { outline: 0; } + +.nav-flush .nav-link { + border-radius: 0; +} + +.btn-toggle { + display: inline-flex; + align-items: center; + padding: .25rem .5rem; + font-weight: 600; + color: rgba(0, 0, 0, .65); + background-color: transparent; + border: 0; +} +.btn-toggle:hover, +.btn-toggle:focus { + color: rgba(0, 0, 0, .85); + background-color: #d2f4ea; +} + +.btn-toggle::before { + width: 1.25em; + line-height: 0; + content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); + transition: transform .35s ease; + transform-origin: .5em 50%; +} + +.btn-toggle[aria-expanded="true"] { + color: rgba(0, 0, 0, .85); +} +.btn-toggle[aria-expanded="true"]::before { + transform: rotate(90deg); +} + +.btn-toggle-nav a { + display: inline-flex; + padding: .1875rem .5rem; + margin-top: .125rem; + margin-left: 1.25rem; + text-decoration: none; +} +.btn-toggle-nav a:hover, +.btn-toggle-nav a:focus { + background-color: #d2f4ea; +} + +.scrollarea { + overflow-y: auto; +} + +.fw-semibold { font-weight: 600; } +.lh-tight { line-height: 1.25; } diff --git a/site/content/docs/5.0/examples/sidebars/sidebars.js b/site/content/docs/5.0/examples/sidebars/sidebars.js new file mode 100644 index 000000000..68384c163 --- /dev/null +++ b/site/content/docs/5.0/examples/sidebars/sidebars.js @@ -0,0 +1,8 @@ +/* global bootstrap: false */ +(function () { + 'use strict' + var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) + tooltipTriggerList.forEach(function (tooltipTriggerEl) { + new bootstrap.Tooltip(tooltipTriggerEl) + }) +})() diff --git a/site/content/docs/5.0/examples/sign-in/index.html b/site/content/docs/5.0/examples/sign-in/index.html index ac5b6104b..fb885ba41 100644 --- a/site/content/docs/5.0/examples/sign-in/index.html +++ b/site/content/docs/5.0/examples/sign-in/index.html @@ -11,16 +11,22 @@ include_js: false <form> <img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> <h1 class="h3 mb-3 fw-normal">Please sign in</h1> - <label for="inputEmail" class="visually-hidden">Email address</label> - <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> - <label for="inputPassword" class="visually-hidden">Password</label> - <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> + + <div class="form-floating"> + <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]"> + <label for="floatingInput">Email address</label> + </div> + <div class="form-floating"> + <input type="password" class="form-control" id="floatingPassword" placeholder="Password"> + <label for="floatingPassword">Password</label> + </div> + <div class="checkbox mb-3"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button> - <p class="mt-5 mb-3 text-muted">© 2017-{{< year >}}</p> + <p class="mt-5 mb-3 text-muted">© 2017–{{< year >}}</p> </form> </main> diff --git a/site/content/docs/5.0/examples/sign-in/signin.css b/site/content/docs/5.0/examples/sign-in/signin.css index eaa08ba61..4732d1fb9 100644 --- a/site/content/docs/5.0/examples/sign-in/signin.css +++ b/site/content/docs/5.0/examples/sign-in/signin.css @@ -17,24 +17,21 @@ body { padding: 15px; margin: auto; } + .form-signin .checkbox { font-weight: 400; } -.form-signin .form-control { - position: relative; - box-sizing: border-box; - height: auto; - padding: 10px; - font-size: 16px; -} -.form-signin .form-control:focus { + +.form-signin .form-floating:focus-within { z-index: 2; } + .form-signin input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } + .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; diff --git a/site/content/docs/5.0/examples/starter-template/index.html b/site/content/docs/5.0/examples/starter-template/index.html index ed2151447..48a5cbfad 100644 --- a/site/content/docs/5.0/examples/starter-template/index.html +++ b/site/content/docs/5.0/examples/starter-template/index.html @@ -5,46 +5,47 @@ extra_css: - "starter-template.css" --- -<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> - <div class="container-fluid"> - <a class="navbar-brand" href="#">Navbar</a> - <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> +<div class="col-lg-8 mx-auto p-3 py-md-5"> + <header class="d-flex align-items-center pb-3 mb-5 border-bottom"> + <a href="/" class="d-flex align-items-center text-dark text-decoration-none"> + <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg> + <span class="fs-4">Starter template</span> + </a> + </header> - <div class="collapse navbar-collapse" id="navbarsExampleDefault"> - <ul class="navbar-nav me-auto mb-2 mb-md-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#">Link</a> - </li> - <li class="nav-item"> - <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> - </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown01"> - <li><a class="dropdown-item" href="#">Action</a></li> - <li><a class="dropdown-item" href="#">Another action</a></li> - <li><a class="dropdown-item" href="#">Something else here</a></li> - </ul> - </li> - </ul> - <form class="d-flex"> - <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> - <button class="btn btn-outline-success" type="submit">Search</button> - </form> + <main> + <h1>Get started with Bootstrap</h1> + <p class="fs-5 col-md-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p> + + <div class="mb-5"> + <a href="{{< docsref "/examples" >}}" class="btn btn-primary btn-lg px-4">Download examples</a> </div> - </div> -</nav> -<main class="container"> + <hr class="col-3 col-md-2 mb-5"> - <div class="starter-template text-center py-5 px-3"> - <h1>Bootstrap starter template</h1> - <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> - </div> + <div class="row g-5"> + <div class="col-md-6"> + <h2>Starter projects</h2> + <p>Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p> + <ul class="icon-list"> + <li><a href="https://github.com/twbs/bootstrap-npm-starter" rel="noopener" target="_blank">Bootstrap npm starter</a></li> + <li class="text-muted">Bootstrap Parcel starter (coming soon!)</li> + </ul> + </div> -</main><!-- /.container --> + <div class="col-md-6"> + <h2>Guides</h2> + <p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p> + <ul class="icon-list"> + <li><a href="{{< docsref "/getting-started/introduction" >}}">Bootstrap quick start guide</a></li> + <li><a href="{{< docsref "/getting-started/webpack" >}}">Bootstrap Webpack guide</a></li> + <li><a href="{{< docsref "/getting-started/parcel" >}}">Bootstrap Parcel guide</a></li> + <li><a href="{{< docsref "/getting-started/build-tools" >}}">Contributing to Bootstrap</a></li> + </ul> + </div> + </div> + </main> + <footer class="pt-5 my-5 text-muted border-top"> + Created by the Bootstrap team · © {{< year >}} + </footer> +</div> diff --git a/site/content/docs/5.0/examples/starter-template/starter-template.css b/site/content/docs/5.0/examples/starter-template/starter-template.css index 6fb709105..d03436db0 100644 --- a/site/content/docs/5.0/examples/starter-template/starter-template.css +++ b/site/content/docs/5.0/examples/starter-template/starter-template.css @@ -1,3 +1,18 @@ -body { - padding-top: 5rem; +.icon-list { + padding-left: 0; + list-style: none; +} +.icon-list li { + display: flex; + align-items: flex-start; + margin-bottom: .25rem; +} +.icon-list li::before { + display: block; + flex-shrink: 0; + width: 1.5em; + height: 1.5em; + margin-right: .5rem; + content: ""; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto; } diff --git a/site/content/docs/5.0/examples/sticky-footer-navbar/index.html b/site/content/docs/5.0/examples/sticky-footer-navbar/index.html index 0b51fee5a..ce036dc09 100644 --- a/site/content/docs/5.0/examples/sticky-footer-navbar/index.html +++ b/site/content/docs/5.0/examples/sticky-footer-navbar/index.html @@ -17,8 +17,8 @@ body_class: "d-flex flex-column h-100" </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> - <li class="nav-item active"> - <a class="nav-link" aria-current="page" href="#">Home</a> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> |
