Skip to content

Commit

Permalink
Improve RTL examples (#33097)
Browse files Browse the repository at this point in the history
  • Loading branch information
@aqeelat
aqeelat committed Apr 27, 2021
1 parent efd45ec commit 3bcb9e7
Show file tree
Hide file tree
Showing 7 changed files with 506 additions and 512 deletions.
48 changes: 24 additions & 24 deletions site/content/docs/5.0/examples/album-rtl/index.html
View file
Expand Up @@ -10,14 +10,14 @@
<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>
Expand All @@ -42,7 +42,7 @@ <h4 class="text-white">اتصل</h4>
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">
<h1 class="fw-light">مثال الألبوم</h1>
<p class="lead text-muted">شيء قصير وقائد حول المجموعة أدناه - محتوياتها ، ومنشئها ، وما إلى ذلك. اجعلها قصيرة ولطيفة ، ولكن ليست قصيرة جدًا حتى لا يتخطى الناس ببساطة هذه المجموعة تمامًا.</p>
<p class="lead text-muted">وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.</p>
<p>
<a href="#" class="btn btn-primary my-2">الدعوة الرئيسية للعمل</a>
<a href="#" class="btn btn-secondary my-2">عمل ثانوي</a>
Expand All @@ -57,12 +57,12 @@ <h1 class="fw-light">مثال الألبوم</h1>
<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>
Expand All @@ -72,12 +72,12 @@ <h1 class="fw-light">مثال الألبوم</h1>
</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>
Expand All @@ -87,12 +87,12 @@ <h1 class="fw-light">مثال الألبوم</h1>
</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>
Expand All @@ -103,12 +103,12 @@ <h1 class="fw-light">مثال الألبوم</h1>

<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>
Expand All @@ -118,12 +118,12 @@ <h1 class="fw-light">مثال الألبوم</h1>
</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>
Expand All @@ -133,12 +133,12 @@ <h1 class="fw-light">مثال الألبوم</h1>
</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>
Expand All @@ -149,12 +149,12 @@ <h1 class="fw-light">مثال الألبوم</h1>

<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>
Expand All @@ -164,12 +164,12 @@ <h1 class="fw-light">مثال الألبوم</h1>
</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>
Expand All @@ -179,12 +179,12 @@ <h1 class="fw-light">مثال الألبوم</h1>
</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>
Expand Down

0 comments on commit 3bcb9e7

Please sign in to comment.