• bootstrap01列表


     1.<ul>无序、<ol>有序

    <h5>普通列表</h5>
    <ul>
        <li>列表项目</li>
        <li>列表项目</li>
        <li>列表项目</li>
        <li>列表项目</li>
        <li>列表项目</li>
    </ul>
    <h5>有序列表</h5>
    <ol>
       <li>项目列表一</li>
       <li>项目列表二</li>
       <li>项目列表三</li>
    </ol>

    2.去点列表

      给列表添加.list-unstyled,可以去除默认列表样式风格。

    <ol>
        <li>有序项目列表一</li>
        <li>有序项目列表二</li>
            <ol class="list-unstyled">
                <li>有序二级列表项目列表一</li>
                <li>有序二级列表项目列表二</li>
                <ul>
                    <li>无序三级项目列表一</li>
                    <li>无序三级列表项目二</li>
                    <ul class="list-unstyled">
                        <li>无序四级项目列表一</li>
                        <li>无序四级列表项目二</li>
                    </ul>
                    <li>无序三级项目列表三</li>
                </ul>
                <li>有序二级项目列表三</li>
            </ol>
        <li>有序项目列表三</li>
    </ol>

    3.列表--内联列表

      通过添加类名“.list-inline”来实现内联列表,把垂直列表转换为水平列表,而且去除项目符号,保持水平显示。

    <ul class="list-inline">
        <li>W3cplus</li>
        <li>Blog</li>
        <li>CSS3</li>
        <li>jQuery</li>
        <li>PHP</li>
    </ul>

    4.定义列表

    <dl>
        <dt>定义列表标题</dt>
        <dd>定义列表信息1</dd>
        <dd>定义列表信息2</dd>
    </dl

    5.列表--水平定义列表

      Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。

    <dl class="dl-horizontal">
        <dt>W3cplus</dt>
        <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任,不断活跃在行业技术最前沿,努力提供高质量前端技术博文
      </dd>
    </dl>
  • 相关阅读:
    1337:【例3-2】单词查找树
    1336:【例3-1】找树根和孩子
    1301:大盗阿福
    CSP-J/S 第一轮知识点选讲
    【转】C++STL各容器的操作及复杂度
    如何查看SUSE的版本信息
    野人和传教士过河问题的C语言源代码
    ubuntu如何安装软件
    Heavy Transportation POJ
    Heavy Transportation POJ
  • 原文地址:https://www.cnblogs.com/hunter1/p/16017062.html
Copyright © 2020-2023  润新知