Bootstrap Crear una tabla de precios con el componente de grupo de lista
Objetivo
La tabla de precios es uno de los componentes principales de cualquier sitio web que vende productos o servicios. Aunque Bootstrap 3 (como en versiones anteriores) no proporciona directamente un componente de tabla de precios, sí proporciona el componente de grupo de lista. Este componente está diseñado para renderizar contenido personalizado complejo. Aprovechando esta característica, crearemos una tabla de precios simple en este tutorial, explicaremos las reglas CSS utilizadas para hacer un grupo de lista y mostraremos cómo personalizarlo.
Apariencia típica
Puede, a continuación se muestra el código de ejemplo.
<div class="container"> <div class="row"> <ul class="list-group col-lg-4"> <li class="list-group-item">Unlimited Users</li> <li class="list-group-item">Unlimited storage</li> <li class="list-group-item">Forum support</li> <li class="list-group-item">More....</li> <li class="list-group-item">More.....</li> </ul> </div> </div>
list-group y list-group-item
list-groupLas reglas CSS de la clase son las siguientes
.list-group {
padding-left: 0;
margin-bottom: 20px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
}
.list-group-item:first-child {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
Insignias (badges)
Puede utilizarinsignias (badges)componente para contener list-group. El siguiente código demuestra cómo implementarlo.
<div class="container"> <div class="row"> <ul class="list-group col-lg-4"> <li class="list-group-item"><span class="badge">Very important</span>Unlimited Users</li> <li class="list-group-item">Unlimited storage</li> <li class="list-group-item">Forum support</li> <li class="list-group-item">More....</li> <li class="list-group-item">More.....</li> </ul> </div> </div>
Puede. A continuación se muestra el código CSS para posicionar las insignias dentro del grupo de lista.
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
Tenga en cuenta que, debido a float:right, el contenido real dentro del elemento del grupo de lista se fuerza hacia la derecha.
Elementos de enlace
<div class="container">
<div class="row">
<div class="list-group col-lg-4">
<a href="../index.html" class="list-group-item active">
The pricing list
</a>
<a href="../index.html" class="list-group-item">Unlimited users</a>
<a href="../index.html" class="list-group-item">Unlimited storage</a>
<a href="../index.html" class="list-group-item">email support</a>
<a href="../index.html" class="list-group-item">More...</a>
</div>
</div>
</div>
Puede. A continuación se muestra el código CSS para posicionar los elementos de enlace dentro del grupo de lista.
a.list-group-item {
color: #555555;
}
a.list-group-item .list-group-item-heading {
color: #333333;
}
a.list-group-item:hover,
a.list-group-item:focus {
text-decoration: none;
background-color: #F5F5F5;
}
a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
z-index: 2;
color: #FFFFFF;
background-color: #428BCA;
border-color: #428BCA;
}
a.list-group-item.active .list-group-item-heading,
a.list-group-item.active:hover .list-group-item-heading,
a.list-group-item.active:focus .list-group-item-heading {
color: inherit;
}
a.list-group-item.active .list-group-item-text,
a.list-group-item.active:hover .list-group-item-text,
a.list-group-item.active:focus .list-group-item-text {
color: #E1EDF7;
}
Contenido personalizado
, este ejemplo demuestra un grupo de lista con contenido personalizado. A continuación se muestran los códigos HTML y CSS incluidos en Bootstrap.
<div class="container">
<div class="row">
<div class="list-group col-lg-4">
<a href="../index.html" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
</div>
</div>
Código CSS
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}
Tabla de precios
Ahora, tomaremos la estructura básica del componente de grupo de lista y la convertiremos en una tabla de precios simple y atractiva.
A continuación se muestra el código HTML básico que utilizamos para crear la tabla de precios. Tenga en cuenta que hemos añadido botones dentro del último elemento de la lista. Para las columnas más a la izquierda y más a la derecha, usamos los botones predeterminados de Bootstrap. Para la columna del medio, añadimos un botón con una clase diferente (warning) para que se vea distinto. Además, también añadimos una insignia en el primer elemento de la lista de la columna del medio.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="dist/css/bootstrap.min.css.html" rel="stylesheet" media="screen"><!-- 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.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<ul class="list-group col-lg-4">
<li class="list-group-item">Bronze Package</li>
<li class="list-group-item">Unlimited users</li>
<li class="list-group-item">Unlimited storage</li>
<li class="list-group-item">Forum Support</li>
<li class="list-group-item">$9/Month</li>
<li class="list-group-item"><a href="../index.html"><button class="btn btn-lg btn-default">Buy Now</button></a></li>
</ul>
<!--second-->
<ul class="list-group col-lg-4">
<li class="list-group-item">Gold Package<span class="badge">Most Preferred</span></li>
<li class="list-group-item">Unlimited users</li>
<li class="list-group-item">Unlimited storage</li>
<li class="list-group-item">24X7 Support</li>
<li class="list-group-item">$25/Month</li>
<li class="list-group-item"><a href="../index.html"><button class="btn btn-warning btn-lg">Buy Now</button></a></li>
</ul>
<!--third-->
<ul class="list-group col-lg-4">
<li class="list-group-item">Silver Package</li>
<li class="list-group-item">Unlimited users</li>
<li class="list-group-item">Unlimited storage</li>
<li class="list-group-item">email support</li>
<li class="list-group-item">$15/Month</li>
<li class="list-group-item"><a href="../index.html"><button class="btn btn-lg btn-default">Buy Now</button></a></li>
</ul>
</div>
</div>
<!-- jQuery (对Bootstrap的 JavaScript插件来说是必要的--->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件(如下),或者根据需要包括单个文件 -->
<script src="dist/js/bootstrap.min.js.html"></script>
</body>
</html>
Ahora, personalizaremos directamente la apariencia y el estilo añadiendo clases CSS. El primer fragmento de código CSS añadirá algo de relleno superior a la página.
body {
padding-top: 70px
}
Luego, añadiendo el siguiente código CSS, personalizaremos el color de fondo, el color de la fuente, la alineación del texto y el tamaño de la fuente del contenido de los elementos de la lista.
ul.list-group.col-lg-4 > li {
background-color: #C952CA;
color: white;
text-align: center;
font-size:125%;
}
Pero si queremos que el primer elemento de la lista de la columna del medio se vea diferente, necesitamos añadir el siguiente código CSS. Usamos:first-childpseudo-elementos para acceder al elemento de lista deseado.
ul.list-group.col-lg-4 > li.list-group-item:first-child{
background-color: #64086F;
font-size: 200%;
}
Para hacer que la insignia se vea diferente, añadimos el siguiente código CSS.
.badge {
background-color: #FAFAD2;
color:#FF8C00;
}
Puede。
Otras extensiones