标题类、文本类、列表类、代码类、图文样式、表格布局、

最新推荐文章于 2024-04-24 15:41:29 发布

忘川之鱼

最新推荐文章于 2024-04-24 15:41:29 发布

阅读量394

点赞数

文章标签： bootstrap css html

本文链接：https://blog.youkuaiyun.com/m0_68618659/article/details/126430544

版权

本文详细介绍了Bootstrap中标题的设置，包括<h1>到<h6>标签及display类的使用。接着讲解了文本强化、按钮样式和文本对齐方式。此外，还涵盖了表格布局的基础和表头元素的样式。通过对Bootstrap样式的理解，可以更有效地美化网页内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、标题类

在HTML中，可以使用不同的标签来定义不同的文本样式，例如文字的大小、粗体、删除线等。Bootstrap通过覆写元素的默认样式，实现对页面布局的优化，让页面在用户面前呈现得更加美观。

在浏览网页时最先关注的就是文章的标题，Bootstrap和普通的HTML页面一样，都是使用<h1>到<h6>标签来定义标题。同时Bootstrap还提供了一系列display类来设置标题样式。

1、设置标题

在Bootstrap中对<h1>到<h6>标签默认样式进行了覆盖。需要注意的是，元素的样式会随着浏览器的修改而进行变动的，可以使元素在不同的浏览器下显示一样的效果。

2.1、使用的标签：

Bootstrap中<h1>-<h6>标题描述具体如下表所示。

上表中，Bootstrap标题的具体使用和平时的使用方法是一样的，从一级标题到六级标题，数字越大所代表的级别越小，文本也越小。

3.2使用类名

在Bootstrap中定义了六个类名h1到h6来让非标题元素实现标题效果，与<h1>~<h6>不同的是使用类名h1到h6的文本段不会视作HTML的标题元素，没有标题的含义。

<div class="h1">一级标题</div>

<div class="h2">二级标题</div>

<div class="h3">三级标题</div>

<div class="h4">四级标题</div>

<div class="h5">五级标题</div>

<div class="h6”>六级标题</div>

2.3、使用display类

如果想要将传统的标题元素设计得更加美观、醒目，来迎合网页内容。这时可以使用Bootstrap中提供的一系列display类来设置标题样式。

<h1 class="disp1ay-1">display1</h1>

<h1 class="display-2">display2</h1>

<hl class="display-3">display3</h1>

<hl class="display-4">display4</h1>

二、文本类

段落<p>元素是网页布局中的重要组成部分，在Bootstrap中为文本设置了一个全局的正文文本样式，包括对字体和字号、行高、颜色的基础设置。除此之外，为了显示美观，同时便于用户阅读，特意给p元素设置了margin值。

在实际项目中，对于一些重要的文本，开发者往往希望对这些文本进行特殊的样式设置，以突显其重要性。

1、强化文本

Bootstrap中提供了一些常用的内联元素来对文本进行强化突显重要内容，以实现风格统一、布局美观的效果．见下表所示。

标签	描述	标签	描述
<b>和<strong>	文本加粗	<mark>	标记，高亮显示
<de1>和<s>	删除线	<address>	表示地址
<ins>和<u>	下划线	<footer>	出处
<em>和<i>	斜体	<cite>	出处
<blockquote>	引用块，长引用	<abbr>	缩略语，鼠标悬停在该文本上时，显示title的属性值

<b>和<strong>默认情况下是加粗字体。前者是给其包裹的文本设置为bold粗体效果。而后者表示加强字符的语气，使用bo1d粗体来起到强调的作用。

<de1>和<s>都可以实现删除效果，但是<del>更具有语义化，能更形象的描述删除意思。<strong>和<em>具有强调作用，有利于SEO。

<ins>和<u>都可以实现下画线效果，但是前者通常与<del>一起使用。用来定义已经被插入文档中的文本，而后者表示为文本添加下划线。

<footer>和<cite>通常表示所包含的文本对某个参考文献的引用，区别在于后者引用的文本将以斜体显示。

<b>b 文本加粗</b>

<strong>strong文本加粗</ strong>

<de1>de1删除</de1>

<s>s 删除</s>

<p>1+1=<de1>4</de1><ins>2</ins>ins 下划线</p>

<u>u下划线</u>

<em>em斜体</em>

<i>i斜体</i>

<blockquote>blockquote 引用块</blockquote>

<mark>mark高亮显示</mark>

<address>address表示地址</address>

<footer>footer出处</footer>

<cite>cite出处</cite>

<abbr title=”我是提示信息">abbr缩略语</abbr>

2、按钮

可以使用.text-*将文本设置为指定的颜色。
text-light和.text-white在白色背景下看不清楚，可以设置一个黑色的背景来辅助查看效果。
可以使用.text-white-数值和.text-black-数值来设置颜色的透明度效果，后面的数值表示的是透明度。如.text-white-50和.text-black-50，分别表示透明度为0.5的白色或黑色文本。

<p class="text-primary">text-primary 蓝色</p>

<p class="text-secondary">text-secondary 灰色</p>

<p class="text-success">text-success 绿色</p>

<p class="text-danger">text-danger 红色</p>

<p class="text-warning">text-warning 橙色</p>

<p class="text-info">text-info 深蓝色</p>

<p class="text-light bg-dark">text-light 透明色</p>

<p class="text-dark">text-dark 黑色</p>

<p class="text-body">.text-body</p>

<p class="text-muted">.text-muted</p>

<p class="text-white bg-dark">.text-white</p>

<p class="text-black-50">.text-black-50</p>

<p class="text-white-50 bg-dark">.text-white-50</p>

3、文本格式

在网页布局中经常会用到文本对齐方式，在CSS中常常使用text-align属性来设置文本对齐方式。在Bootstrap中，为了简化操作，方便开发者使用，Bootstrap中提供了一系列的文本对齐样式和大小写相关的样式，具体见下表.

类名	描述
.text-Ieft	左对齐，默认由浏览器决定
.text-right	右对齐
.text-center	居中对齐
.text-justify	实现两端对齐文本效果
.text-nowrap	段落中超出屏幕部分不换行
.text-uppercase	设置英文大写
.text-lowercase	设置英文小写
.text-capitalize	设置每个单词首字母大写

<p class="text-left">左对齐效果</p>

<p class="text-right">右对齐效果</p>

<p class="text-center">居中对齐效果</p>

<p class="text-justify">两端对齐效果Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside

of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>

<p class="text-nowrap">不换行效果Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside

ofme. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>

<p class="text-uppercase">Some 英文大写</p>

<p class="text-lowercase">text-lowercase英文小写</p>

<p c1ass="text-capitalize">text-capitalize 每个单词首字母大写</p>

三、表格布局

在网页制作中，通常会用到表格的鼠标悬停、隔行变色等功能。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于<table>元素的表格样式如下表所示。

类名	描述
.table	基类，也就是表格的基本样式
pble-dark	设置颜色反转对比效果
.table-striped	条纹表格，设置斑马线效果，实现隔行换色
.table-bordered	带边框表格
.table-borderless	无边框表格
.table-hover	鼠标悬停效果,鼠标移动到行或单元格上，表格行变色
.table-sm	紧凑型表格
.table-responsive	响应式表格

上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。表内的样式可以组合使用，多个样式之间只需使用空格隔开即可，并且都支持.table-dark样式，适用于反转色调。

作用于<thead>表头元素的样式如表下所示。

类名	描述
.thead-light	设置表头浅灰色背景
.thead-dark	设置表头浅黑色背景

四、新媒体布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .container {
            width: 1000px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="card float-left" style="width: 18rem;">
            <img src="img/01.png" class="card-img-top" alt="...">
            <div class="card-body">
                <p class="card-text">Bootstrap响应式网页布局</p>
            </div>
            <div class="row">
                <a href="#" class="text-left col-md-4 text-secondary">难度:中级</a>
                <a href="#" class="text-right col-md-8 text-danger">观看次数: 99999</a>
            </div>
        </div>
        <div class="card float-left " style="width: 18rem;">
            <img src="img/01.png" class="card-img-top" alt="...">
            <div class="card-body">
                <p class="card-text">Bootstrap响应式网页布局</p>
            </div>
            <div class="row">
                <a href="#" class="text-left col-md-4 text-secondary">难度:中级</a>
                <a href="#" class="text-right col-md-8 text-danger">观看次数: 99999</a>
            </div>
        </div>
        <div class="card float-left" style="width: 18rem;">
            <img src="img/01.png" class="card-img-top" alt="...">
            <div class="card-body">
                <p class="card-text">Bootstrap响应式网页布局</p>
            </div>
            <div class="row">
                <a href="#" class="text-left col-md-4 text-secondary">难度:中级</a>
                <a href="#" class="text-right col-md-8 text-danger">观看次数: 99999</a>
            </div>
        </div>
    </div>

</body>

</html>