文档章节

bootstrap提供了六种列表效果

 老胡不胖
发布于 2015/12/03 14:08
字数 388
阅读 19
收藏 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列表组listgroup

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

老胡不胖
2015/11/27
6.2K
0
Bootstrap不同级别标题

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

9秒教育
2015/11/27
672
0
Bootstrap响应式前端框架笔记十一——分页与标签

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

珲少
2016/12/13
58
0
Bootstrap导入JavaScript插件

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

9秒教育
2015/11/28
99
0

没有更多内容

加载失败,请刷新页面

加载更多

阿里面试题

https://yq.aliyun.com/articles/6656 https://yq.aliyun.com/articles/7468

jason_kiss
27分钟前
3
0
阿里云Redis读写分离典型场景:如何轻松搭建电商秒杀系统

背景 秒杀活动是绝大部分电商选择的低价促销,推广品牌的方式。不仅可以给平台带来用户量,还可以提高平台知名度。一个好的秒杀系统,可以提高平台系统的稳定性和公平性,获得更好的用户体验...

别打我会飞
33分钟前
2
0
188. jsp提出公共的资源

平时我们会在一个地方 写一些重复的东西,为了便于管理我们需要将它提炼出来 1. 问题现象 2. 解决方式 (1) 提炼出该内容 <script type="text/javascript"> var net ={url: "${pageContext....

Lucky_Me
40分钟前
0
0
集合

集合 集合 集合介绍 前面的学习,我们知道数据多了,使用数组存放。而且数组中存放的都是基本类型的数据,并且数组是定长的。当在程序中创建的对象比较多的时候,需要对这些对象进行统一的管...

码农屌丝
47分钟前
1
0
jsp页面手写翻页小记

<s:if test="totalPage > 1"> <tr align="center"> <td colspan="4" align="center" style="height: 25px; text-align: center;">......

JackChenzp
47分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部