整理关于Bootstrap排版的慕课笔记(2)

text-muted:提示,使用浅灰色(#999)
text-primary:主要,使用蓝色(#428bca)
text-success:成功,使用浅绿色(#3c763d)
text-info:通知信息,使用浅蓝色(#31708f)
text-warning:警告,使用黄色(#8a6d3b)
text-danger:危险,使用褐色(#a94442)

文本对齐风格

在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格:

☑ 左对齐,取值left

☑ 居中对齐,取值center

☑ 右对齐,取值right

☑ 两端对齐,取值justify

为了简化操作,方便使用,Bootstrap通过定义四个类名来控制文本的对齐风格:

.text-left:左对齐

.text-center:居中对齐

.text-right:右对齐

.text-justify:两端对齐

特别声明:目前两端对齐在各浏览器下解析各有不同,特别是应用于中文文本的时候。所以项目中慎用。

列表

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

无序列表

Bootstrap对于列表,只是在margin上做了一些调整。

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

有序列表

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

定义列表

对于定义列表而言,Bootstrap并没有做太多的调整,只是调整了行间距,外边距和字体加粗效果。

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

<dl> <dt>北京</dt> <dd>北京是中国的首都,是政治文化集中地</dd> <dt>上海</dt> <dd>经济中心</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时,将会显示三个省略号

宽屏下的效果(屏幕大于768px):

整理关于Bootstrap排版的慕课笔记

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

整理关于Bootstrap排版的慕课笔记

## 去点列表
在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的,但在实际工作中很多时候,我们的列表是不需要这个编号的,比如说用无序列表做导航的时候。Bootstrap为众多开发者考虑的非常周道,通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。除了项目编号之外,还将列表默认的左边内距也清0了。

## 内联列表
Bootstrap像去点列表一样,通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。也可以说内联列表就是为制作水平导航而生。

## 描述列表

水平描述列表

代码

本节内容相对来说比较简单,一般在个人博客上使用的较为频繁,用于显示代码的风格。在Bootstrap主要提供了三种代码风格:
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码: <pre>元素一般用于显示大块的代码,并保证原有格式不变。但有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小。Bootstrap也考虑到这一点,你只需要在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。
3、使用<kbd></kbd>来显示用户输入代码

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwyfzs.html