CRUD 응용 프로그램의 데이터 "디스플레이"화면에 대한 의미 론적 부트 스트랩 레이아웃을 수행하는 방법은 무엇입니까?

Question

저는 사람들의 연락처 정보 및 기타 관련 데이터를 생성, 편집 및 표시하는 것과 같이 무거운 CRUD 작업을 데이터베이스 기반 웹 응용 프로그램으로 구축하고 있습니다. 밖에있는 대부분의 정보는 데이터 입력/편집을 위해 부트 스트랩 양식을 디자인하는 방법에 중점을 두는 것으로 보이지만 적절한 읽기 전용 (즉, 데이터 "디스플레이") 레이아웃에 대해서는별로 중요하지 않습니다.

예를 들어, 나는 이런 식으로 뭔가를 할 수 :

<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 또는 다른 곳)의 좋은 예가 있는지 궁금합니다. 누군가가 나를 가리킬 수있는 표준 기반의 액세스 가능한 HTML입니다.

위의 간단한 첫 번째 & 성과 이름 외에도 많은 "사람"관련 속성 (주소, 전자 메일, 전화 등)을 상상할 수 있습니다. 그냥 따라하기 위해 설립 무언가를 찾고.

Answer 1

설명 목록 요소 인 dl을 사용해보십시오. 부트 스트랩은 이들의 스타일을 가지고 있으며, 그것은 정보의 목록을 만들기위한 설계 : 당신이 클래스를 추가 할 필요가 없습니다

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

부트 스트랩 스타일, 요소를 대상으로합니다. 그러나 가로로 항목을 표시하려면 dl 요소에 dl-horizontal을 추가 할 수 있습니다.

이러한 요소는 또한 개선 된 접근 가능에 대한 default implicit ARIA tags 있습니다

• DL : role=list
• DD : role=definition
• DT : role=listitem