Работа с таблицами

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Для оформления таблиц в Bootstrap предназначен класс table. Например, пусть у нас есть такая таблица:

<div class="row">
    <div class="col-md-6">
        <table class="table">
            <tbody>
                <tr>
                    <th>
                        Язык
                    </th>
                    <th>
                        Процент
                    </th>
                </tr>
                <tr><td>C</td><td>17.5%</td></tr>
                <tr><td>Java</td><td>16.4%</td></tr>
                <tr><td>Objective-C</td><td>12.1%</td></tr>
                <tr><td>C++</td><td>6.3%</td></tr>
                <tr><td>C#</td><td>5.6%</td></tr>
            </tbody>
        </table>
    </div>
</div>

Тогда применение класса table будет давать следующий вывод:

Кроме этого класса мы можем использовать в дополнение к нему еще ряд классов. Например, класс table-striped позволяет выделить четные и нечетные строки в таблице:

<table class="table table-striped">
	<tbody>
      ...........................        
    </tbody>
</table>

Класс table-bordered создает границы для таблицы и ее ячеек, а класс table-hover позволяет выделять строку при наведении на нее курсором:

<table class="table table-bordered table-hover">
	<tbody>
      ...........................        
    </tbody>
</table>

Итак, мы рассмотрели только небольшую часть возможностей, которые предлагает Bootstrap. Но вне сомнения то, что использование данного фреймворка позволяет быстрее создавать адаптивные веб-приложения и расширяет арсенал веб-разработчика.