Hacer grupo de lista de bootstrap seleccionable con radio & casillas de verificación entradas
| Autor: | imanfakhar |
|---|---|
| Views Total: | 1,291 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 10, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Una pequeña extensión de CSS para bootstrap 4 y 3 que hace que el grupo de lista sea seleccionable con casillas de verificación personalizadas y botones de radio basados en Font awesome.
Funcionamiento
Inserte el bootstrap necesario y Font awesome en el archivo.
<link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="font-awesome.min.css">
Inserte la hoja de estilos ' bootstrap-CheckBox-radio-List-Group-Item. min. css ' después de bootstrap.
<link rel="stylesheet" href="bootstrap-checkbox-radio-list-group-item.min.css">
Agregar casillas de verificación al grupo de lista.
<div class="list-group checkbox-list-group"> <div class="list-group-item"> <label><input type="checkbox"><span class="list-group-item-text"><i class="fa fa-fw"></i> Default</span></label></div> <div class="list-group-item list-group-item-success"><label> <input type="checkbox"><span class="list-group-item-text"><i class="fa fa-fw"></i> Success</span></label></div> <div class="list-group-item list-group-item-info"><label> <input type="checkbox"><span class="list-group-item-text"><i class="fa fa-fw"></i> Info</span></label></div> <div class="list-group-item list-group-item-warning"><label> <input type="checkbox"><span class="list-group-item-text"><i class="fa fa-fw"></i> Warning</span></label></div> <div class="list-group-item list-group-item-danger"><label> <input type="checkbox"><span class="list-group-item-text"><i class="fa fa-fw"></i> Danger</span></label></div> </div>
O agregue botones de radio al grupo de lista.
<div class="list-group radio-list-group"> <div class="list-group-item"> <label><input type="radio" name="ra" value="1"><span class="list-group-item-text"><i class="fa fa-fw"></i> Default</span></label></div> <div class="list-group-item list-group-item-success"><label> <input type="radio" name="ra" value="2"><span class="list-group-item-text"><i class="fa fa-fw"></i> Success</span></label></div> <div class="list-group-item list-group-item-info"><label> <input type="radio" name="ra" value="3"><span class="list-group-item-text"><i class="fa fa-fw"></i> Info</span></label></div> <div class="list-group-item list-group-item-warning"><label> <input type="radio" name="ra" value="4"><span class="list-group-item-text"><i class="fa fa-fw"></i> Warning</span></label></div> <div class="list-group-item list-group-item-danger"><label> <input type="radio" name="ra" value="5"><span class="list-group-item-text"><i class="fa fa-fw"></i> Danger</span></label></div> </div>
