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>
按以下方式元素:
<abbr>
Bootstrap将样式化HTML <abbr>
通过以下方式元素:
<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.
试一试» 要显示在右边的报价,使用.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.
试一试» <dl>
Bootstrap将样式化HTML <dl>
通过以下方式元素:
<code>
Bootstrap将样式的HTML <code>
通过以下方式元素:
<kbd>
Bootstrap将样式化HTML <kbd>
通过以下方式元素:
<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-success
, bg-info
, bg-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辅助类参考有关上下文类的详细信息。