Clauss

Tu Bootstrap de siempre pero un "poco" diferente.
 

Botones

Link       
<a class="btn" href="#" role="button">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Botones con opciones

            
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>

Botones sin caja

            
<button type="button" class="btn btn-default cl-flat">Default</button>
<button type="button" class="btn btn-primary cl-flat">Primary</button>
<button type="button" class="btn btn-success cl-flat">Success</button>
<button type="button" class="btn btn-info cl-flat">Info</button>
<button type="button" class="btn btn-warning cl-flat">Warning</button>
<button type="button" class="btn btn-danger cl-flat">Danger</button>

Tamaño de Botones

 

 

 

  

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Botón disabled

            
<button type="button" disabled="disabled" class="btn btn-default">Default</button>  
<button type="button" disabled="disabled" class="btn btn-primary">Primary</button>  
<button type="button" disabled="disabled" class="btn btn-success">Success</button>  
<button type="button" disabled="disabled" class="btn btn-info">Info</button>  
<button type="button" disabled="disabled" class="btn btn-warning">Warning</button>  
<button type="button" disabled="disabled" class="btn btn-danger">Danger</button>

Campos Básicos

Ejemplo de texto de ayuda.

<div class="form-group">
  <label for="input1">Correo electrónico:</label>
  <input type="email" id="input1" class="form-control" placeholder="Ingresa tu correo electrónico">
</div>
<div class="form-group">
  <label for="input2">Contraseña:</label>
  <input type="password" id="input2" class="form-control" placeholder="Contraseña">
</div>
<div class="form-group">
  <label for="input2">Descripción:</label>
  <textarea class="form-control" rows="3" placeholder="Ingresa una descripción"></textarea>
</div>
<div class="form-group">
  <label for="input3">Seleccionar archivo</label>
  <input type="file" id="input3">
  <p class="help-block">Ejemplo de texto de ayuda.</p>
</div>
<div class="checkbox">
  <label>
  	<input type="checkbox"> Marcar la opción
  </label>
</div>
<div class="checkbox disabled">
  <label>
  <input type="checkbox" value="" disabled> Opción bloqueada
  </label>
</div>
<div class="radio">
  <label>
  	<input type="radio" name="optionsRadios" value="option1" checked> Opción 1
  </label>
</div>
<div class="radio">
  <label>
  	<input type="radio" name="optionsRadios" value="option2"> Opción 2
  </label>
</div>
<div class="radio disabled">
  <label>
  	<input type="radio" name="optionsRadios" value="option3" disabled> Opción bloqueada
  </label>
</div>
<button type="submit" class="btn btn-default">Enviar</button>

Ejemplo de texto de ayuda.

<form class="cl-dark">
    <div class="form-group">
	  <label for="input1">Correo electrónico:</label>
	  <input type="email" id="input1" class="form-control" placeholder="Ingresa tu correo electrónico">
	</div>
	<div class="form-group">
	  <label for="input2">Contraseña:</label>
	  <input type="password" id="input2" class="form-control" placeholder="Contraseña">
	</div>
	<div class="form-group">
	  <label for="input2">Descripción:</label>
	  <textarea class="form-control" rows="3" placeholder="Ingresa una descripción"></textarea>
	</div>
	<div class="form-group">
	  <label for="input3">Seleccionar archivo</label>
	  <input type="file" id="input3">
	  <p class="help-block">Ejemplo de texto de ayuda.</p>
	</div>
	<div class="checkbox">
	  <label>
	  	<input type="checkbox"> Marcar la opción
	  </label>
	</div>
	<div class="checkbox disabled">
	  <label>
	  <input type="checkbox" value="" disabled> Opción bloqueada
	  </label>
	</div>
	<div class="radio">
	  <label>
	  	<input type="radio" name="optionsRadios" value="option1" checked> Opción 1
	  </label>
	</div>
	<div class="radio">
	  <label>
	  	<input type="radio" name="optionsRadios" value="option2"> Opción 2
	  </label>
	</div>
	<div class="radio disabled">
	  <label>
	  	<input type="radio" name="optionsRadios" value="option3" disabled> Opción bloqueada
	  </label>
	</div>
	<button type="submit" class="btn btn-default">Enviar</button>
</form>

Campos de selección

<select class="form-control">
  <option>Elige una opción</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Campos con íconos

* Usar icon-fonts, en este caso usamos Font Awesome
<div class="form-group cl-icons">
  <i class="fa fa-user"></i>
  <label for="input3">Nombre Completo:</label>
  <input type="email" id="input3" class="form-control" placeholder="Ingresa tu nombre completo">
</div>
<div class="form-group cl-icons">
  <i class="fa fa-map-marker"></i>
  <label for="input5">Ubicación:</label>
  <select class="form-control">
    <option>Elige una ubicación</option>
    <option>Lima</option>
    <option>Jauja</option>
    <option>Pasco</option>
  </select>
</div>

Formulario Horizontal

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
	    <label>
		  <input type="checkbox"> Recordarme
		</label>
	  </div>
	</div>
  </div>
  <div class="form-group">
	<div class="col-sm-offset-2 col-sm-10">
	  <button type="submit" class="btn">Ingresar</button>
	</div>
  </div>
</form>

Títulos

Ejemplo para títulos H1

Ejemplo para títulos H2

Ejemplo para títulos H3

Ejemplo para títulos H4

Ejemplo para títulos H5
Ejemplo para títulos H6
<h1>Ejemplo para títulos H1</h1>
<h2>Ejemplo para títulos H2</h2>
<h3>Ejemplo para títulos H3</h3>
<h4>Ejemplo para títulos H4</h4>
<h5>Ejemplo para títulos H5</h5>
<h6>Ejemplo para títulos H6</h6>

Parrafos

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ante erat. Nam mauris augue, consectetur non lacus laoreet, convallis cursus ex. Duis sed ex sit amet augue laoreet feugiat vel nec sem. Phasellus finibus vestibulum quam id imperdiet. Vestibulum sed nisl placerat, egestas eros nec, luctus odio.

Praesent mattis, erat eu lacinia feugiat, orci sapien fermentum metus, et ornare ipsum tortor nec arcu. Mauris luctus venenatis volutpat. Integer rutrum auctor elementum. Suspendisse lobortis mattis velit sit amet condimentum. Mauris a elit posuere, condimentum augue sit amet, scelerisque sem. Mauris mattis dictum tincidunt. Quisque ac posuere nisi. Nulla sodales eget felis sit amet dapibus.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ante erat. <strong>Nam mauris augue, consectetur non lacus laoreet</strong>, convallis cursus ex. Duis sed ex sit amet augue laoreet feugiat vel nec sem. Phasellus finibus vestibulum quam id imperdiet. <u>Vestibulum sed nisl placerat</u>, egestas eros nec, luctus odio.</p>
<p><em>Praesent mattis, erat eu lacinia feugiat, orci sapien fermentum metus, et ornare ipsum tortor nec arcu.</em> Mauris luctus venenatis volutpat. Integer rutrum auctor elementum. Suspendisse lobortis mattis velit sit amet condimentum. Mauris a elit posuere, condimentum augue sit amet, <s>scelerisque sem</s>. Mauris mattis dictum tincidunt. Quisque ac posuere nisi. <small>Nulla sodales eget felis sit amet dapibus.</small><</p>

Alertas

<div class="alert alert-success" role="alert"><strong>¡Bien hecho!</strong> Usted lee con éxito este mensaje de alerta importante.</div>
<div class="alert alert-info" role="alert"><strong>¡Aviso!</strong> Esta alerta necesita su atención, pero no es super importante.</div>
<div class="alert alert-warning" role="alert"><strong>¡Advertencia!</strong> Mejor no intentarlo porque puede ocurrir algo extraño.</div>
<div class="alert alert-danger" role="alert"><strong>¡No puede ser!</strong> Cambia algunas cosas y trata de enviar de nuevo.</div>

 

Desarrollado por César J. Aquino Maximiliano (@cesjam7)