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.