نوافذ التبويب

يأخذ التنقل الأساسي ويضيف امتداد .tabs-nav فئة لتوليد واجهة مبوبة. استخدمها لإنشاء مناطق قابلة للجدولة.

عرض محتوى غير آمن

يجب تمكين عرض المحتوى غير الآمن حتى يظهر هذا التنسيق. انظر الى هذا زينديسك شرط لمزيد من التفاصيل.

 

علامة تبويب المثال

هذا هو بعض محتوى العنصر النائب للمحتوى المرتبط بعلامة التبويب Test1. النقر ستقوم علامة تبويب أخرى بتبديل رؤية هذا للعلامة التالية.
هذا هو بعض محتوى العنصر النائب للمحتوى المرتبط بعلامة التبويب Test2. النقر ستقوم علامة تبويب أخرى بتبديل رؤية هذا للعلامة التالية.
هذا هو بعض محتوى العنصر النائب للمحتوى المرتبط بعلامة التبويب Test3. النقر ستقوم علامة تبويب أخرى بتبديل رؤية هذا للعلامة التالية.

 

<div class="tabs">
<div class="tabs-nav">
<a class="tabs-link" data-target="#test1" data-toggle="tab">Test1</a>
<a class="tabs-link" data-target="#test2" data-toggle="tab">Test2</a>
<a class="tabs-link" data-target="#test3" data-toggle="tab">Test3</a>
</div>
<div class="tabs-content">
<div id="test1">...</div>
<div id="test2">...</div>
<div id="test3">...</div>
</div>
</div>

 

علامة تبويب بلون علامات التبويب النشطة

هذا هو بعض محتوى العنصر النائب للمحتوى المرتبط بعلامة التبويب Test1. علامات التبويب هذه نشطة الآن وتعرض علامات تبويب بيضاء اللون.
هذا هو بعض محتوى العنصر النائب للمحتوى المرتبط بعلامة التبويب Test2. علامات التبويب هذه نشطة الآن وتعرض علامات تبويب بيضاء اللون.
هذا هو بعض محتوى العنصر النائب للمحتوى المرتبط بعلامة التبويب Test3. علامات التبويب هذه نشطة الآن وتعرض علامات تبويب بيضاء اللون.

 

<div class="tabs colored-1">
<div class="tabs-nav">
<a class="tabs-link" data-target="#test1" data-toggle="tab">Test1</a>
<a class="tabs-link" data-target="#test2" data-toggle="tab">Test2</a>
<a class="tabs-link" data-target="#test3" data-toggle="tab">Test3</a>
</div>
<div class="tabs-content">
<div id="test1">...</div>
<div id="test2">...</div>
<div id="test3">...</div>
</div>
</div>

 

علامة تبويب مع لون علامات التبويب النشطة ولون الخلفية

هذا هو بعض محتوى العنصر النائب للمحتوى المرتبط بعلامة التبويب Test1. علامات التبويب هذه نشطة الآن وتعرض علامات تبويب ألوان الخلفية النشطة.
هذا هو بعض محتوى العنصر النائب للمحتوى المرتبط بعلامة التبويب Test2. علامات التبويب هذه نشطة الآن وتعرض علامات تبويب ألوان الخلفية النشطة.
هذا هو بعض محتوى العنصر النائب للمحتوى المرتبط بعلامة التبويب Test3. علامات التبويب هذه نشطة الآن وتعرض علامات تبويب ألوان الخلفية النشطة.

 

<div class="tabs colored-2">
<div class="tabs-nav">
<a class="tabs-link" data-target="#test1" data-toggle="tab">Test1</a>
<a class="tabs-link" data-target="#test2" data-toggle="tab">Test2</a>
<a class="tabs-link" data-target="#test3" data-toggle="tab">Test3</a>
</div>
<div class="tabs-content">
<div id="test1">...</div>
<div id="test2">...</div>
<div id="test3">...</div>
</div>
</div>

 

صرخ

قم بتوفير رسائل ملاحظات سياقية لإجراءات المستخدم النموذجية مع حفنة من الرسائل المتاحة والمرنة.

 

هذا هو وسيلة الشرح الافتراضية

وسيلة شرح بسيطة - تحقق من ذلك!

 

<div class="callout">
<p class="callout-title">This is default callout</p>
<p>...</p>
</div>

 

هذه وسيلة شرح متقطعة

وسيلة شرح بسيطة متقطعة - تحقق من ذلك!

 

<div class="callout callout--dashed">
<p class="callout-title">This is dashed callout</p>
<p>...</p>
</div>

 

هذه وسيلة شرح شفافة

وسيلة شرح شفافة بسيطة - تحقق من ذلك!

 

<div class="callout callout--transparent">
<p class="callout-title">This is transparent callout</p>
<p>...</p>
</div>

 

هذه وسيلة شرح معلومات

وسيلة معلومات بسيطة - تحقق من ذلك!

 

<div class="callout callout--info">
<p class="callout-title">This is info callout</p>
<p>...</p>
</div>

 

هذا هو وسيلة شرح النجاح

وسيلة شرح بسيطة للنجاح - تحقق من ذلك!

 

<div class="callout callout--success">
<p class="callout-title">This is success callout</p>
<p>...</p>
</div>

 

هذه وسيلة شرح تحذيرية

وسيلة شرح تحذيرية بسيطة - تحقق من ذلك!

 

<div class="callout callout--warning">
<p class="callout-title">This is warning callout</p>
<p>...</p>
</div>

 

هذه وسيلة شرح تنبيه

وسيلة شرح تنبيه بسيطة - تحقق من ذلك!

 

<div class="callout callout--alert">
<p class="callout-title">This is alert callout</p>
<p>...</p>
</div>

 

الأكورديون

بناء الأكورديون المنهار عموديًا في تركيبة. 

Display Unsafe Content

يجب تمكين عرض المحتوى غير الآمن حتى يظهر هذا التنسيق. انظر الى هذا زينديسك شرط لمزيد من التفاصيل.

 

مثال الأكورديون

هذا هو الأكورديون 1

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

هذا هو الأكورديون 2

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

هذا هو الأكورديون 3

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

 

<div class="accordion">This is accordion 1</div>
<div class="accordion-panel">
<p>...</p>
</div>

<div class="accordion">This is accordion 2</div>
<div class="accordion-panel">
<p>...</p>
</div>

<div class="accordion">This is accordion 3</div>
<div class="accordion-panel">
<p>...</p>
</div>

 

Lightbox الصورة

pexels-askar-abayev-5638748.jpg

bootstrap-social.png

bootstrap-illustration.png

تعليقات

لا توجد تعليقات

المقال مغلق أمام التعليقات.

Style Variant
يعمل بواسطة Zendesk