Bootstrap排版

2023-11-14 43

Bootstrap 是一个流行的前端框架,它提供了丰富的排版样式和组件,可以帮助您快速搭建现代化的网页。本教程将介绍 Bootstrap 排版的相关示例,包括全局设置、标题、正文文本、列表、响应式字体大小等等。

一、全局设置

Bootstrap 设置基本的全局显示、排版和链接样式。

1、使用本机字体堆栈font-family,为每个操作系统和设备选择最佳字体。

2、为了获得更具包容性和可访问性的类型比例,我们使用浏览器的默认根font-size(通常为 16px),以便访问者可以根据需要自定义其浏览器默认值。

3、使用$font-family-base 、$font-size-base和$line-height-base属性作为应用于<body> 。

4、设置全局链接颜色 via 并仅在$link-color:hover上应用链接下划线。

5、用于在$body-bgbackground-color<body>#fff(默认为)上设置 a。

这些样式可以在 _variables.scss 中找到,全局变量在 _reboot.scss 中定义。确保将 $font-size-base 设置为 rem。

二、标题

所有 HTML 标题<h1>(到 )<h6>都可用。

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Bootstrap排版

.h1through 类也可用,.h6用于想要匹配标题的字体样式但无法使用关联的 HTML 元素时。

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

Bootstrap排版

1、自定义标题

<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>

Bootstrap排版

2、显示标题

传统的标题元素为页面内容提供最佳效果。当需要标题来突出时,请考虑使用显示标题 – 一种更大、更固执己见的标题样式。默认情况下,这些标题不是响应式的,但可以启用响应式字体大小。

<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>

Bootstrap排版

三、lead类

在Bootstrap中,”lead” 是一个类名,用于表示页面中的主要内容或标题。它通常用于强调页面上最重要的信息,并使用较大的字体大小和粗细来突出显示。

<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>

Bootstrap排版

四、内联文本元素

常见内联 HTML5 元素的样式。

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Bootstrap排版

.mark类也可用于应用与标签相同的样式,同时避免标签会带来的任何不必要的语义影响。例如:.small<mark><small>。

五、缩写

HTML <abbr>元素的缩写和首字母缩略词的风格化实现,以在悬停时显示扩展版本。缩写具有默认下划线,并获取帮助光标,以提供有关悬停和辅助技术用户的其他上下文。

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Bootstrap排版

六、块引用

<blockquote class=”blockquote”>用于引用文档中其他来源的内容块。将任何 HTML 作为引号换行。

<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

Bootstrap排版

1、命名源

添加 a 以标识源。将源作品的名称括在<footer class=”blockquote-footer”><cite>中。

<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Bootstrap排版

2、对齐

根据需要使用文本实用程序来更改块引用的对齐方式。

<blockquote class="blockquote text-center">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Bootstrap排版

<blockquote class="blockquote text-right">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Bootstrap排版

七、列表

1、无样式

list-style 删除列表项上的默认边距和左边距(仅限直接子项),这仅适用于直接子列表项,还需要为任何嵌套列表添加类。

<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
<ul>
<li>are unaffected by this style</li>
<li>will still show a bullet</li>
<li>and have appropriate left margin</li>
</ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>

Bootstrap排版

2、内嵌

删除列表的项目符号,并使用两个类的组合应用一些光线,然后 margin.list-inline.list-inline-item。

<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they're displayed inline.</li>
</ul>

Bootstrap排版

3、描述列表对齐方式

使用网格系统的预定义类.text-truncate(或语义混合)水平对齐术语和描述。对于较长的术语,可以选择添加一个类来使用省略号截断文本。

<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Term</dt>
<dd class="col-sm-9">
<p>Definition for the term.</p>
<p>And some more placeholder definition text.</p>
</dd>
<dt class="col-sm-3">Another term</dt>
<dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
</dl>
</dd>
</dl>

Bootstrap排版

八、响应式字体大小

从 v4.3.0 版本开始,Bootstrap 提供了启用响应式字体大小的选项,使文本能够在设备和视口大小之间更自然地缩放。要启用 RFS(Responsive Font Scaling),只需将 Sass 变量更改为 true,并重新编译 Bootstrap。

为了实现 RFS,我们使用 Sass mixin 替换了常规属性。响应式字体大小会被编译成具有特定视口单位混合的函数,从而实现响应式缩放行为。

  • 广告合作

  • QQ群号:707632017

温馨提示:
1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com(#改为@)。 2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。
Bootstrap排版
上一篇: SHOPLINE商店状态
Bootstrap排版
下一篇: Bootstrap代码