Bootstrap Кнопка в раскрывающемся меню
В этой главе описывается, как использовать класс Bootstrap, чтобы добавить кнопку выпадающего меню. Чтобы добавить к кнопке выпадающего меню, просто помещенные кнопки и выпадающие меню в.btn-группе может быть.Вы также можете использовать <SPAN класс = "каре"> <SPAN /> кнопку, чтобы указать, выпадающего меню.
Следующий пример демонстрирует основной простой кнопки в раскрывающемся меню:
примеров
<Div класс = "БТН-группа">
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию ниспадающего -toggle" данных тумблер = "раскрывающимся"> По умолчанию <SPAN класс = "каретка"> </ SPAN>
</ Button>
<Ul класс = "выпадающий меню" Роль = "Меню">
<Li>
<А HREF = "#"> Функция </ а>
</ Li>
<Li>
<А HREF = "#"> Еще одна особенность </ а>
</ Li>
<Li>
<А HREF = "#"> Другие </ а>
</ Li>
<Li класс = "разделитель"> </ li>
<Li>
<А HREF = "#"> изолированных ссылка </ а>
</ Li>
</ UL>
</ Div>
<Div класс = "БТН-группа">
<Кнопка типа "кнопка" = класс = "БТН БТН-первичной ниспадающего -toggle" данных тумблер = "раскрывающимся"> оригинал <пролет класс = "каретка"> </ SPAN>
</ Button>
<Ul класс = "выпадающий меню" Роль = "Меню">
<Li>
<А HREF = "#"> Функция </ а>
</ Li>
<Li>
<А HREF = "#"> Еще одна особенность </ а>
</ Li>
<Li>
<А HREF = "#"> Другие </ а>
</ Li>
<Li класс = "разделитель"> </ li>
<Li>
<А HREF = "#"> изолированных ссылка </ а>
</ Li>
</ UL>
</ Div>
Попробуйте »
Результаты следующие:
Кнопка Split выпадающее меню
Кнопки Split и выпадающие меню, используя кнопку раскрывающегося списка примерно в том же стиле, но в раскрывающемся меню, чтобы добавить к исходной функции. Кнопка Split осталось от оригинальных черт, право является выпадающее меню для переключения дисплея.
примеров
<Div класс = "БТН-группа">
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию" > по умолчанию кнопка </>
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию ниспадающего -toggle"
данных тумблер = "раскрывающимся">
<SPAN класс = "каретка"> </ SPAN>
<SPAN класс = "стер-только"> переключатель в раскрывающемся меню </ SPAN>
</ Button>
<Ul класс = "выпадающий меню" Роль = "Меню">
<Li> <а HREF = "#"> Функция </ а> </ li>
<Li> <а HREF = "#"> Еще одна особенность </ а> </ li>
<Li> <а HREF = "#"> Другие </ A> </ li>
<Li класс = "разделитель"> </ li>
<Li> <а HREF = "#"> изолированных ссылка </ A> </ li>
</ UL>
</ Div>
<Div класс = "БТН-группа">
<Кнопка типа "кнопка" = класс = "БТН БТН-первичный" > оригинал </ кнопка>
<Кнопка типа "кнопка" = класс = "БТН БТН-первичной ниспадающего -toggle" данных тумблер = "раскрывающимся">
<SPAN класс = "каретка"> </ SPAN>
<SPAN класс = "стер-только"> переключатель в раскрывающемся меню </ SPAN>
</ Button>
<Ul класс = "выпадающий меню" Роль = "Меню">
<Li> <а HREF = "#"> Функция </ а> </ li>
<Li> <а HREF = "#"> Еще одна особенность </ а> </ li>
<Li> <а HREF = "#"> Другие </ A> </ li>
<Li класс = "разделитель"> </ li>
<Li> <а HREF = "#"> изолированных ссылка </ A> </ li>
</ UL>
</ Div>
Попробуйте »
Результаты следующие:
Кнопка выпадающий Размер
Вы можете использовать выпадающее меню с различнымиразмерами кнопки: .btn-большой, .btn-СМ или .btn-хз.
примеров
<Div класс = "БТН-группа">
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию в раскрывающемся списке -toggle БТН-ДЖИ" данных тумблер = "раскрывающимся"> По умолчанию <SPAN класс = "каретка"> </ SPAN>
</ Button>
<Ul класс = "выпадающий меню" Роль = "Меню">
<Li>
<А HREF = "#"> Функция </ а>
</ Li>
<Li>
<А HREF = "#"> Еще одна особенность </ а>
</ Li>
<Li>
<А HREF = "#"> Другие </ а>
</ Li>
<Li класс = "разделитель"> </ li>
<Li>
<А HREF = "#"> изолированных ссылка </ а>
</ Li>
</ UL>
</ Div>
<Div класс = "БТН-группа">
<Кнопка типа "кнопка" = класс = "БТН БТН-первичная выпадающий -toggle БТН-см" данных тумблер = "раскрывающимся"> оригинал <пролет класс = "каретка"> </ SPAN>
</ Button>
<Ul класс = "выпадающий меню" Роль = "Меню">
<Li>
<А HREF = "#"> Функция </ а>
</ Li>
<Li>
<А HREF = "#"> Еще одна особенность </ а>
</ Li>
<Li>
<А HREF = "#"> Другие </ а>
</ Li>
<Li класс = "разделитель"> </ li>
<Li>
<А HREF = "#"> изолированных ссылка </ а>
</ Li>
</ UL>
</ Div>
<Div класс = "БТН-группа">
<Кнопка типа "кнопка" = класс = "БТН БТН-успех выпадающий -toggle БТН-хз" данных тумблер = "раскрывающимся"> успех <пролет класс => < "каретка" / SPAN> </ Кнопка>
<Ul класс = "выпадающий меню" Роль = "Меню">
<Li>
<А HREF = "#"> Функция </ а>
</ Li>
<Li>
<А HREF = "#"> Еще одна особенность </ а>
</ Li>
<Li>
<А HREF = "#"> Другие </ а>
</ Li>
<Li класс = "разделитель"> </ li>
<Li>
<А HREF = "#"> изолированных ссылка </ а>
</ Li>
</ UL>
</ Div>
Попробуйте »
Результаты следующие:
Кнопка меню
Меню также может быть составлен, просто добавьте.dropup .btn-группудля родительского контейнера.
примеров
<Div класс = "строка" стиль = "маржа налево: 50px ; маржа-топ: 200px">
<Div класс = "БТН-группа dropup" >
<Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию ниспадающего -toggle" данных тумблер = "раскрывающимся"> По умолчанию <SPAN класс = "каретка"> </ SPAN>
</ Button>
<Ul класс = "выпадающий меню" Роль = "Меню">
<Li>
<А HREF = "#"> Функция </ а>
</ Li>
<Li>
<А HREF = "#"> Еще одна особенность </ а>
</ Li>
<Li>
<А HREF = "#"> Другие </ а>
</ Li>
<Li класс = "разделитель"> </ li>
<Li>
<А HREF = "#"> изолированных ссылка </ а>
</ Li>
</ UL>
</ Div>
<Div класс = "БТН-группа dropup" >
<Кнопка типа "кнопка" = класс = "БТН БТН-первичной ниспадающего -toggle" данных тумблер = "раскрывающимся"> оригинал <пролет класс = "каретка"> </ SPAN>
</ Button>
<Ul класс = "выпадающий меню" Роль = "Меню">
<Li>
<А HREF = "#"> Функция </ а>
</ Li>
<Li>
<А HREF = "#"> Еще одна особенность </ а>
</ Li>
<Li>
<А HREF = "#"> Другие </ а>
</ Li>
<Li класс = "разделитель"> </ li>
<Li>
<А HREF = "#"> изолированных ссылка </ а>
</ Li>
</ UL>
</ Div>
</ Div>
Попробуйте »
Результаты следующие:
