A detailed introduction to Bootstrap list groups

零下一度
Release: 2017-07-20 09:31:02
Original
1713 people have browsed it

In this chapter we will explain list groups. The list component is used to present complex and custom content in the form of a list. The steps to create a basic list group are as follows:

Add class .list-group to the element

    .

    Add class .list-group-item to <li>.

    The following example demonstrates this:

    Example

    <ul class="list-group">
        <li class="list-group-item">免费域名注册</li>
        <li class="list-group-item">免费 Window 空间托管</li>
        <li class="list-group-item">图像的数量</li>
        <li class="list-group-item">24*7 支持</li>
        <li class="list-group-item">每年更新成本</li></ul>
    Copy after login

    Basic list group

    The basic list group looks like a list item with the list symbol removed and equipped with some specific styles. The basic list group in the Bootstrap framework mainly consists of two parts:

     ☑ list-group: list group container, commonly used is the ul element, of course it can also be an ol or div element

     ☑ list-group-item: list item, commonly used is the li element, of course it can also be the div element

    For the basic list group, there are not many style settings, mainly setting its spacing, borders and rounded corners. Wait

    .list-group {
      padding-left: 0;
      margin-bottom: 20px;
    }.list-group-item {
      position: relative;
      display: block;
      padding: 10px 15px;
      margin-bottom: -1px;
      background-color: #fff;
      border: 1px solid #ddd;
    }.list-group-item:first-child {
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }.list-group-item:last-child {
      margin-bottom: 0;
      border-bottom-right-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    Copy after login
    <ul class="list-group"><li class="list-group-item">HTML</li>
    <li class="list-group-item">CSS</li><li class="list-group-item">javascript</li>
    <li class="list-group-item">bootstrap</li><li class="list-group-item">jquery</li>
    </ul>
    Copy after login

    Badge

    The list group with badge is actually a combination of the badge component in the Bootstrap framework and the basic list group. an effect. The specific method is very simple. You only need to add the badge component "badge"

    in "list-group-item". The principle is very simple, that is, setting a right float for the badge. Of course, if there are two badges in one at the same time, When the list items appear, the distance between them is also set

    .list-group-item > .badge {
      float: right;
    }.list-group-item > .badge + .badge {
      margin-right: 5px;
    }
    Copy after login
    <ul class="list-group"><li class="list-group-item"><span class="badge">33</span>HTML</li><li class="list-group-item"><span class="badge">60</span>CSS</li><li class="list-group-item"><span class="badge">192</span>javascript</li><li class="list-group-item"><span class="badge">20</span>bootstrap</li><li class="list-group-item"><span class="badge">26</span>jquery</li></ul>
    Copy after login


    Link

    Use the <a> tag instead of the <li> tag to form a list group that is all links (also note that ## needs to be #

Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!