bootstrap提供了六种列表效果
bootstrap提供了六种列表效果
老胡不胖 发表于2年前
bootstrap提供了六种列表效果
  • 发表于 2年前
  • 阅读 18
  • 收藏 0
  • 点赞 0
  • 评论 1

【腾讯云】如何购买服务器最划算?>>>   

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


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


共有 人打赏支持
粉丝 0
博文 2
码字总数 1989
评论 (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:
×
老胡不胖
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: