CRUDアプリケーションのデータ "表示"画面のセマンティックブートストラップレイアウトを行う方法は？

Question

私は、人々の連絡先情報やその他の関連データの作成、編集、表示など、重いCRUDのものをデータベース駆動型のWebアプリケーションとして構築しています。ほとんどの情報は、データを入力/編集するためのブートストラップフォームをどのように設計するかに焦点が当てられているようですが、適切な読み取り専用（すなわちデータ "表示"）レイアウトはあまりありません。

例えば、私はこのような何かを行うことができます：

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

...というように（すべてのプロファイルプロパティの）。しかし、このようなレイアウトは、実際のフォームコントロールを使用したスクリーンの作成と編集に、より典型的な/適切なようです。

標準的なアクセス可能なHTMLを使用して、一貫したブートストラップコンポーネントを使用した素晴らしいセマンティックレイアウトのアプリケーション（GitHubまたは他の場所）の良い例があるかどうかは不思議です。

上記のシンプルファースト&ラストネームのシナリオに加えて、他にも "人物"関連のプロパティ（アドレス、電子メール、電話など）が多数存在することが想像できます。単に何かを追求するために確立されたものを探している

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