عناصر

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

انتباه! هذه المستندات مخصصة للإصدار v2.3.2 ، والتي لم تعد مدعومة رسميًا. تحقق من أحدث إصدار من Bootstrap!

أمثلة

خياران أساسيان ، إلى جانب شكلين أكثر تحديدًا.

مجموعة أزرار واحدة

لف سلسلة من الأزرار .btnبداخلها .btn-group.

  1. <div class = "btn-group" >
  2. <button class = "btn" > يسار </ زر>
  3. <button class = "btn" > الأوسط </ زر>
  4. <button class = "btn" > يمين </ زر>
  5. </div>

مجموعات أزرار متعددة

اجمع مجموعات من <div class="btn-group">في a <div class="btn-toolbar">للحصول على مكونات أكثر تعقيدًا.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

مجموعات الأزرار العمودية

اجعل مجموعة من الأزرار تظهر مكدسة رأسيًا وليس أفقيًا.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

مربع الاختيار والنكهات الراديو

يمكن أن تعمل مجموعات الأزرار أيضًا كأجهزة راديو ، حيث قد يكون زر واحد فقط نشطًا ، أو مربعات اختيار ، حيث يمكن تنشيط أي عدد من الأزرار. عرض مستندات JavaScript لذلك.

القوائم المنسدلة في مجموعات الأزرار

انتباه!.btn-groupيجب أن تكون الأزرار ذات القوائم المنسدلة ملفوفة بشكل فردي داخل الأزرار الخاصة بها .btn-toolbarللعرض الصحيح.

نظرة عامة وأمثلة

استخدم أي زر لتشغيل قائمة منسدلة عن طريق وضعها داخل علامة .btn-groupالقائمة المناسبة وتوفيرها.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">
  3. عمل
  4. <span class = "caret" > </span>
  5. </a>
  6. <ul class = "القائمة المنسدلة" >
  7. <! - روابط القائمة المنسدلة ->
  8. </ul>
  9. </div>

يعمل مع جميع أحجام الأزرار

تعمل القوائم المنسدلة للأزرار بأي حجم: .btn-largeأو .btn-smallأو .btn-mini.

يتطلب JavaScript

تتطلب القوائم المنسدلة للأزرار تشغيل المكون الإضافي المنسدل Bootstrap .

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


القوائم المنسدلة لزر الانقسام

بناءً على أنماط مجموعة الأزرار والترميز ، يمكننا بسهولة إنشاء زر تقسيم. تتميز أزرار الانقسام بإجراء قياسي على اليسار وقائمة منسدلة للتبديل على اليمين مع روابط سياقية.

  1. <div class = "btn-group" >
  2. <button class = "btn" > إجراء </ زر>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </button>
  6. <ul class = "القائمة المنسدلة" >
  7. <! - روابط القائمة المنسدلة ->
  8. </ul>
  9. </div>

الأحجام

استخدم فئات الأزرار الإضافية .btn-mini، .btn-smallأو .btn-largeللتحجيم.

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > إجراء </ زر>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </button>
  6. <ul class = "القائمة المنسدلة" >
  7. <! - روابط القائمة المنسدلة ->
  8. </ul>
  9. </div>

القوائم المنسدلة

يمكن أيضًا تبديل القوائم المنسدلة من الأسفل إلى الأعلى عن طريق إضافة فئة واحدة إلى الأصل المباشر لـ .dropdown-menu. سيقلب اتجاه .caretالقائمة ويعيد وضع القائمة نفسها للانتقال من أسفل إلى أعلى بدلاً من أعلى لأسفل.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > إسقاط </ زر>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </button>
  6. <ul class = "القائمة المنسدلة" >
  7. <! - روابط القائمة المنسدلة ->
  8. </ul>
  9. </div>

ترقيم الصفحات القياسي

ترقيم صفحات بسيط مستوحى من Rdio ، وهو رائع للتطبيقات ونتائج البحث. من الصعب تفويت الكتلة الكبيرة ، وقابلة للتطوير بسهولة ، وتوفر مساحات كبيرة للنقر.

  1. <div class = "pagination" >
  2. <ul>
  3. <li> <a href = "#"> السابق </a> < /li>
  4. <li> <a href = "#"> 1 </a> < /li>
  5. <li> <a href = "#"> 2 </a> < /li>
  6. <li> <a href = "#"> 3 </a> < /li>
  7. <li> <a href = "#"> 4 </a> < /li>
  8. <li> <a href = "#"> 5 </a> < /li>
  9. <li> <a href = "#"> التالي </a> < /li>
  10. </ul>
  11. </div>

خيارات

الدول المعوقة والنشطة

الروابط قابلة للتخصيص لظروف مختلفة. استخدمه .disabledمع الروابط غير القابلة للنقر وللإشارة .activeإلى الصفحة الحالية.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "ملغاة" > <a href = "#"> & laquo؛ </a> </li>
  4. <li class = "active" > <a href = "#"> 1 </a> < /li>
  5. ...
  6. </ul>
  7. </div>

يمكنك اختياريًا تبديل نقاط الارتساء النشطة أو المعطلة بالمسافات لإزالة وظيفة النقر مع الاحتفاظ بالأنماط المقصودة.

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "ملغاة" > <span> & laquo؛ </span> </li>
  4. <li class = "active" > <span> 1 </span> </li>
  5. ...
  6. </ul>
  7. </div>

الأحجام

يتوهم ترقيم الصفحات أكبر أو أصغر؟ أضف .pagination-large، .pagination-smallأو .pagination-miniلأحجام إضافية.

  1. <div class = "pagination pagination-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "pagination" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

محاذاة

أضف إحدى الفئتين الاختيارية لتغيير محاذاة روابط ترقيم الصفحات: .pagination-centeredو .pagination-right.

  1. <div class = "pagination-centered" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  2. ...
  3. </div>

بيجر

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

المثال الافتراضي

بشكل افتراضي ، يقوم جهاز الاستدعاء بتوسيط الروابط.

  1. <ul class = "pager" >
  2. <li> <a href = "#"> السابق </a> < /li>
  3. <li> <a href = "#"> التالي </a> < /li>
  4. </ul>

الروابط المحاذاة

بدلاً من ذلك ، يمكنك محاذاة كل رابط بالجوانب:

  1. <ul class = "pager" >
  2. <li class = "previous" >
  3. <a href = "#"> & larr؛ أقدم </a>
  4. </li>
  5. <li class = "next" >
  6. <a href = "#"> أحدث & rarr؛ </a>
  7. </li>
  8. </ul>

حالة تعطيل اختيارية

تستخدم روابط النداء أيضًا .disabledفئة المرافق العامة من ترقيم الصفحات.

  1. <ul class = "pager" >
  2. <li class = "معطل سابقًا" >
  3. <a href = "#"> & larr؛ أقدم </a>
  4. </li>
  5. ...
  6. </ul>

ملصقات

ملصقات وضع علامة على
تقصير <span class="label">Default</span>
النجاح <span class="label label-success">Success</span>
تحذير <span class="label label-warning">Warning</span>
مهم <span class="label label-important">Important</span>
معلومات <span class="label label-info">Info</span>
معكوس <span class="label label-inverse">Inverse</span>

شارات

اسم مثال وضع علامة على
تقصير 1 <span class="badge">1</span>
النجاح 2 <span class="badge badge-success">2</span>
تحذير 4 <span class="badge badge-warning">4</span>
مهم 6 <span class="badge badge-important">6</span>
معلومات 8 <span class="badge badge-info">8</span>
معكوس 10 <span class="badge badge-inverse">10</span>

قابل للطي بسهولة

لسهولة التنفيذ ، ستنهار العلامات والشارات ببساطة (عبر :emptyمحدد CSS) في حالة عدم وجود محتوى بداخلها.

وحدة البطل

مكون خفيف الوزن ومرن لعرض المحتوى الرئيسي على موقعك. إنه يعمل بشكل جيد على مواقع التسويق والمحتوى الثقيل.

مرحبا بالعالم!

هذه وحدة بطل بسيطة ، مكون بسيط بأسلوب jumbotron لجذب انتباه إضافي إلى المحتوى أو المعلومات المميزة.

يتعلم أكثر

  1. <div class = "hero-unit" >
  2. <h1> العنوان </ h1>
  3. <p> سطر الوصف </ p>
  4. <p>
  5. <a class = "btn btn-primary btn-large">
  6. يتعلم أكثر
  7. </a>
  8. </p>
  9. </div>

رأس الصفحة

غلاف بسيط لـ a h1لتقسيم أقسام المحتوى على الصفحة بشكل مناسب وتقسيمها. يمكنه استخدام العنصر h1الافتراضي الخاص smallبـ "، بالإضافة إلى معظم المكونات الأخرى (مع أنماط إضافية).

  1. <div class = "page-header" >
  2. <h1> مثال على رأس الصفحة <small> نص فرعي للرأس </ small> </h1>
  3. </div>

الصور المصغرة الافتراضية

بشكل افتراضي ، تم تصميم الصور المصغرة لـ Bootstrap لعرض الصور المرتبطة بالحد الأدنى من العلامات المطلوبة.

عالية للتخصيص

مع القليل من الترميز الإضافي ، من الممكن إضافة أي نوع من محتوى HTML مثل العناوين أو الفقرات أو الأزرار إلى الصور المصغرة.

  • 300 × 200

    تسمية الصورة المصغرة

    Cras justo odio، dapibus ac facilisis in، egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehiclesicula ut id elit.

    عمل عمل

  • 300 × 200

    تسمية الصورة المصغرة

    Cras justo odio، dapibus ac facilisis in، egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehiclesicula ut id elit.

    عمل عمل

  • 300 × 200

    تسمية الصورة المصغرة

    Cras justo odio، dapibus ac facilisis in، egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies Vehiclesicula ut id elit.

    عمل عمل

لماذا استخدام الصور المصغرة

تعد الصور المصغرة (سابقًا .media-gridحتى الإصدار 1.4) رائعة لشبكات الصور أو مقاطع الفيديو ونتائج البحث عن الصور ومنتجات البيع بالتجزئة والمحافظ وغير ذلك الكثير. يمكن أن تكون روابط أو محتوى ثابت.

ترميز بسيط ومرن

يعد ترميز الصور المصغرة أمرًا بسيطًا — كل ما هو مطلوب ulمع أي عدد من العناصر. liإنه أيضًا مرن للغاية ، مما يسمح بأي نوع من المحتوى مع المزيد من الترميز قليلاً لالتفاف محتوياتك.

يستخدم أحجام أعمدة الشبكة

أخيرًا ، يستخدم مكون الصور المصغرة فئات نظام الشبكة الحالية - مثل .span2أو .span3- للتحكم في أبعاد الصورة المصغرة.

وضع علامة على

كما ذكرنا سابقًا ، فإن الترميز المطلوب للصور المصغرة خفيف ومباشر. فيما يلي نظرة على الإعداد الافتراضي للصور المرتبطة :

  1. <ul class = "مصغرات" >
  2. <li class = "span4" >
  3. <a href = "#" class = "thumbnail"> _
  4. <img data-src = "holder.js / 300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

بالنسبة لمحتوى HTML المخصص في الصور المصغرة ، يتغير الترميز قليلاً. للسماح بمحتوى مستوى الحظر في أي مكان ، نستبدل <a>بـ <div>مثل:

  1. <ul class = "مصغرات" >
  2. <li class = "span4" >
  3. <div class = "thumbnail" >
  4. <img data-src = "holder.js / 300x200" alt = "" >
  5. <h3> تسمية الصورة المصغرة </ h3>
  6. <p> التسمية التوضيحية للصورة المصغرة ... </ p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

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

استكشف جميع خياراتك مع فئات الشبكة المختلفة المتاحة لك. يمكنك أيضًا مزج ومطابقة أحجام مختلفة.

التنبيه الافتراضي

قم بلف أي نص وزر رفض اختياري .alertلرسالة تحذير أساسية.

تحذير! من الأفضل أن تتحقق من نفسك ، فأنت لا تبدو جيدًا جدًا.
  1. <div class = "alert" >
  2. <button type = "button" class = "close" data-رفض = "alert" > مرات؛ </button>
  3. <strong> تحذير! </strong> أفضل التحقق من نفسك ، أنت لا تبدو جيدة للغاية.
  4. </div>

أزرار الرفض

تتطلب متصفحات Mobile Safari و Mobile Opera ، بالإضافة إلى data-dismiss="alert"السمة ، href="#"رفض التنبيهات عند استخدام <a>علامة.

  1. <a href = "#" class = "close" data-dismiss = "alert"> & times؛ </a>

بدلاً من ذلك ، يمكنك استخدام <button>عنصر بسمة البيانات ، وهو ما اخترناه لمستنداتنا. عند الاستخدام <button>، يجب عليك تضمين type="button"وإلا لن يتم إرسال النماذج الخاصة بك.

  1. <button type = "button" class = "close" data-رفض = "alert" > مرات؛ </button>

ارفض التنبيهات عبر JavaScript

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


خيارات

للرسائل الأطول ، قم بزيادة المساحة المتروكة في أعلى وأسفل غلاف التنبيه عن طريق الإضافة .alert-block.

تحذير!

من الأفضل أن تتحقق من نفسك ، أنت لا تبدو جيدًا جدًا. Nulla vitae elit libero ، augue pharetra. عرض سلعة كبيرة ، في scelerisque nisl consectetur et.

  1. <div class = "alert-block" >
  2. <button type = "button" class = "close" data-رفض = "alert" > مرات؛ </button>
  3. <h4> تحذير! </h4>
  4. أفضل التحقق من نفسك ، أنت لست ...
  5. </div>

البدائل السياقية

أضف فئات اختيارية لتغيير دلالة التنبيه.

خطأ أو خطر

أوه المفاجئة! قم بتغيير بعض الأشياء وحاول الإرسال مرة أخرى.
  1. <div class = "alert-error" >
  2. ...
  3. </div>

النجاح

أحسنت! لقد نجحت في قراءة رسالة التنبيه المهمة هذه.
  1. <div class = "alert-alert-success" >
  2. ...
  3. </div>

معلومة

انتباه! يحتاج هذا التنبيه إلى انتباهك ، لكنه ليس بالغ الأهمية.
  1. <div class = "alert-info" >
  2. ...
  3. </div>

أمثلة وترميز

أساسي

شريط التقدم الافتراضي مع تدرج عمودي.

  1. <div class = "progress" >
  2. <div class = "bar" style = " width : 60 ٪؛ " > </div>
  3. </div>

مخطط

يستخدم التدرج اللوني لإنشاء تأثير مخطط. غير متوفر في IE7-8.

  1. <div class = "progress-striped" >
  2. <div class = "bar" style = " width : 20 ٪؛ " > </div>
  3. </div>

مفعم بالحيوية

أضف .activeلتحريك .progress-stripedالمشارب من اليمين إلى اليسار. غير متوفر في جميع إصدارات IE.

  1. <div class = "progress-striped active" >
  2. <div class = "bar" style = " width : 40 ٪؛ " > </div>
  3. </div>

مرصوصة

ضع عدة أشرطة في نفس .progressلتكديسها.

  1. <div class = "progress" >
  2. <div class = "bar bar-success" style = " width : 35 ٪؛ " > </div>
  3. <div class = "bar bar-warning" style = " width : 20 ٪؛ " > </div>
  4. <div class = "bar bar-danger" style = " width : 10 ٪؛ " > </div>
  5. </div>

خيارات

ألوان إضافية

تستخدم أشرطة التقدم بعضًا من نفس فئات التنبيه والأزرار للأنماط المتناسقة.

  1. <div class = "progress progress-info" >
  2. <div class = "bar" style = " width : 20 ٪ " > </div>
  3. </div>
  4. <div class = "progress progress-success" >
  5. <div class = "bar" style = " width : 40 ٪ " > </div>
  6. </div>
  7. <div class = "progress progress-warning" >
  8. <div class = "bar" style = " width : 60 ٪ " > </div>
  9. </div>
  10. <div class = "progress progress-danger" >
  11. <div class = "bar" style = " width : 80 ٪ " > </div>
  12. </div>

أشرطة مخططة

على غرار الألوان الصلبة ، لدينا أشرطة تقدم مخططة متنوعة.

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " width : 20 ٪ " > </div>
  3. </div>
  4. <div class = "progress progress-success progress-striped" >
  5. <div class = "bar" style = " width : 40 ٪ " > </div>
  6. </div>
  7. <div class = "التقدم - التحذير - شريط التقدم" >
  8. <div class = "bar" style = " width : 60 ٪ " > </div>
  9. </div>
  10. <div class = "progress progress-danger progress-striped" >
  11. <div class = "bar" style = " width : 80 ٪ " > </div>
  12. </div>

دعم المتصفح

تستخدم أشرطة التقدم التدرجات ، والانتقالات ، والرسوم المتحركة CSS3 لتحقيق كل تأثيراتها. هذه الميزات غير مدعومة في IE7-9 أو الإصدارات الأقدم من Firefox.

الإصدارات الأقدم من Internet Explorer 10 و Opera 12 لا تدعم الرسوم المتحركة.

أنماط كائن مجردة لإنشاء أنواع مختلفة من المكونات (مثل تعليقات المدونة والتغريدات وما إلى ذلك) التي تتميز بمحاذاة الصورة إلى اليمين أو اليسار جنبًا إلى جنب مع المحتوى النصي.

المثال الافتراضي

تسمح الوسائط الافتراضية بتعويم كائن وسائط (صور ، فيديو ، صوت) إلى يسار أو يمين كتلة المحتوى.

64 × 64

عنوان الوسائط

Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque ante sollicitudin COMMANDO. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. دونيك لاسينيا كونيج فيليس في فوسيبوس.
64 × 64

عنوان الوسائط

Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque ante sollicitudin COMMANDO. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. دونيك لاسينيا كونيج فيليس في فوسيبوس.
64 × 64

عنوان الوسائط

Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque ante sollicitudin COMMANDO. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. دونيك لاسينيا كونيج فيليس في فوسيبوس.
  1. <div class = "media" >
  2. <a class = "pull-left" href = "#"> _
  3. <img class = "media-object" data-src = "holder.js / 64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media -eader" > عنوان الوسائط </ h4>
  7. ...
  8.  
  9. <! - كائن وسائط متداخل ->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

قائمة الوسائط

مع القليل من الترميز الإضافي ، يمكنك استخدام الوسائط داخل القائمة (مفيدة لسلاسل التعليقات أو قوائم المقالات).

  • 64 × 64

    عنوان الوسائط

    Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque ante sollicitudin COMMANDO. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis.

    64 × 64

    عنوان الوسائط المتداخلة

    Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque ante sollicitudin COMMANDO. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis.
    64 × 64

    عنوان الوسائط المتداخلة

    Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque ante sollicitudin COMMANDO. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis.
    64 × 64

    عنوان الوسائط المتداخلة

    Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque ante sollicitudin COMMANDO. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis.
  • 64 × 64

    عنوان الوسائط

    Cras sit amet nibh libero ، in gravida nulla. Nulla vel metus scelerisque ante sollicitudin COMMANDO. Cras purus Odio ، الدهليز في vulputate عند ، tempus viverra turpis.
  1. <ul class = "media-list" >
  2. <li class = "media" >
  3. <a class = "pull-left" href = "#"> _
  4. <img class = "media-object" data-src = "holder.js / 64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media -eader" > عنوان الوسائط </ h4>
  8. ...
  9.  
  10. <! - كائن وسائط متداخل ->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

آبار

استخدم أيضًا تأثيرًا بسيطًا على عنصر ما لإعطائه تأثيرًا داخليًا.

انظر ، أنا في بئر!
  1. <div class = "well" >
  2. ...
  3. </div>

فصول اختيارية

التحكم في الحشو والزوايا الدائرية مع فئتين من فئات التعديل الاختيارية.

انظر ، أنا في بئر!
  1. <div class = "well-large" >
  2. ...
  3. </div>
انظر ، أنا في بئر!
  1. <div class = "well-small" >
  2. ...
  3. </div>

رمز الإغلاق

استخدم رمز الإغلاق العام لرفض محتوى مثل الوسائط والتنبيهات.

  1. <button class = "close" > مرات؛ </button>

تتطلب أجهزة iOS href="#"إمكانية النقر فوق الأحداث إذا كنت تفضل استخدام مرساة.

  1. <a class = "close" href = "#"> & times؛ </a>

فصول المساعد

فصول بسيطة ومركزة لعرض صغير أو تعديلات على السلوك.

.pull-left

تعويم عنصر لليسار

  1. class = "pull-left"
  1. . سحب - اليسار {
  2. تعويم : يسار ؛
  3. }

.pull-right

تعويم عنصر لليمين

  1. class = "pull-right"
  1. . اسحب - لليمين {
  2. تعويم : صحيح ؛
  3. }

.muted

تغيير لون العنصر إلى#999

  1. فئة = "كتم الصوت"
  1. . صامت {
  2. اللون : # 999 ؛
  3. }

.clearfix

امسح floatأي عنصر

  1. فئة = "clearfix"
  1. . clearfix {
  2. * تكبير : 1 ؛
  3. &: قبل ،
  4. &: بعد {
  5. عرض : طاولة ؛
  6. المحتوى : "" ؛
  7. }
  8. &: بعد {
  9. واضح : كلاهما ؛
  10. }
  11. }