zoukankan      html  css  js  c++  java
  • Bootstrap系列 -- 7. 列表排版方式

    一. 去点列表

      1. 使用class=list-unstyled

    <ul >
            <li>无序列表项目</li>
            <li>无序列表项目</li>
            <li>无序列表项目</li>
            <li>无序列表项目</li>
            <li>无序列表项目</li>
        </ul>
    
        <ul class="list-unstyled">
            <li>无序列表项目</li>
            <li>无序列表项目</li>
            <li>无序列表项目</li>
            <li>无序列表项目</li>
            <li>无序列表项目</li>
    </ul>
    View Code

      有点列表和无点列表对比代码如上,效果图如下

     

    二. 排列一行列表

      使用 list-inline 样式

    <ul class="list-inline">
            <li>无序列表项目</li>
            <li>无序列表项目</li>
            <li>无序列表项目</li>
            <li>无序列表项目</li>
            <li>无序列表项目</li>
    </ul>
    View Code

    三. 混合使用

    <ul class="list-unstyled">
            <li>程序:
            </li>
            <li>
                <ul class="list-inline">
                    <li>C#</li>
                    <li>JS</li>
                    <li>java</li>
                </ul>
            </li>
    </ul>

  • 相关阅读:
    .gitignore规则不生效的解决办法
    docker使用
    mysql 操作
    outlook转发问题
    我的梦想
    安静与流动
    sql 统计 学生成绩2
    sql 统计 关于学生成绩
    数据库备份
    web 注销回到登录页面
  • 原文地址:https://www.cnblogs.com/qingyuan/p/4589135.html
Copyright © 2011-2022 走看看