Bootstrap blockquote

2018-03-03 16:35 更新

用于引用文檔中來自其他來源的內(nèi)容塊。

圍繞任意HTML封裝<blockquote>作為引用。

<!DOCTYPE HTML>
<html>
<head>
<link href="//www.o2fo.com/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">

  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Integer posuere erat a ante.</p>
  </blockquote>

</body>
</html>

引用源樣式

標(biāo)準(zhǔn)<blockquote>上簡單變體的樣式和內(nèi)容更改。添加<small>標(biāo)簽以標(biāo)識源。在<cite>中封裝源工作的名稱。

<!DOCTYPE HTML>
<html>
<head>
<link href="//www.o2fo.com/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">

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

</body>
</html>

右對齊blockquote

對于浮動的右對齊blockquote，使用 .pull-right。

<!DOCTYPE HTML>
<html>
<head>
<link href="//www.o2fo.com/statics/plugins/bootstrapold/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 20px;">

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

</body>
</html>
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號