<
div

class
=
"
container
"
>

<
h1
>
更小文本标题
h1
>

<
p
>
small 元素用于字号更小的颜色更浅的文本:
p
>

<
h1
>
h1 标题
<
small
>
副标题
small
>
h1
>

<
h2
>
h2 标题
<
small
>
副标题
small
>
h2
>

<
h3
>
h3 标题
<
small
>
副标题
small
>
h3
>

<
h4
>
h4 标题
<
small
>
副标题
small
>
h4
>

<
h5
>
h5 标题
<
small
>
副标题
small
>
h5
>

<
h6
>
h6 标题
<
small
>
副标题
small
>
h6
>

div
>

尝试一下 »

Bootstrap 4 定义 为黄色背景及有一定的内边距:

实例

<
div

class
=
"
container
"
>

<
h1
>
高亮文本
h1
>

<
p
>
使用 mark 元素来
<
mark
>
高亮
mark
>
文本。
p
>

div
>

尝试一下 »

Bootstrap 4 定义 HTML 元素的样式为显示在文本底部的一条虚线边框:

实例

<
div

class
=
"
container
"
>

<
h1
>
Abbreviations
h1
>

<
p
>
The abbr element is used to mark up an abbreviation or acronym:
p
>

<
p
>
The
<
abbr

title
=
"
World Health Organization
"
>
WHO
abbr
>
was founded in 1948.
p
>

div
>

尝试一下 »

对于引用的内容可以在

上添加 .blockquote 类 :

实例

<
div

class
=
"
container
"
>

<
h1
>
Blockquotes
h1
>

<
p
>
The blockquote element is used to present content from another source:
p
>

<
blockquote

class
=
"
blockquote
"
>

<
p
>
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
p
>

<
footer

class
=
"
blockquote-footer
"
>
From WWF's website
footer
>

blockquote
>

div
>

尝试一下 »

Bootstrap 4 定义 HTML

元素的样式如下:

实例

<
div

class
=
"
container
"
>

<
h1
>
Description Lists
h1
>

<
p
>
The dl element indicates a description list:
p
>

<
dl
>

<
dt
>
Coffee
dt
>

<
dd
>
- black hot drink
dd
>

<
dt
>
Milk
dt
>

<
dd
>
- white cold drink
dd
>

dl
>

div
>

尝试一下 »

Bootstrap 4 定义 HTML 元素的样式如下:

实例

<
div

class
=
"
container
"
>

<
h1
>
代码片段
h1
>

<
p
>
可以将一些代码元素放到 code 元素里面:
p
>

<
p
>
以下 HTML 元素:
<
code
>
span
code
>
,
<
code
>
section
code
>
, 和
<
code
>
div
code
>
用于定义部分文档内容。
p
>

div
>

尝试一下 »

Bootstrap 4 定义 HTML 元素的样式如下:

实例

<
div

class
=
"
container
"
>

<
h1
>
Keyboard Inputs
h1
>

<
p
>
To indicate input that is typically entered via the keyboard, use the kbd element:
p
>

<
p
>
Use
<
kbd
>
ctrl + p
kbd
>
to open the Print dialog box.
p
>

div
>

尝试一下 »

Bootstrap 4 定义 HTML

 元素的样式如下:
实例
<

div

 

class

=

"

container

"

>

 

<

h1

>

Multiple Code Lines


h1

>

 

<

p

>

For multiple lines of code, use the pre element:


p

>

 

<

pre

>

 Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks. 


pre

>

 


div

>


尝试一下 » 
更多排版类
 下表提供了 Bootstrap4 更多排版类的实例：



类名
描述
实例


.font-weight-bold
加粗文本
尝试一下


.font-weight-normal
普通文本
尝试一下


.font-weight-light
更细的文本
尝试一下


.font-italic
斜体文本
尝试一下


.lead
让段落更突出
尝试一下


.small
指定更小文本 (为父元素的 85% )
尝试一下


.text-left
左对齐
尝试一下


.text-center
居中
尝试一下


.text-right
右对齐
尝试一下


.text-justify
设定文本对齐,段落中超出屏幕部分文字自动换行
尝试一下


.text-nowrap
段落中超出屏幕部分不换行
尝试一下


.text-lowercase
设定文本小写
尝试一下


.text-uppercase
设定文本大写
尝试一下


.text-capitalize
设定单词首字母大写
尝试一下


.initialism
显示在  元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
尝试一下


.list-unstyled
移除默认的列表样式，列表项中左对齐 ( 
 和 
 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
尝试一下


.list-inline
将所有列表项放置同一行
尝试一下


.pre-scrollable
使 
 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
尝试一下


            

                网站栏目：创新互联Bootstrap4教程：Bootstrap4文字排版
                

                当前链接：http://www.shufengxianlan.com/qtweb/news21/450021.html
            
            

                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
            

                广告
                
            
            

                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联