حول الوسائط

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

مثال ثابت

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

عرض حي

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

باستخدام bootstrap-modal

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

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

خيارات

وضع علامة على

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

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

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

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

طُرق

.modal (خيارات)

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

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

.modal ("تبديل")

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

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

.modal ("show")

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

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

.modal ("إخفاء")

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

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

الأحداث

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

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

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

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

أمثلة

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

• ارتباط منتظم
• اسقاط
  • Action
  • Another action
  • Something else here
  • Separated link
• القائمة المنسدلة 2
  • Action
  • Another action
  • Something else here
  • Separated link
• القائمة المنسدلة 3
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

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

وضع علامة على

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

<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>

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

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html"> _    
      اسقاط
      <b class = "caret" > </b> 
    </a>
    <ul class = "القائمة المنسدلة" > 
      ...
    </ul>
  </li>
</ul>

طُرق

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

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

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

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

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

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

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

$ ( "#navbar" ). scrollspy ()

وضع علامة على

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

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

طُرق

.scrollspy ("تحديث")

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

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

خيارات

الأحداث

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

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

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

• مسكن
• الملف الشخصي
• اسقاط
  • @fat
  • @mdo

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

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

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

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

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

وضع علامة على

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

<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>

طُرق

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

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

<ul class = "nav nav-tabs" id = "myTab" >  
  <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>
  $ ( الوظيفة () {  
    $ ( '#myTab a: last' ). علامة التبويب ( "إظهار" ) ؛
  })
</script>

الأحداث

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

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

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

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

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

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

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

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

خيارات

وضع علامة على

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

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

طُرق

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

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

.tooltip ("show")

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

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

.tooltip ("إخفاء")

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

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

.tooltip ("تبديل")

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

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

حول popovers

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

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

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

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

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

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

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

خيارات

وضع علامة على

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

طُرق

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

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

.popover ("show")

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

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

.popover ("إخفاء")

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

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

.popover ("تبديل")

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

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

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

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

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

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

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

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

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

وضع علامة على

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

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

طُرق

$ (). alert ()

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

.alert ("close")

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

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

الأحداث

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

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

حول

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

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

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

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

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

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

وضع علامة على

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

<! - أضف data-toggle = "button" لتنشيط التبديل على زر واحد ->
<button class = "btn" data-toggle = "button" > تبديل فردي </ زر>  
 
<! - إضافة data-toggle = "أزرار-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>

طُرق

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

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

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

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

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

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

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

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

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

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

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

حول

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

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

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

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

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

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

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

خيارات

وضع علامة على

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

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

طُرق

.collapse (خيارات)

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

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

.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.

$('#myCollapsible').on('hidden', function () {
  // do something…
})

About

A generic plugin for cycling through elements. A merry-go-round.

Example carousel

Watch the slideshow below.

First Thumbnail label

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 vehicula ut id elit.

Second Thumbnail label

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 vehicula ut id elit.

Third Thumbnail label

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 vehicula ut id elit.

‹ ›

Using bootstrap-carousel.js

Call via javascript:

$('.carousel').carousel()

Options

Markup

Data attributes are used for the previous and next conrols. Check out the example markup below.

<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <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>

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

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

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's carousel class exposes two events for hooking into carousel functionality.

About

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

Example

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

Using bootstrap-typeahead.js

Call the typeahead via javascript:

$('.typeahead').typeahead()

Options

Markup

Add data attributes to register an element with typeahead functionality.

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

Methods

.typeahead(options)

Initializes an input with a typeahead.