Почему расположение сетки Bootstrap предпочтительнее таблицы HTML?

Ответ 1

Разница заключается в том, что первый пример семантически отмечен, предполагая, что помеченные данные не являются фактически табличными. <table> следует использовать только для табличных данных, а не для любых данных, которые могут отображаться в макете, подобной таблице.

Это верно, однако, что с помощью CSS пакеты, такие как Bootstrap, которые требуют, чтобы назначить классы HTML элементов, которые не семантические, но презентационные, уменьшает разделение содержания и представления, что делает различие несколько спорными. Вы должны назначать семантически значимые классы для своих элементов и использовать lesscss mixins (или подобную технологию), чтобы назначать представление, определяемое в структуре CSS, этим классам, вместо того, чтобы напрямую присваивать классы представления.

Скажи:

<div class="products">
    <div class="product"></div>
</div>

.products {
    .row;
}

.products > .product {
    .span16;
}

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

Ответ 2

Я считаю, что комментарий CBroe - лучший вариант, поэтому я решил уточнить его.

Избегайте div. A div должен быть вашим последним средством, а не вашим первым вариантом. Вместо этого попробуйте использовать классы Bootstrap для фактических элементов. Например:

<form class="container">
    <fieldset class="row">
        <label class="span4" for"search">Type your search</label>
        <input class="span6" type="text" id="search" />
    </fieldset>
</form>

Стыдно использовать fieldset, чтобы содержать одно поле, но оно семантически лучше, чем использование div для одной и той же вещи. Стандарт HTML5 определяет множество новых элементов контейнера, таких как article, section, header, footer и многие другие. В некоторых случаях вам придется использовать div, но если вы минимизируете его, то ваш код будет более семантическим.

Ответ 3

Фундаментальное отличие состоит в том, что вы можете "перепланировать" макет с помощью Bootstrap для разных размеров дисплея, просто используя медиа-запросы, не требуя изменения разметки. Например, я могу решить, что на настольных компьютерах я хочу, чтобы ваши 4 div были на одной строке, потому что пользователь имеет широкоэкранный дисплей с высоким разрешением, но на телефонах я хочу 2 погружения на одну строку и следующие divs в следующих строках. Таким образом, я могу адаптировать количество столбцов в каждой строке, используя медиа-запросы. Если вы используете жестко закодированные HTML-таблицы, это очень сложно сделать.

Сказав это, мне не очень нравится реализация бутстрапа по следующим причинам:

• Он имеет точки останова, жестко закодированные в пикселях. Это означает, что по мере продвижения телефонов и таблиц в разрешении экрана ваш веб-сайт может начать показывать неожиданные макеты на этих устройствах. Число пикселей - плохой прокси для размера экрана.
• Он ограничивает максимальную используемую область отображения до 1170px, что снова является обломком для пользователей с хорошими широкоэкранными дисплеями, которые они могут реально использовать для просмотра большего количества контента в вашем приложении.
• Макет Bootstrap не зависит от источника, т.е. вы не можете изменить порядок столбцов, заданный в HTML. Это, однако, более педантичная точка.
• Макет по умолчанию предназначен для очень малой разрешающей способности, а макеты с более высоким разрешением запускаются только тогда, когда возникают пожарные запросы в виде сообщений, которые, по мнению ИМО, являются плохим выбором, учитывая, что телефоны будут продолжать улучшать разрешение, и раньше, чем позже ваш сайт будет иметь макет по умолчанию, устаревший мобильные устройства.
• Макеты Bootstrap на самом деле не являются "свободными от беспокойства" в том смысле, что вы должны прочитать их мелкий шрифт, чтобы увидеть все ошибки и браузеры, которые они не видели достойными поддержки, но которые вы можете заботиться. Например, если вы ориентируетесь на пользователей в Южной Корее или Китае, вы можете быть удивлены.

Итак, не все золото в бутстрапе, и их подход не всегда всегда наилучший (как в сторону, еще одна вещь, которую я презираю в бутстрапе, - это их одержимость так называемыми "гигантскими" ), что те недвижимость, которые я надеюсь, что сообщество не начинает принимать "новый стандарт" ). Лично я использую таблицу таблиц CSS (display:table) в эти дни, которая имеет аналогичные преимущества, такие как bootstrap без hardcoding <table> в моей разметке. Например, я могу использовать медиа-запросы для перегруппировки строк в зависимости от портретной или альбомной ориентации. Однако наиболее важным преимуществом является то, что мои макеты действительно пиксель или даже процент независимы. Например, в 3-х макетах столбцов я позволяю контенту решать, сколько пространства должно занимать первое и последнее столбцы. Нет пиксельной или даже процентной ширины. Центральная колонка захватывает все оставшееся пространство (что хорошо для моего приложения, но это может быть не для других). Кроме того, я использую ems в точках прерывания медиа-запросов, которые, кстати, нет.

Ответ 4

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

Ответ 5

Я использую сетку Bootstrap для макета страницы, таблицы для табличных данных.

Я думаю о сетке в Bootstrap, а не как о сетке в смысле разработчика, как о контроле gridview, но больше в смысле дизайна страницы-дизайна - в качестве сетки, содержащей содержимое страницы. И даже несмотря на то, что сетка Bootstrap также может использоваться для создания обычной сетки, содержащей табличные данные, как отмечалось в результате дефолта, такая сетка лучше подходит для таблиц HTML, которые по-прежнему приемлемы для использования в этом сценарии.

Ответ 6

Хотя между двумя наборами разметки не обязательно много смысловой разницы (поскольку классы, используемые сеткой Bootstrap, действительно являются исключительно презентационными), очень важное различие состоит в том, что сетчатая система намного более гибкая.

Было бы очень сложно, например, сделать ваш табличный макет ответом на разные размеры экрана. Невозможно сказать браузеру отобразить один элемент td ниже другого td в той же строке. В то время как с примером div это легко сделать, и одна и та же разметка может быть представлена ​​по-разному, даже когда классы являются "презентационными" в том смысле, что они определяют относительные пропорции и позиционирование элементов на странице.

Ответ 7

Если возможно, я хотел бы обобщить то, что я собрал из других комментариев и взрыва связи, которые я испытал на этой странице:

Проблема с использованием таблиц - это не макет сетки, это попытка выразить его с помощью HTML вместо CSS.

Bootstrap позволяет сетку раскладки через (в основном) чистый CSS, и именно поэтому все в порядке. Часть "главным образом" возникает из-за того, что ваш HTML-код по-прежнему будет загрязнен вашими данными компоновки, но более тонко:

<nav class="span4"> ... </nav>
<article class="span8"> ... </article>

Это, безусловно, значительно более семантическое и поддерживаемое, чем старые табличные проекты, но "span4" и "span8" по-прежнему являются отображаемыми данными, встроенными в наш HTML. Однако, поскольку дизайн никогда не может быть действительно отделен от наших данных (например, вложенных div), это разумная цена для оплаты.

При этом даже эта связь может быть нарушена, если вы используете некоторые более современные функции CSS, предоставляемые предварительно обработанным языком, например LESS. Тот же пример:

<nav id="secondary-nav"> ... </nav>
<article id="main-content"> ... </article>

В сочетании со следующим МЕНЬШЕ:

#secondary-nav{
    .span4;
    // More styling (padding, etc) if needed
}
#main-content{
    .span8;
}

Это создает полностью развязанный HTML и стили, что идеально, потому что HTML чище и читабельнее, а редизайн может быть сделан с меньшей модификацией HTML. Однако это работает, только если вы используете LESS или какой-либо другой предварительный процессор CSS, потому что CSS в настоящее время не поддерживает mixins (AFAIK).

Мы уже используем LESS на моем рабочем месте, поэтому я знаю, что буду настаивать на использовании этого типа решений. Я очень сильно убежден в семантическом HTML и развязывании данных.:)

Ответ 8

В основном DIV - это элементы DIV и Table, которые являются просто элементами таблицы. Проблема с таблицами часто просто отслеживает все столбцы и строки, потому что это, в конечном счете, строгая структура данных. DIVs гораздо более гибкие и прощающие.

Например, если вы хотите взять четыре DIV с классом, равным "span4" , и просто изменить их на ширину в 2 столбца, все, что вам нужно будет сделать, это скорректировать небольшой бит CSS для внешнего класса "строка" и, возможно, класс "span4" . На самом деле, когда я делаю DIV, я бы избегал называть отдельные DIVs "span4" или какое-то другое число.

Моим подходом было бы создать родительскую оболочку DIV, которая называется "rowspan" , а внутренние DIVs имеют некоторый общий идентификатор, например, "ячейку".

<div class="rowspan">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>

Каждый класс "cell" может иметь ширину 100 пикселей, например, а затем родительский "rowspan" может составлять 400 пикселей. Это будет равно 4 столбцам подряд. Хотите сделать это 2 столбца? Нет проблем! Просто измените "rowspan" на ширину 200 пикселей. На данный момент это все в CSS, поэтому легко обойтись без переустановки структуры страницы в DOM.

Но с таблицами? Не просто. Вам нужно будет в основном перерисовать таблицу тегами </tr><tr> для создания новых строк.

Ответ 9

Версия с таблицей, tr, td зависит от алгоритмов браузера - обертывания, динамической ширины, полей, центровки и т.д. Версия с div может быть более легко настроена css и скриптами.