列表是几乎所有网站都会用到的一个组件,正好bootstrap也给我们提供了这个组件的样式,下面我给大家简单介绍一下bootstrap中的列表组件的用法!

首先,重提一下引用bootstrap的核心文件的问题,以免有些刚入手的朋友忘了这个。

在页面的开头,先引用bootstrap的核心文件(css,js)等。


   <!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel='stylesheet' href='css/bootstrap.min.css' />
<!-- jQuery文件 -->
<script type='text/javascript' src='js/jquery-1.11.1.min.js'> </script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script type='text/javascript' src='js/bootstrap.min.js'></script>
<!-- 下面这句话是为了让网页在手机端时禁止页面缩放,达到最佳视觉效果,在PC端可以注释掉 -->
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'/>

接下来说到bootstrap的列表组件了:

下面是一个最简单的列表组,仅仅是一个带有多个列表条目的无序列表,另外还需要设置适当的类。bootstrap给我们提供了一些预定义的样式,你可以根据自身的需求通过 CSS 自己定制。

列表组的样式类为:.list-group,列表中每列的样式为:.list-group-item:

<ul class='list-group'>
<li class='list-group-item'>微笑话列表项1</li>
<li class='list-group-item'>微笑话列表项2</li>
<li class='list-group-item'>微笑话列表项4</li>
<li class='list-group-item'>微笑话列表项5</li>
</ul>


运行效果如下:

上面介绍的是bootstrap中最简单的列表;

其实,用div+a标签同样也能够实现上面列表的效果:

<div class='list-group'>
<a href='http://www.weixh.net' class='list-group-item active'>微笑话1</a>
<a href='#' class='list-group-item'>微笑话2</a>
<a href='#' class='list-group-item'>微笑话3</a>
<a href='#' class='list-group-item'>微笑话4</a>
<a href='#' class='list-group-item'>微笑话5</a>
</div>


还是用ul、li 的样式,运行效果如下:

同样,bootstrap也给我们提供了几种列表的样式,如果大家觉得列表的样式不是你喜欢的,你也可以重写他的样式,改成自己喜欢的:

 

运行效果如下:

然后,我想给列表加上徽章:

 

于是我得到了徽章:

定制内容
列表组中的每个元素都可以是任何 HTML 内容,甚至是像下面的带链接的列表组。

 

运行得出的结果:

是不是觉得不用自己写CSS实在是太好了呢,好了,今天就跟大家啰嗦到这来,不理解或者不懂的可以回复提问,大家共同学习!

bootstrap 之 列表组件使用的更多相关文章

  1. Bootstrap学习之路(3)---列表组件

    列表是几乎所有网站都会用到的一个组件,正好bootstrap也给我们提供了这个组件的样式,下面我给大家简单介绍一下bootstrap中的列表组件的用法! 首先,重提一下引用bootstrap的核心文件 ...

  2. 列表组件抽象(2)-listViewBase说明

    这是我写的关于列表组件的第2篇博客.前面的相关文章有: 1. 列表组件抽象(1)-概述 listViewBase是列表组件所有文件中最核心的一个,它抽象了所有列表的公共逻辑,将来如果有必要添加其它公共 ...

  3. 利用bootstrap的modal组件自定义alert,confirm和modal对话框

    由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootst ...

  4. 可展开的列表组件——ExpandableListView深入解析

    可展开的列表组件--ExpandableListView深入解析 一.知识点 1.ExpandableListView常用XML属性 2.ExpandableListView继承BaseExpanda ...

  5. Android(java)学习笔记186:对ListView等列表组件中数据进行增、删、改操作

    1.ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V:  view  (显示的视图) C: controller 控制器 入门案例: acit ...

  6. bootstrap轮播组件,大屏幕图片居中效果

    在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中 ...

  7. bootstrap轮播组件之“如何关闭自动轮播”

    在一个页面里使用多个bootstrap轮播组件的时候,如果还让所有轮播图都自动轮播的话,整个画面都在动,会给用户一种很不好的体验感受.所以,需要关闭轮播图的自动轮播. 关闭方法:去除如下属性即可: d ...

  8. React-Native新列表组件FlatList和SectionList学习 | | 联动列表实现

    React-Native在0.43推出了两款新的列表组件:FlatList(高性能的简单列表组件)和SectionList(高性能的分组列表组件). 从官方上它们都支持常用的以下功能: 完全跨平台. ...

  9. Vue列表组件与弹窗组件示例

    列表组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <me ...

随机推荐

  1. poj1088 经典DP

    滑雪 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 88296   Accepted: 33100 Description ...

  2. 使用Win32 API 查找文件

    头文件:#include <windows.h> //FindFirstFile() 获得指定目录的第一个文件 HANDLE FindFirstFile( LPCTSTR lpFileNa ...

  3. SQL基础-->层次化查询(START BY ... CONNECT BY PRIOR)[转]

    --====================================================== --SQL基础-->层次化查询(START BY ... CONNECT BY ...

  4. zabbix之2安装编译/基本功能实现

    1.安装方式: rpm或者编译都可,rpm可以直接用yum安装. rpm安装的话,根据文件名进行选择即可. 编译的话,不同参数对应不同的组件. 编译安装zabbix:同时安装server和agent, ...

  5. python笔记之中缀语法和管道实现

    python笔记之中缀语法和管道实现 你知道什么是中缀语法吗?你知道python中的中缀操作是什么吗?那你知道操作python也是可以像unix的管道符一样方便吗?那么,废话不说了,直接上代码. cl ...

  6. 生产环境中CentOS7部署NET Core应用程序

    NET Core应用程序部署至生产环境中(CentOS7) 阅读目录 环境说明 准备你的ASP.NET Core应用程序 安装CentOS7 安装.NET Core SDK for CentOS7. ...

  7. [TYVJ] P1030 乳草的入侵

    乳草的入侵 背景 Background USACO OCT09 6TH   描述 Description Farmer John一直努力让他的草地充满鲜美多汁的而又健康的牧草.可惜天不从人愿,他在植物 ...

  8. ubuntu 中c 语言编程(学习)

    ubuntu下c编程 c编程中相关文件后缀 .a    静态库(archive .c     C源代码(需要编译预处理) .h     C源代码头文件 .i      C源代码 (不需要编译预处理) ...

  9. 24c16读写驱动程序

    //////////////////////////////////////////////////////////////// //24c16读写驱动程序 // //模块调用: //读数据:read ...

  10. Qt之Windows资源文件(.rc文件)

    简述 在Windows下使用Qt时,通常会用到Windows的资源文件 - 为exe设置信息,其中包括:文件说明.产品名称.产品版本.版权等信息... 由于是Windows平台相关的东西,Qt助手中对 ...