BootStrap-CSS样式_布局组件_列表组（列表徽章链接段落综合应用）

最新推荐文章于 2021-03-07 21:45:16 发布
最新推荐文章于 2021-03-07 21:45:16 发布
阅读量696 收藏
点赞数
分类专栏： BootStrap 文章标签： BootStrap BootStrap-CSS样式_布局组件 BootStrap列表组 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LoveyourselfJiuhao/article/details/85316204
版权

列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：

.list-group:向元素 <ul> 添加 class .list-group。

.list-group-item:向 <li> 添加 class .list-group-item。

.list-group-item-heading：列表组头部样式，应用在标题<h*>标签，使list-group-item中字体变大加粗

.list-group-item-text:列表组文本样式，应用在<p>标签内

.badge：徽章<span class="badge">

.active:激活，使a链接处于激活状态

代码实例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>列表组</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body style="padding:50px;">
    <!-- 
    列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下： 
    .list-group:向元素 <ul> 添加 class .list-group。 
    .list-group-item:向 <li> 添加 class .list-group-item。
    .list-group-item-heading：列表组头部样式，应用在标题<h*>标签，使list-group-item中字体变大加粗
    .list-group-item-text:列表组文本样式，应用在<p>标签内
    .badge：徽章<span class="badge">  
    .active:激活，使a链接处于激活状态
    -->
    <!--1. 基本列表组-->
    <h2>基本列表组</h2>
    <ul class="list-group">
        <li class="list-group-item">JavaScript从入门到精能</li>
        <li class="list-group-item">BootStrap响应式布局</li>
        <li class="list-group-item">Java零基础到项目实战</li>
        <li class="list-group-item">HTML5+CSS3网页编程</li>
    </ul>
    
    <!--2. 带有徽章的列表组-->
    <h2>带有徽章的列表组</h2>
    <ul class="list-group">
        <li class="list-group-item">
        <span class="badge">2</span>
        JavaScript从入门到精能
        </li>
        <li class="list-group-item">
          <span class="badge">10</span>
           BootStrap响应式布局
        </li>
        <li class="list-group-item">
        <span class="badge">缺货</span>
        Java零基础到项目实战
        </li>
        <li class="list-group-item">
          HTML5+CSS3网页编程
          <span class="badge">8</span>
        </li>
    </ul>
    
     <!--3. 带有链结的列表组-->
     <h2>带有链结的列表组</h2>
    <div class="list-group">
        <a href="#" class="list-group-item ">JavaScript从入门到精能</a>
        <a href="#" class="list-group-item active">
          <span class="badge">缺货</span>
           BootStrap响应式布局
        </a>
        <a href="#" class="list-group-item">
        Java零基础到项目实战
        </a>
        <a href="#" class="list-group-item">
          HTML5+CSS3网页编程
        </a>
    </div>

   <!--4. 自定义内容的列表组-->
   <h2>自定义内容的列表组</h2>
   <div class="list-group">
        <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">JavaScript从入门到精能</h4>
        </a>
        <a href="#" class="list-group-item ">
            <h4 class="list-group-item-heading">BootStrap响应式布局</h4>
            <p class="list-group-item-text">
                栅格布局：从折叠刀水平，从流式到容器
            </p>
        </a>
        <a href="#" class="list-group-item">
        Java零基础到项目实战
        </a>
        <a href="#" class="list-group-item">
          HTML5+CSS3网页编程
        
        </a>
    </div>

    <script src="../js/jquery-1.11.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</body>
</html>

显示效果：

 

有梦的小草
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
新闻网站bootstrap
03-28
bootstrap框架制作的一个简单的新闻网站，分为首页，内容页，登入页和注册页面
bootstrap a标签_最受欢迎的前端框架Bootstrap
weixin_42676824的博客
02-01 1626
Bootstrap的一些基本样式和组件，包括容器、页头、媒体组件、图片、列表组。重新实现了上节课的hello.html。我们并未写CSS文件，仅使用Bootstrap就达到了这样的效果，所以讲Bootstrap是一个强大的前端框架！Bootstrap通过CSS文件来提供样式，同样在中加以引入：<link rel="stylesheet" href="http://cdn.bootc...
Bootstrap 全局CSS样式： 按钮类的使用
WangMin@汪末末
09-01 737
作者: WangMin 格言: 努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 可作为按钮使用的标签或元素 为<a>、<button>或<input>元素添加按钮类（button class）都可使用 Bootstrap 提供的样式。 <a href="" class="btn btn-default" role="button">link 链接</a> <button class="btn btn-def
零基础Bootstrap入门教程(22)--列表组
程序员大阳
03-07 1208
本文目录1. 概述2. 普通列表组3. 将普通链接转换为列表组4. 调整列表项的样式5. 带徽章的列表组6. 添加标题和内容7. 小结 1. 概述 列表组用来显示一组关联的显示元素，Bootstrap提供了可以灵活使用的列表组组件list-group，本篇就来具体演示下。 2. 普通列表组 用list-group类修饰ul元素，使用list-group-item类修饰li元素，即可创建列表组，代码如下： 普通列表组： <ul class="list-group"
Bootstrap 组件：列表组组件（list-group）
WangMin@汪末末
09-07 2958
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。列表组可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件。 列表组看上去就是去掉了列表符号的列表项，并且配上一些特定的样式，在bootstrap框架中的基础列表组主要包括两个部分： 类 状态 list-group 列表组容器，常用的是ul元素，也可以是ol或div元素 l
Bootstrap 列表组
soindy
03-23 1511
整理自慕课笔记 列表组是Bootstrap框架新增的一个组件，可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件。基础列表组基础列表组，看上去就是去掉了列表符号的列表项，并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分： * list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素 * list-group-
深入理解BootStrap Item16 -- 列表组(list-group)
热门推荐
小平果的欢乐谷
11-18 1万+
1、列表组列表组是Bootstrap框架新增的一个组件，可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件。由于其在Bootstrap是一个独立的组件，所以也对应有自己独立源码：☑ LESS版本：对应的源码文件 list-group.less☑ Sass版本：对应的源码文件是 _list-group.scss☑ 编译出的Bootstrap版本：对应的源码boots
列表组
weixin_33860147的博客
08-19 72
基础列表组 <ul class="list-group"> <li class="list-group-item">揭开CSS3的面纱</li> <li class="list-group-item">CSS3选择器</li> <li class="list-group-item">CSS3...
bootstrap-3.3.0_html_bootstrap框架_css_policen1q_
10-02
Bootstrap是简洁、直观、强悍的前端开发框架，让Web开发更迅速、简单。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，Buttons，表格，网格系统等等。
bootstrap-4.6.0_css_
10-03
Presence Web Interaction Chat
bootstrap创意精美ui列表布局代码
06-11
bootstrap创意精美ui列表布局代码，共有3种效果，鼠标悬停特效非常漂亮，具体请查看演示页面。
bootstrap-switch.min.css
04-22
bootstrap-switch.min.css
dash-bootstrap-components：Plotly Dash的Bootstrap组件
01-30
dash-bootstrap-components是用于的组件库，可以更轻松地构建具有复杂，响应式布局的一致样式的Dash应用程序。 目录 安装 聚酰亚胺 您可以使用pip安装dash-bootstrap-components ： pip install dash-bootstrap-...
bootstrap-css-interview-questions:100多个Bootstrap-CSS面试问题
05-12
Bootstrap-CSS面试问题 点击 如果您喜欢这个项目。 提取请求受到高度赞赏。 问：什么是Bootstrap？ Bootstrap是一个HTML，CSS和JS框架，用于以最少的精力构建富Web应用程序。 该框架更多地侧重于构建移动Web应用...
bootstrap-列表组--带徽章的列表组
weixin_34378767的博客
05-26 323
1.运行效果如图所示2.实现代码如下<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <title>列表组--带徽章的...
零基础Bootstrap入门教程(5)--使用标签、徽章、巨幕、Well
程序员大阳
02-18 1199
本文目录1. 概述2. 标签3. 徽章4. 巨幕5. Well6. 小结 1. 概述 本篇介绍下几个常用的Bootstrap组件，即标签、徽章、巨幕和Well。 这几个组件都比较简单，直接在HTML元素上添加class样式即可。 2. 标签 标签一般用于为元素添加附加信息，一般通过为<span>元素添加样式类来实现，例如： <div class="container-fluid"> <div class="row"> <d
bootstrap 列表組
b305723的专栏
02-13 85
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 向列表组添加链接</title> <link rel="stylesheet" href="https://cdn.staticfile...
Bootstrap历练实例：带徽章的列表组
adiking520110的博客
11-27 393
向列表组添加徽章 我们可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在 <li> 元素中添加<span class="badge">即可。下面的实例演示了这点： <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="tex...
keystone-manage bootstrap --bootstrap-password 000000 --bootstrap-admin-url usage: keystone-manage [bootstrap|credential_migrate|credential_rotate|credential_setup|db_sync|db_version|doctor|domain_config_upload|fernet_rotate|fernet_setup|create_jws_keypair|mapping_populate|mapping_purge|mapping_engine|receipt_rotate|receipt_setup|saml_idp_metadata|token_rotate|token_setup|trust_flush] bootstrap [-h] [--bootstrap-username OS_BOOTSTRAP_USERNAME] [--bootstrap-password OS_BOOTSTRAP_PASSWORD] [--bootstrap-project-name OS_BOOTSTRAP_PROJECT_NAME] [--bootstrap-role-name OS_BOOTSTRAP_ROLE_NAME] [--bootstrap-service-name OS_BOOTSTRAP_SERVICE_NAME] [--bootstrap-admin-url OS_BOOTSTRAP_ADMIN_URL] [--bootstrap-public-url OS_BOOTSTRAP_PUBLIC_URL] [--bootstrap-internal-url OS_BOOTSTRAP_INTERNAL_URL] [--bootstrap-region-id OS_BOOTSTRAP_REGION_ID] [--immutable-roles] keystone-manage [bootstrap|credential_migrate|credential_rotate|credential_setup|db_sync|db_version|doctor|domain_config_upload|fernet_rotate|fernet_setup|create_jws_keypair|mapping_populate|mapping_purge|mapping_engine|receipt_rotate|receipt_setup|saml_idp_metadata|token_rotate|token_setup|trust_flush] bootstrap: error: argument --bootstrap-admin-url: expected one argument
最新发布
06-09
其中，bootstrap 子命令用于在初始部署时创建 Keystone 的管理员用户和服务。在这个示例中，命令给出了一个参数错误，因为--bootstrap-admin-url 参数需要指定一个参数，但是没有提供。如果你需要了解更多关于 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值