2013-03-25 51 views
0

是否可以根據設備的大小防止出現某些數據? 例如,我正在刪除表格 - 我將其更改爲由<div>標籤組成的網格。如何防止內容出現在所有響應式網頁設計

如果用戶在桌面上,我希望能夠表現出這樣的事情:

<div class="row show-grid" id="tblheading" naming="tblheading"> 
     <div class="span1">Branch</div> 
     <div class="span1">Branch Name</div> 
     <div class="span1">Building</div> 
     <div class="span1">Building Name</div> 
     <div class="span1">Room</div> 
     <div class="span1">Asset Name</div> 
    </div> 
    <div class="row show-grid"> 
     <div class="span1">CAN</div> 
     <div class="span1"></div> 
     <div class="span1">CAN-Building1</div> 
     <div class="span1"></div> 
     <div class="span1">CAN-Building1-Room1</div> 
     <div class="span1">Value 123</div> 
    </div> 
    <div class="row show-grid"> 
     <div class="span1">CAN</div> 
     <div class="span1"></div> 
     <div class="span1">CAN-Building2</div> 
     <div class="span1"></div> 
     <div class="span1">CAN-Building2-Room1</div> 
     <div class="span1">Value xyz</div> 
    </div> 

但是,如果他們在移動設備上,我不想顯示第一個「行」與標題。如果可能的話,我還想刪除一些其他字段,並僅顯示移動設備的資產名稱。 我只是新的快速響應設計,所以我很抱歉有任何補救問題。如果你能指引我正確的方向,我會很感激。

謝謝。

+0

您在上面顯示的數據看起來非常像表格數據 - 這就是用來顯示的表格。在這種情況下將此表格轉換爲div有什麼好處? – 2013-03-25 15:18:01

回答

0

如果您在Bootstrap文檔中看到here,它將討論內置類。

enter image description here

你可以使用這些類來顯示和隱藏根據屏幕大小的行或列。如果差異足夠大,您可以創建多個表格並針對每個尺寸顯示適當的表格。

0

這只是向想要隱藏的行/單元格添加類,然後將該類設置爲顯示的情況:在針對移動設備的媒體查詢中沒有。 我認爲twitter bootstrap甚至已經包含這樣的類,但不記得確切的名字。