• 遭爆校长任期炒高房价请假率高 吴茂昆:旧案重提悖离事实 2018-08-19
  • 2018年洗衣机市场健康洗产品已成市场新引擎 2018-08-19
  • 大学毕业生创业“修手机” 两个月进账超30万元 2018-08-19
  • 張近東代表建議,用AI、區塊鏈技術打造數據安全“護城河” 2018-08-18
  • 清明忆先烈 习近平这样传承“红色基因” 2018-08-18
  • 第二届福建省大学生文化创新创意大赛落幕 2018-08-18
  • 乘客突发脑梗 611路司机忙送医一直等到家属到 2018-08-18
  • 中国新一代百亿亿次超级计算机“天河三号”原型机首次亮相[组图] 2018-08-17
  • “动静”结合丨带你感受不一样的实爆训练场 2018-08-17
  • 侠客岛:拿什么拯救你,不学普通话的香港年轻人 2018-08-17
  • 机构改革是一场政治考验 2018-08-17
  • 简讯:韩国前总统朴槿惠一审被判24年有期徒刑 2018-08-16
  • 人民网评:走向大洋,呼唤现代化的中国海军 2018-08-16
  • 北京成立学生申诉处理委员会-地方新闻-时政频道-中工网 2018-08-16
  • 虽胜不足喜!鲁能一隐忧不治愈,恐高开低走 2018-08-16
  • 【bootstrap教程】Bootstrap 列表组

    栏目: bootstrap 发布于: 2014-11-28 12:36:52

    Bootstrap 列表组

    本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下:

    • 向元素 <ul> 添加 class .list-group。
    • 向 <li> 添加 class .list-group-item。

    下面的实例演示了这点:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 基本的列表组</title>
       <link rel="nofollow" href="http://www.rocksun.cn/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://www.rocksun.cn/scripts/jquery.min.js"></script>
       <script src="http://www.rocksun.cn/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <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>
    
    
    </body>
    </html>
    

    结果如下所示:

    基本的列表组

    向列表组添加徽章

    我们可以向任意的列表项添加徽章组件,它会自动定位到右边。只需要在 <li> 元素中添加 <span class="badge"> 即可。下面的实例演示了这点:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 向列表组添加徽章</title>
       <link rel="nofollow" href="http://www.rocksun.cn/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://www.rocksun.cn/scripts/jquery.min.js"></script>
       <script src="http://www.rocksun.cn/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <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>
    
    
    </body>
    </html>
    

    结果如下所示:

    列表组中的徽章

    向列表组添加链接

    通过使用锚标签代替列表项,我们可以向列表组添加链接。我们需要使用 <div> 代替 <ul> 元素。下面的实例演示了这点:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 向列表组添加链接</title>
       <link rel="nofollow" href="http://www.rocksun.cn/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://www.rocksun.cn/scripts/jquery.min.js"></script>
       <script src="http://www.rocksun.cn/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <a rel="nofollow" href="#" class="list-group-item active">
       免费域名注册
    </a>
    <a rel="nofollow" href="#" class="list-group-item">24*7 支持</a>
    <a rel="nofollow" href="#" class="list-group-item">免费 Window 空间托管</a>
    <a rel="nofollow" href="#" class="list-group-item">图像的数量</a>
    <a rel="nofollow" href="#" class="list-group-item">每年更新成本</a>
    
    
    </body>
    </html>
    

    结果如下所示:

    列表组中的链接

    向列表组添加自定义内容

    我们可以向上面已添加链接的列表组添加任意的 HTML 内容。下面的实例演示了这点:

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 向列表组添加自定义内容</title>
       <link rel="nofollow" href="http://www.rocksun.cn/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://www.rocksun.cn/scripts/jquery.min.js"></script>
       <script src="http://www.rocksun.cn/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="list-group">
       <a rel="nofollow" href="#" class="list-group-item active">
          <h4 class="list-group-item-heading">
             入门网站包
          </h4>
       </a>
       <a rel="nofollow" href="#" class="list-group-item">
          <h4 class="list-group-item-heading">
             免费域名注册
          </h4>
          <p class="list-group-item-text">
             您将通过网页进行免费域名注册。
          </p>
       </a>
       <a rel="nofollow" href="#" class="list-group-item">
          <h4 class="list-group-item-heading">
             24*7 支持
          </h4>
          <p class="list-group-item-text">
             我们提供 24*7 支持。
          </p>
       </a>
    </div>
    <div class="list-group">
       <a rel="nofollow" href="#" class="list-group-item active">
          <h4 class="list-group-item-heading">
             商务网站包
          </h4>
       </a>
       <a rel="nofollow" href="#" class="list-group-item">
          <h4 class="list-group-item-heading">
             免费域名注册
          </h4>
          <p class="list-group-item-text">
             您将通过网页进行免费域名注册。
          </p>
       </a>
       <a rel="nofollow" href="#" class="list-group-item">
          <h4 class="list-group-item-heading">24*7 支持</h4>
          <p class="list-group-item-text">我们提供 24*7 支持。</p>
       </a>
    </div>
    
    
    </body>
    </html>
    

    结果如下所示:

    列表组中的自定义内容

    本文转载自:w3cschool
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:【bootstrap教程】Bootstrap 列表组
    IT技术书籍推荐:
    计算机科学丛书:Php和Mysql Web开发(原书第4版)
    计算机科学丛书:Php和Mysql Web开发(原书第4版)
    Luke Welling (作者), Laura Thomson (作者), 武欣 (译者)
    《计算机科学丛书:Php和Mysql Web开发(原书第4版)》将PHP开发与MySQL应用相结合,分别对PHP和MySQL做了深入浅出的分析,不仅介绍PHP和MySQL的一般概念,而且对PHP和MySQL的Web应用做了较全面的阐述,并包括几个经典且实用的例子?!都扑慊蒲Т允?Php和Mysql Web开发(原书第4版)》是第4版,经过了全面的更新、重写和扩展,包括PHP 5.3最新改进的特性(例如,更好的错误和异常处理),MySQL的存储过程和存储引擎,Ajax技术与Web 2.0以及Web应用需要注意的安全问题。