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

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

وسائط

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

هبوط قطرة

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

Scrollspy

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

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

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

تلميحات

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

المنبوذون *

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

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

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

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

أزرار

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

انهيار

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

دائري

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

Typeahead

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

انتقالات *

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

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

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

حول الوسائط

تحميل الملف

مثال ثابت

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

عرض حي

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

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

باستخدام bootstrap-modal

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

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

خيارات

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

وضع علامة على

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

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

<a class = "btn" data-toggle = "modal" href = "#myModal"> Launch Modal </a>

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    <a class = "close" data-dismiss = "modal"> × </a> _  
    <h3> رأس مشروط </ h3>
  </div>
  <div class = "modal-body" > 
    <p> جسد واحد جميل ... </ p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn"> إغلاق </a> _  
    <a href = "#" class = "btn btn-primary"> حفظ التغييرات </a>  
  </div>
</div>

انتباه! إذا كنت تريد أن يتم تحريك الوسائط الخاصة بك للداخل والخارج ، فما عليك سوى إضافة .fadeفئة إلى .modalالعنصر (راجع العرض التوضيحي لرؤية هذا أثناء العمل) وقم بتضمين bootstrap-transfer.js.

طُرق

.modal (خيارات)

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

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

.modal ("تبديل")

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

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

.modal ("show")

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

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

.modal ("إخفاء")

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

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

الأحداث

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

حدث	وصف
تبين	يتم تشغيل هذا الحدث فورًا عند `show`استدعاء أسلوب المثيل.
مبين	يتم تشغيل هذا الحدث عندما يكون النموذج مرئيًا للمستخدم (سينتظر حتى تكتمل انتقالات css).
يخفي	يتم تشغيل هذا الحدث فورًا عند `hide`استدعاء أسلوب المثيل.
مختفي	يتم تشغيل هذا الحدث عند انتهاء إخفاء النموذج عن المستخدم (سينتظر حتى تكتمل انتقالات css).

$ ( "#myModal" ). on ( 'hidden' ، function () {   
  // قم بعمل ما…
})

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

تحميل الملف

أمثلة

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

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

استدعاء القوائم المنسدلة عبر جافا سكريبت:

$ ( '.dropdown-toggle' ). قائمة منسدلة ()

وضع علامة على

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

انتباه! يمكنك اختياريًا استهداف قائمة منسدلة محددة باستخدام data-target="#fat"أو href="#fat".

<ul class = "nav nav-pills" > 
  <li class = "active" > <a href = "#"> رابط عادي </a> < /li>  
  <li class = "المنسدلة" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1"> _   
      اسقاط
      <b class = "caret" > </b> 
    </a>
    <ul class = "القائمة المنسدلة" > 
      <li> <a href = "#"> الإجراء </a> < /li> 
      <li> <a href = "#"> إجراء آخر </a> </li> 
      <li> <a href = "#"> شيء آخر هنا </a> </li> 
      <li class = "divider" > </li> 
      <li> <a href = "#"> رابط منفصل </a> < /li> 
    </ul>
  </li>
  ...
</ul>

طُرق

$ (). القائمة المنسدلة ()

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

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

تحميل الملف

مثال على شريط التنقل مع 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-scrollspy.js

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

$ ( "#navbar" ). scrollspy ()

وضع علامة على

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

<body data-spy = "scroll" > ... </body>

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

خيارات

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

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

تحميل الملف

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

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

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

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust Fund Seitan Letterpress ، Keytar Raw Denim Keffiyeh Etsy Art Party قبل أن يباعوا سترة كوزبي المجانية الخالية من الغلوتين من الحبار الخالي من الغلوتين. فاني باك بورتلاند سيتان DIY ، حفلة فنية لوكافور وولف كليش هاي لايف إيكو بارك أوستن. Cred vinyl keffiyeh DIY salvia PBR، banh mi قبل أن يبيعوا سترة VHS Viral locavore cosby من المزرعة إلى المائدة. لومو الذئب الفيروسي ، شارب جاهز للقطط الرعدية كوفية حرفة بيرة مرفا أخلاقية. وولف سالفيا فريغان ، كوفية سارترية إيكو بارك نباتي.

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

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

$ ( "#myTab" ). علامة التبويب ( "عرض" )

وضع علامة على

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

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

طُرق

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

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

<ul class = "nav nav-tabs" > 
  <li class = "active" > <a href = "#home"> الصفحة الرئيسية </a> </li>  
  <li> <a href = "#profile"> الملف الشخصي </a> < /li> 
  <li> <a href = "#messages"> الرسائل </a> < /li> 
  <li> <a href = "#settings"> الإعدادات </a> < /li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( الوظيفة () {  
    $ ( '.tabs a: last' ). علامة التبويب ( "عرض" )
  })
</script>

الأحداث

حدث	وصف
تبين	يتم تشغيل هذا الحدث في علامة التبويب ، ولكن قبل ظهور علامة التبويب الجديدة. استخدم `event.target`و `event.relatedTarget`لاستهداف علامة التبويب النشطة وعلامة التبويب النشطة السابقة (إذا كانت متوفرة) على التوالي.
مبين	يتم تشغيل هذا الحدث في علامة التبويب بعد عرض علامة التبويب. استخدم `event.target`و `event.relatedTarget`لاستهداف علامة التبويب النشطة وعلامة التبويب النشطة السابقة (إذا كانت متوفرة) على التوالي.

$ ( 'a [data-toggle = "tab"]' ). تشغيل ( "معروضة" ، الوظيفة ( هـ ) {   
  ه . الهدف // علامة التبويب المنشط
  ه . relatedTarget // علامة التبويب السابقة
})

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

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

تحميل الملف

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

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

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

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

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

خيارات

اسم	يكتب	إفتراضي	وصف
الرسوم المتحركة	قيمة منطقية	حقيقي	تطبيق انتقال تلاشي css إلى تلميح الأداة
تحديد مستوى	سلسلة \| وظيفة	'أعلى'	كيفية وضع تلميح - أعلى \| أسفل \| غادر \| حقا
محدد	سلسلة	خاطئة	إذا تم توفير محدد ، فسيتم تفويض كائنات تلميح الأدوات إلى الأهداف المحددة.
لقب	سلسلة \| وظيفة	"	قيمة العنوان الافتراضية إذا كانت علامة `العنوان` غير موجودة
اثار	سلسلة	'يحوم'	كيف يتم تشغيل التلميح - التمرير فوق \| التركيز \| كتيب
تأخير	رقم \| هدف	0	تأخير إظهار وإخفاء تلميح الأداة (مللي ثانية) إذا تم توفير رقم ، فسيتم تطبيق التأخير على كل من الإخفاء / العرض هيكل الكائن هو:`delay: { show: 500, hide: 100 }`

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

وضع علامة على

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

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

طُرق

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

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

.tooltip ("show")

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

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

.tooltip ("إخفاء")

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

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

.tooltip ("تبديل")

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

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

حول popovers

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

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

تحميل الملف

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

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

تحوم من أجل popover

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

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

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

خيارات

اسم	يكتب	إفتراضي	وصف
الرسوم المتحركة	قيمة منطقية	حقيقي	تطبيق انتقال تلاشي css إلى تلميح الأداة
تحديد مستوى	سلسلة \| وظيفة	'حقا'	كيفية وضع المنبثقة - أعلى \| أسفل \| غادر \| حقا
محدد	سلسلة	خاطئة	إذا تم توفير محدد ، فسيتم تفويض كائنات تلميح الأدوات إلى الأهداف المحددة
اثار	سلسلة	'يحوم'	كيف يتم تشغيل التلميح - التمرير فوق \| التركيز \| كتيب
لقب	سلسلة \| وظيفة	"	قيمة العنوان الافتراضية إذا كانت سمة `العنوان` غير موجودة
المحتوى	سلسلة \| وظيفة	"	قيمة المحتوى الافتراضية إذا كانت السمة "data-content" غير موجودة
تأخير	رقم \| هدف	0	تأخير إظهار وإخفاء النافذة المنبثقة (بالمللي ثانية) إذا تم توفير رقم ، فسيتم تطبيق التأخير على كل من الإخفاء / العرض هيكل الكائن هو:`delay: { show: 500, hide: 100 }`

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

وضع علامة على

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

طُرق

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

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

.popover ("show")

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

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

.popover ("إخفاء")

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

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

.popover ("تبديل")

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

$ ( "# عنصر" ). 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

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

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

وضع علامة على

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

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

طُرق

$ (). alert ()

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

.alert ("close")

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

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

الأحداث

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

حدث	وصف
أغلق	يتم تشغيل هذا الحدث فورًا عند `close`استدعاء أسلوب المثيل.
مغلق	يتم تشغيل هذا الحدث عند إغلاق التنبيه (سينتظر اكتمال انتقالات css).

$ ( "# تنبيهي" ). ربط ( "مغلق" ، وظيفة () {   
  // قم بعمل ما…
})

حول

تحميل الملف

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

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

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

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

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

$ ( ".tabs" ). زر ()

وضع علامة على

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

<! - أضف data-toggle = "button" لتنشيط التبديل على زر واحد ->
<button class = "btn" data-toggle = "button" > تبديل فردي </ زر>  
 
<! - إضافة data-toggle = "keys-checkbox" لتبديل نمط مربع الاختيار في btn-group ->
<div class = "btn-group" data-toggle = "keys-checkbox" >  
  <button class = "btn" > يسار </ زر> 
  <button class = "btn" > الأوسط </ زر> 
  <button class = "btn" > يمين </ زر> 
</div>
 
<! - إضافة data-toggle = "أزرار-radio" لتبديل نمط الراديو في btn-group ->
<div class = "btn-group" data-toggle = "keys-radio" >  
  <button class = "btn" > يسار </ زر> 
  <button class = "btn" > الأوسط </ زر> 
  <button class = "btn" > يمين </ زر> 
</div>

طُرق

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

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

انتباه! يمكنك تمكين التبديل التلقائي لزر باستخدام data-toggleالسمة.

<button class = "btn" data-toggle = "button" > … </button>

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

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

<button class = "btn" data-loading-text = "تحميل الأشياء ..." > ... </button>

انتباه! يستمر Firefox في حالة التعطيل عبر عمليات تحميل الصفحة . الحل لهذا هو استخدام autocomplete="off".

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

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

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

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

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

حول

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

تحميل الملف

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

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

عنصر المجموعة القابل للطي # 1

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

عنصر المجموعة القابل للطي # 2

عنصر المجموعة القابل للطي # 3

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

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

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

خيارات

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

وضع علامة على

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

<button class = "btn btn-خطر" data-toggle = "collapse" data-target = "#demo" >   
  بسيطة قابلة للطي
</button>
 
<div id = "demo" class = "collapse in" > … </div>

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

طُرق

.collapse (خيارات)

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

$ ( '#myCollapsible' ). انهيار ({
  تبديل : خطأ 
})

.collapse ("تبديل")

يبدل العنصر القابل للطي إلى معروض أو مخفي.

.collapse ("عرض")

يظهر عنصرًا قابلًا للطي.

.collapse ("إخفاء")

يخفي العنصر القابل للطي.

الأحداث

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

حدث	وصف
تبين	يتم تشغيل هذا الحدث فورًا عند `show`استدعاء أسلوب المثيل.
مبين	يتم تشغيل هذا الحدث عندما يصبح عنصر التصغير مرئيًا للمستخدم (سينتظر حتى تكتمل انتقالات css).
يخفي	يتم تشغيل هذا الحدث فورًا عند `hide`استدعاء الأسلوب.
مختفي	يتم تشغيل هذا الحدث عند إخفاء عنصر تصغير عن المستخدم (سينتظر حتى تكتمل انتقالات css).

$ ( '#myCollapsible' ). on ( 'hidden' ، function () {   
  // قم بعمل ما…
})

حول

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

تحميل الملف

مثال دائري

مشاهدة عرض الشرائح أدناه.

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

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

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

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

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

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

‹ ›

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

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

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

$ ( ". carousel" ). دائري ()

خيارات

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

وضع علامة على

تُستخدم سمات البيانات في الضوابط السابقة والتالية. تحقق من مثال الترميز أدناه.

<div id = "myCarousel" class = "carousel" >  
  <! - عناصر الرف الدائري ->
  <div class = "carousel-inner" > 
    <div class = "active item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <! - التنقل الدائري ->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev"> & lsaquo؛ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next"> & rsaquo ؛ </a>   
</div>

طُرق

.carousel (خيارات)

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

$ ( ". carousel" ). دائري ({
  الفاصل الزمني : 2000 
})

.carousel ("دورة")

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

.carousel ("إيقاف مؤقت")

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

.carousel (رقم)

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

.carousel ("prev")

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

.carousel ("التالي")

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

الأحداث

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

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

حول

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

تحميل الملف

مثال

ابدأ الكتابة في الحقل أدناه لإظهار نتائج الكتابة.

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

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

$ ( ".typeahead" ). نوع ()

خيارات

اسم	يكتب	إفتراضي	وصف
مصدر	مجموعة مصفوفة	[]	مصدر البيانات المراد الاستعلام عنه.
العناصر	رقم	8	الحد الأقصى لعدد العناصر المراد عرضها في القائمة المنسدلة.
المطابق	وظيفة	حالة الأحرف	الطريقة المستخدمة لتحديد ما إذا كان الاستعلام يطابق أحد العناصر. يقبل وسيطة واحدة ، على `item`أساسها يتم اختبار الاستعلام. قم بالوصول إلى الاستعلام الحالي باستخدام `this.query`. إرجاع قيمة منطقية `true`إذا كان الاستعلام مطابقًا.
فارز	وظيفة	تطابق تام ، حساس لحالة الأحرف ، غير حساس لحالة الأحرف	الطريقة المستخدمة لفرز نتائج الإكمال التلقائي. يقبل وسيطة واحدة `items`وله نطاق مثيل الكتابة. الرجوع إلى الاستعلام الحالي مع `this.query`.
قلم تمييز	وظيفة	يبرز جميع التطابقات الافتراضية	الطريقة المستخدمة لتسليط الضوء على نتائج الإكمال التلقائي. يقبل وسيطة واحدة `item`وله نطاق مثيل الكتابة. يجب أن تعود لغة تأشير النص الفائق.

وضع علامة على

أضف سمات البيانات لتسجيل عنصر بوظيفة الكتابة.

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

طُرق

.typeahead (خيارات)

يقوم بتهيئة إدخال باستخدام رأس الطباعة.

إضافات jQuery : دزينة من ملحقات Bootstrap لتبدأ بها

المنبوذون *

انتقالات *

مشروط bootstrap- modal.js

حول الوسائط

مثال ثابت

رأس مشروط

عرض حي

عنوان مشروط

نص مشروط

انبثاق في مشروط

تلميحات الأدوات في شكل

النص الفائض لإظهار شريط التمرير الاختياري

باستخدام bootstrap-modal

خيارات

وضع علامة على

طُرق

.modal (خيارات)

.modal ("تبديل")

.modal ("show")

.modal ("إخفاء")

الأحداث

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

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

أمثلة

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

وضع علامة على

طُرق

$ (). القائمة المنسدلة ()

ScrollSpy bootstrap-scrollspy.js

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

@سمين

mdo

واحد

اثنين

three

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

وضع علامة على

خيارات

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

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

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

وضع علامة على

طُرق

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

الأحداث

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

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

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

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

خيارات

وضع علامة على

طُرق

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

.tooltip ("show")

.tooltip ("إخفاء")

.tooltip ("تبديل")

Popovers bootstrap-popover.js

حول popovers

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

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

خيارات

وضع علامة على

طُرق

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

.popover ("show")

.popover ("إخفاء")

.popover ("تبديل")

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

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

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

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

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

وضع علامة على

طُرق

$ (). alert ()

.alert ("close")

الأحداث

أزرار bootstrap-button.js

حول