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);
}

<div class="well">小火柴的蓝色理想</div>

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

<div class="well">小火柴的蓝色理想</div>
小火柴的蓝色理想
小火柴的蓝色理想

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!

Verwandte Etiketten：

bootstrap

Quelle：php.cn

Vorheriger Artikel：Unterschiede zwischen 6 Prototyp-Dateiformaten Nächster Artikel：Wie kann das Problem gelöst werden, dass iframe auf iOS nicht unterstützt wird?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

• Beispiel-Tutorial zur Übergabe von Parametern mithilfe der NameValuePair-Methode
  1970-01-01 08:00:00
• Verwenden Sie dom4j, um ein Beispiel für ein XML-Dokument zu analysieren
  1970-01-01 08:00:00
• Katalogdienst – Analyse des Beispielcodes für die Microsoft-Microservice-Architektur
  1970-01-01 08:00:00
• Ausführliche Erläuterung der ersten Schritte mit Beispielen für .net Elasticsearch
  1970-01-01 08:00:00
• Detaillierte Einführung in Spring Boot mit Konfigurationsbeispielen für die JSP-Unterstützung
  1970-01-01 08:00:00
• Wie erkennt JS, ob das von window.open geöffnete Fenster geschlossen ist?
  1970-01-01 08:00:00
• Teilen Sie ein verstümmeltes Problem in sqlyog beim Herstellen einer Verbindung zur Datenbank und dessen Lösung
  1970-01-01 08:00:00
• Beispiele für die Verwendung von Parametern variabler Länge in Java
  1970-01-01 08:00:00
• Das neueste Beispiel-Tutorial für die Amap API WEB-Entwicklung
  1970-01-01 08:00:00
• Vor- und Nachteile von AJAX
  1970-01-01 08:00:00

Aktuelle Ausgaben

Die Seite kann plötzlich weder CSS noch Bootstrap abrufen Ich entwickle also eine Seite, einen Teil davon habe ich gestern gemacht und es hat großar...

Aus 2024-04-06 21:58:04

0

1

800

So lösen Sie das mysteriöse Leerzeichen am unteren Rand der Seite in CSS Ich versuche, mit Bootstrap und D3 eine einfache Webseite zu erstellen, weiß aber nicht, w...

Aus 2024-04-06 20:22:15

0

1

454

Passen Sie das Erscheinungsbild von Bootstrap-Akkordeon-Headern mithilfe der CollapseDisplay-Klasse an Ich möchte den Kartentitel eines Panels mit der Klasse Collapseshow formatieren. In diesem...

Aus 2024-04-06 12:53:11

0

1

376

Der Bootstrap-Schalter funktioniert nicht richtig, wenn die Größe der Webseite geändert wird 这是代码:<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...

Aus 2024-04-05 08:45:39

0

1

3443

Zeigen Sie AWS PDF-Dateien im Bootstrap-Modus in Laravel an Ich habe die AWS-URL wie https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/65571220...

Aus 2024-04-04 22:16:18

0

1

1450

verwandte Themen

Mehr>

• So verwenden Sie die Diktatfunktion in Python
• So erstellen Sie einen Softlink
• Gründe, warum Ping fehlschlägt
• Huobi.com
• Java-String in Zahl umwandeln
• Warum druckt der Drucker nicht?
• Ist HONOR Huawei?
• So erhalten Sie die Adresse der Adressleiste