Latest web development tutorials
×

Bootstrap مسار

Bootstrap مسار Bootstrap مقدمة موجزة Bootstrap البيئة التثبيت

Bootstrap CSS

Bootstrap CSS نظرة عامة Bootstrap نظام الشبكة Bootstrap تنضيد Bootstrap قانون Bootstrap طاولة Bootstrap شكل Bootstrap زر Bootstrap صور Bootstrap الطبقة المساعدة Bootstrap المرافق تستجيب

Bootstrap مكونات التخطيط

Bootstrap رمز الخطوط Bootstrap القائمة المنسدلة Bootstrap زر المجموعة Bootstrap زر القائمة المنسدلة Bootstrap مجموعة مربع الإدخال Bootstrap عناصر الملاحة Bootstrap شريط التنقل Bootstrap فتات الخبز Bootstrap ترحيل Bootstrap ملصق Bootstrap شارة Bootstrap شاشة كبيرة Bootstrap عنوان الصفحة Bootstrap الصور المصغرة Bootstrap تحذير Bootstrap شريط تقدم Bootstrap كائنات الوسائط المتعددة Bootstrap المجموعات Bootstrap لوحة Bootstrap Wells

Bootstrap القطعة

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

Bootstrap آخر

Bootstrap UI محرر Bootstrap V2 مسار Bootstrap HTML الترميز المعايير Bootstrap CSS الترميز المعايير

التمهيد الطبقة المساعدة

ويناقش هذا الفصل بعض التمهيد قد تأتي في فئات المساعد في متناول يدي.

نص

الطبقات المختلفة التالية تظهر ألوان النص مختلفة. إذا كان النص هو وجود صلة لتحريك الماوس فوق النص سيتم خافتة:

فئة وصف أمثلة
.text-صامتة نمط النص "، صامتة النص" الفئة محاولة
.text الابتدائي نمط النص "النص الأساسي" الفئة محاولة
.text-نجاح نمط النص "النص نجاح" الفئة محاولة
.text اينفو نمط النص "النص معلومات" فئة محاولة
.text الإنذار نمط النص "، محذرا من النص" الفئة محاولة
.text-خطر نمط النص "النص خطر فئة" محاولة

خلفية

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

فئة وصف أمثلة
.bg الابتدائي خلية جدول باستخدام فئة "جي-الابتدائية" محاولة
.bg-نجاح خلية جدول باستخدام "BG-نجاح" الفئة محاولة
.bg اينفو خلية جدول باستخدام "BG-المعلومات" الفئة محاولة
.bg الإنذار خلية جدول باستخدام "تحذير حرس الحدود" الفئة محاولة
.bg-خطر خلية جدول باستخدام "BG-خطر" فئة محاولة

آخر

فئة وصف أمثلة
.pull يسار عناصر تطفو إلى اليسار محاولة
.pull اليمين عناصر تطفو إلى اليمين محاولة
.center كتلة تم تعيين عنصر العرض: كتلة، وتركزت محاولة
.clearfix تعويم اضح محاولة
. تظهر يتم عرض عناصر إلزامية محاولة
.hidden اختباء عنصر إلزامي محاولة
.sr فقط بالإضافة إلى قارئ الشاشة، وعنصر مخفي على الأجهزة الأخرى محاولة
.sr فقط-القابل للتركيز بالتزامن مع فئة .sr فقط، تظهر عندما يحصل على عنصر التركيز (مثل: تشغيل لوحة المفاتيح المستخدم) محاولة
.text إخفاء وتضمنت عناصر الصفحة نص استبدال الخلفية محاولة
.close عرض قبالة زر محاولة
.caret عرض القائمة المنسدلة محاولة

مزيد من الأمثلة

انهيار رمز

استخدام انهيار رمز مشترك لإغلاق مربع مشروط ومربع التنبيه. استخدامالطبقة قريبة من الحصول على رمز وثيق.

أمثلة

<P> إغلاق المثال رمز <زر اكتب = "زر" الطبقة = "وثيقة" الأغنية خفية = "صحيح"> ومرات؛ </ زر> </ P>

محاولة »

وكانت النتائج على النحو التالي:

انهيار رمز

الإقحام

استخدام الإقحام إلى هدم وظيفة والاتجاه. استخدام <SPAN> العنصر مع الإقحامالطبقة للحصول على هذه الميزة.

أمثلة

<P> المثال الإقحام <SPAN الطبقة = "الإقحام"> </ SPAN> </ P>

محاولة »

وكانت النتائج على النحو التالي:

الإقحام

العائمة سريع

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

أمثلة

<div الطبقة = "سحب اليسار"> اليسار سريع عائمة </ div> <div الطبقة = "سحب حق"> العائمة بسرعة الحق </ div>

محاولة »

وكانت النتائج على النحو التالي:

العائمة سريع

لمحاذاة مكونات شريط التنقل، واستخدام.navbar اليسرى أو اليمنى .navbarبدلا من ذلك. رؤية شريط التنقل التمهيد .

محتوى تركزت

استخدامالطبقة مركز كتلة لتوسيط العناصر.

أمثلة

<div الطبقة = "الصف"> <div الطبقة = "مركز كتلة" على غرار = "العرض: 200px؛ الخلفية لون: #CCC؛"> هذا هو المثال مركز كتلة </ div> </ div>

محاولة »

وكانت النتائج على النحو التالي:

كتلة المحتوى تركزت

تعويم اضح

لمسح عنصر عائم، استخدم.clearfix الطبقة.

أمثلة

<div الطبقة = "clearfix" النمط = "الخلفية: # D8D8D8؛ الحدود: 1PX الصلبة # 000؛ الحشو: 10px؛"> <div الطبقة = "سحب يسار" النمط = "الخلفية: # 58D3F7؛ "> اليسار سريع عائمة </ div> <div الطبقة = "سحب حق" النمط = "الخلفية: # DA81F5؛ "> العائمة بسرعة الحق </ div> </ div>

محاولة »

وكانت النتائج على النحو التالي:

تعويم اضح

عرض واخفاء المحتوى

يمكنك فرض عنصر لعرض أو إخفاء (بما في ذلك قارئات الشاشة) من خلال استخدامالطبقة. تظهر و.hiddenالقادمة.

أمثلة

<div الطبقة = "الصف" على غرار = "الحشو: 91px 100px 19px 50px؛"> <div الطبقة = "العرض" على غرار = "اليسار هامش: 10px ؛ العرض: 300px؛ الخلفية اللون: #CCC؛"> هذا مثال من العرض من الدرجة </ div> <div الطبقة = "الخفية" على غرار = "العرض: 200px؛ الخلفية لون: #CCC؛"> هذا مثال من الطبقة اخفاء </ div> </ div>

محاولة »

وكانت النتائج على النحو التالي:

عرض واخفاء المحتوى

قارئ الشاشة

يمكنك وضع جميع العناصر على الجهاز باستخدامفئة الخفية .sr فقط، بالإضافة إلى قارئ الشاشة.

أمثلة

<div الطبقة = "الصف" على غرار = "الحشو: 91px 100px 19px 50px؛"> <نموذج الطبقة = "النموذج المضمنة" دور = "شكل"> <div الطبقة = "شكل فريق"> <تسمية الطبقة = "ريال فقط" ل= "البريد الإلكتروني"> عنوان البريد الإلكتروني </ التسمية> <الإدخال اكتب = "البريد الإلكتروني" الطبقة = "تحكم النموذج" نائب = "أدخل البريد الإلكتروني"> </ div> <div الطبقة = "شكل فريق"> <تسمية الطبقة = "ريال فقط" ل= "تمرير"> كلمة المرور </ التسمية> <الإدخال اكتب = "كلمة السر" الطبقة = "تحكم النموذج" نائب = "كلمة المرور"> </ div> </ النموذج> </ div>

محاولة »

وكانت النتائج على النحو التالي:

قارئ الشاشة

وهنا نرى نوعين من البطاقات إدخال التسمية معالطبقة ريال فقط، وبالتالي فإن التسمية إلا للقارئات الشاشة.