هذا كبير جداً

<h1 class="huge huge-spacing">this is huge</h1>

عنوان ضخم

<h1 class="huge">Huge Heading</h1>

عنوان كبير

<h1 class="big "&gtBig Heading</h1>

عنوان H1

عنوان H2

عنوان H3

عنوان H4

عنوان H5

عنوان H6

<span class="small-subtitle">small subtitle</span>

فئات العناوين على العناصر

يمكنك إضافة نمط العنوان لأي عنصر باستخدام الفئات التالية: .h1, .h2, .h3, .h4, .h5, .h6.

تظليل

تظليل بديل

لف النص في <em class="hightlighted-text"> ... </em> لتلوين النص بخط سميك تحت الكلمة. يعمل بشكل أفضل على العناوين الكبيرة. بالإضافة إلى ذلك، يمكنك إضافة الفئة lower لتحريك الخط إلى الأسفل.

<span class="h3"><em class="hightlighted-text">Highlighted</em> Text</span> and <span class="h1"><em class="hightlighted-text lower">Highlighted</em> Text Lower</span>

أنماط تحوم الرابط

نص المحتوى الأكبر

يمكنك جعل نص المحتوى أكبر بإضافة الفئة big-text.

إنها حقيقة مثبتة منذ زمن طويل أن القارئ سوف يشتت انتباهه المحتوى المقروء لصفحة عند النظر إلى تصميمها. الغرض من استخدام Lorem Ipsum هو أنه يحتوي على توزيع طبيعي للأحرف إلى حد ما، على عكس استخدام "المحتوى هنا، المحتوى هنا"، مما يجعله يبدو وكأنه لغة إنجليزية قابلة للقراءة. تستخدم العديد من حزم النشر المكتبي ومحرري صفحات الويب الآن Lorem Ipsum كنص نموذجي افتراضي، وسيكشف البحث عن "lorem ipsum" العديد من مواقع الويب التي لا تزال في مراحلها الأولى. لقد تطورت إصدارات مختلفة على مر السنين، أحيانًا عن طريق الصدفة، وأحيانًا عن قصد (فكاهة محقونة وما شابه ذلك).

محاذاة النص

استخدم الفئات التالية لمحاذاة النص a-center, a-left, a-right

المسافات

يمكنك بسهولة إضافة بعض المسافات الإضافية عن طريق إضافة div بالفئات التالية: spacer-big, spacer-medium, spacer-regular, spacer-small

<div class="spacer-big">&nbsp;</div>

إخفاء على الهاتف المحمول

يمكنك إخفاء العناصر على الهاتف المحمول أو الجهاز اللوحي بإضافة الفئات التالية إلى العنصر: hide-on-tablet, hide-on-mobile

إزالة المسافات من الأعمدة

أضف الفئة no-spacing أو no-gutters إلى الصف لإزالة الحشوة والهامش من الصفوف والأعمدة.

 

تسوق الآن

 

تسوق الآن استكشف

محاذاة عمودية وعرض أقصى

إضافة ox-max-width-500 إلى العنصر سيجعله متمركزًا ويضبط أقصى عرض على 500. يمكنك إضافة فئات ox-max-width- من 500 إلى 1000 بخطوة 100. لمحاذاة المحتوى عموديًا استخدم الفئات التالية: col-align-vertical - على عنصر العمود. block-align-vertical - داخل عنصر العمود.

<div class="row">
    <div class="col-md-6">
		<div class="block-align-vertical ox-max-width-500">
		...
		</div>
	</div>
</div>

أو

<div class="row">
    <div class="col-md-6 col-align-vertical">
		<div class="ox-max-width-500">
		...
		</div>
	</div>
</div>

عرض لفترة محدودة

تخفيضات تصل إلى 50%
على المجموعة الجديدة

هناك العديد من المتغيرات المتاحة لنصوص Lorem Ipsum، ولكن الأغلبية تعرضت للتعديل بشكل ما، عن طريق الفكاهة المحقونة، أو الكلمات العشوائية التي لا تبدو قابلة للتصديق حتى قليلاً.

تسوق الآن

الجداول

تمت إضافة مُغلّف للجدول بالفئات التالية لتنسيقه. table-bordered - إضافة حدود سفلية للصفوف. table-header-border - إضافة حد مزدوج أسفل عناصر رأس الجدول (th). table-header-bg - إضافة خلفية سوداء لعناصر رأس الجدول (th). overflow-y - جعل الجدول قابلاً للتمرير إذا كان أوسع من الصفحة. تحتاج هذا للقرارات الصغيرة.

<div class="table-bordered table-header-border overflow-y"> ...your table here... </div>

تنظيف الهوامش والحشوات

no-margin - إزالة الهامش من العنصر. no-padding - إزالة الحشوة من العنصر. clear-p - إزالة الهامش من جميع عناصر الفقرات.

بالإضافة إلى ذلك، يمكنك إضافة أو إزالة الهوامش من العناصر بناءً على دقة الشاشة:

ox-margin-lg, ox-margin-lg-no, ox-margin-md, ox-margin-md-no, ox-margin-sm, ox-margin-sm-no, ox-margin, ox-margin-no

الالتصاق بتذييل الصفحة

استخدم هذه الفئة لإزالة مسافة أسفل الصفحة page-bottom-padding