Bootstrap提供了六种列表效果

Stella981
• 阅读 532

Bootstrap提供了六种列表效果

列表--简介

在HTML文档中,列表结构主要有三种:有序列表、无序列表和定义列表。具体使用的标签说明如下:
无序列表

<ul>     <li>…</li> </ul>

有序列表

<ol>     <li>…</li> </ol>

定义列表

<dl>     <dt>…</dt>     <dd>…</dd> </dl>

Bootstrap根据平时的使用情形提供了六种形式的列表:

☑  普通列表

☑  有序列表

☑  去点列表

☑  内联列表

☑  描述列表

☑  水平描述列表

接下来,我们一起来学习Bootstrap提供的这六种列表的使用方法

列表--简介
  • 无序列表信息1
  • 无序列表信息2
  • 无序列表信息3
  1. 有序列表信息1
  2. 有序列表信息2
  3. 有序列表信息3
定义列表标题
定义列表信息1
定义列表信息2

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

无序列表

无序列表和有序列表使用方式和我们平时使用的一样(无序列表使用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上做了一些调整。

列表嵌套

在Bootstrap中列表也是可以嵌套的。

普通列表
  • 列表项目
  • 列表项目
  • 列表项目
  • 列表项目
  • 列表项目
有序列表
  1. 项目列表一
  2. 项目列表二
  3. 项目列表三
有序列表嵌套
  1. 有序列表
  2. 有序列表
    1. 有序列表(2)
    2. 有序列表(2)
  3. 有序列表

列表--去点列表

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

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

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

  • 项目列表
    • 不带项目符号
    • 不带项目符号
  • 列表--内联列表

    Bootstrap像去点列表一样,通过添加类名“**.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表而且去掉项目符号(编号)保持水平显示**。也可以说内联列表就是为制作水平导航而生。
    /*源码查看bootstrap.css文件第584行~第593行*/

    .list-inline { padding-left: 0; margin-left: -5px; list-style: none; } .list-inline > li { display: inline-block; padding-right: 5px; padding-left: 5px; }
    

    看个示例:

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

    列表--定义列表

    对于定义列表而言,Bootstrap并没有做太多的调整,只是调整了行间距外边距字体加粗效果。
    /*源码请查看bootstrap.css文件第594行~第607行*/

    dl { margin-top: 0; margin-bottom: 20px; } dt, dd { line-height: 1.42857143; } dt { font-weight: bold; } dd { margin-left: 0; }
    

    对于定义列表使用,其实很简单,与我们以前的使用定义列表的方法是相同的:

    <dl>     <dt>W3cplus</dt>     <dd>一个致力于推广国内前端行业的技术博客</dd>     <dt>seashen.cn</dt>     <dd>一个真心在做HTML5教育的网站</dd> </dl>
    

    列表--水平定义列表

    水平定义列表就像内联列表一样,Bootstrap可以给

    添加类名“**.dl-horizontal**”给定义列表实现水平显示效果。
    /*源码请查看bootstrap.css文件第608行~第621行*/

    @media (min-width: 768px) { .dl-horizontal dt { float: left; width: 160px; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis; white-space: nowrap;   } .dl-horizontal dd { margin-left: 180px;   } }
    

    此处添加了一个媒体查询。也就是说,只有屏幕大于768px的时候,添加类名“**.dl-horizontal**”才具有水平定义列表效果。其实现主要方式:
    1、将dt设置了一个左浮动,并且设置了一个宽度为160px
    2、将dd设置一个margin-left的值为180px,达到水平的效果
    3、当标题宽度超过160px时,将会显示三个省略号

    其用法如下:

    <dl>     <dt>W3cplus</dt>     <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任,不断活跃在行业技术最前沿,努力提供高质量前端技术博文</dd>     <dt>seashen.cn</dt>     <dd>一个专业的HTML5网站</dd>     <dt>我来测试一个标题,我来测试一个标题</dt>     <dd>我在写一个水平定义列表的效果,我在写一个水平定义列表的效果</dd> </dl>
    

    当你缩小你的浏览器屏幕时,水平定义列表将回复到原始的状态。

    点赞
    收藏
    评论区
    推荐文章
    blmius blmius
    3年前
    MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
    文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
    Wesley13 Wesley13
    3年前
    java将前端的json数组字符串转换为列表
    记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
    皕杰报表之UUID
    ​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
    待兔 待兔
    3个月前
    手写Java HashMap源码
    HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
    Jacquelyn38 Jacquelyn38
    3年前
    2020年前端实用代码段,为你的工作保驾护航
    有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
    Wesley13 Wesley13
    3年前
    00:Java简单了解
    浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
    Easter79 Easter79
    3年前
    Swift项目兼容Objective
    !456.jpg(http://static.oschina.net/uploads/img/201509/13172704_1KcG.jpg"1433497731426906.jpg")本文是投稿文章,作者:一叶(博客(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2F00red
    Stella981 Stella981
    3年前
    Django中Admin中的一些参数配置
    设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
    Wesley13 Wesley13
    3年前
    MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
    背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
    Python进阶者 Python进阶者
    9个月前
    Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
    大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这