Используя TB, можно ли настроить радио или флажок так, чтобы он отображал глификон вместо стандартного стиля для радио или флажка? Я хочу использовать glyphicon glyphicon-star
для указания непроверенных, а затем glyphicon glyphicon-star-empty
для указания отмеченного.
Twitter Bootstrap radio/checkbox - как добавить глификон
Ответ 1
На официальном сайте раздел javascript содержит примеры групп стилей и переключателей в виде групп кнопок. Он находится под кнопкой здесь.
Вместо текста внутри кнопки, которая читает "Вариант 1", вместо этого вы помещаете свой глификон. Если вы хотите только один флажок, я полагаю, вы могли бы удалить группу кнопок и просто пойти с помощью одной кнопки.
Чтобы удалить внешний вид кнопки и показать только свой значок, используйте класс "btn-link".
Я не пробовал это сам, но я не вижу причин, чтобы он не работал.
Ответ 2
Без javascript вы могли бы изменить стиль... Его вид взлома на мой взгляд, но это было интересно, потому что я понял, что boostrap использует значок icon #newb.
HTML
<input type="checkbox" class="glyphicon glyphicon-star-empty" >
CSS
.glyphicon:before {
visibility: visible;
}
.glyphicon.glyphicon-star-empty:checked:before {
content: "\e006";
}
input[type=checkbox].glyphicon{
visibility: hidden;
}
Попробуйте ЗДЕСЬ
Ответ 3
Просто для тех, у кого такая же проблема и появилась у Google (я не нашел удобного ответа).
Я переделал что-то вроде этого и протестировал его в текущем Chrome, Firefox и IE. С помощью этого метода вы также можете использовать все, что захотите, в качестве флажка. Просто дайте классам "checked" и "unchecked".
Для каждого флажка сделайте следующее:
<input id="checkbox1" class="icon-checkbox" type="checkbox" />
<label for="checkbox1">
<span class='glyphicon glyphicon-unchecked unchecked'></span>
<span class='glyphicon glyphicon-check checked'></span>
Checkbox 1
</label>
И добавьте в свой CSS:
input[type='checkbox'].icon-checkbox{display:none}
input[type='checkbox'].icon-checkbox+label .unchecked{display:inline}
input[type='checkbox'].icon-checkbox+label .checked{display:none}
input[type='checkbox']:checked.icon-checkbox{display:none}
input[type='checkbox']:checked.icon-checkbox+label .unchecked{display:none}
input[type='checkbox']:checked.icon-checkbox+label .checked{display:inline}
Ответ 4
Вот чистое решение angular для переключения между глификоном, чтобы условно показать содержимое на странице. Я обнаружил, что решение CSS не работает в IE.
Это больше, чем ваш вопрос, но я думал, что использование чего-то на экране полезно.
<p ng-init="toggle = false" ng-click="toggle = !toggle" title="@Resources.Label_HideShowCustBiller" style="cursor:pointer" class="glyphicon" ng-class="{true: 'glyphicon-chevron-up', false: 'glyphicon-chevron-down'}[toggle]"></p>
<div ng-show="toggle">
//what you want to show here
</div>