--- layout: examples title: ورقة الغش extra_css: - "../cheatsheet/cheatsheet.rtl.css" extra_js: - src: "../cheatsheet/cheatsheet.js" body_class: "bg-body-tertiary" direction: rtl ---

Bootstrap ورقة الغش

}}" class="ms-auto link-light" hreflang="en">جدول بيانات LTR

المحتوى

{{< example show_markup="false" >}}

العرض 1

العرض 2

العرض 3

العرض 4

العرض 5

العرض 6

{{< /example >}} {{< example show_markup="false" >}}

عنوان 1

عنوان 2

عنوان 3

عنوان 4

عنوان 5

عنوان 6

{{< /example >}} {{< example show_markup="false" >}}

هذه قطعة إملائية متميزة، فهي مصممة لتكون بارزة من بين القطع الإملائية الأخرى.

{{< /example >}} {{< example show_markup="false" >}}

يمكنك استخدام تصنيف mark لتحديد نص.

من المفترض أن يتم التعامل مع هذا السطر كنص محذوف.

من المفترض أن يتم التعامل مع هذا السطر على أنه لم يعد دقيقًا.

من المفترض أن يتم التعامل مع هذا السطر كإضافة إلى المستند.

سيتم عرض النص في هذا السطر كما وتحته خط.

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

هذا السطر يحوي نص عريض.

هذا السطر يحوي نص مائل.

{{< /example >}} {{< example show_markup="false" >}}
{{< /example >}} {{< example show_markup="false" >}}

إقتباس مبهر، موضوع في عنصر blockquote

شخص مشهور في عنوان المصدر
{{< /example >}} {{< example show_markup="false" >}}
  • هذه قائمة عناصر.
  • بالرغم من أنها مصممة كي لا تظهر كذلك.
  • إلا أنها مجهزة كـ قائمة خلف الكواليس
  • هذا التصميم ينطبق فقد على القائمة الرئيسية
  • القوائم الفرعية
    • لا تتأثر بهذا التصميم
    • فهي تظهر عليها علامات الترقيم
    • وتحتوي على مساحة فارغة بجوارها
  • قد يكون هذا التصميم مفيدًا في بعض الأحيان.
{{< /example >}} {{< example show_markup="false" >}}
  • هذا عنصر في قائمة.
  • وهذا أيضًا.
  • لكنهم يظهرون متجاورين.
{{< /example >}}
{{< example show_markup="false" >}} {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="صورة مستجيبة" >}} {{< /example >}} {{< example show_markup="false" >}} {{< placeholder width="200" height="200" class="img-thumbnail" title="صورة عنصر نائب مربع عام مع حدود بيضاء حولها ، مما يجعلها تشبه صورة تم التقاطها بكاميرا فورية قديمة" >}} {{< /example >}}
{{< example show_markup="false" >}}
# الاسم الاول الكنية الاسم المستعار
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{{< /example >}} {{< example show_markup="false" >}}
# الاسم الاول الكنية الاسم المستعار
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{{< /example >}} {{< example show_markup="false" >}} {{< table.inline >}} {{- range (index $.Site.Data "theme-colors") }} {{- end -}} {{< /table.inline >}}
Class عنوان عنوان
Default خلية خلية
{{ .name | title }} خلية خلية
{{< /example >}} {{< example show_markup="false" >}}
# الاسم الاول الكنية الاسم المستعار
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
{{< /example >}}

النماذج البيانية

}}">دليل الإستخدام
{{< example show_markup="false" >}}
{{< placeholder width="400" height="300" class="figure-img img-fluid rounded" >}}
شرح للصورة أعلاه.
{{< /example >}}

النماذج

{{< example show_markup="false" >}}
لن نقوم بمشاركة بريدك الإلكتروني مع أي شخص آخر.
أزرار الاختيار الأحادي
{{< /example >}}
{{< example show_markup="false" >}}
أزرار اختيار أحادي معطلين
{{< /example >}}
{{< example show_markup="false" >}}
{{< /example >}} {{< example show_markup="false" >}}
{{< /example >}}

مجموعة الإدخال

}}">دليل الإستخدام
{{< example show_markup="false" >}}
أنا اسمي
وغيرها
https://example.com/users/
.00 $
مع textarea
{{< /example >}}

الحقول ذوي العناوين العائمة

}}">دليل الإستخدام
{{< example show_markup="false" >}}
{{< /example >}}
{{< example show_markup="false" >}}
يبدو صحيحًا!
يبدو صحيحًا!
@
يرجى اختيار اسم مستخدم.
يرجى إدخال مدينة صحيحة.
يرجى اختيار ولاية صحيحة.
يرجى إدخال رمز بريدي صحيح.
تجب الموافقة قبل إرسال النموذج.
{{< /example >}}

العناصر

{{< example show_markup="false" >}}

هذا هو محتوى عنصر المطوية الأول. سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.

هذا هو محتوى عنصر المطوية الثاني. سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.

هذا هو محتوى عنصر المطوية الثالث. سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
{{< /example >}}

الإنذارات

}}">دليل الإستخدام
{{< example show_markup="false" >}} {{< alerts.inline >}} {{- range (index $.Site.Data "theme-colors") }} {{ end -}} {{< /alerts.inline >}} {{< /example >}} {{< example show_markup="false" >}} {{< /example >}}
{{< example show_markup="false" >}}

مثال على عنوان جديد

مثال على عنوان جديد

مثال على عنوان جديد

مثال على عنوان جديد

مثال على عنوان جديد

مثال على عنوان جديد

مثال على عنوان جديد

مثال على عنوان جديد

{{< /example >}} {{< example show_markup="false" >}} {{< badge.inline >}} {{- range (index $.Site.Data "theme-colors") }} {{ .name | title }}{{- end -}} {{< /badge.inline >}} {{< /example >}}
{{< example show_markup="false" >}} {{< buttons.inline >}} {{- range (index $.Site.Data "theme-colors") }} {{- end -}} {{< /buttons.inline >}} {{< /example >}} {{< example show_markup="false" >}} {{< buttons.inline >}} {{- range (index $.Site.Data "theme-colors") }} {{- end -}} {{< /buttons.inline >}} {{< /example >}} {{< example show_markup="false" >}} {{< /example >}}
{{< example show_markup="false" >}}
{{< placeholder width="100%" height="180" class="card-img-top" text="غطاء الصورة" >}}
عنوان البطاقة

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

اذهب لمكان ما
متميز
عنوان البطاقة

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

اذهب لمكان ما
عنوان البطاقة

بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

  • عنصر
  • عنصر آخر
  • عنصر ثالث
{{< placeholder width="100%" height="250" text="صورة" >}}
عنوان البطاقة

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

آخر تحديث منذ 3 دقائق

{{< /example >}}

مجموعة العناصر

}}">دليل الإستخدام
{{< example show_markup="false" >}}
  • عنصر معطل
  • عنصر ثاني
  • عنصر ثالث
  • عنصر رابع
  • وعنصر خامس أيضًا
{{< /example >}} {{< example show_markup="false" >}}
  • عنصر
  • عنصر ثاني
  • عنصر ثالث
  • عنصر رابع
  • وعنصر خامس أيضًا
{{< /example >}} {{< example show_markup="false" >}}
عنصر مجموعة قائمة default بسيط {{< list.inline >}} {{- range (index $.Site.Data "theme-colors") }} عنصر مجموعة قائمة {{ .name }} بسيط {{- end -}} {{< /list.inline >}}
{{< /example >}}

الصناديق المنبثقة

}}">دليل الإستخدام
{{< example show_markup="false" >}} {{< /example >}} {{< example show_markup="false" >}} {{< /example >}}

شريط التقدم

}}">دليل الإستخدام
{{< example show_markup="false" >}}
0%
25%
50%
75%
100%
{{< /example >}} {{< example show_markup="false" >}}
{{< /example >}}

@fat

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

@mdo

بصرف النظر عن تحسيننا جدوى المكيّفات أو عدم تحسينها، فإن الطلب على الطاقة سيزداد. وطبقاً لما جاء في مقالة معهد ماساشوستس للتكنولوجيا، السالف ذكره، ثمَّة أمر يجب عدم إغفاله، وهو كيف أن هذا الطلب سيضغط على نظم توفير الطاقة الحالية. إذ لا بد من إعادة تأهيل كل شبكات الكهرباء، وتوسيعها لتلبية طلب الطاقة في زمن الذروة، خلال موجات الحرارة المتزايدة. فحين يكون الحر شديداً يجنح الناس إلى البقاء في الداخل، وإلى زيادة تشغيل المكيّفات، سعياً إلى جو لطيف وهم يستخدمون أدوات وأجهزة مختلفة أخرى.

واحد

وكل هذه الأمور المتزامنة من تشغيل الأجهزة، يزيد الضغط على شبكات الطاقة، كما أسلفنا. لكن مجرد زيادة سعة الشبكة ليس كافياً. إذ لا بد من تطوير الشبكات الذكية التي تستخدم الجسّاسات، ونظم المراقبة، والبرامج الإلكترونية، لتحديد متى يكون الشاغلون في المبنى، ومتى يكون ثمَّة حاجة إلى الطاقة، ومتى تكون الحرارة منخفضة، وبذلك يخرج الناس، فلا يستخدمون كثيراً من الكهرباء.

اثنان

مع الأسف، كل هذه الحلول المبتكرة مكلِّفة، وهذا ما يجعلها عديمة الجدوى في نظر بعض الشركات الخاصة والمواطن المتقشّف. إن بعض الأفراد الواعين بيئياً يبذلون قصارى جهدهم في تقليص استهلاكهم من الطاقة، ويعون جيداً أهمية أجهزة التكييف المجدية والأرفق بالبيئة. ولكن جهات كثيرة لن تتحرّك لمجرد حافز سلامة المناخ ووقف هدر الطاقة، ما دامت لا تحركها حوافز قانونية. وعلى الحكومات أن تُقدِم عند الاهتمام بالتغيّر المناخي، على وضع التشريعات المناسبة. فبالنظم والحوافز والدعم، يمكن دفع الشركات إلى اعتماد الحلول الأجدى في مكاتبها.

ثلاثة

وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!

ولا مانع من إضافة محتوى آخر ليس تحت أي قسم معين.

الدوائر المتحركة

}}">دليل الإستخدام
{{< example show_markup="false" >}} {{< spinner.inline >}} {{- range (index $.Site.Data "theme-colors") }}
جار التحميل...
{{- end -}} {{< /spinner.inline >}} {{< /example >}} {{< example show_markup="false" >}} {{< spinner.inline >}} {{- range (index $.Site.Data "theme-colors") }}
جار التحميل...
{{- end -}} {{< /spinner.inline >}} {{< /example >}}

الإشعارات

}}">دليل الإستخدام
{{< example show_markup="false" class="bg-dark p-5 align-items-center" >}} {{< /example >}}

التلميحات

}}">دليل الإستخدام
{{< example show_markup="false" class="tooltip-demo" >}} {{< /example >}}