Bootstarp 4 入门之版式图片代码

定制标题样式

描述

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

突出显示标题

描述

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

引言

通过添加使段落突出.lead
描述

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

内联文本元素

描述

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

署名

<footer class="blockquote-footer"> 里添加需要署名的内容。 并在 <cite> 里添加作者。
描述

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

代码

描述

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

变量

描述

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

响应式图像

Bootstrap中的图像通过进行响应.img-fluidmax-width: 100%;并height: auto;应用于图像,以便与父元素缩放。

<img src="..." class="img-fluid" alt="Responsive image">

图片缩略图.img-thumbnail

描述

对齐图像 块级图像可以使用 .mx-auto margin 工具居中

描述

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

描述

<img src="..." class="rounded mx-auto d-block" alt="...">
或
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

图文排版<figure>

描述

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

文字对齐

  • text-left 左边
  • text-center 居中
  • text-right 右边

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。