最新的Web开发教程
 

Bootstrap文/排版


Bootstrap's默认设置

Bootstrap's全局默认字体大小是14px的,具有1.428线高。

这是应用到<body>和所有段落。

此外,所有的<p>元件具有底部边缘等于一半的计算线高度(默认10px的)。


Bootstrap与浏览器默认设置

在本章中,我们将看看会通过不同的样式稍微有些HTML元素Bootstrap比浏览器默认设置。


<h1> - <h6>

默认情况下,自举将样式在HTML标题( <h1><h6>的方式如下:

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
试一试»

<small>

在引导的HTML <small>元素被用来建立任何标题打火机,辅助文本:

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text
试一试»

<mark>

Bootstrap将样式化HTML <mark>按以下方式元素:

Use the mark element to highlight text.

试一试»

<abbr>

Bootstrap将样式化HTML <abbr>通过以下方式元素:

The WHO was founded in 1948.

试一试»

<blockquote>

Bootstrap将样式在HTML <blockquote>以下列方式元件:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website
试一试»

要显示在右边的报价,使用.blockquote-reverse类:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website
试一试»

<dl>

Bootstrap将样式化HTML <dl>通过以下方式元素:

Coffee
- black hot drink
Milk
- white cold drink
试一试»

<code>

Bootstrap将样式的HTML <code>通过以下方式元素:

The following HTML elements: span , section , and div defines a section in a document.

试一试»

<kbd>

Bootstrap将样式化HTML <kbd>通过以下方式元素:

Use ctrl + p to open the Print dialog box.

试一试»

<pre>

Bootstrap将样式在HTML <pre>以下列方式元件:

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
试一试»

语境颜色和背景

Bootstrap也有可以用来提供“通过颜色的意思是”一些上下文类。

文本颜色的类是: .text-muted.text-primary.text-success.text-info.text-warning.text-danger

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

试一试»

背景颜色的类是: .bg-primary.bg-successbg-infobg-warning ,并.bg-danger

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

试一试»

更多排版类

下面的自举类可以被添加到风格HTML元素进一步:

描述
.lead 让一个段落中脱颖而出 尝试一下
.small 表示较小的文本(设定为85%的亲本的尺寸的) 尝试一下
.text-left 表示左对齐文本 尝试一下
.text-center 指示居中对齐文本 尝试一下
.text-right 表示右对齐文本 尝试一下
.text-justify 指示对齐文本 尝试一下
.text-nowrap 表示不换行文本 尝试一下
.text-lowercase 指示小写文本 尝试一下
.text-uppercase 指示大写的文本 尝试一下
.text-capitalize 指示大写文字 尝试一下
.initialism 显示内部文本<abbr>在一个稍微较小的字体元素 尝试一下
.list-unstyled 在删除列表项的默认列表样式和左边距(适用于这两个<ul><ol> 这个类仅适用于直接子列表项(从任何嵌套列表删除默认的列表样式,这个类适用于任何嵌套列表以及) 尝试一下
.list-inline 地方在一行所有列表项 尝试一下
.dl-horizontal 排队的条款( <dt>和描述( <dd>中) <dl>元素并排侧。 开始了像默认<dl> S,但是当浏览器窗口展开,将排队侧由端 尝试一下
.pre-scrollable 打造一个<pre>元素滚动 尝试一下

完成Bootstrap印刷术参考

对于所有的排版元素/类的完整参考,请访问我们完整的Bootstrap印刷术参考

另外,也要看看我们的Bootstrap辅助类参考有关上下文类的详细信息。