Bootstrap（二）排版布局的类

最新推荐文章于 2022-06-28 20:20:50 发布

We_jia

最新推荐文章于 2022-06-28 20:20:50 发布

阅读量942

点赞数

分类专栏： bootstrap 文章标签： bootstrap类

本文链接：https://blog.csdn.net/We_jia/article/details/88579776

版权

bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

排版布局的类

一、标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

<div class="h1">boot</div>
<h1>boot</h1>

在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

<div class="h1">boot<span class="small">strop</span></div>

二、页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。

1.通过添加 `.lead` 类可以让段落突出显示。

<div>nxjsckjdvjdvnjcnvkcm <p class="lead">kdjkdjvkfnk</p> </div>

2.内联文本元素

.mark/<mark>标签加背景色

<div class="mark">Bootstrap</div>

<mark>Bootstrap</mark>

<del>标签删除

<del>bootstrap</del>

<s>标签去掉没用的文本

<s>This line of text is meant to be treated as no longer accurate.</s>

<ins> 标签额外插入的文本使用

<ins>This line of text is meant to be treated as an addition to the document.</ins>

<u> 下划线

<u>This line of text is meant to be treated as an addition to the document.</u>

<strong> 值强调一段文本。

<p>The following snippet of text is <strong>rendered as bold text.</strong></p>

em 用斜体强调一段文本

<em>Bootstrap</em>

3.对齐

通过文本对齐类，可以简单方便的将文字重新对齐。

<div class="text-center">居中对齐</div>
<div class="text-right"> 右对齐</div>
<div class="text-left "> 左对齐</div>
<div class="text-justify "> 字体对齐</div>
<div class="text-nowrap "> 不换行</div>

4.改变大小写

<div class="text-uppercase">jhdfjdfkjdhkjf</div>
<div class="text-lowercase">JFDKSJFLKDJ</div>

5.缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容

<abbr title="attribute">attr</abbr>

6.无序有序列表

<!--list-unstyled 去点 取消间距-->
<!--list-inline 去点 转化水平块级-->
<ul class="list-inline">
    <li>Bootstrap</li>
    <li>Bootstrap</li>
    <li>Bootstrap</li>

</ul>
<ol  class=" list-unstyled">
    <li>Bootstrap</li>
    <li>Bootstrap</li>
    <li>Bootstrap</li>
</ol>

7. 水平排列的描述

<dl class="dl-horizontal">
    <dt>111</dt>
    <dd>333</dd>
</dl>

We_jia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap（二）排版布局的类

排版布局的类一、标题HTML 中的所有标题标签，<h1>到<h6>均可使用。另外，还提供了.h1到.h6类，为的是给内联（inline）属性的文本赋予标题的样式。<div class="h1">boot</div><h1>boot</h1>在标题内还可以包含<small>标...
复制链接

扫一扫