Was sind Bootstrap-Swales?

Nun: Der Effekt des -Stils ähnelt dem Großbildschirm-Jumbotron-Stil. Der Unterschied besteht darin, dass der Well-Stil eine Rahmeneinstellung hat und die Standardhöhe die Höhe des adaptiven Texts ist .

Beispielcode:

<div class="well">   <p> sorry I have no word to say</p>   <blockquote>this is a 引用内容</blockquote></div>

Dies ist eine leichte, flexible Komponente, die sich auf den gesamten Browser-Ansichtsbereich erstrecken kann, um wichtige Inhalte auf der Website anzuzeigen. In diesem Artikel wird die Bootstrap-Depression ausführlich vorgestellt

Übersicht

Die Wirkung des Well-Stils ähnelt der des Jumbotron-Stils. Der Unterschied besteht darin, dass der Brunnen Der Stil verfügt über eine Rahmeneinstellung und die Standardhöhe ist die Höhe des adaptiven Texts. Durch die Verwendung von Well auf ein Element können Sie einen einfachen Einfügungseffekt erzielen.

Die Methode zur Verwendung des Well-Stils ist sehr einfach. Verwenden Sie einfach die .well-Klasse

.well {min-height: 20px;padding: 19px;margin-bottom: 20px;background-color: #f5f5f5;border: 1px solid #e3e3e3;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}

8959d1adff1d7f51c3fc375ca8f02fc5小火柴的蓝色理想16b28748ea4df4d9c2150843fecfba68

Größe

Der Well-Stil bietet Stile in verschiedenen Größen, hauptsächlich Polsterung und abgerundete Eckengrößen, die Well-LG bzw. Well-Sm sind. Bei Verwendung einfach direkt mit einer Vertiefung auf das gleiche Element auftragen

.well-lg {padding: 24px;border-radius: 6px;
}.well-sm {padding: 9px;border-radius: 3px;
}

8959d1adff1d7f51c3fc375ca8f02fc5小火柴的蓝色理想16b28748ea4df4d9c2150843fecfba6805411e6872591ef99e276db56077d8a6小火柴的蓝色理想16b28748ea4df4d9c2150843fecfba68ea5496650c8431bb8e65aec523da32fe小火柴的蓝色理想16b28748ea4df4d9c2150843fecfba68

Das obige ist der detaillierte Inhalt vonWas sind Bootstrap-Swales?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!