jueves, 27 de febrero de 2014

Clases para aplicar color a los textos y fondos en Bootstrap 3


Bienvenid@s, en esta ocasión vamos a ver una serie de clases que proporciona bootstrap para resaltar el contexto, tales como el texto o el fondo, etiquetas personalizadas y alertas y todo para hacerlo más llamativo a los visitantes web, con estas herramientas a mano es muy fácil aplicar estilos css sin escribir una sola línea de código CSS y obtener resultados de diseño web sobresalientes. A continuación puedes ver las clases que proporciona bootstrap para resaltar el contexto, basta con copiar y probar los resultados ...

Ejemplo 1: resaltar el texto

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Resaltar el texto Bootstrap 3</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <div class='container'>
   <h1>Resaltar el texto</h1>
<p class="text-muted">Clase text-muted</p>
<p class="text-primary">Clase text-primary</p>
<p class="text-success">Clase text-success</p>
<p class="text-info">Clase text-info</p>
<p class="text-warning">Clase text-warning</p>
<p class="text-danger">Clase text-danger</p>
   </div>
  </body>
</html>


Ejemplo 2: resaltar el fondo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Resaltar el fondo Bootstrap 3</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <div class='container'>
   <h1>Resaltar el fondo</h1>
<p class="bg-primary">Clase bg-primary</p>
<p class="bg-success">Clase bg-success</p>
<p class="bg-info">Clase bg-info</p>
<p class="bg-warning">Clase bg-warning</p>
<p class="bg-danger">Clase bg-danger</p>
   </div>
  </body>
</html>


Ejemplo 3: Etiquetas a color

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Etiquetas a color Bootstrap 3</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <div class='container'>
   <h1>Etiquetas a color</h1>
<span class="label label-default">Clases label label-default</span>
<span class="label label-primary">Clases label label-primary</span>
<span class="label label-success">Clases label label-success</span>
<span class="label label-info">Clases label label-info</span>
<span class="label label-warning">Clases label label-warning</span>
<span class="label label-danger">Clases label label-danger</span>
   </div>
  </body>
</html>


Ejemplo 4: Alertas a color


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Alertas a color Bootstrap 3</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <div class='container'>
   <h1>Alertas a color</h1>
<div class="alert alert-success">Clases alert alert-success</div>
<div class="alert alert-info">Clases alert alert-info</div>
<div class="alert alert-warning">Clases alert alert-warning</div>
<div class="alert alert-danger">Clases alert alert-danger</div>
   </div>
  </body>
</html>