专栏首页sktjbootstrap 列表list样式

bootstrap 列表list样式

image.png

ul.list-group/li.list-group-item

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

image.png

列表加提醒 span.badge

<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"> <span class="badge">新</span> 24*7 支持 </li> <li class="list-group-item">每年更新成本</li> <li class="list-group-item"> <span class="badge">新</span> 折扣优惠 </li> </ul>

image.png

列表链接

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

image.png

链接下带参数说明

<div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading"> 入门网站包 </h4> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> 免费域名注册 </h4> <p class="list-group-item-text"> 您将通过网页进行免费域名注册。 </p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> 247 支持 </h4> <p class="list-group-item-text"> 我们提供 247 支持。 </p> </a> </div> <div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading"> 商务网站包 </h4> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> 免费域名注册 </h4> <p class="list-group-item-text"> 您将通过网页进行免费域名注册。 </p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">247 支持</h4> <p class="list-group-item-text">我们提供 247 支持。</p> </a> </div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • flask 1/3右边栏页面样式(flask 52)

    {% if links %} <div class="card mb-3"> <div class="card-header">Links</div> <...

    用户5760343
  • bootstrap 导航栏

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • bootstrap nav导航栏

    <nav class="navbar navbar-default" role="navigation"> <div class="container-flu...

    用户5760343
  • Charles使用笔记

    Charles本身其实是一款十分强大且易用的代理软件,最近用的比较多,大致整理了一下自己用到的一些东西。

    木子墨
  • 第二十二课 无多签硬件钱包,如何实现以太坊通证的多签合约?

    【本文目标】 1) 了解目前辉哥调研的多签硬件钱包的现状; 2) 提供一个智能合约多签钱包的实现方案和测试结果;

    辉哥
  • git pull 与 git fetch 的区别

    今天恰逢一个实习生不清楚在使用git发生冲突时如何去处理,所以就给他说了git在工作上的一般使用以及拉取与获取的区别,然后自己也温习了一下。

    薛定喵君
  • 丰田接手谷歌旗下波士顿动力6大原因

    【新智元导读】28日外媒消息 Google 旗下波士顿动力机器人公司将被丰田收购,交易基本完成。新智元过去已有很多文章讨论了 Google 和波士顿动力之间的矛...

    新智元
  • [译]Laravel 5.0 之事件及处理程序

    本文译自 Matt Stauffer 的系列文章. ---- 提示:如果你还没有看过 Laravel 5.0 之命令及处理程序 这篇文章,建议先看一下。它包括...

    小李刀刀
  • 【5】基于Log4Net的日志系统

    阅读目录 日志系统应具备的特性 Log4Net 配置文件:log4net.config 初始化 输出信息 对Log4Net的封装 log4net.c...

    用户1075292
  • 音视频解封装:MP4核心Box详解及H264&AAC打包方案

    上一篇文章《音视频封装:MP4结构概述和分析工具》让大家看了下MP4的主要结构和推荐了一些分析工具,如果你对MP4没有任何了解,还是先看上文,了解MP4的基本结...

    用户5796036

扫码关注云+社区

领取腾讯云代金券