章节
问答
课签
笔记
评论
占位
占位

列表--无序列表、有序列表

无序列表

无序列表和有序列表使用方式和我们平时使用的一样(无序列表使用ul,有序列表使用ol标签),在样式方面,Bootstrap只是在此基础上做了一些细微的优化,源码请查看bootstrap.css文件的第569行~第579行:

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
  margin-bottom: 0;
}

从源码上我们可以得知,Bootstrap对于列表,只是在margin上做了一些调整。我们来看一个简单的示例(右侧代码编辑器10-16行)。

列表嵌套

在Bootstrap中列表也是可以嵌套的,如右侧编辑器中的代码就是有序列表(25-35行)。

任务

我也来试试:完成下面任务

在右侧代码编辑器输入正确的代码,实现下图列表效果:

备注:这一小节没有正确性验证,请查看结果窗口与本任务所给的结果图片是否一致,从而判断输入代码是否正确。

?不会了怎么办

参考代码:

<ul>
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
    <li>列表项目4</li>
    <li>列表项目5</li>
</ul>
||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?