文档章节

bootstrap提供了六种列表效果

 老胡不胖
发布于 2015/12/03 14:08
字数 388
阅读 18
收藏 0
点赞 0
评论 1


移动互联时代,开发技能和开发思维是衡量一个程序员的最有效标准,但以目前国内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 ⋅ 0

Bootstrap列表组listgroup

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

老胡不胖 ⋅ 2015/11/27 ⋅ 0

Bootstrap不同级别标题

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

9秒教育 ⋅ 2015/11/27 ⋅ 0

Bootstrap响应式前端框架笔记十一——分页与标签

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

珲少 ⋅ 2016/12/13 ⋅ 0

Bootstrap导入JavaScript插件

导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。 Bootstrap的JavaScript插件可以单独导入到页面中,...

9秒教育 ⋅ 2015/11/28 ⋅ 0

Bootstrap中的媒体对象

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

9秒教育 ⋅ 2015/12/01 ⋅ 0

bootstrap导入JavaScript插件

导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。 Bootstrap的JavaScript插件可以单独导入到页面中,...

9秒学院 ⋅ 2015/12/30 ⋅ 0

你不得不会的MarkDown--手把手教你掌握MarkDown

关于MarkDown的介绍这里就不过多介绍了,因为很多小伙伴的博文里都已经有介绍过,而且内容都是一样的。这里直接教大家实践。 显然已经成为每个IT人的标配了。如果不会点儿,真的不好意思跟别...

bigstone2012 ⋅ 2017/12/05 ⋅ 0

bootstrap模态弹出框

模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js。 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件。 样式代码: ☑ LE...

老胡不胖 ⋅ 2015/11/23 ⋅ 0

Bootstrap 进度条媒体对象和 Well 组件

一.Well 组件 这个组件可以实现简单的嵌入效果。 //嵌入效果 Bootstrap //有 lg 和 sm 两种可选值 Bootstrap 二.进度条组件 进度条组件为当前工作流程或动作提供时时反馈。 //基本进度条 ...

菜鸟不菜么 ⋅ 05/14 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

浅谈springboot Web模式下的线程安全问题

我们在@RestController下,一般都是@AutoWired一些Service,由于这些Service都是单例,所以并不存在线程安全问题。 由于Controller本身是单例模式 (非线程安全的), 这意味着每个request过来,...

算法之名 ⋅ 今天 ⋅ 0

知乎Java数据结构

作者:匿名用户 链接:https://www.zhihu.com/question/35947829/answer/66113038 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 感觉知乎上嘲讽题主简...

颖伙虫 ⋅ 今天 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部