Bootstrap系列 -- 7. 列表排版方式

简介: 一. 去点列表   1. 使用class=list-unstyled 无序列表项目 无序列表项目 无序列表项目 无序列表项目 无序列表项目 无序列...

 

一. 去点列表

  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>

 

相关文章
|
前端开发
【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
N..
|
开发框架 前端开发 容器
Bootstrap排版
Bootstrap排版
N..
126 0
|
前端开发 开发者 容器
|
前端开发 JavaScript 容器
Bootstrap 列表样式
Bootstrap 列表样式
127 0
|
11月前
Bootstrap5 列表组3
使用 `.list-group-flush` 类可以移除列表的边框和圆角,使列表更加简洁。
|
11月前
Bootstrap5 列表组2
使用 `.disabled` 类可设置禁用的列表项,而将 `&lt;ul&gt;` 替换为 `&lt;div&gt;`、`&lt;a&gt;` 替换 `&lt;li&gt;` 并添加 `.list-group-item-action` 类可创建带有悬停效果的链接列表项。示例代码展示了这两种用法。
|
11月前
Bootstrap5 列表组1
Bootstrap5 列表组主要用于展示无序列表。通过在 `&lt;ul&gt;` 元素上添加 `.list-group` 类,并在 `&lt;li&gt;` 元素上添加 `.list-group-item` 类,可以轻松创建列表组。此外,可以通过添加 `.active` 类来标记当前激活的列表项。
|
11月前
Bootstrap5 列表组4
列表项可以通过不同的类名设置多种颜色,如成功、次要、信息、警告、危险、主要、深灰和浅色等。示例如下:
|
11月前
|
前端开发
Bootstrap5 列表组5
这是一个包含多种颜色的链接列表项示例,使用了 Bootstrap 的 `list-group` 类。每个列表项都有不同的背景颜色,分别表示激活、成功、次要、信息、警告、危险、主要、深灰和浅色状态。
|
12月前
|
前端开发
Bootstrap5 文字排版3
Bootstrap 5 默认字体大小为 16px,行高 1.5,字体族为 &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif。所有元素默认上边距为 0,下边距为 1rem (16px)。HTML 标题(h1 至 h6)和代码元素(code、kbd、pre)均有预设样式,方便快速开发和一致的视觉效果。