文档章节

bootstrap提供了六种列表效果

 老胡不胖
发布于 2015/12/03 14:08
字数 388
阅读 20
收藏 0


移动互联时代,开发技能和开发思维是衡量一个程序员的最有效标准,但以目前国内HTML5的现状来说,整体水平略有不足,相对应的HTML5开发人才更是高薪难求。面对广阔的人才需求空间以及良好的就业形势,一直致力于移动互联网开发人才培养的H5EDU,也全新推出了由前阿里巴巴国际站核心开发工程师倾力打造,倾注多年移动前端开发领悟的HTML5完整课程体系,引爆新一轮前端开发学习的热潮,旨在帮助每个具有移动开发梦想的程序员找到最合适自己的路!


© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 2
码字总数 1989
作品 0
昌平
私信 提问
加载中

评论(1)

老胡不胖
列表--内联列表
Bootstrap像去点列表一样,通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。也可以说内联列表就是为制作水平导航而生。
/*源码查看bootstrap.css文件第584行~第593行*/

.list-inline { padding-left: 0; margin-left: -5px; list-style: none; } .list-inline > li { display: inline-block; padding-right: 5px; padding-left: 5px; }

看个示例:

<ul class="list-inline"> <li>W3cplus</li> <li>Blog</li> <li>CSS3</li> <li>jQuery</li> <li>PHP</li> </ul>

列表--定义列表
对于定义列表而言,Bootstrap并没有做太多的调整,只是调整了行间距,外边距和字体加粗效果。
/*源码请查看bootstrap.css文件第594行~第607行*/

dl { margin-top: 0; margin-bottom: 20px; } dt, dd { line-height: 1.42857143; } dt { font-weight: bold; } dd { margin-left: 0; }

对于定义列表使用,其实很简单,与我们以前的使用定义列表的方法是相同的:

<dl> <dt>W3cplus</dt> <dd>一个致力于推广国内前端行业的技术博客</dd> <dt>seashen.cn</dt> <dd>一个真心在做HTML5教育的网站</dd> </dl>

列表--水平定义列表
水平定义列表就像内联列表一样,Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
/*源码请查看bootstrap.css文件第608行~第621行*/

@media (min-width: 768px) { .dl-horizontal dt { float: left; width:
Bootstrap提供了六种列表效果

列表--简介 在HTML文档中,列表结构主要有三种:有序列表、无序列表和定义列表。具体使用的标签说明如下: 无序列表 <ul> <li>…</li> </ul> 有序列表 <ol> <li>…</li> </ol> 定义列表 <dl>......

9秒教育
2015/12/03
345
0
Bootstrap不同级别标题

Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所示: 通过比较可以发...

9秒教育
2015/11/27
672
0
Bootstrap列表组listgroup

列表组 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单、垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件。由于其在Bootstrap是一个独立的组件,所以也对应有自己独立...

老胡不胖
2015/11/27
6.3K
0
Bootstrap响应式前端框架笔记十一——分页与标签

Bootstrap响应式前端框架笔记十一——分页与标签 在开发搜索结果页、列表页时通常会使用到分页器控件,Bootstrap中提供了方便的类来进行分页器的创建,示例如下: 效果如下: 为li元素添加d...

珲少
2016/12/13
58
0
Bootstrap中的媒体对象

媒体对象 在Web页面或者说移动页面制作中,常常看到这样的效果,左边居左(或居右),内容居右(或居左)排列,如下图所示: 我们常常把这样的效果称为媒体对象。可以说他是一种抽像的样式,...

9秒教育
2015/12/01
26
0

没有更多内容

加载失败,请刷新页面

加载更多

集成测试——Spring TestContext框架支持详细解说

概述 集成测试是在单元测试之上,通常是将一个或多个已进行过单元测试的组件组合起来完成的,即集成测试中一般不会出现Mock对象,都是实实在在的真实实现。 对于单元测试,如前边在进行数据访...

呐呐丶嘿
3分钟前
0
0
爬取豆瓣电影TOP250的所有电影名称,网址为:https://movie.douban.com/top250

所谓静态页面是指纯粹的HTML格式的页面,这样的页面在浏览器中展示的内容都在HTML源码中。 目标:爬取豆瓣电影TOP250的所有电影名称,网址为:https://movie.douban.com/top250 1)确定目标网...

linjin200
3分钟前
0
0
ES6私有变量的实现

1. 约定 实现 class Example { constructor() { this._private = 'private'; } getName() { return this._private }}var ex = new Example();console.log(ex.getName()); // ......

peakedness丶
5分钟前
0
0
SQLServer AlwaysOn在阿里云的前世今生

缘起 早在2015年的时候,随着阿里云业务突飞猛进的发展,SQLServer业务也积累了大批忠实客户,其中一些体量较大的客户在类似大促的业务高峰时RDS的单机规格(规格是按照 内存CPUIOPS 一定比例...

阿里云官方博客
10分钟前
0
0
绑定域名到 GitHub Pages

GitHub Pages 绑定来自阿里云的域名 简介 我在阿里云上注册了一个新域名:yuanzb.com,我已经在GitHub Pages上建立了自己的博客:http://yuanzb.github.io/yuanzb/。现在我希望将yuanzb.com映...

临江仙卜算子
16分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部