引导你的网页 3 - 制作文本

分享于 

11分钟阅读

Web开发

  繁體

序曲

继续从引导你的网页 2 - 布局 Responsively,我们离开。 我们已经得到了一个很好的Bootstrap,移动第一网格系统的响应,现在是时候看看网络内容的样式样式。 让我们从文本开始。

html自举版式

文本内容是任何网页内容中最基本但不可缺少的部分。 默认的HTML排版元素按 Bootstrap 风格样式不同。 默认情况下,Bootstrap 呈现具有字体大小 14px 和行高 1.428 inside的正常文本。 <正文> 部分和全部 <> 元素。另外,每个元素 <> 元素的底部 margin 等于它的计算行高的一半,默认为 10px。

查看图 1 below 中的两个web页面,看看 Bootstrap 如何样式化一些更常见的HTML打印元素。 <h1><h6> , <小> , <> , <标记> , <> , <引用> 以及 <pre> -differently。

Figure 1 : Bootstrap's Typography vs Default HTML's Typography图 1: Bootstrap vs 默认字体版式的版式

你可以在 @ 的Bootstrap缺省版式的Typography上查看它们。 除了 Bootstrap 框架和不同的第一个标题以外,两个页面都包含相同的HTML打印元素和文本内容。 你可以下载源代码 @ 字体的Bootstrap 插件和默认的html字体的字体。

尝试其他HTML印刷元素,如 <代码> , <kbd> , <ul> , <> 以及 <dl> 通过 Bootstrap 查看它们的样式是如何不同的。 我把它当作你的作业。

Bootstrap 类的版式

Bootstrap 引入自己的排版类以进一步样式化HTML中的文本内容。 这些组件可以分为四个 categories- 上下文文本类 capitalization capitalization capitalization alignment text text text和custom自定义样式类。 让我们逐个访问它们:

上下文文本类

上下文文本类通过 上下文文本颜色和上下文背景颜色来传达含义。

  • 按以下代码列出 .text-muted.text-primary.text-success.text-info.text-warning.text-danger 类的上下文文本颜色包含类,如下面的代码所示。
    <h2>Bootstrap's Contextual Text</h2>
    <code>.text-muted</code>
    <p class="text-muted">Sorry, the service is temporarily not available.</p>
    <code>.text-primary</code>
    <p class="text-primary">You must agree to the terms and conditions.</p>
    <code>.text-success</code>
    <p class="text-success">You have successfully changed your password.</p>
    <code>.text-info</code>
    <p class="text-info">The next train is due to arrive in 5 minutes.</p>
    <code>.text-warning</code>
    <p class="text-warning">POLICE LINE DO NOT CROSS</p>
    <code>.text-danger</code>
    <p class="text-danger">You are entering a radioactive zone.</p>
    Figure 2 : Bootstrap's Contextual Text图 2: Bootstrap 文本的上下文

    你可以下载代码并在线查看网页

  • 另外,上下文背景颜色包含诸如 .bg-primary.bg-successbg-infobg-warning.bg-danger 等类,如下面的代码所示,如图 3所示所示。
    <h2>Bootstrap's Contextual Background</h2><code>.bg-primary</code><pclass="bg-primary">You must agree to the terms and conditions.</p><code>.bg-success</code><pclass="bg-success">You have successfully changed your password.</p><code>.bg-info</code><pclass="bg-info">The next train is due to arrive in 5 minutes.</p><code>.bg-warning</code><pclass="bg-warning">POLICE LINE DO NOT CROSS</p><code>.bg-danger</code><pclass="bg-danger">You are entering a radioactive zone.</p>
    Figure 3 : Bootstrap's Contextual Background图 3: Bootstrap 背景的背景

    你可以下载代码并在线查看网页

大写类

大写类包括 文本小写 , 文本大写 以及 文本大写 将文本分别转换为小写。大写和 first-letter-of-word-uppercase,如下面的代码所示,如图 4所示。

<h2>Bootstrap's Capitalization</h2>
<code>.text-lowercase</code>
<p class="text-lowercase">HTML ELEMENTS SHOULD BE WRITTEN IN LOWERCASE</p>
<code>.text-uppercase</code>
<p class="text-uppercase">police line do not cross</p>
<code>.text-capitalize</code>
<p class="text-capitalize">peter leow</p>
Figure 4 : Bootstrap's Capitalization图 4: Bootstrap的大写

你可以下载代码并在线查看网页

文本对齐类

文本对齐类包括 文本左对齐 , 文本中心 , 文本右对齐 , 文本说明 以及 文本 nowrap 如图 26所示,按照图所示的方式对文本进行对齐。

<h2>Bootstrap's Text Alignment Classes</h2><code>.text-left</code><pclass="text-left"style="background-color:#CFF;margin-top:1%">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl risus, sollicitudin efficitur sapien a, dignissim pellentesque nibh. Curabitur nec mauris enim. Sed finibus posuere interdum. Sed sodales mi quam, quis ultricies felis aliquam non.</p><code>.text-center</code><pclass="text-center"style="background-color:#9FC;margin-top:1%">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl risus, sollicitudin efficitur sapien a, dignissim pellentesque nibh. Curabitur nec mauris enim. Sed finibus posuere interdum. Sed sodales mi quam, quis ultricies felis aliquam non.</p><code>.text-right</code><pclass="text-right"style="background-color:#CFF;margin-top:1%">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl risus, sollicitudin efficitur sapien a, dignissim pellentesque nibh. Curabitur nec mauris enim. Sed finibus posuere interdum. Sed sodales mi quam, quis ultricies felis aliquam non.</p><code>.text-justify</code><pclass="text-justify"style="background-color:#9FC;margin-top:1%">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl risus, sollicitudin efficitur sapien a, dignissim pellentesque nibh. Curabitur nec mauris enim. Sed finibus posuere interdum. Sed sodales mi quam, quis ultricies felis aliquam non.</p><code>.text-nowrap</code><pclass="text-nowrap"style="background-color:#CFF;margin-top:1%">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl risus, sollicitudin efficitur sapien a, dignissim pellentesque nibh. Curabitur nec mauris enim. Sed finibus posuere interdum. Sed sodales mi quam, quis ultricies felis aliquam non.</p>
Figure 5 : Bootstrap's Text Alignment图 5: Bootstrap 对齐的文本

你可以下载代码并在线查看网页

自定义样式类

Bootstrap 提供了更多的排版类,如 table 1所列,以进一步样式HTML排版元素。

表 1: Bootstrap 样式化ClassesClassExplanation的自定义
dl水平水平更改每个项的位置 <> 它的描述 <> 在描述列表中 <dl> 从浏览器窗口扩展到水平side-by-side时,从默认垂直堆栈到水平。

initialism给一个较小的字体大小 <> '的内容。

initialism

导线制作 <> '的内容突出。

引线

列出内联按水平排列列表项 side-by-side,而不是默认垂直。

列表 unstyled将项目符号和左 margin 从立即列表项目中移除。

列表 unstyled

制作 <> '的内容较小。

小

下一个

使用 Bootstrap 制作文本内容,我们将继续看看 Bootstrap 如何在下一个运输中装上HTML表。 。

的leow博客中首次出现了的网页( 3 - 制作文本 Crafting。


相关文章