列表,代码

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

无序列表<ul><li>...</li></ul>

有序列表<ol><li>...</li></ol>

定义列表<dl><dt>...</dt><dd>...</dd></dl>

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

无序列表

无序列表和有序列表使用方式和我们平时使用的一样(无序列表使用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中默认情况下无序列表有序列表是带有项目符号的,但在实际工作中很多时候,我们的列表是不需要这个编号的,比如说用无序列表做导航的时候。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;}

定义列表

对于定义列表而言,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;}

水平定义列表

水平定义列表就像内联列表一样,Bootstrap可以给<dl>添加类名".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"才具有水平定义列表效果。其实现主要方式:

①.将dt设置了一个左浮动,并且设置了一个宽度为160px;②.将dd设置了一个margin-left的值为180px,达到水平的效果;③.将标题宽度超过160px时,将会显示三个省略号。

代码

在Bootstrap主要提供了三种代码风格:

1.使用<code></code>来显示单行内联代码

2.使用<pre></pre>来显示多行块代码

3.使用<kbd></kbd>来显示用户输入代码

预编译版本的Bootstrap将代码的样式单独提取出来:

1.LESS版本,请查阅code.less文件

2.Sass版本,请查阅_code.scss文件

编译出来的CSS代码请查阅bootstrap.css文件第688行~第730行,由于代码太长,此处不一一例举。

在使用代码时,用户可以根据具体的需求来使用不同的类型:

1.<code>:一般是针对单个单词或单个句子的代码

2.<pre>:一般是针对多行代码(也就是成块的代码)

3.<kbd>:一般是表示用户通过键盘输入的内容

虽然不同的类型风格不一样,但其使用方法是类似的。

code风格:

<div><code>&It;... ...&gt;</code></div>

pre风格:

<div><pre>&It;... ...&gt;</pre></div>

kbd风格:

<div>请输入<kbd>...</kbd></div>

不管使用哪种代码风格,在代码中碰到小于号(<)要使用硬编码"&It;"替代,大于号(>)使用"&gt;"来替代。而且对于<pre>代码块风格,标签前面留多少个空格,在显示效果中就会留多少个空格。建议间编写HTML标签时,就控制好。

正如前面所示,<pre>元素一般用于显示大块的代码,并且保证原有格式不变。但有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小。Bootstrap也考虑到这一点,你只需要在pre标签上添加类名".pre-scrollable",就可以控制代码块区域最大高度为340px,一旦超出这个高,就会在Y轴出现滚动条。

/*源码请查看bootstrap.css第731行~第734行*/

.pre-scrollable{max-height:340px;overflow-y:scroll;}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容

  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,861评论 3 184
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • 本人技拙,还望不吝赐教。 bookstrap笔记 1.BookStrap是轻量级的CSS基础代码。大部分前端...
    陈佳岳阅读 1,044评论 0 8
  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 4,954评论 0 66
  • 这是上周番茄周报总结,可以清晰的看到第1、2天的时候是学习时间最多的。但经过一个最高峰后立马就跌倒了低谷。原因是前...
    cornsweet阅读 268评论 0 0