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>
No hay comentarios:
Publicar un comentario