bootstrap 之 列表组件使用
列表是几乎所有网站都会用到的一个组件,正好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 之 列表组件使用的更多相关文章
- Bootstrap学习之路(3)---列表组件
列表是几乎所有网站都会用到的一个组件,正好bootstrap也给我们提供了这个组件的样式,下面我给大家简单介绍一下bootstrap中的列表组件的用法! 首先,重提一下引用bootstrap的核心文件 ...
- 列表组件抽象(2)-listViewBase说明
这是我写的关于列表组件的第2篇博客.前面的相关文章有: 1. 列表组件抽象(1)-概述 listViewBase是列表组件所有文件中最核心的一个,它抽象了所有列表的公共逻辑,将来如果有必要添加其它公共 ...
- 利用bootstrap的modal组件自定义alert,confirm和modal对话框
由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootst ...
- 可展开的列表组件——ExpandableListView深入解析
可展开的列表组件--ExpandableListView深入解析 一.知识点 1.ExpandableListView常用XML属性 2.ExpandableListView继承BaseExpanda ...
- Android(java)学习笔记186:对ListView等列表组件中数据进行增、删、改操作
1.ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V: view (显示的视图) C: controller 控制器 入门案例: acit ...
- bootstrap轮播组件,大屏幕图片居中效果
在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中 ...
- bootstrap轮播组件之“如何关闭自动轮播”
在一个页面里使用多个bootstrap轮播组件的时候,如果还让所有轮播图都自动轮播的话,整个画面都在动,会给用户一种很不好的体验感受.所以,需要关闭轮播图的自动轮播. 关闭方法:去除如下属性即可: d ...
- React-Native新列表组件FlatList和SectionList学习 | | 联动列表实现
React-Native在0.43推出了两款新的列表组件:FlatList(高性能的简单列表组件)和SectionList(高性能的分组列表组件). 从官方上它们都支持常用的以下功能: 完全跨平台. ...
- Vue列表组件与弹窗组件示例
列表组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <me ...
随机推荐
- poj1088 经典DP
滑雪 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 88296 Accepted: 33100 Description ...
- 使用Win32 API 查找文件
头文件:#include <windows.h> //FindFirstFile() 获得指定目录的第一个文件 HANDLE FindFirstFile( LPCTSTR lpFileNa ...
- SQL基础-->层次化查询(START BY ... CONNECT BY PRIOR)[转]
--====================================================== --SQL基础-->层次化查询(START BY ... CONNECT BY ...
- zabbix之2安装编译/基本功能实现
1.安装方式: rpm或者编译都可,rpm可以直接用yum安装. rpm安装的话,根据文件名进行选择即可. 编译的话,不同参数对应不同的组件. 编译安装zabbix:同时安装server和agent, ...
- python笔记之中缀语法和管道实现
python笔记之中缀语法和管道实现 你知道什么是中缀语法吗?你知道python中的中缀操作是什么吗?那你知道操作python也是可以像unix的管道符一样方便吗?那么,废话不说了,直接上代码. cl ...
- 生产环境中CentOS7部署NET Core应用程序
NET Core应用程序部署至生产环境中(CentOS7) 阅读目录 环境说明 准备你的ASP.NET Core应用程序 安装CentOS7 安装.NET Core SDK for CentOS7. ...
- [TYVJ] P1030 乳草的入侵
乳草的入侵 背景 Background USACO OCT09 6TH 描述 Description Farmer John一直努力让他的草地充满鲜美多汁的而又健康的牧草.可惜天不从人愿,他在植物 ...
- ubuntu 中c 语言编程(学习)
ubuntu下c编程 c编程中相关文件后缀 .a 静态库(archive .c C源代码(需要编译预处理) .h C源代码头文件 .i C源代码 (不需要编译预处理) ...
- 24c16读写驱动程序
//////////////////////////////////////////////////////////////// //24c16读写驱动程序 // //模块调用: //读数据:read ...
- Qt之Windows资源文件(.rc文件)
简述 在Windows下使用Qt时,通常会用到Windows的资源文件 - 为exe设置信息,其中包括:文件说明.产品名称.产品版本.版权等信息... 由于是Windows平台相关的东西,Qt助手中对 ...