Mit der Wrapper-Klasse .prose gestaltest du lange Fließtexte, ohne jedes einzelne Element mit Bootstrap-Klassen zu versehen.

Ideal für Inhalte, die aus Markdown, MDX oder einem WYSIWYG-Editor wie dem TYPO3-RTE stammen: Ein Container mit .prose sorgt für gut lesbare Schriftgröße, Zeilenhöhe und Abstände aller enthaltenen Elemente.

• Typografie: Basis-font-size, line-height und lokale CSS-Variablen am Elternelement.
• Listen: einheitliche Abstände.
• Überschriften: Standard-margin-bottom, teils zusätzlich margin-top.
• Inline-Elemente: Zitate, Code und Co. werden mitgestaltet.
• Opt-out:.not-prose nimmt einzelne Bereiche aus.

Quelle: Bootstrap-Dokumentation (englisch), übersetzt und bearbeitet. Doku lizenziert unter CC BY 3.0.

Funktionsweise

Umschließe deinen Inhalt mit .prose. Die Klasse passt Schriftgröße, Zeilenhöhe und Abstände für lange Texte an. Im Einzelnen:

• Basis-font-size, line-height und einige lokale CSS-Variablen am Elternelement
• Normalisierte Abstände für Listen
• Ein Standard-margin-bottom für Überschriften
• Zusätzliches margin-top für manche Überschriften, damit sie sich vom vorherigen Inhalt absetzen
• Gestaltung von Blockzitaten, Code und weiteren Inline-Elementen

Beispiel

Das folgende Beispiel zeigt, wie .prose verschiedene HTML-Inhalte darstellt – so, wie sie typischerweise aus Markdown oder einem Editor kommen.

// Example can be run directly in your JavaScript console

// Create a function that takes two arguments and returns the sum of those arguments
var adder = new Function("a", "b", "return a + b");

// Call the function
adder(2, 6);
// > 8

<div class="prose border rounded-3 p-3 lg:p-5 max-w-100">
  <h1>Erste Schritte mit Dokumentation</h1>
  <p>Klare und wirkungsvolle Dokumentation ist für jedes Projekt wichtig. Wenn du Inhalte für andere schreibst, macht <a href="#">saubere Formatierung</a> den Unterschied. <em>Gute Dokumentation</em> hilft, komplexe Konzepte schnell zu verstehen.</p>
  <blockquote>
    <p>Dokumentation ist ein Liebesbrief an dein zukünftiges Ich. Klare Texte heute sparen morgen viele Stunden Verwirrung.</p>
  </blockquote>
  <p>Grundlage guter Dokumentation ist, <strong>die Zielgruppe zu verstehen</strong>. Setze auf Klarheit, Konsistenz und praktische Beispiele.</p>
  <h2>Inline-HTML-Elemente</h2>
  <p>HTML kennt viele Inline-Tags; eine vollständige Liste findest du im <a href="https://developer.mozilla.org/de/docs/Web/HTML/Element">Mozilla Developer Network</a>.</p>
  <ul>
    <li><strong>Fetten Text</strong> setzt du mit <code>&lt;strong&gt;</code>.</li>
    <li><em>Kursiven Text</em> setzt du mit <code>&lt;em&gt;</code>.</li>
    <li><mark>Hervorhebungen</mark> setzt du mit <code>&lt;mark&gt;</code>.</li>
    <li>Abkürzungen wie <abbr title="HyperText Markup Language">HTML</abbr> nutzen <code>&lt;abbr&gt;</code>, optional mit <code>title</code>.</li>
    <li>Quellenangaben wie <cite>&mdash; Mark Otto</cite> nutzen <code>&lt;cite&gt;</code>.</li>
    <li><del>Gelöschter</del> Text nutzt <code>&lt;del&gt;</code>, <ins>eingefügter</ins> Text <code>&lt;ins&gt;</code>.</li>
    <li>Hochgestellter <sup>Text</sup> nutzt <code>&lt;sup&gt;</code>, tiefgestellter <sub>Text</sub> <code>&lt;sub&gt;</code>.</li>
  </ul>
  <p>Die meisten dieser Elemente gestaltet der Browser, wir ändern daran wenig.</p>
  <h2>Überschrift</h2>
  <p>Gute Dokumentation braucht eine durchdachte Struktur. Überlege, wie Leser sich durch den Inhalt bewegen und was sie zuerst brauchen. Klare Überschriften erleichtern das Überfliegen.</p>
  <h3>Code</h3>
  <p>Inline-Code steht im Element <code>&lt;code&gt;</code>. Mehrzeilige Snippets kommen in <code>&lt;pre&gt;</code>; lange Zeilen scrollen horizontal.</p>
  <pre>// Example can be run directly in your JavaScript console

// Create a function that takes two arguments and returns the sum of those arguments
var adder = new Function("a", "b", "return a + b");

// Call the function
adder(2, 6);
// &gt; 8</pre>
  <p>Codebeispiele sollten praxisnah sein und zum erklärten Konzept passen. Teste sie, bevor du sie veröffentlichst.</p>
  <h3>Listen</h3>
  <p>Überlege bei Listen, ob die Reihenfolge wichtig ist: nummeriert für Schritte, Aufzählungspunkte für gleichrangige Punkte.</p>
  <ul>
    <li>Jeder Listenpunkt behandelt genau ein Thema.</li>
    <li>Formuliere alle Punkte parallel.</li>
    <li>Halte die Punkte möglichst ähnlich lang.</li>
  </ul>
  <p>Einheitliche Formatierung erleichtert das Lesen.</p>
  <ol>
    <li>Beginne mit der wichtigsten Information.</li>
    <li>Gib Kontext, bevor es technisch wird.</li>
    <li>Ergänze Beispiele, die sofort anwendbar sind.</li>
  </ol>
  <p>Gut strukturierte Inhalte machen komplexe Themen für alle Erfahrungsstufen zugänglich.</p>
  <ul>
    <li>Dokumentiere Abläufe und Entscheidungen.
      <ul>
        <li>Halte die Gründe wichtiger Entscheidungen fest.</li>
        <li>Notiere verworfene Alternativen.</li>
        <li>Sammle Erkenntnisse aus der Umsetzung.</li>
      </ul>
    </li>
    <li>Aktualisiere die Dokumentation, wenn sich das Projekt weiterentwickelt.</li>
    <li>Teste die Dokumentation mit echten Nutzern, um Lücken zu finden.</li>
  </ul>
  <p>Regelmäßige Pflege hält die Dokumentation aktuell und hilfreich.</p>
  <dl>
    <dt>HyperText Markup Language (HTML)</dt>
    <dd>Die Sprache, die den Inhalt einer Webseite beschreibt und festlegt</dd>
    <dt>Cascading Style Sheets (CSS)</dt>
    <dd>Beschreibt das Aussehen von Webinhalten</dd>
    <dt>JavaScript (JS)</dt>
    <dd>Die Programmiersprache für anspruchsvolle Websites und Anwendungen</dd>
  </dl>
  <p>Fachbegriffe sollten für die Zielgruppe verständlich erklärt sein. Verzichte auf Jargon, wo einfache Worte reichen.</p>
  <h3>Bilder</h3>
  <p>Bilder machen abstrakte Konzepte greifbar. Wähle Bilder, die den Text unterstützen, statt nur zu dekorieren.</p>
  <svg class="d-block img-fluid mb-3" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Großes Beispielbild" preserveAspectRatio="xMidYMid slice"><title>Großes Beispielbild</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em" text-anchor="middle">800×400</text></svg>
  <svg class="d-block img-fluid mb-3" width="400" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Mittleres Beispielbild" preserveAspectRatio="xMidYMid slice"><title>Mittleres Beispielbild</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em" text-anchor="middle">400×200</text></svg>
  <svg class="d-block img-fluid mb-3" width="200" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Kleines Beispielbild" preserveAspectRatio="xMidYMid slice"><title>Kleines Beispielbild</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em" text-anchor="middle">200×200</text></svg>
  <h3>Tabellen</h3>
  <p>Tabellen eignen sich, um zusammengehörige Daten zu vergleichen oder strukturiert darzustellen.</p>
  <table>
    <thead>
      <tr><th>Name</th><th>Zustimmungen</th><th>Ablehnungen</th></tr>
    </thead>
    <tbody>
      <tr><td>Alice</td><td>10</td><td>11</td></tr>
      <tr><td>Bob</td><td>4</td><td>3</td></tr>
      <tr><td>Charlie</td><td>7</td><td>9</td></tr>
      <tr><td>Summe</td><td>21</td><td>23</td></tr>
    </tbody>
  </table>
  <p>Wähle aussagekräftige Spaltenköpfe und achte auf die Lesereihenfolge. Einfache Tabellen sind leichter zu verstehen und zu pflegen.</p>
</div>