Bootstrap列表组展示

CSS3列表组样式大全

原创

于 2019-02-02 22:02:21 发布 · 4.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Bootstrap

一代码

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>列表组</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <style>
    body{padding:50px;}
    </style>
</head>
<body>
<h3>基础列表组</h3>
<ul class="list-group">
    <li class="list-group-item">揭开CSS3的面纱</li>
    <li class="list-group-item">CSS3选择器</li>
    <li class="list-group-item">CSS3边框</li>
    <li class="list-group-item">CSS3背景</li>
    <li class="list-group-item">CSS3文本</li>
</ul>
<h3>带徽章的列表组</h3>
<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">13</span>揭开CSS3的面
    </li>
    <li class="list-group-item">