【Bootstrap学习 day2】

Bootstrap5排版

使用标题标签<h1>-<h6>
可以使用类.h1-.h6来设置标题

<div class="container"><p class="h1">h1 Bootstrap 标题</p><p class="h2">h2 Bootstrap 标题</p><p class="h3">h3 Bootstrap 标题</p><p class="h4">h1 Bootstrap 标题</p><p class="h5">h1 Bootstrap 标题</p><p class="h6">h1 Bootstrap 标题</p>
</div>

Display标题类
Bootstrap5还提供了使标题更突出的类,当我们需要标题突出时可以使用这些标题类。突出标题以更大的字体显示,并且会对其进行加粗。

<div class="container"><h1>Display 标题 </div><p>Display标题可以输出更大更粗的字体样式.。</p><h1 class="display-1">Display 1</h1><h1 class="display-2">Display 2</h1><h1 class="display-3">Display 3</h1><h1 class="display-4">Display 4</h1>

使用类突出显示段落
还可以通过在段落上添加类.lead来突出段落

<p>这是Bootstrap5中正常样式的段落。</p>
<p class="lead">这是Bootstrap5中突出显示的段落。</p>

自定义标题
我们可以使用带有类.text-muted class的标签来显示更小且颜色更浅的文本。

<div class="container"><h2>文本标题<small class="text-muted">更小且颜色更浅</small></h2>
</div>

也可以添加类.small指定更小文本(为父元素的85%)

<p class="small">这个段落字体更小</p>
<p>这是常规段落</p>

文本对齐
可以使用文本对齐类轻松地将文本左对齐、右对齐和居中对齐。

<p class="text-start">这个段落左边对齐</p>
<p class="text-center">这个段落居中对齐</p>
<p class="text-end">这个段落右边对齐</p>

还可以使用响应式文本对齐类根据屏幕大小对齐文本

<p class="text-sm-center">文本将在屏幕宽度等于或大于576px窗口及以上居中对齐。</p>
<p class="text-md-center">文本将在屏幕宽度等于或大于768px窗口及以上居中对齐</p>
<p class="text-lg-center">文本将在屏幕宽度等于或大于992px窗口及以上居中对齐</p>
<p class="text-xl-center">文本将在屏幕宽度等于或大于1200px及以上居中对齐</p>

文本转换
可以将文本转换为小写、大写、设定单词首字母大写

<p class="text-lowercase">设定bootstrap文本小写</p>
<p class="text-uppercase">设定bootstrap文本大写</p>
<p class="text-capitalize">设定bootstrap单词首字母大写</p>

截断长文本
对于较长的文本,可以使用类.text-truncate用省略号截断文本。在一行中显示一段文本但没有足够的可用空间时,它特别有用。

<div class="row"><div class="col-sm-2 text-truncate">这是一个很长很长很长非常长的段落</div>
</div>

文本换行和溢出
通过类名(.text-wrap)可以设置文字在超过盒子宽度时自动换行
通过类名(.text-nowrap)可以阻止文字的换行,此时文字会溢出盒子

<div class="row"><div class="col-sm-2 text-nowrap">这是一个很长很长很长非常长的段落</div>
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/583292.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

创建加密分区或者文件

文章目录 [GParted 中已清除的分区与未格式化的分区](https://superuser.com/questions/706624/cleared-vs-unformatted-partition-in-gparted)创建加密分区解密创建的加密分区以便挂载格式化设备未具体的格式&#xff08;这里为ext4格式&#xff09;创建挂载点目录挂载加密的文…

多值类别特征加入CTR预估模型的方法

欢迎关注公众号&#xff1a;数据运营入表资产化服务 获取更多算法源码材料 2023数据资源入表白皮书&#xff0c;推荐系统源码下载-CSDN博客 用友BIP数据资产入表解决方案白皮书&#xff0c;推荐系统源码下载-CSDN博客 我们都知道一般单值类别特征加入到CTR预估模型的方法是先…

安装Node修改Node镜像地址搭建Vue脚手架创建Vue项目

1、安装VSCode和Node 下载VSCode Visual Studio Code - Code Editing. Redefined 下载Node Node.js (nodejs.org) 检验是否安装成功&#xff0c;WinR,输入cmd命令&#xff0c;使用node -v可以查看到其版本号 2、修改镜像地址 安装好node之后&#xff0c;开始修改镜像地址 …

如何实现内部产品权限集成

当前我国各领域正在加速向数字化、移动化、智能化发展&#xff0c;大力投入信息化建设与数字化转型已成为企业的共识&#xff0c;而企业门户系统是企业信息化系统建设是一个重要支撑&#xff0c;以企业业务系统为基础&#xff0c;搭建门户系统作为统一入口和应用中心可以有效支…

ssrf之dict协议和file协议

1.dict协议 dict是什么协议呢&#xff1f; 定义&#xff1a;词典网络协议&#xff0c;在RFC 2009中进行描述。它的目标是超越Webster protocol&#xff0c;并允许客户端在使 用过程中访问更多字典。Dict服务器和客户机使用TCP端口2628。 官方介绍&#xff1a;http://dict.o…

计算机毕业设计 基于SpringBoot的高校危化试剂仓储管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

k8s部署metric-server单机、集群版

### 一、单机部署 #### 1.1、下载metric-server https://github.com/kubernetes-sigs/metrics-server/releases/latest/download/components.yaml #### 1.2、替换镜像并修改参数 ... spec: containers: - args: - --cert-dir/tmp - --secur…

iPhone 13 Pro 更换『移植电芯』和『超容电池』体验

文章目录 考虑换电池Ⅰ 方案一Ⅱ 方案二 总结危险 Note系列地址 简 述: 首发买的iPhone 13P &#xff08;2021.09&#xff09;&#xff0c;随性使用一年出头&#xff0c;容量就暴跌 85%&#xff0c;对比朋友一起买的同款&#xff0c;还是95%。这已经基本得一天两充 >_<&a…

Element Plus 的 el-table 组件合并不规律的行

在 Element Plus 的 el-table 组件中&#xff0c;可以使用 span-method 属性来动态合并不规律数量的行。您可以根据数据的特定条件来确定合并行的方式 <template><el-table :data"tableData" :span-method"handleSpanMethod" border><el-t…

【计算机视觉】角点检测(Harris、SIFT)

Harris 角点指的是窗口延任意方向移动&#xff0c;都有很大变化量的点。 用数学公式表示为&#xff1a; E(u,v)反映的移动后窗口的差异&#xff0c;w(x,y)为每个像素的点权值&#xff0c;I(xu,yv)是移动的像素值&#xff0c;I(x,y)是移动前的像素值。 将E(u,v)进行泰勒展开&am…

Sql中的like的用法

Sql中的like的用法 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;让我们一起深入探讨SQL中一个强大而灵活的条件查询操作——LIKE关键字的用法。作…

基于Spring Cloud + Spring Boot的企业电子招标采购系统源码

随着企业的快速发展&#xff0c;招采管理逐渐成为企业运营中的重要环节。为了满足公司对内部招采管理提升的要求&#xff0c;建立一个公平、公开、公正的采购环境至关重要。在这个背景下&#xff0c;我们开发了一款电子招标采购软件&#xff0c;以最大限度地控制采购成本&#…

AUTOSAR从入门到精通-网络通信(UDPNm)(一)

目录 前言 几个相关概念 原理 什么是UdpNm 约束和假设 限制

智能硬件(8)之蜂鸣器模块

学好开源硬件&#xff0c;不仅仅需要会编程就可以了&#xff0c;电路基础是很重要的&#xff1b;软件和硬件都玩的溜&#xff0c;才是高手&#xff0c;那么小编为了方便大家的学习&#xff0c;特别画了一块智能传感器板子&#xff0c;来带领大家学习电路基础&#xff0c;玩转智…

C# WPF上位机开发(WebApi联调)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 很多时候&#xff0c;客户需要开发的不仅仅是一个上位机系统&#xff0c;它还有其他很多配套的系统或设备&#xff0c;比如物流小车、立库、数字孪…

算法与数据结构之算法基础(java)

目录 什么是数据结构&#xff1f; 什么是算法&#xff1f; 1、算法的特性 1.1 五个特征 1.2 设计原则 1.3 评价算法的两个总要指标&#xff1a;时间复杂度和空间复杂度 2、时间复杂度分析 2.1 时间复杂度表示方法&#xff1a;大O表示法 2.2 时间复杂度如何分析 2.3 复…

【电子通识】开关的种类

开关在我们日常生活与工作中使用较多。开关有无数种形式&#xff0c;种类繁多。从微小的按钮到巨大的控制器&#xff0c;功能多种多样。这种多样性受到机械或电气操作、手动或电子控制等因素的影响&#xff0c;并且与个人在设计美学和用户界面方面的偏好也有关。 电子开关采用 …

facebook广告的基础知识

Facebook广告是在Facebook、Instagram、Audience Network等与Facebook相关的SNS和服务上投放的广告。以下是关于Facebook广告的基础知识&#xff1a; 广告类型&#xff1a; 静态图片广告&#xff1a;主要通过Facebook的新闻提要投放的图片广告&#xff0c;可以张贴产品和服务…

【WPF.NET开发】附加事件

本文内容 先决条件附加事件语法WPF 如何实现附加事件附加事件方案处理附加事件定义自定义附加事件引发 WPF 附加事件 Extensible Application Markup Language (XAML) 定义了一种语言组件和称为附加事件的事件类型。 附加事件可用于在非元素类中定义新的 路由事件&#xff0c…

Hadoop安装笔记2单机/伪分布式配置_Hadoop3.1.3——备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项——任务2:离线数据处理

紧接着上一篇博客&#xff1a;Hadoop安装笔记1&#xff1a; Hadoop安装笔记1单机/伪分布式配置_Hadoop3.1.3——备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项——任务2&#xff1a;离线数据处理-CSDN博客https://blog.csdn.net/Zhiyilang/article/details/135…