جافا سكريبت لـ Bootstrap

اجعل مكونات Bootstrap تنبض بالحياة - الآن مع 12 ملحق jQuery مخصصًا .

وسائط

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

هبوط قطرة

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

Scrollspy

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

علامات تبويب قابلة للتبديل

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

تلميحات

لقطة جديدة على المكون الإضافي jQuery Tipsy ، لا تعتمد تلميحات الأدوات على الصور - فهي تستخدم CSS3 للرسوم المتحركة وسمات البيانات لتخزين العنوان المحلي.

المنبوذين *

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

* يتطلب تضمين تلميحات الأدوات

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

المكون الإضافي للتنبيه عبارة عن فئة صغيرة لإضافة وظائف قريبة إلى التنبيهات.

أزرار

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

انهيار

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

دائري

قم بإنشاء جولة مرح لأي محتوى ترغب في تقديم عرض شرائح تفاعلي للمحتوى.

Typeahead

مكون إضافي أساسي وسهل الامتداد لإنشاء رؤوس كتابة أنيقة بسرعة مع إدخال أي نص في النموذج.

انتقالات *

للحصول على تأثيرات انتقال بسيطة ، قم بتضمين bootstrap-transfer.js مرة واحدة للانزلاق في أشكال أو تتلاشى التنبيهات.

* مطلوب للرسوم المتحركة في المكونات الإضافية

انتباه! تتطلب جميع ملحقات جافا سكريبت أحدث إصدار من jQuery.

حول الوسائط

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

تحميل الملف

مثال ثابت

أدناه هو عرض ثابت مشروط.

عرض حي

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

إطلاق نموذج تجريبي

باستخدام bootstrap-modal

استدعاء الوسائط عبر جافا سكريبت:

  1. $ ( "#myModal" ). مشروط ( خيارات )

خيارات

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

وضع علامة على

يمكنك تنشيط الوسائط على صفحتك بسهولة دون الحاجة إلى كتابة سطر واحد من جافا سكريبت. فقط قم بتعيين data-toggle="modal"عنصر تحكم مع data-target="#foo"أو href="#foo"الذي يتوافق مع معرف عنصر مشروط ، وعند النقر فوقه ، سيتم تشغيل النموذج الخاص بك.

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

  1. <a class = "btn" data-toggle = "modal" href = "#myModal"> Launch Modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-رفض = "modal" > × </button>
  4. <h3> رأس مشروط </ h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> جسد واحد جميل ... </ p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal"> إغلاق </a> _
  11. <a href = "#" class = "btn btn-primary"> حفظ التغييرات </a>
  12. </div>
  13. </div>
انتباه! إذا كنت تريد أن يتم تحريك الوسائط الخاصة بك للداخل والخارج ، فما عليك سوى إضافة .fadeفئة إلى .modalالعنصر (راجع العرض التوضيحي لرؤية هذا أثناء العمل) وقم بتضمين bootstrap-transfer.js.

طُرق

.modal (خيارات)

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

  1. $ ( "#myModal" ). مشروط ({
  2. لوحة المفاتيح : خطأ
  3. })

.modal ("تبديل")

يبدل مشروط يدويًا.

  1. $ ( "#myModal" ). مشروط ( "تبديل" )

.modal ("show")

يفتح مشروط يدويا.

  1. $ ( "#myModal" ). مشروط ( "عرض" )

.modal ("إخفاء")

يدويا يخفي مشروط.

  1. $ ( "#myModal" ). مشروط ( "إخفاء" )

الأحداث

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

حدث وصف
تبين يتم تشغيل هذا الحدث فورًا عند showاستدعاء أسلوب المثيل.
مبين يتم تشغيل هذا الحدث عندما يكون النموذج مرئيًا للمستخدم (سينتظر حتى تكتمل انتقالات css).
يخفي يتم تشغيل هذا الحدث فورًا عند hideاستدعاء أسلوب المثيل.
مختفي يتم تشغيل هذا الحدث عند انتهاء إخفاء النموذج عن المستخدم (سينتظر حتى تكتمل انتقالات css).
  1. $ ( "#myModal" ). on ( 'hidden' ، function () {
  2. // قم بعمل ما…
  3. })

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

تحميل الملف

مثال على شريط التنقل مع scrollspy

قم بالتمرير إلى المنطقة أدناه وشاهد تحديث الملاحة. سيتم أيضًا تمييز العناصر الفرعية المنسدلة. جربها!

@سمين

طماق إعلانية ، Keytar ، brunch id art party dolor labore. Pitchfork yr enim lo-fi قبل بيعها بالكامل. حقوق دراجة Tumblr من المزرعة إلى المائدة مهما كانت. كارديغان كوفية كارليس برسمة أنيم. كشك تصوير فيليت سيتان مكسويني 3 وولف مون إيرور. سترة كوسبي lomo jean shorts ، williamsburg hoodie minim qui ربما لم تسمع بها على الأرجح وصندوق الائتمان كارديجان culpa biiodiesel 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 المفارقة ، القطط الرعدية التي ربما لم تسمع بها من المحتمل أن تكون ذات قلنسوة خالية من الغلوتين. لابور إيليت بلاس قبل بيعها بالكامل ، تيري ريتشاردسون برويدنت برانش نيسكون كويس كنزة كوسبي بارياتور كوفية أوت هيلفيتيكا حرفي. كارديجان كرافت بيرة seitan جاهز فيليت. VHS chambray labouris tempor veniam. الرسوم المتحركة mollit minim Goods ullamco thundercats.


باستخدام bootstrap-scrollspy.js

استدعاء scrollspy عبر جافا سكريبت:

  1. $ ( "#navbar" ). scrollspy ()

وضع علامة على

لإضافة سلوك التمرير بسهولة إلى شريط التنقل العلوي ، ما عليك سوى إضافة data-spy="scroll"العنصر الذي تريد التجسس عليه (غالبًا ما يكون هذا هو الجسم).

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

طُرق

.scrollspy ("تحديث")

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

  1. $ ( '[data-spy = "scroll"]' ). كل ( وظيفة () {
  2. var $ spy = $ ( this ). scrollspy ( "تحديث" )
  3. }) ؛

خيارات

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

الأحداث

حدث وصف
تفعيل يتم تشغيل هذا الحدث عندما يتم تنشيط عنصر جديد بواسطة scrollspy.

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

تحميل الملف

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

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

الدنيم الخام ربما لم تسمع به من سراويل الجينز أوستن. 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.


استخدام bootstrap-tab.js

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

  1. $ ( '#myTab a' ). انقر ( الوظيفة ( هـ ) {
  2. ه . PreventionDefault () ؛
  3. $ ( هذا ). علامة التبويب ( "إظهار" ) ؛
  4. })

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

  1. $ ( '#myTab a [href = "# ملف شخصي"]' ). علامة التبويب ( "إظهار" ) ؛ // حدد علامة التبويب بالاسم
  2. $ ( '#myTab a: first' ). علامة التبويب ( "إظهار" ) ؛ // حدد علامة التبويب الأولى
  3. $ ( '#myTab a: last' ). علامة التبويب ( "إظهار" ) ؛ // حدد علامة التبويب الأخيرة
  4. $ ( '#myTab li: eq (2) a' ). علامة التبويب ( "إظهار" ) ؛ // حدد علامة التبويب الثالثة (0 مفهرسة)

وضع علامة على

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

  1. <ul class = "nav nav-tabs" >
  2. <li> <a href = "#home" data-toggle = "tab"> الصفحة الرئيسية </a> </li>
  3. <li> <a href = "#profile" data-toggle = "tab"> الملف الشخصي </a> < /li>
  4. <li> <a href = "#messages" data-toggle = "tab"> الرسائل </a> < /li>
  5. <li> <a href = "#settings" data-toggle = "tab"> الإعدادات </a> < /li>
  6. </ul>

طُرق

علامة التبويب $ ()

ينشط عنصر علامة تبويب وحاوية محتوى. يجب أن تحتوي علامة التبويب على عقدة حاوية data-targetأو تستهدفها في DOM.href

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" > <a href = "#home"> الصفحة الرئيسية </a> </li>
  3. <li> <a href = "#profile"> الملف الشخصي </a> < /li>
  4. <li> <a href = "#messages"> الرسائل </a> < /li>
  5. <li> <a href = "#settings"> الإعدادات </a> < /li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( الوظيفة () {
  17. $ ( '#myTab a: last' ). علامة التبويب ( "إظهار" ) ؛
  18. })
  19. </script>

الأحداث

حدث وصف
تبين يتم تشغيل هذا الحدث في علامة التبويب ، ولكن قبل ظهور علامة التبويب الجديدة. استخدم event.targetو event.relatedTargetلاستهداف علامة التبويب النشطة وعلامة التبويب النشطة السابقة (إذا كانت متوفرة) على التوالي.
مبين يتم تشغيل هذا الحدث في علامة التبويب بعد عرض علامة التبويب. استخدم event.targetو event.relatedTargetلاستهداف علامة التبويب النشطة وعلامة التبويب النشطة السابقة (إذا كانت متوفرة) على التوالي.
  1. $ ( 'a [data-toggle = "tab"]' ). تشغيل ( "معروضة" ، الوظيفة ( هـ ) {
  2. ه . الهدف // علامة التبويب المنشط
  3. ه . relatedTarget // علامة التبويب السابقة
  4. })

حول تلميحات الأدوات

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

تحميل الملف

مثال على استخدام تلميحات الأدوات

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

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


استخدام bootstrap-tooltip.js

تشغيل تلميح الأداة عبر جافا سكريبت:

  1. $ ( "# مثال" ). تلميح الأدوات ( خيارات )

خيارات

اسم يكتب إفتراضي وصف
الرسوم المتحركة قيمة منطقية حقيقي تطبيق انتقال تلاشي css إلى تلميح الأداة
تحديد مستوى سلسلة | وظيفة 'أعلى' كيفية وضع تلميح - أعلى | أسفل | غادر | حقا
محدد سلسلة خاطئة إذا تم توفير محدد ، فسيتم تفويض كائنات تلميح الأدوات إلى الأهداف المحددة.
لقب سلسلة | وظيفة " قيمة العنوان الافتراضية إذا كانت علامة `العنوان` غير موجودة
اثار سلسلة 'يحوم' كيف يتم تشغيل التلميح - التمرير فوق | التركيز | كتيب
تأخير رقم | هدف 0

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

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

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

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

وضع علامة على

لأسباب تتعلق بالأداء ، يتم الاشتراك في كل من Tooltip و Popover data-apis. إذا كنت ترغب في استخدامهما ، فما عليك سوى تحديد خيار محدد.

  1. <a href = "#" rel = "tooltip" title = "first tooltip"> مرر الماوس فوقي </a>

طُرق

$ (). تلميح الأدوات (خيارات)

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

.tooltip ("show")

يكشف عن تلميح أداة عنصر.

  1. $ ( "# عنصر" ). تلميح أداة ( "عرض" )

.tooltip ("إخفاء")

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

  1. $ ( "# عنصر" ). تلميح الأدوات ( "إخفاء" )

.tooltip ("تبديل")

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

  1. $ ( "# عنصر" ). تلميح الأدوات ( "تبديل" )

حول popovers

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

* يتطلب تضمين تلميح الأدوات

تحميل الملف

مثال على التمرير المنبثق

قم بالمرور فوق الزر لتشغيل النافذة المنبثقة.


استخدام bootstrap-popover.js

تفعيل النوافذ المنبثقة عبر جافا سكريبت:

  1. $ ( "# مثال" ). popover ( خيارات )

خيارات

اسم يكتب إفتراضي وصف
الرسوم المتحركة قيمة منطقية حقيقي تطبيق انتقال تلاشي css إلى تلميح الأداة
تحديد مستوى سلسلة | وظيفة 'حقا' كيفية وضع المنبثقة - الجزء العلوي | أسفل | غادر | حقا
محدد سلسلة خاطئة إذا تم توفير محدد ، فسيتم تفويض كائنات تلميح الأدوات إلى الأهداف المحددة
اثار سلسلة 'يحوم' كيف يتم تشغيل التلميح - التمرير فوق | التركيز | كتيب
لقب سلسلة | وظيفة " قيمة العنوان الافتراضية إذا كانت سمة `العنوان` غير موجودة
المحتوى سلسلة | وظيفة " قيمة المحتوى الافتراضية إذا كانت السمة "data-content" غير موجودة
تأخير رقم | هدف 0

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

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

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

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

وضع علامة على

لأسباب تتعلق بالأداء ، يتم الاشتراك في كل من Tooltip و Popover data-apis. إذا كنت ترغب في استخدامهما ، فما عليك سوى تحديد خيار محدد.

طُرق

$ (). popover (خيارات)

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

.popover ("show")

يكشف عن العناصر المنبثقة.

  1. $ ( "# عنصر" ). popover ( "show" )

.popover ("إخفاء")

يخفي العناصر المنبثقة.

  1. $ ( "# عنصر" ). popover ( "إخفاء" )

.popover ("تبديل")

يبدل العناصر المنبثقة.

  1. $ ( "# عنصر" ). popover ( "تبديل" )

حول التنبيهات

المكون الإضافي للتنبيه عبارة عن فئة صغيرة لإضافة وظائف قريبة إلى التنبيهات.

تحميل

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

يعمل المكوِّن الإضافي للتنبيهات على رسائل التنبيه العادية ويحظر الرسائل.

حبوبا المقدس! من الأفضل أن تتحقق من نفسك ، فأنت لا تبدو جيدًا جدًا.

أوه المفاجئة! لديك خطأ!

غير هذا وذاك وحاول مرة أخرى. Duis mollis، est noncommo luctus، nisi erat porttitor ligula، eget lacinia odio sem nec elit. Cras mattis consectetur Purus الجلوس amet fermentum.

قم بهذا الإجراء أو افعل هذا


استخدام bootstrap-alert.js

تفعيل رفض تنبيه عبر جافا سكريبت:

  1. $ ( ".alert" ). تنبيه ()

وضع علامة على

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

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

طُرق

$ (). alert ()

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

.alert ("close")

يغلق تنبيهًا.

  1. $ ( ".alert" ). تنبيه ( "قريب" )

الأحداث

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

حدث وصف
أغلق يتم تشغيل هذا الحدث فورًا عند closeاستدعاء أسلوب المثيل.
مغلق يتم تشغيل هذا الحدث عند إغلاق التنبيه (سينتظر اكتمال انتقالات css).
  1. $ ( "# تنبيهي" ). ربط ( "مغلق" ، وظيفة () {
  2. // قم بعمل ما…
  3. })

حول

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

تحميل الملف

يستخدم المثال

استخدم المكوّن الإضافي للأزرار للحالات والتبديل.

جليل
تبديل واحد
خانة اختيار
مذياع

استخدام bootstrap-button.js

تمكين الأزرار عبر جافا سكريبت:

  1. $ ( ".nav-tabs" ). زر ()

وضع علامة على

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

  1. <! - أضف data-toggle = "button" لتنشيط التبديل على زر واحد ->
  2. <button class = "btn" data-toggle = "button" > تبديل فردي </ زر>
  3.  
  4. <! - إضافة data-toggle = "أزرار-checkbox" لتبديل نمط مربعات الاختيار على btn-group ->
  5. <div class = "btn-group" data-toggle = "keys-checkbox" >
  6. <button class = "btn" > يسار </ زر>
  7. <button class = "btn" > الأوسط </ زر>
  8. <button class = "btn" > يمين </ زر>
  9. </div>
  10.  
  11. <! - إضافة data-toggle = "أزرار-radio" لتبديل نمط الراديو على btn-group ->
  12. <div class = "btn-group" data-toggle = "keys-radio" >
  13. <button class = "btn" > يسار </ زر>
  14. <button class = "btn" > الأوسط </ زر>
  15. <button class = "btn" > يمين </ زر>
  16. </div>

طُرق

$ (). زر ("تبديل")

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

انتباه! يمكنك تمكين التبديل التلقائي لزر باستخدام data-toggleالسمة.
  1. <button class = "btn" data-toggle = "button" > </button>

زر $ (). ("تحميل")

يضبط حالة الزر على التحميل - يعطل الزر ويتبادل النص لتحميل النص. يجب تحديد نص التحميل على عنصر الزر باستخدام سمة البيانات data-loading-text.

  1. <button class = "btn" data-loading-text = "تحميل الأشياء ..." > ... </button>
انتباه! يستمر Firefox في حالة التعطيل عبر عمليات تحميل الصفحة . الحل لهذا هو استخدام autocomplete="off".

$ (). زر ("إعادة تعيين")

إعادة تعيين حالة الزر - تبديل النص بالنص الأصلي.

$ (). زر (سلسلة نصية)

إعادة تعيين حالة الزر - لمبادلة النص بأي حالة نصية محددة بالبيانات.

  1. <button class = "btn" data-complete-text = "finish!" > ... </button>
  2. <script>
  3. $ ( ".btn" ). زر ( "مكتمل" )
  4. </script>

حول

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

تحميل الملف

* يتطلب تضمين البرنامج المساعد Transitions.

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

باستخدام ملحق الطي ، قمنا ببناء أداة نمط أكورديون بسيطة:

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 المستدام.

استخدام bootstrap-collapse.js

التمكين عبر جافا سكريبت:

  1. $ ( ".collapse" ). انهيار ()

خيارات

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

وضع علامة على

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

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. بسيطة قابلة للطي
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
انتباه! لإضافة إدارة مجموعة تشبه الأكورديون إلى عنصر تحكم قابل للطي ، أضف سمة البيانات data-parent="#selector". الرجوع إلى العرض التوضيحي لرؤية هذا في العمل.

طُرق

.collapse (خيارات)

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

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

.collapse('toggle')

Toggles a collapsible element to shown or hidden.

.collapse('show')

Shows a collapsible element.

.collapse('hide')

Hides a collapsible element.

Events

Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

Event Description
show This event fires immediately when the show instance method is called.
shown This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).
hide This event is fired immediately when the hide method has been called.
hidden This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).
  1. $('#myCollapsible').on('hidden', function () {
  2. // do something…
  3. })

About

A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

Download file

Example

Start typing in the field below to show the typeahead results.


Using bootstrap-typeahead.js

Call the typeahead via javascript:

  1. $('.typeahead').typeahead()

Options

Name type default description
source array [ ] The data source to query against.
items number 8 The max number of items to display in the dropdown.
matcher function case insensitive The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.
sorter function exact match,
case sensitive,
case insensitive
Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.
highlighter function highlights all default matches Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.

Markup

Add data attributes to register an element with typeahead functionality.

  1. <input type="text" data-provide="typeahead">

Methods

.typeahead(options)

Initializes an input with a typeahead.