Как сделать семантические макеты Bootstrap для экранов отображения данных в приложениях CRUD?

Question

Я создаю веб-приложение, управляемое базами данных, тяжелое вещество CRUD, такое как создание, редактирование и отображение контактной информации и других связанных данных. Большая часть информации, по-видимому, сосредоточена на том, как создавать формы Bootstrap для ввода/редактирования данных, но не так много о правильных макетах для чтения (например, данных).

Например, я мог бы сделать что-то вроде этого:

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

... и так далее (для всех свойств профиля). Но этот вид компоновки кажется более типичным/подходящим для создания и редактирования экранов с помощью реальных элементов управления формой.

Мне просто интересно, есть ли хорошие примеры приложений (GitHub или где-либо еще), хороших семантических макетов с использованием совместимых компонентов Bootstrap со стандартным доступным HTML-кодом, на который мне могут навеститься.

В дополнение к простому первому сценарию & Фамилия, вы можете представить себе тонну других свойств, связанных с человеком (адрес, адрес электронной почты, телефон (ы) и т. Д.). Просто ищем что-то, что нужно для этого.

Answer 1

Рассмотрите возможность использования элемента списка описания, dl. Bootstrap имеет стили для них и предназначен для создания списков информации:

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

Bootstrap стили будут предназначаться элемент, так что вам не нужно добавлять классы. Однако вы можете добавить dl-horizontal в элемент dl, если вы хотите отображать объекты по горизонтали.

Эти элементы также имеют default implicit ARIA tags для улучшенного доступному:

• дл: role=list
• дд: role=definition
• дт: role=listitem