عنوان H1

عنوان H2

عنوان H3

عنوان H4

عنوان H5

عنوان H6

---

النصوص

وأكثرها وهولندا، الإمتعاض دون قد, ان وصل بأضرار بولندا،. ثم ترتيب يرتبط عشوائية أما, وفرنسا المتحدة العمليات دنو عل. مكّن اللا بأيدي إيو قد, أعلنت والديون غير كل, ٣٠ إتفاقية ومحاولة ومن.

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

نص محدد

يمكن إستخدام العنصر mark لتحديد نص.

نص محذوف

هذا النص يعتبر كنص تم حذفه.

نص تحته خط

هذا النص سوف يظهر تحته خط.

نص صغير

هذا النص يظهر كنص أصغر بعض الشيء في الحجم.

نص عريض

هذا النص يظهر كنص عريض.

نص مائل

هذا النص يظهر كنص مائل.

إختصار

إختصار لكلمة يظهر من السمة.

---

كود في وسط النص

كمثال العنصر <section> يظهر كأنه كود وسط النص

كود للمدخلات

لتغيير المجلدات إضغط cd متبوعا بإسم المجلد الذي تريده
لتغيير الإعدادات إضغط ctrl + ,

نص كود أساسي

<p>Sample text here...</p>

---

القوائم

---

الجداول

جدول بصفوف مخططه

<table class="table-striped">
   ...
</table>

جدول بتأثير المرور

يمكنك إضافة تأثير تمرير فوق الجدول مع

<table class="table-hoverable">
   ...
</table>

---

جدول بنص بمحاذا الوسط

يمكنك اضافة هذا الجدول عن طريق اضافة الكلاسclass="table-centered".

#	عنوان في الجدول	عنوان في الجدول	عنوان في الجدول
1	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول
2	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول
3	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول

<table class="table-centered">
   ...
</table>

---

جدول "كرت"

يمكنك اضافة تأثير الظل بإستخدام الكلاس class="table-card" كالمثال التالي.

#	عنوان في الجدول	عنوان في الجدول	عنوان في الجدول
1	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول
2	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول
3	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول

<div class="table-card">
   <table>
      ...
   </table>
</div>

---

الجدول المتجاوب

بإستخدام الكلاس class="table-responsive"فإنك تضيف سمة التجاوب الى الجدول.

#	عنوان في الجدول	عنوان في الجدول	عنوان في الجدول	عنوان في الجدول	عنوان في الجدول
1	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول
2	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول
3	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول
4	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول

<div class="table-responsive">
   <table>
      ...
   </table>
</div>

الجول الملون

يمكنك تلوين الجدول بإستخدام الالوان الأساسية والثانوية.

#	عنوان في الجدول	عنوان في الجدول	عنوان في الجدول
1	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول
2	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول
3	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول

<table class="background-primary">
   ...
</table>

#	عنوان في الجدول	عنوان في الجدول	عنوان في الجدول
1	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول
2	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول
3	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول

<table class="background-secondary ">
   ...
</table>

جدول بمزايا مختلفة

يمكنك الجمع بين أكثر من ميزة المذكورة اعلاه كهذا المثال

#	عنوان في الجدول	عنوان في الجدول	عنوان في الجدول
1	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول
2	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول
3	معلومات في الجدول	معلومات في الجدول	معلومات في الجدول

<div class="table-card">
   <table class="table-striped table-hoverable table-centered background-secondary">
      ...
   </table>
</div>

التنبيهات

بإستخدام الكلاس alertتستطيع عرض تنبهاتك و اخطاراتك بخمسة الوان مختلفة.

<div class="alert">...</div>
<div class="alert info">...</div>
<div class="alert danger">...</div>
<div class="alert warning">...</div>
<div class="alert success">...</div>

تنبيه بالعنوان

<div class="alert info">
    <h2>Lorem ipsum dolor sit</h2>
    <p>...</p>
    <p>...</p>
</div>

تنبيه بنص كبير

<div class="alert warning large">...</div>

---

تجاوب الميديا

بإستخدام الكلاس class="media" تستطيع اضافة التجاوب لـ embed, iframe, و object.

<div class="media">
   <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://www.youtube.com/embed/fA9zURwPEr0"></iframe>
</div>

---

صندوق الاكواد البرمجية

تستطيع اضافة صندوق الاكواد بأكثر من شكل وميزة

صندوق بسيط

<pre data-lang="your-title-here">
   <code>Your text here</code>
</pre>

تلوين نص ضمن صندوق الاكواد

pre primary color

pre secondary color

<pre class="primary">pre <span class="text-primary">primary</span> color</pre>
<pre class="secondary">pre <span class="text-secondary">secondary</span> color</pre>

صندوق بحسب اللغة البرمجية

HTML code here...

CSS code here...

JavaScript code here...

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular App!';
}

The best template for Blogger

صندوق الاكواد بالالوان

تستطيع استخدام الألوان الاساسية والثانوية على صندوق الاكواد.

pre code primary...

pre code secondary...

<pre class="primary" data-lang="html">
   <code>HTML code here...</code>
</pre>
<pre class="secondary" data-lang="css">
   <code>CSS code here...</code>
</pre>

صندوق الاكواد بحسب نظام البرمجة

.
user

cd /etc/ && ls -a

root

sudo apt-get update && sudo apt-get upgrade

<pre class="user">cd /etc/ && ls -a</pre>
<pre class="root">sudo apt-get update && sudo apt-get upgrade</pre>

---

صندوق الملاحة "محتوى الصفحة"

قم بإضافة الكود بأول الصفحة

<nav id="toc"></nav>

و إضافة id الى العنواوين من فئة h3 كل عنوان id مختلف مثال

<h3 id="title1">عنوان 1</h3>
<h3 id="title2">عنوان 2</h3>
<h3 id="title3">عنوان 3</h3>