开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

bootstrap不支持文本系列、粗细和行高

Bootstrap 是一个流行的前端框架，它提供了一系列的 CSS 类和 JavaScript 插件，用于快速开发响应式和移动优先的网页。Bootstrap 的设计原则之一是简化开发，通过预设的样式来减少开发者需要编写的 CSS 代码量。

基础概念

Bootstrap 支持基本的文本样式，包括字体系列（font-family）、字体粗细（font-weight）和行高（line-height）。这些样式通常通过类名来应用，例如 font-weight-bold 用于加粗文本，text-muted 用于设置较淡的文本颜色等。

相关优势

Bootstrap 的文本样式优势在于：

一致性：整个应用程序的文本样式保持一致。
响应式：文本样式在不同设备上都能良好显示。
易于定制：可以通过覆盖 Bootstrap 的默认样式来满足特定需求。

类型

Bootstrap 中的文本样式类包括但不限于：

text-primary、text-secondary、text-success 等用于设置文本颜色。
font-weight-normal、font-weight-bold、font-weight-bolder、font-weight-lighter 用于设置字体粗细。
lead 用于强调段落。
text-uppercase、text-lowercase、text-capitalize 用于设置文本大小写。

应用场景

Bootstrap 的文本样式广泛应用于各种网页元素，如标题、段落、列表、按钮等，以保持页面的整体风格统一。

遇到的问题及解决方法

如果你发现 Bootstrap 不支持某些特定的文本样式，可能是因为以下原因：

版本问题：Bootstrap 的不同版本可能有不同的文本样式类。确保你使用的是最新版本的 Bootstrap。
自定义样式覆盖：可能是你的自定义 CSS 样式覆盖了 Bootstrap 的默认样式。
类名错误：检查你是否正确使用了 Bootstrap 的文本样式类名。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Text Styling</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* 自定义样式 */
    .custom-text {
      font-family: 'Arial', sans-serif;
      font-weight: bold;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="display-4">Hello, Bootstrap!</h1>
    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <p class="text-muted">This text has a muted color.</p>
    <p class="custom-text">This text uses custom styling.</p>
  </div>
</body>
</html>

参考链接

通过上述方法，你可以确保 Bootstrap 支持所需的文本样式，并在需要时进行适当的自定义。

相关搜索:具有不同字体系列和行高的CSS Bulma 用于换行文本和设置行高的Excel VBA例程使用bootstrap在同一行中添加文本和图像 EditText中有关阿拉伯文本和行高的问题如何在bootstrap 4中将文本和按钮放在同一行下拉文本框和按钮在同一行中彼此相邻- Bootstrap CSS:通过overflow: hidden和max-height行高的倍数，“隐藏”文本在Chrome和Edge中渗入视图如何使用xlsxwriter来模拟autoFit的行高和列宽、中间对齐、左对齐和文本换行？我正在尝试使用bootstrap将一个标签文本框和另一个标签和文本框放在一行中，但它不会出现在同一行中 web浏览器官方下载

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

bootstrap快速入门笔记（四）-less用法指南， mixin和变量

10.variables.less 这个 Less 文件包含了要定制 Bootstrap 外观和感观的变量。...把块级元素自动居中 .ie7-inline-block() 无添加规则的 display: inline-block 以支持IE7 .size() @height: 5px, @width: 5px 快速设置行高和行宽...字体 #font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight 方便设置字体大小，粗细和行间距...monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight 设置monospace字体族，字体大小，粗细和行间距...x 像素间距宽度，生成一个象素栅格系统(容器，行，列) #grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth 使用 n 列和 x %

2.1K2 0

CSS笔记(2)

CSS字体属性 CSS Font(字体)属性用来定义字体系列:大小,粗细和文字样式(如斜体)....文字字体 CSS使用font-family属性定义文本的字体系列文字大小 CSS使用font-size属性定义文字大小文字粗细 CSS使用font-weight 设置文字的粗细效果...,400等价于normal,默认粗细字体,700等价于bold,粗体,注意后面不需要跟单位!!!...属性用于设置元素内文本内容的水平对齐方式 ③装饰文本 text-decoration属性规定添加到文本的修饰,可以给文本添加上划线,下划线和删除线等. ④文本缩进 text-indent属性用来指定文本第一行的缩进...,通常是将段落的首行缩进. ⑤行间距 line-height属性用于设置行间的距离(行高).可以控制文字行与行之间的距离.

6202 0

css基础第一弹

有什么用：主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。...、大小、粗细、和文字样式（如斜体）字体系列 CSS 使用font-family属性定义文本的字体系列。...CSS 使用font-weight属性设置文本字体的粗细。...p { text-indent: 2em; } 行间距 line-height属性用于设置行间的距离（行高）。...none line-height 行高控制行与行之间的距离总结思维导图

1.9K2 0

css基础第一弹

有什么用：主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。...、大小、粗细、和文字样式（如斜体）字体系列 CSS 使用font-family属性定义文本的字体系列。...CSS 使用font-weight属性设置文本字体的粗细。...css 代码: p { text-indent: 2em; } 行间距 line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离....行高控制行与行之间的距离总结思维导图

1011 0

黑客帝国中代码雨如何实现？用 canvas 轻松实现代码雨炫酷效果！

也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，会出现扭曲。...可能的值：normalboldbolderlighter100200300400500600700800900 font-size/line-height 规定字号和行高，以像素计。...font-family 规定字体系列。 caption 使用标题控件的字体（比如按钮、下拉列表等）。 icon 使用用于标记图标的字体。 menu 使用用于菜单中的字体（下拉列表和菜单列表）。...可能的值： normal bold bolder lighter 100 200 300 400 500 600 700 800 900 font-size/line-height规定字号和行高，以像素计...font-family规定字体系列。caption使用标题控件的字体（比如按钮、下拉列表等）。icon使用用于标记图标的字体。menu使用用于菜单中的字体（下拉列表和菜单列表）。

2.6K5 1

CSS美学（二）文本样式

字体样式属性 CSS Fonts（字体）属性用于定义字体系列，大小，粗细和文字样式（如斜体）。 1.1 字体样式（font-family） font-family属性用于设置字体。...（text-indent） text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。...属性用于设置行间的距离（行高）。...line-height: 26px; } 你好默认行高...文本缩进用于段落首行缩进2个字的距离：text-indent： 2em text-decoration 文本修饰添加下划线 underline 取消下划线 none line-height 行高

761 0

css面试题-css中可继承和不可继承的元素详解

9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during 二、有继承性的属性 1、字体系列属性...font：组合字体 font-family：规定元素的字体系列 font-weight：设置字体的粗细...所有主流浏览器都不支持。 font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。...2、文本系列属性 text-indent：文本缩进 text-align：文本水平对齐 line-height：行高 word-spacing...2、除text-indent、text-align之外的文本系列属性五、块级元素可以继承的属性 1、text-indent、text-align css2.1教程链接： https:

4432 0

【CSS3】css开篇基础（1）

所以通常我们对它进行使用的很少 4.CSS 字体属性 CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。...font-family font-family 用于设置字体系列。可以为文本指定一种或多种字体，如果浏览器不支持首选字体，会使用后备字体。如果都不支持，则使用通用字体 sans-serif。...（同样这在文本字体的粗细中同样适用） font-weight CSS 使用 font-weight属性设置文本字体的粗细, 常用值： normal: 默认字体粗细 bold: 粗体数值 (100 -...就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小，则会按照默认的1个文字大小以下就是发生缩进的现象： line-height line-height属性用于设置行间的距离(行高...直接在元素内定义样式，优先级高。缺点：不利于维护，样式和内容耦合。不适合大规模的样式控制。

1001 0

【CSS】文本样式：font & text

font-weight 设置文本的粗细。...如果浏览器不支持第一个字体，则会尝试下一个，直到找到可识别的第一个值。...inherit 规定应该从父元素继承字体系列。 line-height 设置行间距离（行高）。...文本水平垂直居中 text-align与line-height配合使用可以使文本水平方向和垂直方向都居中。...定义带有小写字母和大写字母的标准的文本。 capitalize 文本中的每个单词以大写字母开头。 uppercase 定义仅有大写字母。 lowercase 定义无大写字母，仅有小写字母。

1.1K2 0

从零开始学 Web 之 CSS（二）文本、标签、特性

---- 一、文本元素 1、属性 font-size: 50px; /*文字大小*/ font-weight: 700; /*值从100-900，文字粗细,700约等于Bold...italic:斜体*/ line-height: 50px /*行高*/ 2、文本属性连写 /* 格式：font: font-style font-weight font-size...PS：文本属性连写中文字大小和字体为必写项。 3、文字的表达方式 1. 直接写中文名称 font-family: 微软雅黑; 2....2、行内元素 /*典型代表*/ span, a, strong, em, del, ins 特点： 1.在一行上显示； 2.不能直接设置宽高（需要转行内块）； 3.元素的宽和高就是内容撑开的宽高...2、继承性继承性发生的前提是包含（嵌套关系） ★ 文字颜色可以继承 ★ 文字大小可以继承 ★ 字体可以继续 ★ 字体粗细可以继承 ★ 文字风格可以继承 ★ 行高可以继承总结：文字的所有属性都可以继承

5666 0

『知识巩固#1』Html、Css基础整理

属性在鼠标悬停时显示 width、height 很容易理解，控制图片宽高路径相对路径绝对路径音频标签audio controls 显示播放的空间 autoplay 自动播放(部分浏览器不支持...不常用 none 无装饰线常用行高 line-height 取值为px 或者font-size的倍数行高 = 上间距 + 文本高度 + 下间距应用单行文本垂直居中可以设置为line-height...: 文字父元素高度注意点如果同时设置了行高和font连写，注意覆盖问题 font: style weight size/line-height family 颜色常见取值网页设计时直接取色器吸就好啦...宽度默认是父元素的宽度高度默认由内容展开可以设置宽高 div、h系列、p、ul、li、dl、dt、dd、form、header、nav、footer 行内元素一行可以显示多个宽高默认由内容撑起...不可以设置宽高 a、span、b、u、i、s、strong、ins、em、del 行内块元素一行可以设置多个可以设置宽高 input、textarea、button、select img 有行内块的特点

4K2 0

我做了一个在线白板（二）

点击某个文字进行编辑时，需要获取到该文字、及对应的样式，如字号、字体、行高、颜色等，然后在canvas画布上隐藏该文字，将文本框定位到该位置，设置文字内容，并且也设置对应的样式，尽量看起来像是原地编辑，...;// 计算出行高 let height = lines * lineHeight;// 行数乘行高计算出文本整体高度 return { width, height..., }; }; 文本的宽和高分成了两部分进行计算，高度直接是行数和行高相乘得到，看一下计算宽度的逻辑： // 计算换行文本的实际宽度 export const getWrapTextActWidth...根据之前的逻辑，我们是可以计算出绿色矩形未旋转前的位置和宽高的，那么新的比例也可以计算出来，再根据原始矩形的宽高比例，我们可以计算出红色矩形未旋转前的位置和宽高：图片如图所示，我们先计算出实时拖动后的绿色矩形未旋转时的位置和宽高...行高为1.5，计算出的新高度为60，那么不考虑行高计算出的字号就是30，考虑行高，显然字号会小于30，x * 1.5 = 30，所以还需要再除以行高比。

1.4K3 0

CSS基础03-CSS字体属性

03-CSS字体属性 CSS Fonts（字体）属性用于定义字体系列、大小、粗细、文字样式（如斜体等）。 3.1字体系列 CSS使用font-family属性定义文本的字体系列。...保证任何浏览器都能正确显示常见的集中字体：‘Microsoft Yahei’, Tahoma, Arial, ‘Hiragino Sans GB’ 当设置了多个字体时，根据先后顺序依次查看系统是否支持，若不支持则查看后一个...，若全都不支持则使用系统默认的字体显示实际开发中，字体设置常用于标签来将整个页面中的字体全部修改掉 3.2字体大小 CSS使用 font-size属性设置字体大小 p {...CSS使用 font-weight属性来设置字体粗细，属性值有normal(正常字体，相当于number为400，可以用于取消标题等标签的加粗效果)、bold（粗体相当于number为700，也相当于...和的效果）、bolder（特粗体）、lighter（细体）、number（直接使用数字，不要加单位，相对于单词属性值，数字属性值更推荐使用） 3.4文字样式 CSS使用 font-style

1.9K2 0

IT课程 CSS基础 022_文本、字体、链接

justify-all（不太常见）：类似于 justify，但不仅仅在行末增加额外空白，而是在行首和行末均匀分布。 start：视浏览器的文本方向而定，表示文本在起始端（通常是左端）对齐。...: center;">这段文本居中对齐效果：行高使用 line-height 属性，可设置文本行与行之间的高度。...根据字体大小和设计需求调整行高，可提高可读性。...示例：这是普通行高这是普通行高看看这段话的行高看看这段话的行高效果：间距设置文本内容之间的间距...行高设置：根据字体大小适当设置行高，以提高文本的可读性。通常，行高可以设置为字体大小的 1.4 到 1.6 倍。粗细 CSS 中字体粗细可以使用 font-weight 属性来设置。

1071 0

CSS 基础之基础选择器+字体文本相关样式

CSS引入方式 2.1 内嵌式 2.2 外联式 2.3 行内式 3、基础选择器 3.1 标签选择器 3.2 类选择器 3.3 id选择器 3.4 通配符选择器 4、字体样式 4.1 字体大小 4.2 字体粗细...4.3 字体样式（是否倾斜） 4.4 字体系列 5、文本样式 5.1 文本缩进 5.2 文本水平对齐方式 5.3 文本修饰 ---- 1、认识 CSS 1.1 CSS的介绍 CSS：层叠样式表（Cascading...开发中使用极少，只会在极特殊情况下才会用到效果： 4、字体样式字体大小 font-size 字体粗细 font-weight 字体样式 font-style 字体类型 font-family...如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体注意点： 1. 如果字体名称中存在多个单词，推荐使用引号包裹 2. 最后一项字体系列不需要引号包裹 3....如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体注意点： 1. 如果字体名称中存在多个单词，推荐使用引号包裹 2. 最后一项字体系列不需要引号包裹 3.

2.1K1 0

BootStrap框架总结

BootStrap框架总结: 概述: Bootstrap是最受欢迎的HTML,CSS和JS框架,用于开发响应式布局,移动设备优先的WEB项目. 作用: 开发响应式的页面....992 小屏幕 - 分辨率<768 超小屏幕格栅系统: "在不同分辨率的屏幕下展示不同的效果,根据不同的上网设备,栅格系统将屏幕分层一系列的行...(row)和列(column),由行和列来创建页面布局,注意栅格系统必须放在布局容器内使用" 行: "通过class = "row" 来设置一个行" 列(最多将视口分为12列) "通过class属性来设置在不同屏幕时所占的列...hidden-xs 嘲笑屏时隐藏 hidden-sm 小屏幕时隐藏 hidden-md 中等屏幕时隐藏 hidden-lg 大屏幕时隐藏标题: h1 -- h6 对其方式:(文本...表格: bootstrap给表格添加了默认样式 tble 普通表格 table-striped 条纹表格(IE8不支持) table-bordered 边框表格 tabl-hover

3.3K2 0

网页|CSS字体介绍

CSS字体(font)属性定义文本中的字体，我们将从以下几个方面进行介绍。属性描述 font 简写属性。...在一个声明中设置所有字体属性 font-family 字体系列 font-size 字体尺寸 font-size/line-height 字体尺寸和行高 font-style 字体风格 font-weight...字体粗细可以使用font-family属性定义文档采用的优先字体系列。...通用字体系列 CSS定义了5种通用字体系列： a) Serif字体系列的字体成比例，而且有上下短线。成比例是指字体中的所有字符根据其不同大小有不同的宽度。例如，小写i和小写m的宽度就不同。...e) Fantasy字体系列的字体无法用任何特征来定义，包括Western、Woodblock和Klingon。 2. 指定字体系列 a) 除了通用字体系列，还可以设置更具体的字体。

2.5K2 0

CSS第一天

选择器只能选中一个标签通配符选择器：找到页面中所有的标签，设置样式 * { color: red; } 开发中使用极少，只会在极特殊情况下才会用到在小页面中可能会用于去除标签默认的margin和padding...---- 字体和文本样式： 1️⃣字体大小：font-size（数字 + px）谷歌浏览器默认文字大小是16px，单位需要设置，否则无效 2️⃣字体粗细：font-weight 正常：normal（...删除线（不常用） overline 上划线（几乎不用） none 无装饰线（常用）水平居中方法margin : 0 auto： div–p–h：水平居中（margin : 0 auto ; 实现）行高...: 行高：line-height（px）让单行文本垂直居中可以设置 line-height : 文字父元素高度网页精准布局时，会设置 line-height : 1 可以取消上下间距 ---- Chrome...center right decoration underline line-through overline none margin line-height wight ---- ---- 常见字体系列

8261 0

css样式之标签的查找

--直接在标签内部指定的优先级为1000--> css属性相关宽和高：width属性可以为元素设置宽度。...如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。...字体大小：如果设置成inherit表示继承父元素的字体大小值字重（粗细）：font-weight用来设置字体的字重（粗细）。...bold inherit——继承父元素字体的粗细值文本颜色颜色属性被用来设置文字的颜色。...常用的为去掉a标签默认的自划线：a {text-decoration: none;} 首行缩进：将段落的第一行缩进 32像素p {text-indent: 32px;} <!

1.3K2 0

Web 字体 font-family 再探秘

font-family: system-ui 字体设置的优势之处在于它与当前操作系统使用的字体相匹配，对于文本内容而言，它可以得到最恰当的展示。...仔细看上图的最后两行： Supported as the -apple-system value (only on macOS and iOS) Supported as the BlinkMacSystemFont...Segoe UI Segoe UI 是 Windows 从 Vista 开始的默认西文字体族，只有西文，不支持汉字，属于无衬线体。它也表示一个系列而不是某一款单一字体。...Google 描述该字体为“现代的、但平易近人”和“有感情”的。这个字体家族包含Thin、Light、Regular、Medium、Bold、Black六种粗细及相配的斜体。...,Arial，在针对不同操作系统不同平台设定采用默认系统字体后，针对一些低版本浏览器的降级方案 sans-serif，兜底方案，保证字体风格统一，至少也得是无衬线字体上述 5 个字体族定义，优先级由高到底

2.4K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭