bootstrap3的list-unstyled和list-inline
2013-11-25 15:36
246 查看
1、相对应的版本
2.3版本 3.0版本
list-unstyled 无样式列表
移除了默认的
list-inline 内联列表
通过设置
2、实验代码:
3、效果图:
2.3版本 3.0版本
ul.unstyled | .list-unstyled |
ul.inline | .list-inline |
移除了默认的
list-style样式和左侧外边距的一组元素(只针对直接子元素)。这这是针对直接子元素,也就是说,你需要对所有嵌套的列表都添加此class才能具有同样的样式。
list-inline 内联列表
通过设置
display: inline-block;并添加少量的内补,将所有元素放置于同一列。
2、实验代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="dist/css/bootstrap.css"> <script type="text/javascript" src="dist/js/jquery.js"></script> <script type="text/javascript" src="dist/js/bootstrap.js"></script> <title>无标题文档</title> </head> <body style="margin:200px;"> <div class="container"> <p>这个是list-unstyled的列表样式标签</p> <ul class="list-unstyled"> <li>11111111111111</li> <li>11111111111111</li> <li>11111111111111 <ul> <li>2222222222222222222</li> <li>2222222222222222222</li> <li>2222222222222222222</li> </ul> </li> <li>11111111111111</li> </ul> ---------------------------------------我是分割线---------------------------------------------- <p>这个是list-inline的列表样式标签</p> <ul class="list-inline"> <li>11111111111111</li> <li>11111111111111</li> <li>22222222222222</li> <li>22222222222222</li> <li>23333333333333</li> <li>33333333333333</li> </ul> </div> </body> </html>
3、效果图:
相关文章推荐
- bootstrap3的list-unstyled和list-inline
- boostrap-非常好用但是容易让人忽略的地方【7】:list-unstyled list-inline
- Bootstrap3基础 list-inline 无序列表横向显示
- Mac下用vue-cli+webpack+bootstrap实现一个todo-list(一)
- bootstrap 实现用 table 表格显示list数据
- bootstrap之pager&listGroup&badge样式
- Bootstrap 3之美05-排版、Button、Icon、Nav和NavBar、List、Table、Form
- list-group(Bootstrap)
- Bootstrap基础14——列表list-group
- bootstrap教程(二) —— 列表组listgroup
- bootstrap教程(二) —— 列表组listgroup
- 使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容
- 深入理解BootStrap Item1-- 列表组(list-group)
- bootstrap列表组listgroup
- 基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
- bootstrap collapse MVC .net漂亮的折叠List
- C# MVC绑定 List<DapperRow>到bootstrap-table列表
- bootstrap 3 のcheckbox-inline
- Bootstrap列表组listgroup
- display:block/inline/inline-block/inline-table/list-item区别