引用は、多くの場合、背景が灰色で、左ボーダーが棒状のもので、イタリック体のフォントスタイルで表示されます:
w3-panel クラスは、引用を表示するのに最適なクラスです:
<div class="w3-panel w3-leftbar w3-light-grey">
<p>
<i>"Make it as simple as possible, but not simpler."</i>
</p>
<p>Albert Einstein</p>
</div>
大きな引用は、大抵の場合、インターネット上で使用されます:
<div class="w3-panel w3-leftbar w3-sand">
<p class="w3-xxlarge w3-serif">
<i>"Make it as simple as possible, but not simpler."</i>
</p>
<p>Albert Einstein</p>
</div>
HTML の <blockquote> を使用する場合、HTML は特別な左マージンを追加することを覚えておいてください:
"Make it as simple as possible, but not simpler."
Albert Einstein
<blockquote class="w3-panel w3-leftbar w3-light-grey">
<p>
<i>"Make it as simple as possible, but not simpler."</i>
</p>
<p>Albert Einstein</p>
</blockquote>
You can use standard HTML symbols instead of ampherstans(?):
| Code | Symbol |
|---|---|
| ≪ | #8810 |
| ✂ | #9986 |
| ❝ | #10077 |
| ❞ | #10078 |
| ❠ | #10080 |
| ✔ | #10004 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.
<div class="w3-panel w3-light-grey">
<span
style="font-size:150px;line-height:0.6em;opacity:0.2">❝</span>
<p class="w3-xlarge" style="margin-top:-40px">
<i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit ..."</i></p>
<p>Albert
Einstein</p>
</div>
<div class="w3-panel w3-leftbar">
<p>
<i class="fa fa-quote-right
w3-xxlarge"></i><br>
<i class="w3-serif w3-xlarge">
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</i>
</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.
<div class="w3-panel w3-sand">
<p>
<i class="fa fa-quote-right
w3-xxlarge w3-opacity"></i>
<span class="w3-serif
w3-xlarge">
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</span>
</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.
<div class="w3-panel w3-black" style="width:50%">
<p class="w3-large
w3-serif">
<i class="fa fa-quote-right w3-xxlarge w3-margin-right"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa
vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam
id, porttitor sit amet sapien. Nulla facilisi.
<div class="w3-panel w3-card-4 w3-light-grey" style="width:50%">
<p
class=" w3-large w3-serif">
<i class="fa fa-quote-right w3-xxlarge
w3-text-red"></i><br>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit ...</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.
<div class="w3-panel w3-center" style="width:50%">
<span
style="font-size:100px">❝</span><br>
<p style="margin-top:-60px">
<i><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</b></i></p>
</div>