زر التمهيد (زر) القطعة
زر (زر) في زر التمهيد قدم في الفصل. وهناك زر (زر) في المكونات، يمكنك إضافة بعض الدول التفاعلية، مثل زر التحكم أو إنشاء مجموعات من أزرار لمكونات أخرى (مثل أشرطة الأدوات).
إذا كنت ترغب في الرجوع إلى الميزات الفردية في المكونات، تحتاج إلى مرجعbutton.js.أو كما التمهيد المساعد لمحة ذكر الفصل، يمكنك الرجوع إلىbootstrap.jsأو نسخة مضغوطة منbootstrap.min.js.
وضع تحميل
إضافة إلى حالة الحمل من زر، ببساطة إضافة عنصرزر تحميل والنص بيانات = "تحميل ..." كما خصائصه يمكن، كما هو مبين في الأمثلة التالية:
أمثلة
<زر معرف = "BTN الدهون" الطبقة = "BTN BTN الابتدائي" التحميل البيانات النص = "تحميل ..."
اكتب = "زر"> حالة تحميل </ زر>
<script> $ (وظيفة () {$ ( ". BTN"). انقر (وظيفة () {$ (هذا) .button ( 'تحميل'). التأخير (1000) .queue (وظيفة () {// $ ( هذا) .button ( 'إعادة') ؛})؛})؛})؛ </ script>
وكانت النتائج على النحو التالي:
مفتاح واحد
لتفعيل مفاتيح زر واحدة (أي تغيير يتم الضغط على الحالة الطبيعية للزر الدولة والعكس بالعكس)، فقطإضافة تبديل البيانات = "زر" عنصر زر كما خصائصه يمكن، كما هو مبين في الأمثلة التالية:
أمثلة
<زر اكتب = "زر" الطبقة = "BTN BTN الابتدائي"
، تبديل البيانات = "زر"> تبديل واحد </ زر>
وكانت النتائج على النحو التالي:
مربع (مربع)
يمكنك إنشاء مجموعة خانة الاختيار، وإضافة البيانات ويعزوبيانات تبديل لBTN-مجموعة= "أزرار" لإضافة مجموعة مربع التبديل.
أمثلة
<div الطبقة = "BTN-مجموعة" بيانات تبديل = "أزرار">
<تسمية الطبقة = "BTN BTN الابتدائية" >
<الإدخال اكتب = "مربع"> الخيار 1 </ التسمية>
<تسمية الطبقة = "BTN BTN الابتدائية" >
<الإدخال اكتب = "مربع"> الخيار 2 </ التسمية>
<تسمية الطبقة = "BTN BTN الابتدائية" >
<الإدخال اكتب = "مربع"> الخيار 3 </ التسمية>
</ div>
وكانت النتائج على النحو التالي:
زر الراديو (راديو)
وبالمثل، يمكنك إنشاء مجموعة الاختيار، وذلك بإضافة السمة البياناتبيانات تبديل = "أزرار" لإضافة BTN-مجموعةتبديل مجموعة زر الراديو.
أمثلة
<div الطبقة = "BTN-مجموعة" بيانات تبديل = "أزرار">
<تسمية الطبقة = "BTN BTN الابتدائية" >
<الإدخال نوع = "الراديو" اسم = "خيارات" معرف = "OPTION1"> الخيار 1 </ التسمية>
<تسمية الطبقة = "BTN BTN الابتدائية" >
<الإدخال نوع = "الراديو" اسم = "خيارات" معرف = "OPTION2"> الخيار 2 </ التسمية>
<تسمية الطبقة = "BTN BTN الابتدائية" >
<الإدخال نوع = "الراديو" اسم = "خيارات" معرف = "option3"> الخيار 3 </ التسمية>
</ div>
وكانت النتائج على النحو التالي:
استعمال
يمكنك تمكين زر (زر) سد العجزمن خلال تفعيل جافا، على النحو التالي:
$ ( '. BTN). زر ()
خيارات
لا توجد خيارات.
الطريق
وفيما يلي بعض من أزرار (زر) المكونات بطرق مفيدة:
| 方法 | 描述 | 实例 |
|---|
| button('toggle') | 切换按压状态。赋予按钮被激活的外观。您可以使用data-toggle属性启用按钮的自动切换。 |
$().button('toggle') |
| .button('loading') | 当加载时，按钮是禁用的，且文本变为 button 元素的data-loading-text属性的值。 |
$().button('loading') |
| .button('reset') | 重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。 |
$().button('reset') |
| .button(string) | 该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。 |
$().button(string) |
أمثلة
يوضح المثال التالي استخدام الأساليب المذكورة أعلاه:
أمثلة
<H2> انقر على كل زر لمعرفة تأثير طريقة </ H2>
<H4> تجريبي .button ( 'تبديل') طريقة </ H4>
<div معرف = "myButtons1" الطبقة = "BS-مثال">
<زر اكتب = "زر" الطبقة = "BTN BTN الابتدائية" > الأصلي </ زر>
</ div>
<H4> تجريبي .button ( 'تحميل') طريقة </ H4>
<div معرف = "myButtons2" الطبقة = "BS-مثال">
<زر اكتب = "زر" الطبقة = "BTN BTN الابتدائي"
التحميل النص بيانات = "تحميل ..."> الأصلي </ زر>
</ div>
<H4> تجريبي .button ( 'إعادة') طريقة </ H4>
<div معرف = "myButtons3" الطبقة = "BS-مثال">
<زر اكتب = "زر" الطبقة = "BTN BTN الابتدائي"
التحميل النص بيانات = "تحميل ..."> الأصلي </ زر>
</ div>
<H4> تجريبي .button (سلسلة) طريقة </ H4>
<زر اكتب = "زر" الطبقة = "BTN BTN الابتدائي" معرف = "myButton4"
، كامل النص بيانات = "تحميل الانتهاء"> انقر I </ زر>
<script>
$ (وظيفة () {$ ( "# MyButtons1 .btn" ) فوق (وظيفة () {$ (هذا الزر) ( 'تبديل')؛.})؛.})؛ $ (وظيفة () {$ ( "# MyButtons2 .btn" ). انقر (وظيفة () {$ (هذا). زر ( 'تحميل'). التأخير (1000). قائمة انتظار (وظيفة () {
})؛})؛}) ؛ $ (وظيفة () {$ ( "# MyButtons3 .btn" ). انقر (وظيفة () {$ (هذا). زر ( 'تحميل'). التأخير (1000). قائمة انتظار (وظيفة () {$ (هذا) زر ( ' إعادة ضبط')؛.})؛})؛})؛ $ (وظيفة () {$ ( "# MyButton4") . انقر (وظيفة () {$ (هذا). زر ( 'تحميل'). التأخير (1000). قائمة انتظار (وظيفة () {$ (هذا) زر (. 'الكامل')؛})؛})؛})؛
</ script>
وكانت النتائج على النحو التالي:
