Twitter Bootstrap radio/checkbox - как добавить глификон

Используя TB, можно ли настроить радио или флажок так, чтобы он отображал глификон вместо стандартного стиля для радио или флажка? Я хочу использовать glyphicon glyphicon-star для указания непроверенных, а затем glyphicon glyphicon-star-empty для указания отмеченного.

Ответ 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>