• 消协提醒:春节预订酒店有技巧 预付卡消费需谨慎 2018-10-20
  • 陈敏尔唐良智会见传化集团董事长徐冠巨 2018-10-20
  • 扫黑除恶利剑高悬 前8月榕查处违法采砂案件93起 2018-10-20
  • 不能让所谓的收视率愚弄观众 2018-10-18
  • 新希望!中超19岁新星半年增重十斤 曾戏耍恒大两国脚 2018-10-17
  • 迎丰收 晒丰收 庆丰收 2018-10-15
  • “捂脸表情”被注册成商标?申请人不认为商标侵权 2018-10-15
  • 战巡南海、绕岛巡航…空军有“飞出去”的主心骨 2018-10-14
  • 幼儿园要求家长写一万字读后感:不能这样玩家长|幼儿园|家长-教育时讯 2018-10-13
  • 中国故宫文物展在希腊举行 2018-10-13
  • 車·晓 第26期 車企官方降价真相幾何? 2018-10-12
  • 宝沃总裁杨嵩:曾和奔驰宝马同水平 已不能同日而语 2018-10-11
  • 新时代党员干部要有更大的担当和作为 2018-10-10
  • “2018-雷霆”专项行动破获百余起台湾间谍案 2018-10-09
  • 朝韩首脑今起在平壤会晤 “金文会”将聚焦三大议题 2018-10-09
  • 【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应用需要注意的安全问题。