内容排版:列表


发布时间:2020-03-17 21:02    作者: 晖哥哥   已过去:1 年,8 月   阅读总量:752 已被赞:0


列表

列表样式初始化

ul(或ol)上使用.list-unstyled可以删除列表项目上默认的list-style以及左外边距(只针对直接子元素),这只生效于在直接子列表项目上,不影响你嵌套的子列表。

<ul class="list-unstyled">

<li>列表111</li>

<li>列表222</li>

<li>列表333</li>

<li>

<ul>

<li>aaa</li>

<li>bbb</li>

<li>ccc</li>

</ul>

</li>

</ul>

分行或单行多列并排 水平排列

使用.list-inline  .list-inline-item结合,可以实现列表逐行显示(默认不引用且无父元素影响也是逐行显示)、或单行并多列并排(遵循从左对右的原则、并清除margin方法)。

<!-- <ul class="list-inline"> -->

<ul>

<li class="list-inline">列表111</li>

<li>列表222</li>

<li>列表333</li>

</ul>

 

<ul class="list-inline">

<li class="list-inline-item">首页</li>

<li class="list-inline-item">最新资讯</li>

<li class="list-inline-item">公司简介</li>

</ul>

dl表格式水平描述

使用BootStrap栅格系统的预定义类(或者说语义化mixins),可以水平对齐条目和描述。对于较长的条目,你可以视情况添加一个.text-truncate类,从而用省略号截断文本

<dl class="row">

<dt class="col-sm-2">姓名</dt>

<dd class="col-sm-10">张三</dd>

 

<dt class="col-sm-2 text-truncate">是否有过带团队的经验以及团队遇到过的问题和解决办法</dt>

<dd class="col-sm-10">有过6年带领团队开发经验</dd>

 

<dt class="col-sm-2">其他</dt>

<dd class="col-sm-10">

<dl class="row">

<dt class="col-md-2">性别</dt>

<dd class="col-md-10">男</dd>

</dl>

</dd>

</dl>

 

点赞

0




登陆后方可评论