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

列表--去点列表

小伙伴们可以看到,在Bootstrap中默认情况下无序列表有序列表是带有项目符号的,但在实际工作中很多时候,我们的列表是不需要这个编号的,比如说用无序列表做导航的时候。Bootstrap为众多开发者考虑的非常周道,通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
/*源码请查看bootstrap.css文件第580行~第583行*/

.list-unstyled {
padding-left: 0;
list-style: none;
}

从示例中可以看出,除了项目编号之外,还将列表默认的左边内距清0了。

具体使用,我们来看简单的两个示例(代码编辑器11-45行)。

任务

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

在右侧代码编辑器第47行输入正确代码,实现下图效果:

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

?不会了怎么办

正确代码如下:

||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

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

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

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

举报

0/150
提交
取消
全部 精华 我要发布

+ 我来回答 回答最高可+2积分

最新回答 / 慕少4174303
是不是版本不同处理方式不同?

已采纳回答 / 慕粉6173881
是对的,不过你二级和四级列表去掉了格式,看的很奇怪

已采纳回答 / 慕函数9341395
<il>有序项目列表一</il> <il>有序项目列表二    把<il>改成<li>

最新回答 / 慕雪3518308
<!--下面是代码任务部分--><ol>    <li>有序项目列表一</li>    <li>有序项目列表二        <ol class=list-unstyled>            <li>有序二级项目列表一</li>            <li>有序二级项目列表二                <ul>                    <li>无序三...

最新回答 / 慕仰7495308
写法不规范,不算错,以后写的嵌套多了,就会很麻烦,

最赞回答 / 一缕微笑
浏览器原因,换个浏览器看的正常的。

最赞回答 / 孙瑀晗
前端开发框架,用来开发WEB页面,构建整洁,美观,简单,灵活WEB页面的工具集

最新回答 / 洞悉天下
阔以去bootstrap官网下载或者使用cdn

已采纳回答 / 爱是深深的喜欢
首先我不太清楚你引入的是那个版本的css文件,但是你可以使用搜索功能在你的bootstrap.css中搜索一下是否有“list-unstyled”如果有的话就不需要修改css的文件连接了!直接在ul中添加class='list-unstyled'就可以实现去掉园点的功能了。如果没有查找到'list-unstyled'这个类就需要更换的bootstrap.css文件。但是也要注意版本对于你其他页面样式的影响。

已采纳回答 / Lilphx
可以吧

已采纳回答 / boygoujun
<ol><li>有序项目列表一&li&/li&序项目&表二&li&/li有序项目列表二&-un/li&ed">ol class="list-unstyled"&;/l  &;  li &li 有序二级项目列表一</li&t;   &t;lli &;无序有序二级项目列表二>/li&项目列   &/liul&;     &i  li...

+ 我来回答 回答最高可+2积分
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言