Bootstrap (IV) list group and additional navigation

List group

Normal list group

Ul add class.list-group

Add. List group item for each item

Using list group item - * to set predefined styles for list items

You can add any HTML content to a list item

List item content header setting.list-group-item-heading

List item content section setting.list-group-item-text

Additional navigation

Fixed navigation on the left or right side of the page

1. Implementation method: add: Data spy = 'affix' to the element to be monitored (i.e. fixed list)

2. If you want to set a certain distance between the top or bottom of the fixed distance page to switch between the scrolling and fixed state of navigation, you can set: data offset top = 'value' or data offset bottom = 'value'

3. As the page scrolls, the fixed navigation style changes, which is realized by scrolling monitoring

Implementation method: add data spy to the body = 'scroll'

Data target = 'fixed element'

4. Implement with js

Navigation list. affix();

Parameter configuration offset: value or object default {top:10,bottom:10}

Small case, I hope you can practice it.

<div class="container">
    <ul class="list-group">
        <li class="list-group-item list-group-item-info">
            <h3 class="list-group-item-heading">
                HTML
            </h3>
            <p class="list-group-item-text">
                This is a basic language
            </p>
        </li>
        <li class="list-group-item list-group-item-success">CSS</li>
        <li class="list-group-item">javascript<span class="badge">Hottest</span></li>
        <li class="list-group-item">vue</li>
        <li class="list-group-item">Bootstrap</li>
    </ul>
    <div class="list-group">
        <a href="#" class="list-group-item">HTML</a>
        <a href="#" class="list-group-item">CSS</a>
        <a href="#"Class =" list group item "> JavaScript < span class =" badge "> hottest < / span ></a>
        <a href="#" class="list-group-item">vue</a>
    </div>
    <div class="list-group">
        <button class="list-group-item">HTML</button>
        <button class="list-group-item">CSS</button>
        <button class="list-group-item">javascript<span class="badge">Hottest</span></button>
        <button class="list-group-item">vue</button>
    </div>
</div>

I hope this article will be helpful to you. If you can, please help me to light up the small hand next to you so that more people can see it,

If there are any errors or deficiencies in the above code, please comment or send a private message, so that I can correct them in time.

Keywords: Javascript Vue

Added by tjhilder on Sat, 08 Feb 2020 19:34:41 +0200