• 置业指南:买高层要注意这些问题 2018-05-22
  • い羛琩矪堵旧笴眏い瓣笴潦ㄆン 2018-05-22
  • 有力有序有效防范化解煤电产能过剩风险 2018-05-22
  • 美好生活的价值追求和实现路径-社会关注-理论频道-中工网 2018-05-21
  • 保罗亲手为自己圆梦 火箭勇士双双会师西部决赛 2018-05-21
  • Floating production, storage and offloading vessel delivered in Qingdao 2018-05-20
  • 汽車定位跟蹤官員意圖敲詐 追蹤器該怎麼管 2018-05-20
  • 工作队精准发力助力贫困村“摘帽” 2018-05-20
  • 中消协发布榨汁机比较试验结果 2018-05-20
  • 游花海林芝,赏野生桃花 2018林芝桃花节29日开幕 2018-05-20
  • 19米99轻松卫冕 巩立姣:没突破20米有点可惜 2018-05-18
  • 海南省工商局出实招提高干部素质 强化工作作风 2018-05-18
  • 栾蕾英亮相TOP100时尚盛典 盛装亮相仙气十足 2018-05-18
  • 以合法形式掩盖非法目的的合同效力 2018-05-18
  • 4月解放领跑重卡行业 红岩保持增幅第一 2018-05-17
  • 【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应用需要注意的安全问题。