عناصر

تم تضمين العشرات من المكونات القابلة لإعادة الاستخدام في Bootstrap لتوفير التنقل والتنبيهات والإضافات وغير ذلك الكثير.

مجموعات الأزرار

استخدم مجموعات الأزرار لضم أزرار متعددة معًا كمكون مركب واحد. قم ببنائها بسلسلة من العناصر <a>أو <button>العناصر.

أفضل الممارسات

نوصي بالإرشادات التالية لاستخدام مجموعات الأزرار وأشرطة الأدوات:

  • استخدم دائمًا نفس العنصر في مجموعة أزرار واحدة ، <a>أو <button>.
  • لا تخلط الأزرار ذات الألوان المختلفة في نفس مجموعة الأزرار.
  • استخدم الرموز بالإضافة إلى النص أو بدلاً منه ، ولكن تأكد من تضمين النص البديل ونص العنوان عند الاقتضاء.

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

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

إليك كيف يبحث HTML عن مجموعة أزرار قياسية تم إنشاؤها باستخدام أزرار علامات الارتساء:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  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>

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

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

احصل على جافا سكريبت »

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

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

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

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

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

مثال على الترميز

على غرار مجموعة الأزرار ، يستخدم الترميز الخاص بنا ترميزًا منتظمًا للأزرار ، ولكن مع عدد قليل من الإضافات لتحسين النمط ودعم البرنامج المساعد jQuery المنسدلة في Bootstrap.

  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.

يتطلب جافا سكريبت

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

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


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

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

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

الأحجام

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

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "المنسدلة-menu pull-right" >
  4. <! - روابط القائمة المنسدلة ->
  5. </ul>
  6. </div>

مثال على الترميز

قمنا بتوسيع القوائم المنسدلة للأزرار العادية لتوفير إجراء زر ثانٍ يعمل كمشغل قائمة منسدلة منفصل.

  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>

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

يمكن أيضًا تبديل القوائم المنسدلة من الأسفل إلى الأعلى عن طريق إضافة فئة واحدة إلى الأصل المباشر لـ .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 ، وهو رائع للتطبيقات ونتائج البحث. من الصعب تفويت الكتلة الكبيرة ، وقابلة للتطوير بسهولة ، وتوفر مساحات كبيرة للنقر.

روابط الصفحات ذات الحالة

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

محاذاة مرنة

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

أمثلة

مكون ترقيم الصفحات الافتراضي مرن ويعمل في عدد من الاختلافات.

وضع علامة على

ملفوفة في <div>ترقيم الصفحات هو مجرد ملف <ul>.

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

بيجر للروابط السابقة والتالية السريعة

حول جهاز النداء

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

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

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

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

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

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#"> السابق </a> _
  4. </li>
  5. <li>
  6. <a href = "#"> التالي </a> _
  7. </li>
  8. </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>
ملصقات وضع علامة على
تقصير <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>

حول

الشارات هي مكونات صغيرة وبسيطة لعرض مؤشر أو عدد من نوع ما. يتم العثور عليها بشكل شائع في عملاء البريد الإلكتروني مثل Mail.app أو على تطبيقات الجوال لإشعارات الدفع.

الفصول المتاحة

اسم مثال وضع علامة على
تقصير 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>

وحدة البطل

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

وضع علامة على

لف المحتوى الخاص بك في divمثل هذا:

  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>

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

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

يتعلم أكثر

رأس الصفحة

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

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

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

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

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

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

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

    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.

    عمل عمل

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

    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 = "span3" >
  3. <a href = "#" class = "thumbnail"> _
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul class = "مصغرات" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> تسمية الصورة المصغرة </ h5>
  6. <p> التسمية التوضيحية للصورة المصغرة هنا ... </ p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

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

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

الافتراضات خفيفة الوزن

الفئة الأساسية المعاد كتابتها

باستخدام Bootstrap 2 ، قمنا بتبسيط الفئة الأساسية: .alertبدلاً من .alert-message. لقد قمنا أيضًا بتخفيض الحد الأدنى من الترميز المطلوب — لا <p>مطلوب افتراضيًا ، فقط الخارجي <div>.

رسالة تنبيه واحدة

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


يذهب بشكل رائع مع جافا سكريبت

يأتي Bootstrap مزودًا بملحق jQuery رائع يدعم رسائل التنبيه ، مما يجعل رفضها سريعًا وسهلاً.

الحصول على المكون الإضافي »

مثال على التنبيهات

لف رسالتك وأيقونة إغلاق اختيارية في div مع فصل بسيط.

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

انتباه! تتطلب أجهزة iOS href="#"رفض التنبيهات. تأكد من تضمينه وسمة البيانات لرموز إغلاق المرساة. بدلاً من ذلك ، يمكنك استخدام <button>عنصر بسمة البيانات ، وهو ما اخترناه لمستنداتنا. عند الاستخدام <button>، يجب عليك تضمين type="button"وإلا لن يتم إرسال النماذج الخاصة بك.

قم بتوسيع رسالة التنبيه القياسية بسهولة بفئتين اختياريتين: .alert-blockلمزيد من عناصر التحكم في الحشو والنص ولعنوان .alert-headingمطابق.

تحذير!

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

  1. <div class = "alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#"> × </a> _
  3. <h4 class = "alert -head" > تحذير! </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"
  3. style = " width : 60 ٪؛ " > </div>
  4. </div>

مخطط

يستخدم تدرجًا لإنشاء تأثير مخطط (بدون IE).

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

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

يأخذ المثال المخطط ويحركه (لا IE).

  1. <div class = "شريط التقدم
  2. نشط " >
  3. <div class = "bar"
  4. style = " width : 40 ٪؛ " > </div>
  5. </div>

خيارات ودعم المتصفح

ألوان إضافية

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

أشرطة مخططة

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

سلوك

تستخدم أشرطة التقدم انتقالات CSS3 ، لذلك إذا قمت بضبط العرض ديناميكيًا عبر جافا سكريبت ، فسيتم تغيير حجمه بسلاسة.

إذا كنت تستخدم .activeالفصل ، .progress-stripedفستقوم أشرطة التقدم بتحريك الخطوط من اليسار إلى اليمين.

دعم المتصفح

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

لا يدعم Opera و IE الرسوم المتحركة في الوقت الحالي.

آبار

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

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

رمز الإغلاق

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

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

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

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