编程 Javascript

Bootstrap列表组学习使用

Posted in Javascript onFebruary 09, 2017

这篇文章主要为大家详细介绍了Bootstrap列表组的学习使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

<!doctype html>
<html>
<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>Bootstrap</title>
  <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
</head>
<body>
  <div class="container">
    <div class="row">
      <ul class="list-group"><!--列表组-->
        <li class="list-group-item">html</li><!--列表项-->
        <li class="list-group-item">css</li>
        <li class="list-group-item">javascript</li>
      </ul>
    </div>
    <div class="row">
      <ul class="list-group"><!--给列表项添加标记，并且标记自动居右-->
        <li class="list-group-item active">html<span class="badge">12</span></li>
        <li class="list-group-item">css<span class="badge">21</span></li>
      </ul>
    </div>
    <div class="row">
      <div class="list-group"><!--a标签做的列表组，并加上背景色-->
        <a class="list-group-item active">html<span class="badge">12</span></a>
        <a class="list-group-item disabled">css<span class="badge">21</span></a>
        <a class="list-group-item list-group-item-info">javascript<span class="badge">6</span></a>
      </div>
    </div> 
    <!--list-group-item-heading:列表组标题；list-group-item-text:列表组内容-->
    <div class="row">
      <ul class="list-group">
        <li class="list-group-item">
          <h4 class="list-group-item-heading">水果</h4>
          <p class="list-group-item-text">东北角空格积分兑换肯定会框看东北角空格积分兑换肯定会框看东北角空格积分兑换肯定</p>
        </li>
        <li class="list-group-item">
          <h4 class="list-group-item-heading">水果</h4>
          <p>东北角空格积分兑换肯定会框看东北角空格积分兑换肯定会框看东北角空格积分兑换肯定</p>
        </li>
        <li class="list-group-item">
          <h4 class="list-group-item-heading">水果</h4>
          <p>东北角空格积分兑换肯定会框看东北角空格积分兑换肯定会框看东北角空格积分兑换肯定</p>
        </li>
      </ul>
    </div> 
  </div>
  <script src="js/jquery-2.1.0.js"></script>
  <script src="js/bootstrap.js"></script>
</body>
</html>

效果图：

Bootstrap列表组学习使用

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap列表组学习使用

- Author -

轻扰时光

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS 强制设为首页的代码

Jan 31 Javascript

Jquery+asp.net后台数据传到前台js进行解析的方法

May 11 Javascript

javascript trim函数在IE下不能用的解决方法

Sep 12 Javascript

node.js中的http.response.getHeader方法使用说明

Dec 14 Javascript

jQuery得到多个值只能用取Class ,不能用取ID的方法

Dec 04 Javascript

js实现滑动到页面底部自动加载更多功能

Feb 15 Javascript

Vue v2.5 调整和更新不完全问题

Oct 24 Javascript

js点击时关闭该范围下拉菜单之外的菜单方法

Jan 11 Javascript

vue.js中npm安装教程图解

Apr 10 Javascript

全面分析JavaScript 继承

May 30 Javascript

nuxt踩坑之Vuex状态树的模块方式使用详解

Sep 06 Javascript

jQuery实现增删改查

Dec 22 jQuery

jQuery实现获取隐藏div高度的方法示例

Feb 09 #Javascript

Bootstrap进度条学习使用

Feb 09 #Javascript

详解浏览器渲染页面过程

Feb 09 #Javascript

JavaScript 函数节流详解及方法总结

Feb 09 #Javascript

jQuery实现给input绑定回车事件的方法

Feb 09 #Javascript

jQuery分页插件jquery.pagination.js使用方法解析

Feb 09 #Javascript

Bootstrap面板学习使用

Feb 09 #Javascript