公共样式:文本处理。文本对齐,包裹和溢出,粗斜体,等宽字体


发布时间:2020-03-17 21:18    作者: 晖哥哥   已过去:2 年,3 月   阅读总量:1044 已被赞:0


文本处理

文本对齐

使用文本对齐.text{-sm/md/lg/xl}-left/center/right/justify样式类轻松地将文本重新对齐到组件。

<p>left</p>

<p class="text-md-center">center</p>

<p class="text-right">right</p>

<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

文本包裹和溢出(换行)处理

.text-nowrap class样式类可以防止文本换行

<div class="border border-danger text-nowrap" style="width:8rem;">

This text should overflow the parent.

</div>

对于更长的内容,你可以添加一个 .text-truncate class样式,以省略号截断文本(需要结合 display: inline-block  display: block来使用)。d-inline-block 要是块级元素才行

<div class="border border-danger text-truncate" style="width:8rem;">

This text should overflow the parent.

</div>

<!-- <span class="border border-danger d-inline-block text-truncate" style="width:8rem;">

This text should overflow the parent.

</span> -->

字母大小写转换

使用文本大小写样式将文字内容由小写,转为大写(不支持中文)。

text-capitalize仅支持每一个词的第一个字母转为大写,而其它字母不受影响。

<p class="text-lowercase">LowerCased text.</p> #全转小

<p class="text-uppercase">UpperCased text.</p>#全转大写

<p class="text-capitalize">CapiTaliZed text.</p>#单词首字母转大写

粗细和斜体

<p class="font-weight-bold">Bold text.</p> #粗体

<p class="font-weight-normal">Normal weight text.</p> 

<p class="font-weight-light">Light weight text.</p>

<p class="font-italic">Italic text.</p>3斜体

等宽字体

将选择更改为我们的等宽字体堆栈.text-monospace

<p>This is in monospace. 这是等宽。</p>

<p class="text-monospace">This is in monospace. 这是等宽。</p>

垂直对齐

使用 vertical-alignment 通用样式改变元素的对齐,注意:垂直对齐仅影响 内联inline、 内联块inline-block、 内联表inline-table、 表格单元格table cell 元素。

可选属性有:.align-baseline.align-top.align-middle.align-bottom

.align-text-bottom.align-text-top

访问<a href="http://www.web-666.com">网战天下</a>观看更多精品教程。

<button class="align-top">点击观看</button>

table cells表格单元格:

<table class="table table-bordered" style="height:100px;">

<tbody>

<tr>

<td>top</td> #顶部左对齐

<td class="align-middle">middle</td>#垂直中部左对齐

<td class="align-bottom">bottom</td>#垂直中部底对齐

</tr>

</tbody>

</table>

规格与尺寸

宽度和高度可以用.w/h-25/50/75/100产生,包括 25%50%75% 100% ,你可根据整这些值,从而生产出不同的规格属性。

<p class="bg-danger w-25">Width 25%</p>

<p class="bg-danger w-50">Width 50%</p>

<p class="bg-danger w-75">Width 75%</p>

<p class="bg-danger w-100">Width 100%</p>

 

<div class="border border-danger" style="height:100px;">

<div class="d-inline-block bg-primary h-25">Height 25%</div>

<div class="d-inline-block bg-primary h-50">Height 50%</div>

<div class="d-inline-block bg-primary h-75">Height 75%</div>

<div class="d-inline-block bg-primary h-100">Height 100%</div>

</div>

 

你也可使用.mw-100.mh-100产生max-width: 100%;  max-height: 100%; 这些通用样式定义 高宽 比例显示 合起来简写

<div class="bg-danger" style="width:200px;height:200px;">

<div class="bg-primary mw-100 mh-100" style="width:300px;height:300px;"></div>

</div>

间隔

Spacing 通用样式适用于所有屏幕尺寸,从 xs  xl各种规格尺寸。因为这些类是从min-width: 0及以上开始引用的,所以不受媒体查询的约束,然而,其余的屏幕断点(设备解析)包含屏幕尺寸缩写。

对于xs屏幕,使用固定格式{property}{sides}-{size} 命名CSS方法,对于smmdlgxl使用{property}{sides}-{breakpoint}-{size}格式命名CSS方法。

如果 属性(property) 是下列之一:

  1. m - 这个Class属性会设定 margin #与外部的距离
  2. p - 这个Class属性会设定 padding #元素内部的距离

边缘(sides) 设定:

  1. t - 这个Class属性会设定 margin-top  padding-top  #上  和属性结合起来就是mt-多少,外部距离,上面间隔2尺寸
  2. b - 这个Class属性会设定 margin-bottom  padding-bottom #下
  3. l - 这个Class属性会设定 margin-left  padding-left #左
  4. r - 这个Class属性会设定 margin-right  padding-right #右
  5. x - 这个Class属性会设定 *-left  *-right两个值。 mx,my 是水平x移动(x坐标)
  6. y - 这个Class属性会设定 *-top  *-bottom两个值 px py 是垂直上下移动(y坐标)
  7. 空白 - 这个Class属性会设定 margin padding 元素的四个边。

 mx-auto 戴上高度,实现水平居中

尺寸(size) 规格定义:

0 - 这个Class属性会设定 margin padding 的样式值为 0

1 - (默认时)这个Class属性会设定 margin padding $spacer * .25规格呈现

2 - (默认时) 这个Class属性会设定 margin padding $spacer * .5规格呈现

3 - (默认时)这个Class属性会设定 margin padding $spacer * 1规格呈现

4 - (默认时) 这个Class属性会设定margin padding $spacer * 1.5规格呈现

5 - (默认时)这个Class属性会设定 margin padding $spacer * 3规格呈现

直接 p-(1-5) 是四个方向都撑开距离

auto - 这个Class属性会设定 margin auto(按浏览器默认值自由展现)。

<div class="d-inline-block border border-danger p-md-5">

111

</div>

水平居中Bootstrap也包括一个 .mx-auto class样式,用于固定宽度的盒模型水平居中,具有display: block  width 设置水平边距内容的auto居中。

<div class="d-block border border-danger w-25 mx-auto">

111

</div>

阴影

可以使用.shadow-none清除阴影效果.shadow{-sm/lg}添加阴影效果,可加断点实用工具类快速添加或删除阴影。

<div class="p-3 mb-5 bg-white rounded">网战天下</div>

<div class="p-3 mb-5 bg-white rounded shadow">网战天下</div>

<div class="p-3 mb-5 bg-white rounded shadow-sm">网战天下</div>

<div class="p-3 mb-5 bg-white rounded shadow-lg">网战天下</div>

<div class="p-3 mb-5 bg-white rounded shadow-none" style="box-shadow:10px 10px 5px #EEE;">网战天下</div>

 

点赞

0




登陆后方可评论