Bootstrap笔记(七) 排版 - 文字篇

最新推荐文章于 2022-05-23 01:29:51 发布

XI_MILU

最新推荐文章于 2022-05-23 01:29:51 发布

阅读量333

点赞数

分类专栏： Bootstrap 文章标签：前端 bootstrap

本文链接：https://blog.csdn.net/XI_MILU/article/details/119802943

版权

Bootstrap 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

排版 - 文字

文字对齐

Bootstrap提供了以下文字对齐类别

在这里插入图片描述

範例:

<!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">
    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>文字对齐</title>
</head>
<body>
    <div class="container">
        <p class="text-start">文字從頭對齊-文字從頭對齊-文字從頭對齊-文字從頭對齊-文字從頭對齊-文字從頭對齊-文字從頭對齊-文字從頭對齊-文字從頭對齊</p>
        <p class="text-center">文字置中-文字置中-文字置中-文字置中-文字置中-文字置中-文字置中-文字置中-文字置中-文字置中-文字置中-文字置中-文字置中</p>
        <p class="text-end">文字從尾對齊-文字從尾對齊-文字從尾對齊-文字從尾對齊-文字從尾對齊-文字從尾對齊-文字從尾對齊-文字從尾對齊-文字從尾對齊</p>
        <p class="text-wrap">文字換行-文字換行-文字換行-文字換行-文字換行-文字換行-文字換行-文字換行-
                             文字換行-文字換行-文字換行-文字換行-文字換行-文字換行-文字換行-文字換行-
                             文字換行-文字換行-文字換行-文字換行-文字換行-文字換行-文字換行-文字換行</p>
        <p class="text-nowrap">文字不換行-文字不換行-文字不換行-文字不換行-文字不換行-文字不換行-
                               文字不換行-文字不換行-文字不換行-文字不換行-文字不換行-文字不換行-
                               文字不換行-文字不換行-文字不換行-文字不換行-文字不換行文字不換行</p>
    </div>
</body>
</html>

在这里插入图片描述

大小写转换

Bootstrap提供以下大小写转换类别

大小寫轉換類別

範例:

<!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">
    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>大小寫轉換</title>
</head>
<body>
    <div class="container">
        <!-- 全都小写 -->
        <p class="text-lowercase">Twinkle, twinkle, little star.</p>
        <!-- 全都大写 -->
        <p class="text-uppercase">Twinkle, twinkle, little star.</p>
        <!-- 字首大写 -->
        <p class="text-capitalize">Twinkle, twinkle, little star.</p>
    </div>
</body>
</html>

在这里插入图片描述

文字样式

Bootstrap支援下列HTML元素来设定行内文字效果:

HTML元素

範例:

<!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">
    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>行內文字元素</title>
</head>
<body>
    <div class="container">
        <p><mark>加上螢光標記的文字</mark></p>
        <p><del>被刪除的文字區塊</del></p>
        <p><s>不再相關或不再準確的文字區塊</s></p>
        <p><ins>在文件中插入的文字</ins></p>
        <p><u>加上底線的文字</u></p>
        <p><small>降低重要性的小型字</small></p>
        <p><strong>強調重要性的粗體字</strong></p>
        <p><em>強調重要性的斜體字</em></p>
        <p><b>只是粗體字</b></p>
        <p><i>只是斜體字</i></p>
    </div>
</body>
</html>

行內文字元素

Bootstrap提供以下类别来设定文字样式:

Bootstrap文字樣式

範例1: 文字粗細、斜體

<!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">
    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>文字樣式(粗細、斜體)</title>
</head>
<body>
    <div class="container">
        <p class="fw-bold">加粗文字</p>
        <p class="fw-bolder">加粗文字(相對於父元素)</p>
        <p class="fw-normal">一般粗細文字</p>
        <p class="fw-light">變細文字</p>
        <p class="fw-lighter">變細文字(相對於父元素)</p>
        <p class="fst-italic">斜體文字</p>
        <p class="fst-normal">正常文字(沒有任何樣式)</p>
    </div>
</body>
</html>

在这里插入图片描述

範例2: 螢光標記、刪除線、底線、小型字

<!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">
    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>行內文字元素</title>
</head>
<body>
    <div class="container">
        <p class="mark">加上螢光標記的文字</p>
        <p class="text-decoration-line-through">不再相關或不再準確的文字區塊</p>
        <p class="text-decoration-underline">加上底線的文字</p>
        <p class="small">降低重要性的小型字</p>
    </div>
</body>
</html>

在这里插入图片描述

重设色彩

我们可以使用 .text-reset 类别重设文字或超连结的色彩，让他继承父元素的色彩。

範例: 改变超连结文字预设颜色

<!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">
    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>重設色彩</title>
</head>
<body>
    <div class="container">
        <p><a href="#">沒有重設色彩的超連結</a></p>
        <p><a href="#" class="text-reset">重設色彩的超連結</a></p>
    </div>
</body>
</html>

在这里插入图片描述

去除文字装饰

可以使用 .text-decoration-none 类别去掉文字装饰(ex. 底线)。

範例: 去掉超连结预设的底线

<!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">
    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>去掉文字裝飾</title>
</head>
<body>
    <div class="container">
        <p><a href="#">沒有去掉文字裝飾(底線)的超連結</a></p>
        <p><a href="#" class="text-decoration-none">去掉文字裝飾(底線)的超連結</a></p>
    </div>
</body>
</html>

在这里插入图片描述

响应式字型大小

Bootstrap 5 预设会启动 响应式字型大小(responsive font size) 功能，允许文字根据装置和viewpoint尺寸自动调整大小。

XI_MILU

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap笔记(七) 排版 - 文字篇

排版 - 文字文字对齐Bootstrap提供了以下文字对齐类别範例:<!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, init
复制链接

扫一扫