18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

江北小程序开发_Bootstrap根本组件学习笔记之列表

2021-01-12分享 "> ">
Bootstrap基本组件学习笔记之列表组(11)       这篇文章主要为大家详细介绍了Bootstrap基本组件学习笔记之列表组,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

列表组件用于以列表形式呈现复杂的和自定义的内容。

创建一个列表组,只需要完成以下两步:

(1)向元素 ul 添加 class .list-group;
(2)向 li 添加 class .list-group-item。

看下面的例子:

 !DOCTYPE html 
 html lang="" 
 head 
 meta charset="UTF-8" 
 meta name="viewport" content="width=device-width, initial-scale=1" 
 link href="../../css/bootstrap.min.css" rel="stylesheet" 
 script src="jquery/1.11.1/jquery.min.js" /script 
 script src="../../js/bootstrap.min.js" /script 
 title 列表组 /title 
 /head 
 body 
 div 
 div 
 div 
 h1 排行榜 /h1 
 /div 
 a href="#" 
 kikay
 span 255 /span 
 /li 
 a href="#" 
 span 125 /span 
 /li 
 a href="#" 
 span 101 /span 
 /li 
 /ul 
 /div 
 div 
 div 
 h1 新闻列表 /h1 
 /div 
 div 
 div 
 h3 新闻标题1 /h3 
 p 新闻内容新闻内容新闻内容新闻内容 /p 
 /div 
 div 
 h3 新闻标题2 /h3 
 p 新闻内容新闻内容新闻内容新闻内容 /p 
 /div 
 div 
 h3 新闻标题3 /h3 
 p 新闻内容新闻内容新闻内容新闻内容 /p 
 /div 
 /div 
 /div 
 /div 
 /body 
 /html 

效果如下:

最后说明下,上面的例子的“排行榜”中,向列表项添加徽章组件。只需要在 li 元素中添加 span 即可。

如果大家还想深入学习,可以点击进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


"> ">
在线咨询