文字排版

标题

在Bootstrap中对<h1>~<h6>都进行了样式的改写。比较新奇的是副标题的样式
使用<small></small>标签包裹可以达到目的。

<h1>你好 
	<small>hello</small>
</h1>

页面主体和中心内容

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予元素和所有段落元素。另外，

（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

通过添加 .lead类可以让段落突出显示。

<p class="lead">文本内容</p>

内联文本元素

<!-- 文本部分内容高亮 -->
You can use the mark tag to <mark>highlight</mark> text.
<!--标注无用内容 -->
<del>This line of text is meant to be treated as deleted text.</del>
<s>This line of text is meant to be treated as no longer accurate.</s>
<!--对文本内容进行下划线 -->
<ins>This line of text is meant to be treated as an addition</ins>
<u>This line of text will render as underlined</u>
<!--小号文本，上文的副标题 -->
<small>This line of text is meant to be treated as fine print.</small>
<!--对文本内容进行加粗 -->
<strong>rendered as bold text</strong>
<!--使文本内容斜体 -->
<em>rendered as italicized text</em>

对齐、强调

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">正常的文本</p>
<p class="text-nowrap">禁止拖动的文本</p>
<p class="text-muted">本行内容是减弱的</p>
<!--改变文本颜色 -->
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

改变大小写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.首字母大写</p>

缩略语

<abbr title="attribute">attr</abbr>
<!--initialism可以让 font-size 变得稍微小些同时会让文本大写。-->
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>qwe

地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要样式。

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

引用

将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签。
添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<!--blockquote-reverse 类可以让引用呈现内容右对齐的效果。-->
<blockquote class="blockquote-reverse">
  ...
</blockquote>

内联列表

list-unstyled 消除列表样式，inline-block让列表水平排列。直接在父元素引用，作用在子元素。dl-horizontal让列表水平排列。

<ul class="list-inline list-unstyled">
  <li>...</li>
</ul>

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

自动截断
通过 text-overflow 属性，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。

代码

内联代码

<!--通过 <kbd> 标签标记用户通过键盘输入的内容-->
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

用户输入

<!--通过 <code> 标签包裹内联样式的代码片段-->
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.

代码块

<!--多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理-->
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
<!--还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条-->

变量

<!--通过 <var> 标签标记变量。-->
<var>y</var> = <var>m</var><var>x</var> + <var>b</var><!--y = mx + b-->

程序输出

<!--通过 <samp> 标签来标记程序输出的内容-->
<samp>This text is meant to be treated as sample output from a computer program.</samp>

方温热

发布了12 篇原创文章 · 获赞 5 · 访问量 642

私信关注

Bootstrap——CSS样式之内容排版及代码

目录