زر المجموعة المؤسسة
زر المجموعة المؤسسة
زر المجموعة
مؤسسة يمكن أن تخلق سلسلة من الأزرار في نفس الصف.
يمكنك استخدام <ul> عنصر وإضافة .button-group فئة لإنشاء مجموعة زر:
أمثلة
<لي> <نوع زر = " زر" الطبقة = "زر"> أبل </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> سامسونج </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> سوني </ زر> </ لى>
</ UL>
محاولة »
مجموعة أزرار عمودية
مجموعة أزرار عمودية استخدام .stack الطبقة لخلق. لاحظ أن الزر يمتد على كامل عرض العنصر الأصلي:
أمثلة
<لي> <نوع زر = " زر" الطبقة = "زر"> أبل </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> سامسونج </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> سوني </ زر> </ لى>
</ UL>
محاولة »
.stack-for-small فئة لصغر حجم الشاشة، وهناك أزرار مرتبة أفقيا يصبح المحاذاة العمودية:
أمثلة
<لي> <نوع زر = " زر" الطبقة = "زر"> أبل </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> سامسونج </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> سوني </ زر> </ لى>
</ UL>
محاولة »
مجموعة أزرار مدورة
استخدام زر مجموعة .radius و .round زر الطبقة لإضافة تدوير زوايا:
أمثلة
<لي> <نوع زر = " زر" الطبقة = "زر"> أبل </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> سامسونج </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> سوني </ زر> </ لى>
</ UL>
<الطبقة UL = "زر مجموعة جولة">
<لي> <نوع زر = " زر" الطبقة = "زر"> أبل </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> سامسونج </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> سوني </ زر> </ لى>
</ UL>
محاولة »
مجموعة زر تمديد موحد
.even-num فئة لعرض زر مجموعة زر وتوزيع موحد عبر عرض العنصر الأصلي 100٪.
الأسطوانات هو عدد الأزرار في مجموعة أزرار، 1-8:
أمثلة
<لي> <نوع زر = " زر" الطبقة = "زر"> أبل </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> سامسونج </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> سوني </ زر> </ لى>
</ UL>
<UL الطبقة = "مجموعة زر حتى 5">
<لي> <نوع زر = " زر" الطبقة = "زر"> أبل </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> سامسونج </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> سوني </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> HTC </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> هواوي </ زر> </ لى>
</ UL>
<UL الطبقة = "مجموعة زر حتى-8">
<لي> <نوع زر = " زر" الطبقة = "زر"> A </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> ب </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> C </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> D </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> E </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> F </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> ج </ زر> </ لى>
<لي> <نوع زر = " زر" الطبقة = "زر"> H </ زر> </ لى>
</ UL>
محاولة »
زر المنسدلة
زر القائمة المنسدلة يسمح للمستخدم لتحديد وضع قيمة جيدة:
أمثلة
<A أ href = "#" البيانات -dropdown = "id01" الطبقة = "button dropdown"> منسدلة زر </ A>
<! - والمنسدلة الفعلية ->
<UL معرف = البيانات "id01" -dropdown-المحتوى الطبقة = "F-المنسدلة">
<لي> <a أ href = "#"> رابط 1 </ أ> </ لى>
<لي> <a أ href = "#"> رابط 2 </ أ> </ لى>
<لي> <a أ href = "#"> رابط 3 </ أ> </ لى>
</ UL>
<! - تهيئة مؤسسة شبيبة ->
<script>
$ (الوثيقة) .ready (وظيفة () {
$ (الوثيقة) .foundation ()؛
})
</ script>
محاولة »
أمثلة تحليلية
.dropdown فئة لإنشاء زر القائمة المنسدلة.
استخدام مع data-dropdown=" id " زر السمة أو رابط لفتح القائمة المنسدلة.
تحتاج قيمة id لتتناسب مع محتويات (id01) القائمة المنسدلة.
في <ul> اضافة في .f-dropdown فئات و data-dropdown-content سمة لخلق المحتوى القائمة المنسدلة.
التهيئة مشاركة مؤسسة شبيبة.
زر الانقسام
يمكننا أيضا إنشاء القائمة المنسدلة على زر انقسام في. فقط تحتاج إلى إضافة زر .split الصف واستخدام عنصر تمتد لتوليد زر الاتجاه السهم:
أمثلة
<سبان بيانات المنسدلة = "id01 "> </ SPAN>
</ زر>
<UL معرف = البيانات "id01" -dropdown-المحتوى الطبقة = "F-المنسدلة">
<لي> <a أ href = "#"> رابط 1 </ أ> </ لى>
<لي> <a أ href = "#"> رابط 2 </ أ> </ لى>
<لي> <a أ href = "#"> رابط 3 </ أ> </ لى>
</ UL>
<! - تهيئة مؤسسة شبيبة ->
<script>
$ (الوثيقة) .ready (وظيفة () {
$ (الوثيقة) .foundation ()؛
})
</ script>
محاولة »
 | نصيحة: في وقت لاحق في هذا البرنامج التعليمي سوف نتعلم المزيد عن القائمة المنسدلة هو المعرفة. |
|---|