Bootstrap列表
一、HTML的列表
在HTML文档中,列表结构主要有三种:有序列表、无序列表和定义列表。具体使用的标签说明如下:
1、无序列表
<ul>
<li>…</li>
</ul>
2、有序列表
<ol>
<li>…</li>
</ol>
3、定义列表
<dl>
<dt>…</dt>
<dd>…</dd>
</dl>
二、Bootstrap列表
Bootstrap根据平时的使用情形提供了六种形式的列表:
☑ 普通列表
☑ 有序列表
☑ 去点列表
☑ 内联列表
☑ 描述列表
☑ 水平描述列表
三、无序列表、有序列表
无序列表和有序列表使用方式和我们平时使用的一样(无序列表使用ul,有序列表使用ol标签)
在样式方面,Bootstrap只是在此基础上做了一些细微的优化,源码请查看bootstrap.css文件的第569行~第579行
从源码上我们可以得知,Bootstrap对于列表,只是在margin上做了一些调整。
在Bootstrap中列表也是可以嵌套的
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>普通列表、有序列表</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head> <body>
<h5>普通列表</h5>
<ul>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
</ul>
<h5>有序列表</h5>
<ol>
<li>项目列表一</li>
<li>项目列表二</li>
<li>项目列表三</li>
</ol>
<h5>有序列表嵌套</h5>
<ol>
<li>有序列表</li>
<li>
有序列表
<ol>
<li>有序列表(2)</li>
<li>有序列表(2)</li>
</ol>
</li>
<li>有序列表</li>
</ol> </body>
</html>
四、去点列表
在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的,但在实际工作中很多时候,我们的列表是不需要这个编号的,比如说用无序列表做导航的时候。
Bootstrap为众多开发者考虑的非常周道,通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。(源码请查看bootstrap.css文件第580行~第583行)
除了项目编号之外,还将列表默认的左边内距也清0了。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>去点列表</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head> <body>
<!--无序列表去点-->
<ul>
<li>
项目列表
<ul>
<li>带有项目符号</li>
<li>带有项目符号</li>
</ul>
</li>
<li>
项目列表
<ul class="list-unstyled">
<li>不带项目符号</li>
<li>不带项目符号</li>
</ul>
</li>
<li>项目列表</li>
</ul>
<!--有序列表去序号-->
<ol>
<li>
项目列表
<ol>
<li>带有项目编号</li>
<li>带有项目编号</li>
</ol>
</li>
<li>
项目列表
<ol class="list-unstyled">
<li>不带项目编号</li>
<li>不带项目编号</li>
</ol>
</li>
<li>项目列表</li>
</ol>
</body>
</html>
五、内联列表
Bootstrap像去点列表一样,通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。
也可以说内联列表就是为制作水平导航而生。(源码查看bootstrap.css文件第584行~第593行)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>内联列表</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head> <body>
<ul class="list-inline">
<li>W3cplus</li>
<li>Blog</li>
<li>CSS3</li>
<li>jQuery</li>
<li>PHP</li>
</ul> </body>
</html>
六、定义列表
对于定义列表而言,Bootstrap并没有做太多的调整,只是调整了行间距,外边距和字体加粗效果。(源码请查看bootstrap.css文件第594行~第607行)
对于定义列表使用,其实很简单,与我们以前的使用定义列表的方法是相同的
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>定义列表</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head> <body>
<dl>
<dt>W3cplus</dt>
<dd>一个致力于推广国内前端行业的技术博客</dd>
<dt>慕课网</dt>
<dd>一个真心在做教育的网站</dd>
</dl> </body>
</html>
Bootstrap列表的更多相关文章
- Bootstrap列表组
前面的话 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件.本文将详细介绍Bootstrap列表组 基础列表组 基础列表组,看 ...
- Bootstrap列表与代码样式(附源码)--Bootstrap
给大家分享下Bootstrap框架中列表与代码样式相关的知识 1.列表 (1)无序列表 <ul> <li>CN217编程</li> </ul> 注意:u ...
- 第二百四十二节,Bootstrap列表组面板和嵌入组件
Bootstrap列表组面板和嵌入组件 学习要点: 1.列表组组件 2.面板组件 3.响应式嵌入组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:列表组组件.面板组件. 响应 式嵌入组 ...
- 测开之路一百零九:bootstrap列表
bootstrap列表 引入bootstrap标签 原本的效果 水平显示 bootstrap列表 列表组合框 在组合框后面加备注 突出显示 a标签列表 <!DOCTYPE html>< ...
- 详解Bootstrap列表组组件
列表组可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件,列表组在bootstrap框架中也是一个独立的组件,所以也对应有自己独立源码: LESS:list-group.le ...
- bootstrap 列表 表格 表单 复选 单选 多选 输入框组
一.列表 ul li 二.表格 table (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...
- bootstrap 列表組
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- bootstrap 列表--水平定义列表
水平定义列表就像内联列表一样,Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果. @media (min-width: 768px) { ...
- ④bootstrap列表使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- K - Work 分类: 比赛 2015-07-29 19:13 3人阅读 评论(0) 收藏
K - Work Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Sta ...
- 一个html5开发工具
今天推荐一个Html5开发工具 sublimetext3 找了一个注册码 可用 —– BEGIN LICENSE —– Michael Barnes Single User License EA7E- ...
- P1533 可怜的狗狗
http://www.luogu.org/problem/show?pid=1533 题目背景 小卡由于公务需要出差,将新家中的狗狗们托付给朋友嘉嘉,但是嘉嘉是一个很懒的人,他才没那么多时间帮小卡喂狗 ...
- 工欲善其事必先利其器系列之:在VS里面折叠js代码
之前用vs写js的时候经常因为js代码过长而且不能像cs文件里面的方法一样进行折叠而抓狂,直到在扩展库发现了这款插件有了它就可以把代码进行折叠了 插件地址
- 自学QT笔记
前言: Qt 是一个跨平台的 C++图形用户界面库,由挪威 TrollTech 公司于1995年底出品. Trolltech 公司在 1994 年成立,但是在 1992 年,成立 Trolltech ...
- iOS深入学习(再谈block)
之前写过一篇博客,把Block跟delegate类比,说明了使用block,可以通过更少的代码实现代理的功能.那篇博客将block定义为类的property. 过了这么长时间,对于block的内容有了 ...
- git push 403
1. 在github上新建一个空项目. 2. git clone 到本地仓库. 3. git add [一些文件]. 4. git commit -m "first commit" ...
- Change Or Set Report Object Property At Run Time In Oracle Forms Using Set_Report_Object_Property Command
Sets the Report object property at run time in Oracle Forms of an report object. The following are t ...
- [HDOJ5950]Recursive sequence(递推,二项展开,矩阵快速幂)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5950 题意:求解递推式f(n)=f(n-1)+2*f(n-2)+n^4. 写了个小东西,不过我的文章里 ...
- ubuntu14.04 64位系统下编译3.13.11内核源码
该过程一共分为四步: 1.下载内核:我下载的是3.13.11这个版本的内核! 2.解压内核:我将其解压/home/jello/Downloads/linux-3.13.11目录下!下文将会基于此目录编 ...