Мобильные и настольные таблицы с Bootstrap

Я очень новичок в сетке и стараюсь понять эту систему сетки.Мобильные и настольные таблицы с Bootstrap

Что я надеюсь сделать, это подгонять каждую строку таблицы на экране любого устройства от настольных компьютеров до мобильных телефонов. Но я не мог справиться, и даже я не уверен, что буду на правильном пути.

Вот моя проба: http://jsfiddle.net/woqw0wyu/1/

Как я могу добиться, чтобы сделать этот вид таблицы дружественного для настольных компьютеров и мобильных телефонов? Спасибо заранее.

<body> 
    <div class="container"> 
     <div class="row"> 
      <table class="table table-bordered table-hover table-condensed span12"> 
       <thead> 
        <tr> 
         <th class="col-md-1 col-sm-1 col-xs-1">#</th> 
         <th class="col-md-2 col-sm-2 col-xs-2">Lat</th> 
         <th class="col-md-2 col-sm-2 col-xs-2">Lng</th> 
         <th class="col-md-2 col-sm-2 col-xs-2">Description</th> 
         <th class="col-md-1 col-sm-1 col-xs-1">Value</th> 
         <th class="col-md-1 col-sm-1 col-xs-1">Status</th> 
         <th class="col-md-2 col-sm-2 col-xs-2">Last Update</th> 
         <th class="col-md-1 col-sm-1 col-xs-1">Update Count</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td>1</td> 
         <td>39.8677955</td> 
         <td>32.8677955</td> 
         <td>Empire State Building</td> 
         <td>45</td> 
         <td>F</td> 
         <td>2014-12-19 13:13:29 </td> 
         <td>33</td> 
        </tr> 
        <tr> 
         <td>2</td> 
         <td>39.8677955</td> 
         <td>32.8677955</td> 
         <td>White House Building</td> 
         <td>33</td> 
         <td>E</td> 
         <td>2014-12-19 13:13:29 </td> 
         <td>22</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</body>

источник

2015-03-27 Mustafa

Если вы собираетесь иметь эти решетки так, как они есть, вам нужны только самые маленькие, поскольку они все одинаковы.

... 
<thead> 
    <tr> 
     <th class="col-xs-1">#</th> 
     <th class="col-xs-2">Lat</th> 
     <th class="col-xs-2">Lng</th> 
     <th class="col-xs-2">Description</th> 
     <th class="col-xs-1">Value</th> 
     <th class="col-xs-1">Status</th> 
     <th class="col-xs-2">Last Update</th> 
     <th class="col-xs-1">Update Count</th> 
    </tr> 
</thead> 
...

так, как это должно быть так: скажем, вы хотите столбец быть шириной 50% на экранах среднего, но вы хотите быть 33,333% на больших экранах и, наконец, вы хотите, чтобы быть 100% на экранах или меньше вы бы отформатировать его таким образом:

... 
<thead> 
    <tr> 
     <th class="col-lg-4 col-md-6 col-xs-12">Some Text Here</th> 
    </tr> 
</thead> 
...

Fiddle Смотрите обновленный Помните: Wasted код впустую деньги. Bootstrap автоматически настроен на отзывчивость. Это мобильное первое, который означает, что он создан для мобильных экранов первых, то атрибуты медиа добавляются в формате для больших экранов

@media(min-width:768px){ 
    .div{ 
     /*your specific CSS for this viewport width goes here*/ 
    } 
}

Не могли бы вы дать мне Alittle больше, и я могу помочь вам больше ...

Спасибо !

Happy Coding !!

источник

2015-03-27 10:58:49 blayderunner123

Мобильные и настольные таблицы с Bootstrap

ответ

Смежные вопросы