Bootstrap 清单组,价格表

作者: Arvin Chen 分类: Bootstrap 来源: Break易站(www.breakyizhan.com)

Bootstrap 使用清单组组件创建价格表

目标

价格表是销售产品或服务的任何网站的主要成分之一。即使 Boortstrap 3(与之前的版本一样)没有直接提供价格表组件,但是它提供了列表组组件。设计该组件的目的是为了渲染复杂的定制内容。利用这个特征,我们将在本教中创建一个简单的价格表,并解释制作一个列表组所用到的 CSS 规则,并说明如何定制它。
查看演示

典型的外观

您可以 在线查看演示,下面是实例代码。


<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 和 list-group-item

list-group class 的 CSS 规则如下


.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)

您可以使用 徽章(badges) 组件来包含 list-group。下面代码演示了如何实现这点。


<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>

您可以 点击这里,在线查看演示。下面显示了定位列表组内的徽章的 CSS 代码。


.list-group-item > .badge {

  float: right;

}



.list-group-item > .badge + .badge {

  margin-right: 5px;

}

请注意,由于 float:right,会强制列表组项目内的世纪内容靠右。

链接项目


<div class="container">

<div class="row">

  <div class="list-group col-lg-4">

  <a href="#" class="list-group-item active">

    The pricing list

  </a>

  <a href="#" class="list-group-item">Unlimited users</a>

  <a href="#" class="list-group-item">Unlimited storage</a>

  <a href="#" class="list-group-item">email support</a>

  <a href="#" class="list-group-item">More...</a>

</div>

</div>

</div>

您可以 点击这里,在线查看演示。下面显示了定位列表组内的链接项目的 CSS 代码。


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;

}

自定义内容

在线查看实例,该实例演示了带有自定义内容的列表组。下面显示了出现在 Bootstrap 的 CSS 中的 HTML 和 CSS 代码。


<div class="container">

<div class="row">

  <div class="list-group col-lg-4">

  <a href="#" 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>

CSS 代码


.list-group-item-heading {

  margin-top: 0;

  margin-bottom: 5px;

}



.list-group-item-text {

  margin-bottom: 0;

  line-height: 1.3;

}

价格表

现在,我们将采取列表组组件的节本结构,并把它转换成一个简单而有吸引力的价格表。
下面是一个包含我们用于创建价格表的基本 HTML 代码。请注意,我们已经在最后一个列表项内添加按钮。对于最左边和最右边的列,我们使用 Bootstrap 的默认按钮。对于中间的列,我们添加带有不同的 class(warning) 的按钮,使它看起来与众不同。此外,我们还在中间列的第一个列表项中添加了一个徽章。


<!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" 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="#"><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="#"><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="#"><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"></script>

  </body>

</html>

现在,我们将通过添加 CSS class 来直接定制外观和感观。CSS 代码的第一个片段会添加一些的顶部填充到页面中。


body {

  padding-top: 70px

  }

然后,通过添加下面的 CSS 代码,我们将定制背景颜色,字体颜色,文本对齐方式和列表项内容的字体尺寸。


ul.list-group.col-lg-4 > li {

  background-color: #c952ca;

  color: white;

  text-align: center;

  font-size:125%;

  }

但如果我们想让中间列的第一个列表项看起来与众不同,我们需要添加下面的 CSS 代码。我们使用 :first-child 伪元素来访问所需的列表项。


ul.list-group.col-lg-4 > li.list-group-item:first-child{

  background-color: #64086f;

  font-size: 200%; 

  }

为了让徽章显得与众不同,我们再添加下面的 CSS 代码。


  .badge {

  background-color: #FAFAD2;

  color:#FF8C00;

  }

您可以 点击这里,在线查看实例。

  •   本文标题:Bootstrap 清单组,价格表 - Break易站
    转载请保留页面地址:https://www.breakyizhan.com/bootstrap/19287.html
      微信返利机器人
      免费:淘宝,京东,拼多多优惠券
      腾讯,爱奇艺,优酷的VIP视频免费解析,免费看
      即刻扫描二维码,添加微信机器人!

    发表笔记

    电子邮件地址不会被公开。 必填项已用*标注