• 品书香 看电影 十堰市民过了个名副其实的“文化年” 2018-02-24
  • 人民网驻阿尔及利亚记者报道集 2018-02-24
  • 党务问答:党组与党委有何区别? 2018-02-24
  • 泽贡高等级公路2日起临时封闭 2018-02-23
  • 外媒称中国元素成为国际时尚:旗袍成经典服装 2018-02-23
  • 广东清远垃圾收集点火灾致9人死亡 系烟花爆竹引起 2018-02-22
  • 党务问答:党组与党委有何区别? 2018-02-21
  • 杨浦区贯彻实施长护险 春节加班满足老人护理需求 2018-02-21
  •  “不打烊”不等于“全配送” 快递如何保障春节网购 2018-02-21
  • 冬奥观察:奥林匹克在“云”间 2018-02-20
  •  “不打烊”不等于“全配送” 快递如何保障春节网购 2018-02-20
  • 开创生态文明新时代 绘出美丽中国新图景 2018-02-20
  • 人民网驻阿尔及利亚记者报道集 2018-02-19
  • 党务问答:党组与党委有何区别? 2018-02-19
  • MINI车联网服务3月起升级至4G网络 增加新功能 2018-02-18
  • 【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应用需要注意的安全问题。