ملخص

فردي أو مجمعة

يمكن تضمين الإضافات بشكل فردي (باستخدام *.jsملفات Bootstrap الفردية) ، أو كلها مرة واحدة (باستخدام bootstrap.jsأو مصغرة bootstrap.min.js).

باستخدام JavaScript المترجمة

كلاهما bootstrap.jsويحتوي bootstrap.min.jsعلى جميع المكونات الإضافية في ملف واحد. تشمل واحدة فقط.

تبعيات البرنامج المساعد

تعتمد بعض المكونات الإضافية ومكونات CSS على المكونات الإضافية الأخرى. إذا قمت بتضمين المكونات الإضافية بشكل فردي ، فتأكد من التحقق من هذه التبعيات في المستندات. لاحظ أيضًا أن جميع الملحقات تعتمد على jQuery (وهذا يعني أنه يجب تضمين jQuery قبل ملفات البرنامج المساعد). استشرناbower.json لمعرفة إصدارات jQuery المدعومة.

سمات البيانات

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

ومع ذلك ، قد يكون من المرغوب في بعض المواقف إيقاف تشغيل هذه الوظيفة. لذلك ، نوفر أيضًا القدرة على تعطيل واجهة برمجة تطبيقات سمة البيانات عن طريق إلغاء ربط جميع الأحداث الموجودة على مساحة اسم المستند data-api. هذا يشبه هذا:

$(document).off('.data-api')

بدلاً من ذلك ، لاستهداف مكون إضافي معين ، ما عليك سوى تضمين اسم المكون الإضافي كمساحة اسم مع مساحة اسم data-api مثل هذا:

$(document).off('.alert.data-api')

مكون إضافي واحد فقط لكل عنصر عبر سمات البيانات

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

API برمجي

نعتقد أيضًا أنه يجب أن تكون قادرًا على استخدام جميع ملحقات Bootstrap فقط من خلال JavaScript API. جميع واجهات برمجة التطبيقات العامة هي طرق مفردة وقابلة للتسلسل ، وتعيد المجموعة التي تم التصرف بناءً عليها.

$('.btn.danger').button('toggle').addClass('fat')

يجب أن تقبل جميع التوابع كائن خيارات اختياري ، أو سلسلة تستهدف طريقة معينة ، أو لا شيء (الذي يبدأ مكونًا إضافيًا بسلوك افتراضي):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

يعرض كل مكون إضافي أيضًا المُنشئ الخام الخاص به على Constructorخاصية $.fn.popover.Constructor:. إذا كنت ترغب في الحصول على مثيل مكون إضافي معين ، فاسترجعه مباشرةً من عنصر $('[rel="popover"]').data('popover'):.

الإعدادات الافتراضية

يمكنك تغيير الإعدادات الافتراضية للمكون الإضافي عن طريق تعديل Constructor.DEFAULTSكائن المكون الإضافي:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

لا تعارض

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

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

الأحداث

يوفر Bootstrap أحداثًا مخصصة لمعظم الإجراءات الفريدة للمكونات الإضافية. بشكل عام ، تأتي هذه في صيغة المصدر والماضي - حيث يتم تشغيل المصدر (على سبيل المثال show) في بداية الحدث ، ويتم تشغيل شكل الفاعل الماضي ( shownعلى سبيل المثال) عند الانتهاء من إجراء ما.

اعتبارًا من 3.0.0 ، تكون جميع أحداث Bootstrap ذات مساحة اسم.

توفر جميع أحداث المصدر preventDefaultوظائف. يوفر هذا القدرة على إيقاف تنفيذ الإجراء قبل أن يبدأ.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

أرقام الإصدارات

يمكن الوصول إلى إصدار كل من ملحقات jQuery في Bootstrap عبر VERSIONخاصية مُنشئ المكون الإضافي. على سبيل المثال ، بالنسبة لمكوِّن تلميح الأدوات الإضافي:

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

لا توجد إجراءات احتياطية خاصة عند تعطيل JavaScript

لا تتراجع مكونات Bootstrap الإضافية برشاقة خاصة عند تعطيل JavaScript. إذا كنت مهتمًا بتجربة المستخدم في هذه الحالة ، <noscript>فاستخدمها لشرح الموقف (وكيفية إعادة تمكين JavaScript) للمستخدمين ، و / أو إضافة احتياطياتك المخصصة.

مكتبات الطرف الثالث

لا يدعم Bootstrap رسميًا مكتبات JavaScript التابعة لجهات خارجية مثل Prototype أو jQuery UI. على الرغم .noConflictمن الأحداث التي تقع ضمن نطاق الأسماء ، فقد تكون هناك مشكلات في التوافق تحتاج إلى إصلاحها بنفسك.

انتقالات Transitions.js

حول التحولات

للحصول على تأثيرات انتقال بسيطة ، قم بتضمينها transition.jsمرة واحدة إلى جانب ملفات JS الأخرى. إذا كنت تستخدم المترجم (أو المصغر) bootstrap.js، فلا داعي لتضمين هذا - فهو موجود بالفعل.

ماذا يوجد في الداخل

Transition.js هو مساعد أساسي transitionEndللأحداث بالإضافة إلى محاكي انتقال CSS. يتم استخدامه بواسطة المكونات الإضافية الأخرى للتحقق من دعم انتقال CSS وللتقاط الانتقالات المعلقة.

تعطيل الانتقالات

يمكن تعطيل الانتقالات بشكل عام باستخدام مقتطف JavaScript التالي ، والذي يجب أن يأتي بعد transition.js( bootstrap.jsأو bootstrap.min.js، حسب الحالة) التحميل:

$.support.transition = false

مشروط modal.js

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

الوسائط المتعددة المفتوحة غير مدعومة

تأكد من عدم فتح مشروط بينما لا يزال الآخر مرئيًا. يتطلب عرض أكثر من نموذج في وقت واحد رمزًا مخصصًا.

وضع ترميز مشروط

حاول دائمًا وضع كود HTML الخاص بالمشروط في موضع المستوى الأعلى في المستند الخاص بك لتجنب المكونات الأخرى التي تؤثر على مظهر و / أو وظائف الوسائط.

محاذير الجهاز المحمول

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

نظرًا للكيفية التي تحدد بها HTML5 دلالاتها ، فإن autofocusسمة HTML ليس لها أي تأثير في أشكال Bootstrap. لتحقيق نفس التأثير ، استخدم بعض JavaScript المخصص:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

أمثلة

مثال ثابت

نموذج تم تقديمه مع رأس ونص ومجموعة من الإجراءات في التذييل.

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

عرض حي

تبديل مشروط عبر JavaScript بالنقر فوق الزر أدناه. سوف ينزلق لأسفل ويتلاشى للداخل من أعلى الصفحة.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

اجعل الوسائط متاحة

تأكد من إضافة role="dialog"والإشارة aria-labelledby="..."إلى العنوان الشرطي ، إلى وإلى .modalنفسه .role="document".modal-dialog

بالإضافة إلى ذلك ، يمكنك تقديم وصف لمربع الحوار الخاص بك aria-describedbyباستخدام .modal.

تضمين أشرطة فيديو يوتيوب

يتطلب تضمين مقاطع فيديو YouTube في النماذج وجود JavaScript إضافي غير موجود في Bootstrap لإيقاف التشغيل تلقائيًا والمزيد. راجع منشور Stack Overflow المفيد هذا للحصول على مزيد من المعلومات.

أحجام اختيارية

النماذج لها حجمان اختياريان ، متاحان عبر فئات التعديل ليتم وضعها في ملف .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

إزالة الرسوم المتحركة

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

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

استخدام نظام الشبكة

للاستفادة من نظام شبكة Bootstrap داخل نموذج ما ، ما عليك سوى التداخل .rowداخل .modal-bodyفئات نظام الشبكة العادية ثم استخدام فئات نظام الشبكة العادية.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

هل لديك مجموعة من الأزرار التي تؤدي جميعها إلى نفس الوضع ، فقط بمحتويات مختلفة قليلاً؟ استخدم سمات HTMLevent.relatedTarget ( ربما عبر jQuery ) لتغيير محتويات النموذج بناءً على الزر الذي تم النقر عليه. راجع مستندات Modal Events للحصول على تفاصيل حول ،data-*relatedTarget

... المزيد من الأزرار ...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

إستعمال

يقوم المكوِّن الإضافي المشروط بتبديل المحتوى المخفي عند الطلب ، عبر سمات البيانات أو JavaScript. كما أنه يضيف .modal-openإلى <body>تجاوز سلوك التمرير الافتراضي وينشئ .modal-backdropمنطقة نقرة لرفض النماذج المعروضة عند النقر خارج النموذج.

عبر سمات البيانات

تنشيط مشروط دون كتابة JavaScript. قم بتعيين data-toggle="modal"عنصر تحكم ، مثل زر ، مع data-target="#foo"أو href="#foo"لاستهداف نمط محدد للتبديل.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

عبر JavaScript

استدعاء مشروط مع معرف myModalبسطر واحد من JavaScript:

$('#myModal').modal(options)

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-، كما في data-backdrop="".

اسم يكتب إفتراضي وصف
خلفية منطقي أو السلسلة'static' حقيقي يتضمن عنصر خلفية مشروط. بدلاً من ذلك ، حدد staticخلفية لا تغلق النموذج عند النقر.
لوحة المفاتيح قيمة منطقية حقيقي يغلق المشروط عند الضغط على مفتاح الهروب
تبين قيمة منطقية حقيقي يظهر الشكل عند التهيئة.
التحكم عن بعد طريق خاطئة

تم إهمال هذا الخيار منذ الإصدار 3.3.0 وتمت إزالته في الإصدار 4.0. نوصي بدلاً من ذلك باستخدام قوالب من جانب العميل أو إطار عمل لربط البيانات ، أو استدعاء jQuery.load نفسك.

إذا تم توفير عنوان URL بعيد ، فسيتم تحميل المحتوى مرة واحدة عبر طريقة jQuery loadوحقنه في .modal-contentdiv. إذا كنت تستخدم data-api ، فيمكنك بدلاً من ذلك استخدام hrefالسمة لتحديد المصدر البعيد. ويرد أدناه مثال على ذلك:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

طُرق

ينشط المحتوى الخاص بك كمشروط. يقبل الخيارات الاختيارية object.

$('#myModal').modal({
  keyboard: false
})

يبدل مشروط يدويًا. يعود إلى المتصل قبل أن يتم إظهار أو إخفاء الوسائط (أي قبل وقوع الحدث shown.bs.modalأو ).hidden.bs.modal

$('#myModal').modal('toggle')

يفتح مشروط يدويا. يعود إلى المتصل قبل أن يتم عرض الشرط بالفعل (أي قبل shown.bs.modalوقوع الحدث).

$('#myModal').modal('show')

يدويا يخفي مشروط. يعود إلى المتصل قبل أن يتم إخفاء الوسائط (أي قبل hidden.bs.modalوقوع الحدث).

$('#myModal').modal('hide')

يعيد ضبط موضع الشرط لمواجهة شريط التمرير في حالة ظهوره ، مما يجعل القفز الشرطي إلى اليسار.

مطلوب فقط عندما يتغير ارتفاع الوسائط عندما يكون مفتوحًا.

$('#myModal').modal('handleUpdate')

الأحداث

تكشف فئة مشروط Bootstrap عن بعض الأحداث للتثبيت في وظائف مشروطة.

يتم إطلاق جميع الأحداث المشروطة على الوسائط نفسها (أي في <div class="modal">).

نوع الحدث وصف
show.bs.modal يتم تشغيل هذا الحدث فورًا عند showاستدعاء أسلوب المثيل. إذا كانت النتيجة نقرة ، فإن العنصر الذي تم النقر عليه يكون متاحًا relatedTargetكخاصية للحدث.
معروض .bs.modal يتم تشغيل هذا الحدث عندما يكون النموذج مرئيًا للمستخدم (سينتظر حتى تكتمل انتقالات CSS). إذا كانت النتيجة نقرة ، فإن العنصر الذي تم النقر عليه يكون متاحًا relatedTargetكخاصية للحدث.
نموذج اخفاء يتم تشغيل هذا الحدث فورًا عند hideاستدعاء أسلوب المثيل.
نموذج مخفي يتم تشغيل هذا الحدث عند انتهاء إخفاء النموذج عن المستخدم (سينتظر حتى تكتمل انتقالات CSS).
تحميل .bs.modal يتم تشغيل هذا الحدث عندما يقوم الوسيط بتحميل المحتوى باستخدام remoteالخيار.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

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

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

داخل نافبار

داخل الحبوب

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

على الأجهزة المحمولة ، يؤدي فتح قائمة منسدلة إلى إضافة .dropdown-backdropمنطقة نقر لإغلاق القوائم المنسدلة عند النقر خارج القائمة ، وهو مطلب لدعم iOS المناسب. هذا يعني أن التبديل من قائمة منسدلة مفتوحة إلى قائمة منسدلة مختلفة يتطلب نقرة إضافية على الهاتف المحمول.

ملاحظة: data-toggle="dropdown"يتم الاعتماد على السمة لإغلاق القوائم المنسدلة على مستوى التطبيق ، لذلك من الجيد استخدامها دائمًا.

عبر سمات البيانات

أضف data-toggle="dropdown"إلى ارتباط أو زر لتبديل القائمة المنسدلة.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

للحفاظ على عناوين URL سليمة مع أزرار الارتباط ، استخدم data-targetالسمة بدلاً من href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

عبر JavaScript

استدعاء القوائم المنسدلة عبر JavaScript:

$('.dropdown-toggle').dropdown()

data-toggle="dropdown"لا يزال مطلوبًا

بغض النظر عما إذا كنت تتصل بالقائمة المنسدلة عبر JavaScript أو تستخدم واجهة برمجة تطبيقات البيانات بدلاً من ذلك ، data-toggle="dropdown"يلزم دائمًا أن تكون موجودًا في عنصر تشغيل القائمة المنسدلة.

لا أحد

لتبديل القائمة المنسدلة لشريط تنقل محدد أو التنقل المبوب.

يتم تشغيل جميع أحداث القائمة المنسدلة على .dropdown-menuالعنصر الرئيسي لـ.

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

نوع الحدث وصف
show.bs. الإنزال يتم تشغيل هذا الحدث فورًا عند استدعاء طريقة إظهار المثيل.
معروض. bs. يتم تشغيل هذا الحدث عندما تصبح القائمة المنسدلة مرئية للمستخدم (سينتظر حتى تكتمل انتقالات CSS).
إخفاء يتم تشغيل هذا الحدث فورًا عند استدعاء طريقة إخفاء المثيل.
المخفية يتم تشغيل هذا الحدث عندما تنتهي القائمة المنسدلة من إخفاء المستخدم (سينتظر حتى تكتمل انتقالات CSS).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

المثال في نافبار

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

@سمين

طماق إعلانية ، Keytar ، brunch id art party dolor labore. Pitchfork yr enim lo-fi قبل بيعها بالكامل. حقوق دراجة Tumblr من المزرعة إلى المائدة مهما كانت. كارديغان كوفية كارليس برسمة أنيم. كشك تصوير فيليت سيتان مكسويني 3 وولف مون إيرور. سترة كوسبي lomo jean shorts ، williamsburg hoodie minim qui ربما لم تسمع بها على الأرجح وصندوق الائتمان كارديجان culpa biodiesel wes anderson Aesthetic. نهيل موشوم الاتهام ، الفضل السخرية وقود الديزل الحيوي كوفية حرفي أولامكو يترتب على ذلك.

mdo

لوح تزلج Veniam Marfa شارب ، Adipisising Fugiat Velit Pitchfork Beard. فريجان بيرد أليكوا كيوبيداتات مكسويني فييرو. Cupidatat four loko nisi، ea helvetica nulla carles. شاحنة طعام سترة كوسبي موشومة ، فينيل ماكسيني غير حر. Lo-fi wes anderson +1 sartorial. تمارين كارليس غير الجمالية هي من الترميم. بروكلين أديبيسيسينج كرافت بيرة نائب مفتاح ديسيرونت.

واحد

Occaecat Goodso aliqua delectus. فاب كرافت بيرة deserunt لوح تزلج عصام. حقوق Lomo للدراجات adipisicing banh mi ، velit ea sunt المستوى التالي من قهوة أحادية المنشأ في ماغنا فينيام. High life id vinyl، echo park socat quis aliquip banh mi مذراة. Vero VHS هو adipisicing. Consectetur nisi DIY حقيبة ساعي صغيرة. Cred ex in ، مستدام delectus consectetur fanny pack iphone.

اثنين

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

مدونة Keytar Twee ، حقيبة رسول culpa marfa مهما كانت شاحنة الطعام delectus. افتراضات معرف موالفة Sapiente. Locavore sed helvetica cliche المفارقة ، القطط الرعدية التي ربما لم تسمع بها من المحتمل أن تكون ذات قلنسوة خالية من الغلوتين Lo-fi fap aliquip. لابور إيليت بلاس قبل بيعها بالكامل ، تيري ريتشاردسون برويدنت برانش نيسكون كويس كنزة كوسبي بارياتور كوفية أوت هيلفيتيكا حرفي. كارديجان كرافت بيرة seitan جاهز فيليت. VHS chambray labouris tempor veniam. الرسوم المتحركة mollit minim Goods ullamco thundercats.

إستعمال

يتطلب Bootstrap nav

يتطلب Scrollspy حاليًا استخدام مكون Bootstrap nav لإبراز الروابط النشطة بشكل مناسب.

مطلوب تحديد أهداف معرّف قابل للحل

يجب أن تحتوي روابط Navbar على أهداف معرف قابلة للحل. على سبيل المثال ، <a href="#home">home</a>يجب أن يتوافق a مع شيء ما في DOM مثل <div id="home"></div>.

تجاهل العناصر غير :visibleالمستهدفة

سيتم تجاهل العناصر المستهدفة التي لا تتوافق مع :visiblejQuery ولن يتم إبراز عناصر التنقل المقابلة لها.

يتطلب تحديد المواقع النسبي

بغض النظر عن طريقة التنفيذ ، يتطلب scrollspy استخدامه position: relative;على العنصر الذي تتجسس عليه. في معظم الحالات هذا هو <body>. عند التمرير للتجسس على عناصر أخرى غير الـ <body>، تأكد من وجود heightمجموعة overflow-y: scroll;وتطبيقها.

عبر سمات البيانات

لإضافة سلوك التمرير بسهولة إلى شريط التنقل العلوي ، أضف data-spy="scroll"إلى العنصر الذي تريد التجسس عليه (عادةً ما يكون هذا هو <body>). ثم أضف data-targetالسمة بمعرف أو فئة العنصر الأصل لأي .navمكون Bootstrap.

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

عبر JavaScript

بعد الإضافة position: relative;في CSS الخاص بك ، قم باستدعاء scrollspy عبر JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

طُرق

.scrollspy('refresh')

عند استخدام scrollspy مع إضافة عناصر أو إزالتها من DOM ، ستحتاج إلى استدعاء طريقة التحديث كما يلي:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-، كما في data-offset="".

اسم يكتب إفتراضي وصف
عوض رقم 10 بكسل للإزاحة من الأعلى عند حساب موضع التمرير.

الأحداث

نوع الحدث وصف
activ.bs.scrollspy يتم تشغيل هذا الحدث عندما يتم تنشيط عنصر جديد بواسطة scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

علامات التبويب القابلة للتبديل في tab.js

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

أضف وظائف علامات تبويب ديناميكية وسريعة للانتقال عبر أجزاء المحتوى المحلي ، حتى عبر القوائم المنسدلة. علامات التبويب المتداخلة غير مدعومة.

الدنيم الخام ربما لم تسمع به من سراويل الجينز أوستن. Nesciunt tofu stumptown aliqua ، تطهير ريترو سينث ماستر. شارب مبتذل مؤقت ، ويليامسبورغ كارليس نباتي هيلفيتيكا. Reprehenderit جزار الكوفية الرجعية موالفة زاك. Cosby sweater eu banh mi، qui irure terry richardson ex squid. أليكويب بلاسيت سالفيا سيلوم آيفون. سترة من Seitan Aliquip Quis الأمريكية ، الجزار Voluptate Nisi Qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

يوسع التنقل المبوب

يوسع هذا المكون الإضافي مكون التنقل المبوب لإضافة مناطق قابلة للجدولة.

إستعمال

تمكين علامات التبويب القابلة للجدولة عبر JavaScript (يجب تنشيط كل علامة تبويب على حدة):

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

يمكنك تنشيط علامات التبويب الفردية بعدة طرق:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

وضع علامة على

يمكنك تنشيط علامة تبويب أو التنقل على الأقراص دون كتابة أي JavaScript بمجرد تحديد عنصر data-toggle="tab"أو data-toggle="pill"على أحد العناصر. ستؤدي إضافة الفئات navو إلى علامة التبويب إلى تطبيق نمط علامة تبويب Bootstrap ، بينما ستؤدي إضافة الفئات و Class إلى تطبيق تصميم حبوب منع الحمل .nav-tabsulnavnav-pills

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

تأثير التلاشي

لجعل علامات التبويب تتلاشى ، أضف .fadeإلى كل منها .tab-pane. يجب .inأن يجعل جزء علامة التبويب الأول المحتوى الأولي مرئيًا.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

طُرق

$().tab

ينشط عنصر علامة تبويب وحاوية محتوى. يجب أن تحتوي علامة التبويب على عقدة حاوية data-targetأو تستهدفها في DOM. hrefفي الأمثلة أعلاه ، علامات التبويب هي <a>s ذات data-toggle="tab"السمات.

.tab('show')

يحدد علامة التبويب المحددة ويظهر المحتوى المرتبط بها. تصبح أي علامة تبويب أخرى تم تحديدها مسبقًا غير محددة ويتم إخفاء المحتوى المرتبط بها. يعود إلى المتصل قبل أن يتم عرض جزء علامة التبويب بالفعل (أي قبل shown.bs.tabوقوع الحدث).

$('#someTab').tab('show')

الأحداث

عند إظهار علامة تبويب جديدة ، يتم تشغيل الأحداث بالترتيب التالي:

  1. hide.bs.tab(في علامة التبويب النشطة الحالية)
  2. show.bs.tab(في علامة التبويب التي سيتم عرضها)
  3. hidden.bs.tab(في علامة التبويب النشطة السابقة ، نفس علامة التبويب الخاصة hide.bs.tabبالحدث)
  4. shown.bs.tab(في علامة التبويب النشطة حديثًا المعروضة للتو ، نفس علامة التبويب الخاصة show.bs.tabبالحدث)

إذا لم تكن هناك علامة تبويب نشطة بالفعل ، فلن يتم تشغيل الأحداث hide.bs.tabو .hidden.bs.tab

نوع الحدث وصف
show.bs.tab يتم تشغيل هذا الحدث في علامة التبويب ، ولكن قبل ظهور علامة التبويب الجديدة. استخدم event.targetو event.relatedTargetلاستهداف علامة التبويب النشطة وعلامة التبويب النشطة السابقة (إذا كانت متوفرة) على التوالي.
يظهر. bs.tab يتم تشغيل هذا الحدث في علامة التبويب بعد عرض علامة التبويب. استخدم event.targetو event.relatedTargetلاستهداف علامة التبويب النشطة وعلامة التبويب النشطة السابقة (إذا كانت متوفرة) على التوالي.
علامة التبويب إخفاء يتم تشغيل هذا الحدث عند عرض علامة تبويب جديدة (وبالتالي يتم إخفاء علامة التبويب النشطة السابقة). استخدم event.targetو event.relatedTargetلاستهداف علامة التبويب النشطة الحالية وعلامة التبويب الجديدة التي ستصبح نشطة ، على التوالي.
علامة التبويب المخفية يتم تشغيل هذا الحدث بعد عرض علامة تبويب جديدة (وبالتالي يتم إخفاء علامة التبويب النشطة السابقة). استخدم event.targetو event.relatedTargetلاستهداف علامة التبويب النشطة السابقة وعلامة التبويب النشطة الجديدة ، على التوالي.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

تلميحات الأدوات tooltip.js

مستوحى من البرنامج المساعد jQuery.tipsy الممتاز الذي كتبه Jason Frame ؛ تلميحات الأدوات هي نسخة محدثة لا تعتمد على الصور وتستخدم CSS3 للرسوم المتحركة وسمات البيانات لتخزين العنوان المحلي.

لا يتم أبدًا عرض تلميحات الأدوات ذات العناوين ذات الطول الصفري.

أمثلة

مرر مؤشر الماوس فوق الروابط أدناه لمشاهدة تلميحات الأدوات:

بنطلون ضيق من المستوى التالي ربما لم تسمع به من قبل. كشك تصوير لحية الدنيم الخام Letterpress حقيبة ساعي نباتية stumptown. سيتان من المزرعة إلى المائدة ، ملابس الكينوا الأمريكية ذات الثماني بتات من ماكسيني ، تحتوي على شامبراي من الفينيل تيري ريتشاردسون. Beard stumptown ، بالأزرار بانه مي لومو thundercats. التوفو وقود الديزل الحيوي ويليامسبورغ مارفا ، أربعة شامبراي نباتي مطهر من لوكو مكسويني. حرفي مثير للسخرية حقًا أيا كان keytar ، البنوك من المزرعة إلى المائدة ، أوستن تويتر ، تتعامل مع القهوة ذات الأصل الفردي الخالي من الدنيم.

تلميح ثابت

تتوفر أربعة خيارات: محاذاة لأعلى ولليمين ولأسفل ولليسار.

أربعة اتجاهات

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

وظيفة التقيد

لأسباب تتعلق بالأداء ، فإن واجهات برمجة تطبيقات Tooltip و Popover data-apis اختيارية ، مما يعني أنه يجب عليك تهيئتهما بنفسك .

تتمثل إحدى طرق تهيئة جميع تلميحات الأدوات على الصفحة في تحديدها حسب data-toggleالسمة الخاصة بها:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

إستعمال

ينشئ المكون الإضافي لتلميحات الأدوات محتوى وترميزًا عند الطلب ، ويضع بشكل افتراضي تلميحات الأدوات بعد عنصر المشغل الخاص بهم.

تشغيل تلميح الأداة عبر JavaScript:

$('#example').tooltip(options)

وضع علامة على

الترميز المطلوب لتلميح الأداة هو dataسمة فقط وعلى titleعنصر HTML الذي ترغب في الحصول على تلميح أداة. الترميز الذي تم إنشاؤه لتلميح الأداة بسيط نوعًا ما ، على الرغم من أنه يتطلب موضعًا (افتراضيًا ، يتم تعيينه topبواسطة المكون الإضافي).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

روابط متعددة الخطوط

في بعض الأحيان تريد إضافة تلميح أداة إلى ارتباط تشعبي يلتف عدة أسطر. يتمثل السلوك الافتراضي للمكوِّن الإضافي تلميح الأدوات في توسيطه أفقيًا ورأسيًا. أضف white-space: nowrap;إلى المراسي الخاصة بك لتجنب ذلك.

تتطلب تلميحات الأدوات في مجموعات الأزرار ومجموعات الإدخال والجداول إعدادًا خاصًا

عند استخدام تلميحات الأدوات على العناصر داخل a .btn-groupأو a .input-group، أو على العناصر المرتبطة بالجدول ( <td>، <th>، <tr>، <thead>، <tbody>، <tfoot>) ، سيتعين عليك تحديد الخيار container: 'body'(الموثق أدناه) لتجنب الآثار الجانبية غير المرغوب فيها (مثل زيادة العنصر و / أو تفقد زواياها الدائرية عند تشغيل التلميح).

لا تحاول إظهار تلميحات الأدوات على العناصر المخفية

الاستدعاء $(...).tooltip('show')عند وجود العنصر الهدف display: none;سيؤدي إلى وضع تلميح الأداة بشكل غير صحيح.

تلميحات يمكن الوصول إليها لمستخدمي لوحة المفاتيح والتكنولوجيا المساعدة

بالنسبة للمستخدمين الذين يتنقلون باستخدام لوحة المفاتيح ، وخاصة مستخدمي التقنيات المساعدة ، يجب عليك فقط إضافة تلميحات الأدوات إلى العناصر القابلة للتركيز على لوحة المفاتيح مثل الروابط أو عناصر التحكم في النموذج أو أي عنصر عشوائي له tabindex="0"سمة.

تتطلب تلميحات الأدوات الموجودة على العناصر المعطلة عناصر غلاف

لإضافة تلميح أداة إلى عنصر disabledأو .disabledعنصر ، ضع العنصر داخل a <div>وقم بتطبيق تلميح الأداة عليه <div>بدلاً من ذلك.

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-، كما في data-animation="".

اسم يكتب تقصير وصف
الرسوم المتحركة قيمة منطقية حقيقي تطبيق انتقال الخبو في CSS إلى تلميح الأداة
وعاء سلسلة | خاطئة خاطئة

لإلحاق تلميح الأداة بعنصر معين. مثال container: 'body':. هذا الخيار مفيد بشكل خاص لأنه يسمح لك بوضع تلميح الأداة في تدفق المستند بالقرب من عنصر التشغيل - والذي سيمنع تلميح الأداة من الابتعاد عن عنصر التشغيل أثناء تغيير حجم النافذة.

تأخير رقم | هدف 0

التأخير في إظهار تلميح الأداة وإخفائه (بالمللي ثانية) - لا ينطبق على نوع المشغل اليدوي

إذا تم توفير رقم ، فسيتم تطبيق التأخير على كل من الإخفاء / العرض

هيكل الكائن هو:delay: { "show": 500, "hide": 100 }

لغة البرمجة قيمة منطقية خاطئة أدخل HTML في تلميح الأداة. textإذا كانت القيمة false ، فسيتم استخدام طريقة jQuery لإدراج المحتوى في DOM. استخدم النص إذا كنت قلقًا بشأن هجمات XSS.
تحديد مستوى سلسلة | وظيفة 'أعلى'

كيفية وضع تلميح - أعلى | أسفل | غادر | حق | تلقاءي.
عندما يتم تحديد "تلقائي" ، فإنه سيعيد توجيه تلميح الأداة ديناميكيًا. على سبيل المثال ، إذا كان الموضع هو "تلقائي لليسار" ، فسيتم عرض تلميح الأداة إلى اليسار عندما يكون ذلك ممكنًا ، وإلا فسيتم عرضه على اليمين.

عندما يتم استخدام دالة لتحديد الموضع ، يتم استدعاؤها باستخدام عقدة DOM تلميح كأول وسيطة لها وعقدة DOM المشغلة كعقدة ثانية لها. يتم thisتعيين السياق على مثيل تلميح الأدوات.

محدد سلسلة خاطئة إذا تم توفير محدد ، فسيتم تفويض كائنات تلميح الأدوات إلى الأهداف المحددة. في الممارسة العملية ، يتم استخدام هذا لتمكين محتوى HTML الديناميكي لإضافة تلميحات الأدوات. انظر إلى هذا ومثال إعلامي .
قالب سلسلة '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

قاعدة HTML لاستخدامها عند إنشاء التلميح.

titleسيتم إدخال تلميح الأدوات في ملف .tooltip-inner.

.tooltip-arrowسيصبح سهم تلميح الأداة.

يجب أن يحتوي عنصر الغلاف الخارجي على .tooltipالفئة.

لقب سلسلة | وظيفة "

قيمة العنوان الافتراضية إذا titleلم تكن السمة موجودة.

إذا تم توفير وظيفة ، فسيتم استدعاؤها thisبمجموعة مرجعية للعنصر الذي تم إرفاق تلميح الأداة به.

اثار سلسلة "تحوم التركيز" كيف يتم تشغيل التلميح - انقر فوق | تحوم | التركيز | كتيب. يمكنك تمرير عدة مشغلات ؛ افصلهم بمسافة. manualلا يمكن دمجها مع أي مشغل آخر.
منفذ العرض سلسلة | كائن | وظيفة {المحدد: "الجسم" ، المساحة المتروكة: 0}

يحافظ على التلميح داخل حدود هذا العنصر. مثال: viewport: '#viewport'أو{ "selector": "#viewport", "padding": 0 }

إذا تم تقديم وظيفة ، فسيتم استدعاؤها باستخدام عقدة DOM للعنصر المشغل كوسيطة وحيدة لها. يتم thisتعيين السياق على مثيل تلميح الأدوات.

سمات البيانات لتلميحات الأدوات الفردية

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

طُرق

$().tooltip(options)

يرفق معالج تلميح بمجموعة عنصر.

.tooltip('show')

يكشف عن تلميح أداة عنصر. يعود إلى المتصل قبل عرض التلميح بالفعل (أي قبل shown.bs.tooltipوقوع الحدث). يعتبر هذا بمثابة تشغيل "يدوي" للتلميح. لا يتم أبدًا عرض تلميحات الأدوات ذات العناوين ذات الطول الصفري.

$('#element').tooltip('show')

.tooltip('hide')

يخفي تلميح أداة عنصر. يعود إلى المتصل قبل إخفاء التلميح (أي قبل hidden.bs.tooltipوقوع الحدث). يعتبر هذا بمثابة تشغيل "يدوي" للتلميح.

$('#element').tooltip('hide')

.tooltip('toggle')

يبدل تلميح أداة عنصر. يعود إلى المتصل قبل إظهار التلميح أو إخفاؤه بالفعل (أي قبل وقوع الحدث shown.bs.tooltipأو ). hidden.bs.tooltipيعتبر هذا بمثابة تشغيل "يدوي" للتلميح.

$('#element').tooltip('toggle')

.tooltip('destroy')

يخفي تلميح عنصر ويتلفه. لا يمكن إتلاف تلميحات الأدوات التي تستخدم التفويض (والتي يتم إنشاؤها باستخدام الخيار ) بشكل فردي في عناصر المشغل التابعة.selector

$('#element').tooltip('destroy')

الأحداث

نوع الحدث وصف
show.bs.tooltip يتم تشغيل هذا الحدث فورًا عند showاستدعاء أسلوب المثيل.
معروض .bs.tooltip يتم تشغيل هذا الحدث عندما يصبح التلميح مرئيًا للمستخدم (سينتظر حتى تكتمل انتقالات CSS).
hide.bs.tooltip يتم تشغيل هذا الحدث فورًا عند hideاستدعاء أسلوب المثيل.
hidden.bs.tooltip يتم تشغيل هذا الحدث عند انتهاء إخفاء التلميح عن المستخدم (سينتظر حتى تكتمل انتقالات CSS).
المدرجة. bs.tooltip يتم تشغيل هذا الحدث بعد show.bs.tooltipالحدث عند إضافة قالب تلميح الأدوات إلى DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

أضف تراكبات صغيرة من المحتوى ، مثل تلك الموجودة على iPad ، إلى أي عنصر يحتوي على معلومات ثانوية.

لا يتم أبدًا عرض العناصر المنبثقة التي يكون عنوانها ومحتواها صفريًا.

تبعية البرنامج المساعد

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

وظيفة التقيد

لأسباب تتعلق بالأداء ، فإن واجهات برمجة تطبيقات Tooltip و Popover data-apis اختيارية ، مما يعني أنه يجب عليك تهيئتهما بنفسك .

تتمثل إحدى طرق تهيئة جميع العناصر المنبثقة على الصفحة في تحديدها حسب data-toggleالسمة الخاصة بها:

$(function () {
  $('[data-toggle="popover"]').popover()
})

تتطلب العناصر المنبثقة في مجموعات الأزرار ومجموعات الإدخال والجداول إعدادًا خاصًا

عند استخدام العناصر المنبثقة على العناصر داخل a .btn-groupأو a .input-group، أو على العناصر المرتبطة بالجدول ( <td>، <th>، <tr>، <thead>، <tbody>، <tfoot>) ، سيتعين عليك تحديد الخيار container: 'body'(الموثق أدناه) لتجنب الآثار الجانبية غير المرغوب فيها (مثل زيادة العنصر بشكل أوسع و / أو تفقد أركانها الدائرية عند تشغيل المنبثقة).

لا تحاول إظهار العناصر المنبثقة على العناصر المخفية

سيؤدي استدعاء $(...).popover('show')العنصر المستهدف إلى وضع العنصر المنبثق بشكل غير صحيح.display: none;

تتطلب العناصر المنبثقة على العناصر المعطلة عناصر غلاف

لإضافة عنصر منبثق إلى عنصر disabledأو .disabledعنصر ، ضع العنصر داخل a <div>وقم بتطبيق العنصر المنبثق عليه <div>بدلاً من ذلك.

روابط متعددة الخطوط

في بعض الأحيان تريد إضافة نافذة منبثقة إلى ارتباط تشعبي يلتف بعدة أسطر. يتمثل السلوك الافتراضي للمكوِّن الإضافي المنبثق في توسيطه أفقيًا ورأسيًا. أضف white-space: nowrap;إلى المراسي الخاصة بك لتجنب ذلك.

أمثلة

انبثاق ثابت

تتوفر أربعة خيارات: محاذاة لأعلى ولليمين ولأسفل ولليسار.

المنبثقة أعلى

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover الحق

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover أسفل

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

غادر Popover

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

عرض حي

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

أربعة اتجاهات

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

رفض عند النقر التالي

استخدم focusالمشغل لرفض العناصر المنبثقة عند النقرة التالية التي يقوم بها المستخدم.

مطلوب ترميز محدد للرفض عند النقرة التالية

للحصول على سلوك مناسب عبر المستعرضات وعبر الأنظمة الأساسية ، يجب عليك استخدام <a>العلامة ، وليس العلامة <button>، كما يجب تضمين السمات role="button"و .tabindex

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

إستعمال

تمكين العناصر المنبثقة عبر JavaScript:

$('#example').popover(options)

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-، كما في data-animation="".

اسم يكتب تقصير وصف
الرسوم المتحركة قيمة منطقية حقيقي تطبيق انتقال تلاشي CSS إلى العنصر المنبثق
وعاء سلسلة | خاطئة خاطئة

لإلحاق العنصر المنبثق بعنصر معين. مثال container: 'body':. هذا الخيار مفيد بشكل خاص لأنه يسمح لك بوضع النافذة المنبثقة في تدفق المستند بالقرب من عنصر التشغيل - مما سيمنع العنصر المنبثق من الطفو بعيدًا عن عنصر التشغيل أثناء تغيير حجم النافذة.

المحتوى سلسلة | وظيفة "

قيمة المحتوى الافتراضية إذا data-contentلم تكن السمة موجودة.

إذا تم توفير وظيفة ، فسيتم استدعاؤها مع thisمجموعة مرجعية لها إلى العنصر الذي يتم إرفاق العنصر المنبثق به.

تأخير رقم | هدف 0

التأخير في إظهار وإخفاء النافذة المنبثقة (بالمللي ثانية) - لا ينطبق على نوع المشغل اليدوي

إذا تم توفير رقم ، فسيتم تطبيق التأخير على كل من الإخفاء / العرض

هيكل الكائن هو:delay: { "show": 500, "hide": 100 }

لغة البرمجة قيمة منطقية خاطئة أدخل HTML في النافذة المنبثقة. textإذا كانت القيمة false ، فسيتم استخدام طريقة jQuery لإدراج المحتوى في DOM. استخدم النص إذا كنت قلقًا بشأن هجمات XSS.
تحديد مستوى سلسلة | وظيفة 'حقا'

كيفية وضع popover - top | أسفل | غادر | حق | تلقاءي.
عند تحديد "تلقائي" ، سيعيد توجيه النافذة المنبثقة ديناميكيًا. على سبيل المثال ، إذا كان الموضع هو "تلقائي لليسار" ، فسيتم عرض النافذة المنبثقة إلى اليسار عندما يكون ذلك ممكنًا ، وإلا فسيتم عرضها على اليمين.

عندما يتم استخدام دالة لتحديد الموضع ، يتم استدعاؤها باستخدام عقدة DOM المنبثقة باعتبارها الوسيطة الأولى لها وعقدة DOM المشغلة كعقدة ثانية لها. يتم thisتعيين السياق على مثيل popover.

محدد سلسلة خاطئة إذا تم توفير محدد ، فسيتم تفويض الكائنات المنبثقة إلى الأهداف المحددة. في الممارسة العملية ، يتم استخدام هذا لتمكين محتوى HTML الديناميكي لإضافة العناصر المنبثقة. انظر إلى هذا ومثال إعلامي .
قالب سلسلة '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

قاعدة HTML لاستخدامها عند إنشاء العنصر المنبثق.

titleسيتم حقن العناصر المنبثقة في ملف .popover-title.

contentسيتم حقن العناصر المنبثقة في ملف .popover-content.

.arrowسيصبح سهم المنبثقة.

يجب أن يحتوي عنصر الغلاف الخارجي على .popoverالفئة.

لقب سلسلة | وظيفة "

قيمة العنوان الافتراضية إذا titleلم تكن السمة موجودة.

إذا تم توفير وظيفة ، فسيتم استدعاؤها مع thisمجموعة مرجعية لها إلى العنصر الذي يتم إرفاق العنصر المنبثق به.

اثار سلسلة 'انقر' كيف يتم تشغيل المنبثقة - انقر فوق | تحوم | التركيز | كتيب. يمكنك تمرير عدة مشغلات ؛ افصلهم بمسافة. manualلا يمكن دمجها مع أي مشغل آخر.
منفذ العرض سلسلة | كائن | وظيفة {المحدد: "الجسم" ، المساحة المتروكة: 0}

يحافظ على العنصر المنبثق داخل حدود هذا العنصر. مثال: viewport: '#viewport'أو{ "selector": "#viewport", "padding": 0 }

إذا تم تقديم وظيفة ، فسيتم استدعاؤها باستخدام عقدة DOM للعنصر المشغل كوسيطة وحيدة لها. يتم thisتعيين السياق على مثيل popover.

سمات البيانات للأفراد المنبثقين

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

طُرق

$().popover(options)

يقوم بتهيئة العناصر المنبثقة لمجموعة عنصر.

.popover('show')

يكشف عن العنصر المنبثق. يعود إلى المتصل قبل أن يتم عرض العنصر المنبثق بالفعل (أي قبل shown.bs.popoverوقوع الحدث). يعتبر هذا بمثابة تشغيل "يدوي" للقافزة المنبثقة. لا يتم أبدًا عرض العناصر المنبثقة التي يكون عنوانها ومحتواها صفريًا.

$('#element').popover('show')

.popover('hide')

يخفي العنصر المنبثق. يعود إلى المتصل قبل إخفاء العنصر المنبثق بالفعل (أي قبل hidden.bs.popoverوقوع الحدث). يعتبر هذا بمثابة تشغيل "يدوي" للقافزة المنبثقة.

$('#element').popover('hide')

.popover('toggle')

يبدل العنصر المنبثق. يعود إلى المتصل قبل إظهار أو إخفاء العنصر المنبثق بالفعل (أي قبل وقوع الحدث shown.bs.popoverأو ). hidden.bs.popoverيعتبر هذا بمثابة تشغيل "يدوي" للقافزة المنبثقة.

$('#element').popover('toggle')

.popover('destroy')

يخفي العنصر المنبثق ويدمره. العناصر المنبثقة التي تستخدم التفويض (التي تم إنشاؤها باستخدام الخيارselector ) لا يمكن إتلافها بشكل فردي على عناصر المشغل التابعة .

$('#element').popover('destroy')

الأحداث

نوع الحدث وصف
show.bs.popover يتم تشغيل هذا الحدث فورًا عند showاستدعاء أسلوب المثيل.
معروض. bs.popover يتم تشغيل هذا الحدث عندما يصبح العنصر المنبثق مرئيًا للمستخدم (سينتظر حتى تكتمل انتقالات CSS).
إخفاء. bs.popover يتم تشغيل هذا الحدث فورًا عند hideاستدعاء أسلوب المثيل.
مخفي. bs.popover يتم تشغيل هذا الحدث عند انتهاء إخفاء العنصر المنبثق عن المستخدم (سينتظر حتى تكتمل انتقالات CSS).
المدرجة. bs.popover يتم تشغيل هذا الحدث بعد show.bs.popoverالحدث عند إضافة القالب المنبثق إلى DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

تنبيه رسائل التنبيه . js

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

أضف وظيفة الرفض إلى جميع رسائل التنبيه باستخدام هذا البرنامج المساعد.

عند استخدام أحد .closeالأزرار ، يجب أن يكون هو العنصر الفرعي الأول .alert-dismissibleفي العلامة ، ولا يجوز أن يسبقه أي محتوى نصي في الترميز.

إستعمال

ما عليك سوى الإضافة data-dismiss="alert"إلى زر الإغلاق لإعطاء وظيفة تنبيه قريبة تلقائيًا. إغلاق تنبيه يزيله من DOM.

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

لجعل تنبيهاتك تستخدم الرسوم المتحركة عند الإغلاق ، تأكد من أنها تحتوي على الفئات .fadeوالفئات .inمطبقة عليها بالفعل.

طُرق

$().alert()

يجعل التنبيه يستمع إلى أحداث النقر على العناصر الفرعية التي لها data-dismiss="alert"السمة. (ليس ضروريًا عند استخدام التهيئة التلقائية لـ data-api.)

$().alert('close')

يغلق تنبيهًا بإزالته من DOM. في حالة وجود الفئات .fadeو .inعلى العنصر ، سيتلاشى التنبيه قبل إزالته.

الأحداث

يكشف المكون الإضافي للتنبيه في Bootstrap عن بعض الأحداث للتثبيت في وظائف التنبيه.

نوع الحدث وصف
قريب يتم تشغيل هذا الحدث فورًا عند closeاستدعاء أسلوب المثيل.
مغلق bs.alert يتم تشغيل هذا الحدث عند إغلاق التنبيه (سينتظر اكتمال انتقالات CSS).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

أزرار button.js

أنجز المزيد باستخدام الأزرار. حالات زر التحكم أو إنشاء مجموعات من الأزرار لمزيد من المكونات مثل أشرطة الأدوات.

التوافق عبر المستعرضات

يستمر Firefox في حالات التحكم في النموذج (التعطيل والفحص) عبر عمليات تحميل الصفحة . الحل لهذا هو استخدام autocomplete="off". راجع خطأ Mozilla # 654072 .

جليل

إضافة data-loading-text="Loading..."لاستخدام حالة التحميل على زر.

تم إهمال هذه الميزة منذ الإصدار 3.3.5 وتمت إزالتها في الإصدار 4.

استخدم أي دولة تريدها!

من أجل هذا العرض التوضيحي ، نحن نستخدمه data-loading-text، $().button('loading')ولكن هذه ليست الحالة الوحيدة التي يمكنك استخدامها. انظر المزيد حول هذا أدناه في $().button(string)الوثائق .

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

تبديل واحد

أضف data-toggle="button"لتنشيط التبديل على زر واحد.

تحتاج الأزرار التي تم تبديلها مسبقًا.active ملفاتaria-pressed="true"

بالنسبة للأزرار التي تم تبديلها مسبقًا ، يجب إضافة .activeالفئة aria-pressed="true"والسمة إلى buttonنفسك.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

خانة اختيار / راديو

أضف data-toggle="buttons"إلى .btn-groupمربع الاختيار المحتوي أو مدخلات الراديو لتمكين التبديل في الأنماط الخاصة بكل منها.

تحتاج الخيارات المحددة مسبقًا.active

للخيارات المحددة مسبقًا ، يجب عليك إضافة .activeالفصل إلى المدخلات labelبنفسك.

يتم تحديث الحالة المرئية المحددة فقط عند النقر

إذا تم تحديث الحالة المحددة لزر مربع الاختيار دون إطلاق clickحدث على الزر (على سبيل المثال عبر <input type="reset">أو عن طريق ضبط checkedخاصية الإدخال) ، فستحتاج إلى تبديل .activeالفصل على المدخلات labelبنفسك.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

طُرق

$().button('toggle')

يبدل حالة الدفع. يعطي الزر المظهر الذي تم تنشيطه.

$().button('reset')

إعادة تعيين حالة الزر - تبديل النص بالنص الأصلي. هذه الطريقة غير متزامنة وتعود قبل اكتمال إعادة التعيين بالفعل.

$().button(string)

مبادلة النص بأي حالة نصية معرّفة بالبيانات.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

تصغير collapse.js

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

تبعية البرنامج المساعد

يتطلب Collapse تضمين المكوِّن الإضافي الانتقالات في إصدار Bootstrap الخاص بك.

مثال

انقر فوق الأزرار أدناه لإظهار عنصر آخر وإخفائه عبر تغييرات الفئة:

  • .collapseيخفي المحتوى
  • .collapsingيتم تطبيقه أثناء الانتقالات
  • .collapse.inيظهر المحتوى

يمكنك استخدام ارتباط مع hrefالسمة ، أو زر مع data-targetالسمة. في كلتا الحالتين ، data-toggle="collapse"مطلوب.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

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

قم بتمديد سلوك الطي الافتراضي لإنشاء أكورديون مع مكون اللوحة.

Anim pariatur cliche reprehenderit، enim eiusmod high life accusamus terry richardson ad squid. 3 وولف مون أوفيسيا أوت ، لوح تزلج غير كيوبيداتات ، برنش دولور. شاحنة طعام الكينوا لا تحتاج إلى عمل. برانش 3 وولف مون مؤقت ، سونت أليكوا وضع طائرًا عليها حبار قهوة أحادية المنشأ خالية من افتراضات شورديتش إت. Nihil anim keffiyeh helvetica، craft beer labore يتناسب مع أندرسون كريدي. إعلان نباتي مستثنى نائب جزار لومو. Leggings occaecat Craft من مزرعة البيرة إلى المائدة ، وخلط الدنيم الخام الجمالي الذي ربما لم تسمع به من قبل يتهمون بـ VHS المستدام.
Anim pariatur cliche reprehenderit، enim eiusmod high life accusamus terry richardson ad squid. 3 وولف مون أوفيسيا أوت ، لوح تزلج غير كيوبيداتات ، برنش دولور. شاحنة طعام الكينوا لا تحتاج إلى عمل. برانش 3 وولف مون مؤقت ، سونت أليكوا وضع طائرًا عليها حبار قهوة أحادية المنشأ خالية من افتراضات شورديتش إت. Nihil anim keffiyeh helvetica، craft beer labore يتناسب مع أندرسون كريدي. إعلان نباتي مستثنى نائب جزار لومو. Leggings occaecat Craft من مزرعة البيرة إلى المائدة ، وخلط الدنيم الخام الجمالي الذي ربما لم تسمع به من قبل يتهمون بـ VHS المستدام.
Anim pariatur cliche reprehenderit، enim eiusmod high life accusamus terry richardson ad squid. 3 وولف مون أوفيسيا أوت ، لوح تزلج غير كيوبيداتات ، برنش دولور. شاحنة طعام الكينوا لا تحتاج إلى عمل. برانش 3 وولف مون مؤقت ، سونت أليكوا وضع طائرًا عليها حبار قهوة أحادية المنشأ خالية من افتراضات شورديتش إت. Nihil anim keffiyeh helvetica، craft beer labore يتناسب مع أندرسون كريدي. إعلان نباتي مستثنى نائب جزار لومو. Leggings occaecat Craft من مزرعة البيرة إلى المائدة ، وخلط الدنيم الخام الجمالي الذي ربما لم تسمع به من قبل يتهمون بـ VHS المستدام.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

من الممكن أيضًا استبدال .panel-bodys بـ .list-groups.

  • Bootply
  • واحد itmus ac facilin
  • إيروس الثاني

جعل توسيع / ​​طي عناصر التحكم قابلة للوصول

تأكد من الإضافة aria-expandedإلى عنصر التحكم. تحدد هذه السمة بوضوح الحالة الحالية للعنصر القابل للطي لقارئات الشاشة والتقنيات المساعدة المماثلة. إذا تم إغلاق العنصر القابل للطي افتراضيًا ، فيجب أن يكون له قيمة aria-expanded="false". إذا قمت بتعيين العنصر القابل للطي ليتم فتحه افتراضيًا باستخدام inالفئة ، فقم بتعيين aria-expanded="true"عنصر التحكم بدلاً من ذلك. سيقوم المكون الإضافي تلقائيًا بتبديل هذه السمة بناءً على ما إذا كان العنصر القابل للطي قد تم فتحه أم لا.

بالإضافة إلى ذلك ، إذا كان عنصر التحكم الخاص بك يستهدف عنصرًا واحدًا قابلًا للطي - أي data-targetتشير السمة إلى idمحدد - يمكنك إضافة aria-controlsسمة إضافية إلى عنصر التحكم ، تحتوي على idالعنصر القابل للطي. تستخدم برامج قراءة الشاشة الحديثة والتقنيات المساعدة المماثلة هذه السمة لتزويد المستخدمين باختصارات إضافية للانتقال مباشرة إلى العنصر القابل للطي نفسه.

إستعمال

يستخدم ملحق الطي بضع فئات للتعامل مع الرفع الثقيل:

  • .collapseيخفي المحتوى
  • .collapse.inيظهر المحتوى
  • .collapsingتتم إضافته عند بدء الانتقال ، وإزالته عند الانتهاء

يمكن العثور على هذه الفئات في component-animations.less.

عبر سمات البيانات

ما عليك سوى إضافة data-toggle="collapse"و data-targetإلى العنصر لتعيين التحكم تلقائيًا في عنصر قابل للطي. تقبل السمة data-targetمحدد CSS لتطبيق الطي عليه. تأكد من إضافة الفصل collapseإلى العنصر القابل للطي. إذا كنت ترغب في فتحه افتراضيًا ، فأضف فئة إضافية in.

لإضافة إدارة مجموعة تشبه الأكورديون إلى عنصر تحكم قابل للطي ، أضف سمة البيانات data-parent="#selector". الرجوع إلى العرض التوضيحي لرؤية هذا في العمل.

عبر JavaScript

التمكين يدويًا باستخدام:

$('.collapse').collapse()

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-، كما في data-parent="".

اسم يكتب إفتراضي وصف
الأبوين محدد خاطئة إذا تم توفير محدد ، فسيتم إغلاق جميع العناصر القابلة للطي ضمن العنصر الرئيسي المحدد عند عرض هذا العنصر القابل للطي. (على غرار سلوك الأكورديون التقليدي - هذا يعتمد على panelالطبقة)
تبديل قيمة منطقية حقيقي تبديل العنصر القابل للطي عند الاستدعاء

طُرق

.collapse(options)

ينشط المحتوى الخاص بك كعنصر قابل للطي. يقبل الخيارات الاختيارية object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

تبديل عنصر قابل للطي إلى معروض أو مخفي. يعود إلى المتصل قبل إظهار العنصر القابل للطي أو إخفاؤه (أي قبل وقوع الحدث shown.bs.collapseأو ).hidden.bs.collapse

.collapse('show')

يظهر عنصرًا قابلًا للطي. يعود إلى المتصل قبل أن يظهر العنصر القابل للطي بالفعل (أي قبل shown.bs.collapseوقوع الحدث).

.collapse('hide')

يخفي العنصر القابل للطي. يعود إلى المتصل قبل أن يتم إخفاء العنصر القابل للطي (أي قبل hidden.bs.collapseوقوع الحدث).

الأحداث

تعرض فئة طي Bootstrap بعض الأحداث للتثبيت في وظيفة الانهيار.

نوع الحدث وصف
show.bs.capse يتم تشغيل هذا الحدث فورًا عند showاستدعاء أسلوب المثيل.
معروض. bs. الانهيار يتم تشغيل هذا الحدث عندما يصبح عنصر الطي مرئيًا للمستخدم (سينتظر حتى تكتمل انتقالات CSS).
إخفاء. b. الانهيار يتم تشغيل هذا الحدث فورًا عند hideاستدعاء الأسلوب.
مخفي. BS. طي يتم تشغيل هذا الحدث عند إخفاء عنصر تصغير عن المستخدم (سينتظر حتى تكتمل انتقالات CSS).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

دائري دائري . js

أحد مكونات عرض الشرائح للتنقل بين العناصر ، مثل الرف الدائري. الدوارات المتداخلة غير مدعومة.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

تسميات توضيحية اختيارية

أضف تسميات توضيحية إلى الشرائح بسهولة باستخدام .carousel-captionالعنصر الموجود داخل أي منها .item. ضع أي HTML اختياري داخله ، وستتم محاذاته وتنسيقه تلقائيًا.

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

دوارات متعددة

تتطلب الرف الدائري استخدام idحاوية خارجية (the .carousel) حتى تعمل عناصر التحكم في الرف الدائري بشكل صحيح. عند إضافة العديد من الدوارات ، أو عند تغيير الرف الدائري id، تأكد من تحديث عناصر التحكم ذات الصلة.

عبر سمات البيانات

استخدم سمات البيانات للتحكم بسهولة في موضع الرف الدائري. data-slideيقبل الكلمات الأساسية prevأو next، مما يغير موضع الشريحة بالنسبة إلى موضعها الحالي. بدلاً من ذلك ، استخدم data-slide-toلتمرير فهرس شريحة أولي إلى الرف الدائري data-slide-to="2"، والذي يغير موضع الشريحة إلى فهرس معين يبدأ بـ 0.

تُستخدم data-ride="carousel"السمة لوضع علامة على الرف الدائري باعتباره متحركًا بدءًا من تحميل الصفحة. لا يمكن استخدامه مع (مكرر وغير ضروري) تهيئة JavaScript صريحة لنفس المكتبة.

عبر JavaScript

الاتصال الدائري يدويًا باستخدام:

$('.carousel').carousel()

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-، كما في data-interval="".

اسم يكتب إفتراضي وصف
فترة رقم 5000 مقدار الوقت الذي يستغرقه التأخير بين تدوير عنصر تلقائيًا. إذا كانت القيمة خاطئة ، فلن تدور دائرة الرف الدائري تلقائيًا.
وقفة سلسلة | لا شيء "يحوم" في حالة الضبط على "hover"، يتم إيقاف تشغيل دائرة العرض مؤقتًا واستئناف mouseenterتشغيلها mouseleave. إذا تم nullالتعيين على ، فلن يؤدي التمرير فوق الرف الدائري إلى إيقافه مؤقتًا.
طَوّق قيمة منطقية حقيقي ما إذا كان يجب أن يدور الرف الدائري بشكل مستمر أو يتوقف بشدة.
لوحة المفاتيح قيمة منطقية حقيقي ما إذا كان يجب أن يتفاعل الرف الدائري مع أحداث لوحة المفاتيح أم لا.

يقوم بتهيئة الرف الدائري بخيارات اختيارية objectويبدأ التنقل بين العناصر.

$('.carousel').carousel({
  interval: 2000
})

يتنقل عبر عناصر الدائرة من اليسار إلى اليمين.

يوقف الدائرة من ركوب الدراجات بين العناصر.

يقوم بتدوير الرف الدائري إلى إطار معين (قائم على 0 ، على غرار المصفوفة).

دورات إلى العنصر السابق.

دورات إلى العنصر التالي.

يعرض الفصل الدائري في Bootstrap حدثين للتثبيت في وظيفة الرف الدائري.

كلا الحدثين لهما الخصائص الإضافية التالية:

  • direction: الاتجاه الذي تتحرك فيه دائرة الصور (إما "left"أو "right").
  • relatedTarget: عنصر DOM الذي يتم وضعه في مكانه كعنصر نشط.

يتم إطلاق جميع أحداث الرف الدائري على الرف الدائري نفسه (على سبيل المثال ، في <div class="carousel">).

نوع الحدث وصف
منزلق. bs. كاروسيل يتم تشغيل هذا الحدث فورًا عند slideاستدعاء طريقة المثيل.
slid.bs. كاروسيل يتم تشغيل هذا الحدث عندما يكمل العرض الدائري انتقال الشريحة الخاص به.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

الملصق affix.js

مثال

position: fixed;يتم التبديل بين تشغيل وإيقاف المكوِّن الإضافي ، مما يؤدي إلى محاكاة التأثير الموجود في position: sticky;. يعد التنقل الفرعي الموجود على اليمين عرضًا توضيحيًا مباشرًا للملحق الإضافي.


إستعمال

استخدم الملحق الإضافي عبر سمات البيانات أو يدويًا باستخدام JavaScript الخاص بك. في كلتا الحالتين ، يجب عليك توفير CSS لتحديد موضع وعرض المحتوى الذي تم إلصاقه.

ملاحظة: لا تستخدم المكوِّن الإضافي الملحق على عنصر مضمن في عنصر تم وضعه نسبيًا ، مثل العمود المسحوب أو المدفوع ، بسبب خطأ في عرض Safari .

تحديد المواقع عبر CSS

يبدل الملحق الإضافي بين ثلاث فئات ، يمثل كل منها حالة معينة: .affixو .affix-topو .affix-bottom. يجب عليك توفير الأنماط ، باستثناء position: fixed;on .affix، لهذه الفئات بنفسك (مستقلة عن هذا المكون الإضافي) للتعامل مع المواضع الفعلية.

إليك كيفية عمل ملحق اللاحقة:

  1. للبدء ، يضيف المكون الإضافي .affix-topللإشارة إلى أن العنصر في أعلى موضع له. في هذه المرحلة ، لا يلزم تحديد موضع CSS.
  2. يجب أن يؤدي التمرير إلى ما بعد العنصر الذي تريد إلصاقه إلى تشغيل عملية التثبيت الفعلية. هذا هو المكان الذي .affixيستبدله .affix-topويعين position: fixed;(يتم توفيره بواسطة CSS الخاص بـ Bootstrap).
  3. إذا تم تحديد الإزاحة السفلية ، فيجب استبدالها بالتمرير إلى .affixالماضي .affix-bottom. نظرًا لأن عمليات الإزاحة اختيارية ، فإن الإعداد يتطلب منك تعيين CSS المناسب. في هذه الحالة ، أضف position: absolute;عند الضرورة. يستخدم المكون الإضافي سمة البيانات أو خيار JavaScript لتحديد مكان وضع العنصر من هناك.

اتبع الخطوات المذكورة أعلاه لتعيين CSS لأي من خيارات الاستخدام أدناه.

عبر سمات البيانات

لإضافة سلوك لصق لأي عنصر بسهولة ، ما عليك سوى إضافة data-spy="affix"العنصر الذي تريد التجسس عليه. استخدم الإزاحات لتحديد وقت تبديل تثبيت عنصر.

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

عبر JavaScript

استدعاء الملحق الإضافي عبر JavaScript:

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-، كما في data-offset-top="200".

اسم يكتب إفتراضي وصف
عوض رقم | وظيفة | هدف 10 بكسل للإزاحة من الشاشة عند حساب موضع التمرير. إذا تم توفير رقم واحد ، فسيتم تطبيق الإزاحة في كلا الاتجاهين العلوي والسفلي. لتوفير إزاحة فريدة وسفلية وأعلى ، ما عليك سوى توفير كائن offset: { top: 10 }أو offset: { top: 10, bottom: 5 }. استخدم دالة عندما تريد حساب الإزاحة ديناميكيًا.
استهداف المحدد | عقدة | عنصر jQuery windowالكائن _ يحدد العنصر المستهدف من اللاحقة.

طُرق

.affix(options)

ينشط المحتوى الخاص بك كمحتوى مثبت. يقبل الخيارات الاختيارية object.

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

يعيد حساب حالة اللصق بناءً على أبعاد العناصر ذات الصلة وموضعها وموضع التمرير. تتم إضافة .affix، .affix-topو ، .affix-bottomوالفئات إلى المحتوى الملصق أو إزالتها منه وفقًا للحالة الجديدة. يجب استدعاء هذه الطريقة كلما تم تغيير أبعاد المحتوى الملصق أو العنصر الهدف ، لضمان الوضع الصحيح للمحتوى الملصق.

$('#myAffix').affix('checkPosition')

الأحداث

يكشف ملحق Bootstrap الإضافي عن بعض الأحداث للتثبيت في وظيفة الملحقة.

نوع الحدث وصف
الملحق باء يتم تشغيل هذا الحدث مباشرة قبل لصق العنصر.
الملصقة. bs.affix يتم تشغيل هذا الحدث بعد لصق العنصر.
أعلى الملصق bs.affix يتم تشغيل هذا الحدث مباشرة قبل أن يتم لصق العنصر في الأعلى.
الملصقة أعلى. bs.affix يتم تشغيل هذا الحدث بعد تثبيت العنصر في الأعلى.
الملحق السفلي يتم تشغيل هذا الحدث مباشرة قبل أن يتم لصق العنصر في الأسفل.
الملصقة أسفل. bs.affix يتم تشغيل هذا الحدث بعد لصق العنصر في الأسفل.