Bootstrap Créer un tableau de tarification à l'aide du composant groupe de liste
Objectif
Un tableau de tarification est l'un des principaux composants de tout site web qui vend des produits ou des services. Bien que Bootstrap 3 (comme ses versions précédentes) ne fournisse pas directement de composant de tableau de tarification, il propose un composant de groupe de liste. Ce composant a été conçu pour afficher du contenu personnalisé complexe. En tirant parti de cette fonctionnalité, nous allons créer un tableau de tarification simple dans ce tutoriel, expliquer les règles CSS utilisées pour créer un groupe de liste et montrer comment le personnaliser.
Apparence typique
Vous pouvez, ci-dessous se trouve le code d'exemple.
<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 et list-group-item
list-groupLes règles CSS pour les classes sont les suivantes
.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;
}
Badges
Vous pouvez utiliserBadgescomme composant pour contenir un list-group. Le code suivant montre comment implémenter cela.
<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>
Vous pouvez. Ce qui suit montre le code CSS pour positionner des badges dans un groupe de listes.
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
Veuillez noter qu'en raison de float:right, le contenu réel à l'intérieur des éléments de groupe de listes est forcé vers la droite.
Éléments liés
<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>
Vous pouvez. Ce qui suit montre le code CSS pour positionner des éléments liés dans un groupe de listes.
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;
}
Contenu personnalisé
, cet exemple démontre un groupe de listes avec un contenu personnalisé. Ce qui suit montre le code HTML et CSS apparaissant dans le CSS de 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>
Code CSS
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}
Tableau de tarification
Maintenant, nous allons prendre la structure de base du composant groupe de listes et la transformer en un tableau de tarification simple et attrayant.
Ci-dessous se trouve le code HTML de base que nous avons utilisé pour créer le tableau de tarification. Notez que nous avons ajouté un bouton dans le dernier élément de liste. Pour les colonnes les plus à gauche et les plus à droite, nous utilisons les boutons par défaut de Bootstrap. Pour la colonne du milieu, nous ajoutons un bouton avec une classe différente (warning) pour lui donner un aspect différent. De plus, nous avons également ajouté un badge au premier élément de liste de la colonne du milieu.
<!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>
Maintenant, nous allons personnaliser directement l'apparence et la convivialité en ajoutant des classes CSS. Le premier extrait de code CSS ajoutera un peu de marge intérieure supérieure à la page.
body {
padding-top: 70px
}
Ensuite, en ajoutant le code CSS suivant, nous allons personnaliser la couleur d'arrière-plan, la couleur de police, l'alignement du texte et la taille de police du contenu de l'élément de liste.
ul.list-group.col-lg-4 > li {
background-color: #C952CA;
color: white;
text-align: center;
font-size:125%;
}
Mais si nous voulons que le premier élément de liste dans la colonne du milieu ait un aspect différent, nous devons ajouter le code CSS suivant. Nous utilisons:first-childpseudo-éléments pour accéder à l'élément de liste désiré.
ul.list-group.col-lg-4 > li.list-group-item:first-child{
background-color: #64086F;
font-size: 200%;
}
Pour rendre le badge distinctif, nous ajoutons ensuite le code CSS suivant.
.badge {
background-color: #FAFAD2;
color:#FF8C00;
}
Vous pouvez。
Autres extensions