Wie werden semantische Bootstrap-Layouts für die Anzeige von Daten in CRUD-Anwendungen ausgeführt?

Question

Ich erstelle eine datenbankgestützte Web-Anwendung, schwere CRUD-Sachen, wie das Erstellen, Bearbeiten und Anzeigen von Kontaktinformationen von Personen und anderen damit verbundenen Daten. Die meisten Informationen da draußen scheinen sich darauf zu konzentrieren, Bootstrap Formulare für das Eingeben/Editieren von Daten zu entwerfen, aber nicht viel da draußen über richtige Nur-Lese-Layouts (d.h. Daten "anzeigen").

Zum Beispiel habe ich so etwas tun könnte:

<div class="form-group"> 
    <label class="control-label col-md-3">First Name</label> 
    <div class="col-md-9 form-control-static"> 
     @Html.DisplayFor(model => model.FirstName) 
    </div> 
</div> 

<div class="form-group"> 
    <label class="control-label col-md-3">Last Name</label> 
    <div class="col-md-9 form-control-static"> 
     @Html.DisplayFor(model => model.LastName) 
    </div> 
</div> 

... und so weiter (für alle Profileigenschaften). Aber diese Art von Layout scheint typischer/geeigneter für das Erstellen und Bearbeiten von Bildschirmen mit tatsächlichen Formularsteuerelementen.

Ich frage mich nur, ob es gute Beispiele für Anwendungen (GitHub oder anderswo), nette semantische Layouts mit konsistenten Bootstrap-Komponenten, mit Standard-basierten, zugänglichen HTML gibt, auf die mich jemand verweisen kann.

Zusätzlich zu den einfachen First & Nachname Szenario können Sie sich vorstellen, eine Tonne anderer "Person" bezogenen Eigenschaften (Adresse, E-Mail (s), Telefon (e), etc.). Ich suche nur nach etwas, dem ich folgen kann.

Answer 1

Verwenden Sie das Beschreibungslistenelement dl. Bootstrap hat Stile für diese und es ist für Listen mit Informationen zu erstellen:

<dl> 
    <dt>First Name<dt> 
    <dd>Jiveman</dd> 
    <dt>Last Name<dt> 
    <dd>Jivemanerson</dd> 
<dl> 

Bootstrap Arten wird das Element Ziel, so dass Sie keine Klassen hinzufügen müssen. Sie können jedoch dl-horizontal zum Element dl hinzufügen, wenn Sie Dinge horizontal anzeigen möchten.

Diese Elemente haben auch default implicit ARIA tags für eine verbesserte zugreifbar:

• dl: role=list
• dd: role=definition
• dt: role=listitem