English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
سيتم شرح كيفية استخدام Bootstrap class لضبط قائمة النقر التدولي للزر في هذا الفصل. إذا كنت ترغب في إضافة قائمة النقر التدولي للزر، فما عليك سوى ببساطة وضع .btn-group ضع الزر وقائمة النقر التدولي في الحاوية. يمكنك أيضًا استخدام <span></span> لت指示 الزر كقائمة النقر التدولي.
يظهر المثال التالي قائمة النقر التدولي الأساسية البسيطة للزر:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>مثال Bootstrap - قائمة النقر التدولي الأساسية للزر <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" افتراضي <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <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> </div> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">الأصلي <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <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> </div> </body> </html>اختبار لرؤية ‹/›
النتيجة كما ترون:
استخدمت قائمة النقر التدولي المقطعة للزر نفس الأنماط التي يستخدمها زر النقر التدولي، ولكن أضافت وظيفة قائمة النقر التدولي. اليسار في الزر المقطع هو الوظيفة المصدرية، واليمين هو تبديل عرض قائمة النقر التدولي.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>مثال Bootstrap - قائمة النقر التدولي المقطعة للزر <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="btn-group"> <button type="button" class="btn btn-default">افتراضي</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" <span class="caret"></span> <span class="sr-only">تغيير قائمة النقر التدولي </button> <ul class="dropdown-menu" role="menu"> <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> </div> <div class="btn-group"> <button type="button" class="btn btn-primary">مصدرية</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" <span class="caret"></span> <span class="sr-only">تغيير قائمة النقر التدولي </button> <ul class="dropdown-menu" role="menu"> <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> </div> </body> </html>اختبار لرؤية ‹/›
النتيجة كما ترون:
يمكنك استخدام قائمة النقر التدولي الخاصة بالزر التي تحتوي على أزرار حجم مختلفة:.btn-lg،.btn-sm أو .btn-xs.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>مثال Bootstrap - حجم قائمة النقر التدولي للزر <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown" افتراضي <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <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> </div> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown" مصدرية <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <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> </div> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle btn-xs"> data-toggle="dropdown" نجاح <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <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> </div> </body> </html>اختبار لرؤية ‹/›
النتيجة كما ترون:
قائمة القائمة يمكن أن تتمدد للأسفل أيضًا، فقط تحتاج إلى إضافة بسيطة إلى .btn-group إضافة محتوى .dropup يستطيع.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>مثال Bootstrap - قائمة تنقل مدمجة في زر</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="row" style="margin-left:50px; margin-top:200px"> <div class="btn-group dropup"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">المبدئي <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <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> </div> <div class="btn-group dropup"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">الأصلي <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <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> </div> </div> </body> </html>اختبار لرؤية ‹/›
النتيجة كما ترون: