Кнопка Bootstrap и schementic

Я видел пример начальной загрузки для их списка кнопок, и это вызывало меня во многих отношениях, и мне было интересно, что будет лучшим способом сделать это, и если бутстрап прав. Вот оно:Кнопка Bootstrap и schementic

Example from bootstrap website

<div class="btn-group" role="group" aria-label="..."> 
    <button type="button" class="btn btn-default">Left</button> 
    <button type="button" class="btn btn-default">Middle</button> 
    <button type="button" class="btn btn-default">Right</button> 
</div>

Я сломаю мои вопросы во многих нескольких точках:

1. should'nt btn-group деление с быть ul и каждая кнопка будет в списке пункт?

Мне кажется, что это неупорядоченный список кнопок, и каждая кнопка является элементом из списка.

2. Я буду использовать их в цикле, и мне интересно, можете ли вы предоставить aria-label, может быть одинаковым для нескольких элементов или если он должен быть уникальным на странице?

3. role="group" Нужно ли на div если мы будем использовать список вместо div?

4. Это не ошибка поставить role="button" на элемент button, так как это уже кнопка элемент? Я бы поставил type="button" на элементе, такие как div, который имеет поведение кнопки (например)

источник

2016-03-29 Yann Chabot

Это не имело бы смысл использовать элементы списка вместо кнопок, кнопка является единственным элементом пользовательского интерфейса, способность группировать их вместе путем простой упаковки их в родительский элемент очень эффективна. Кроме того, кнопки уже используют списки для создания выпадающих меню, которые, с другой стороны, являются эффективным использованием для списков в этом контексте.
Там нет ограничений на сколько раз вы можете использовать ту же арию-метку на странице https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
Если вы использовали список, группа роли не имеют последствий для стилизации группы (кнопки стиле с использованием класса БТН-группа)
Назначение роли = «кнопка» для кнопки не имеет ничего общего с типом кнопки, он используется для обеспечения доступности - имеют прочитать эту https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role

источник

2016-03-29 16:19:06

Извините, что я не ошибся, потому что для пункта № 1 это будет кнопка, но кнопка будет внутри элемента списка элементов. –

@YannChabot. Это будет неэффективно. Для списков требуется больше разметки, чем просто кнопки группировки (которые на самом деле не нужно быть кнопками, они могут быть якорями или другими элементами класса.btn) и поставляются с разными вычисленными стилями (списки по своей сути вертикальны, поэтому вам нужно будет использовать измененный встроенный список, кнопки являются элементами встроенного блока и не требуют дополнительного стилирования). Имейте в виду, что вы используете инфраструктуру пользовательского интерфейса, много думал о том, чтобы сделать каждый элемент многоразовым и семантическим. –

Я чувствую тебя. Я понимаю, что это, пометка мудрая, не лучшая, чтобы поместить список, но, по-моему, мне кажется, что группа кнопок - это список кнопок справа? Я имею опыт работы с бутстрапом, и я чувствую, что обычно они всегда правы в отношении разметки, но на этот раз я не был уверен. В любом случае, спасибо за ваш ответ очень конструктивно! –

нет нужно использовать кнопки бутстрапа точно так же, как в e Xample. Вы можете включить список, если хотите. Я однажды заменил свою кнопку на обычном якоре.

Это выглядело примерно так:

<a href="#" class="btn btn-default"></a>

Просто использовать производительность такое же имя класса.

Вам не нужно использовать роль = "группа".

источник

2016-03-29 16:22:36 aureliajulianna

Кнопка Bootstrap и schementic

ответ

Смежные вопросы