23 - button : desactivo

Ya se encuentra disponible el nuevo tutorial para aprender Bootstrap 4 que es la última versión estable y recomendada.


Si queremos que un elemento HTML button se muestre y actúe como desactivo debemos inicializar la propiedad disabled con el valor disabled.

Problema

Mostrar cuatro botones grandes. El primero activo y los tres siguientes desactivados.

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Prueba de Bootstrap</title> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head> 
<body> 
  <div class="container">

    <form role="form">
      <div class="form-group">
       <button type="submit" class="btn btn-primary btn-lg">
         Botón activo</button>       
      </div> 
      <div class="form-group">
       <button type="submit" class="btn btn-primary btn-lg" disabled="disabled">
         Botón 1 desactivo</button>       
      </div> 
      <div class="form-group">
       <button type="submit" class="btn btn-primary btn-lg" disabled="disabled">
         Botón 2 desactivo</button>       
      </div> 
      <div class="form-group">
       <button type="submit" class="btn btn-primary btn-lg" disabled="disabled">
         Botón 3 desactivo</button>       
      </div> 
    </form>

  </div> 
</body> 
</html> 

Como vemos para desactivar un botón debemos inicializar la propiedad disabled:

       <button type="submit" class="btn btn-primary btn-lg" disabled="disabled">
         Botón 1 desactivo</button>       

El resultado visual y operativo en el navegador de un botón normal y tres desactivados es:

button disabled bootstrap

Ejecutar Ejemplo

Retornar