如何爲CRUD應用程序中的數據「顯示」屏幕執行語義引導佈局？

我正在構建一個數據庫驅動的Web應用程序，大量的CRUD內容，例如創建，編輯和顯示人員的聯繫信息以及其他相關數據。這裏的大部分信息似乎都集中在如何設計用於輸入/編輯數據的Bootstrap 表單，但沒有涉及正確的只讀（即數據「顯示」）佈局。如何爲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或其他地方），使用一致的Bootstrap組件的良好語義佈局以及有人可以指向我的基於標準的可訪問HTML。

除了上面簡單的第一個&姓氏場景，您可以想象大量其他與「人物」相關的屬性（地址，電子郵件，電話等）。只是尋找一些可以遵循的東西。

來源

2016-09-25 Jiveman

使用你不能做語義bootstrap，其臃腫的標記與divisitus和clas所在地。或者說，如果你想要語義標記，不要使用引導 – albert

考慮使用描述列表元素dl。引導有這些樣式，它是專爲創建信息列表：

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

引導風格將針對元素，所以你並不需要添加類。但是，如果想要水平顯示東西，則可以將dl-horizontal添加到dl元素。

這些元素也有default implicit ARIA tags改善通俗易懂：

DL：role=list

DD：role=definition

DT：role=listitem

來源

2016-09-25 23:24:46

啊，非常好知道！我會進一步調查。 – Jiveman

請注意，某些屏幕閱讀器與定義列表有衝突，儘管這不是爲了避免它們，只是要注意支持：http://webaim.org/discussion/mail_thread?thread=7089 – aardrian

如何爲CRUD應用程序中的數據「顯示」屏幕執行語義引導佈局？

回答

相關問題