5 колонок в Twitter Bootstrap
Эта тема не имеет прямого отношения к MODx, но может пригодится тем кто использует Theme.Bootstrap.
В последнем проекте понадобилось вывести контент в 5 колонок, при этом сохранить полную работоспособность Twitter Bootstrap 3. Найти с ходу решение в сети не получилось и я сам нашёл довольно интересное решение. Для тех кому интересно решение — прошу под кат.
По сути всё решение один css-файл, который нужно подключить дополнительно к стилям bootstrap:
http://yadi.sk/d/Wmrk5ji5P7SEE
А дальше в нужном месте нужно вместо col-xs-1 использовать col15-xs-1. При этом можно комбинировать новые колонки со старыми. Например так:
В последнем проекте понадобилось вывести контент в 5 колонок, при этом сохранить полную работоспособность Twitter Bootstrap 3. Найти с ходу решение в сети не получилось и я сам нашёл довольно интересное решение. Для тех кому интересно решение — прошу под кат.
По сути всё решение один css-файл, который нужно подключить дополнительно к стилям bootstrap:
http://yadi.sk/d/Wmrk5ji5P7SEE
А дальше в нужном месте нужно вместо col-xs-1 использовать col15-xs-1. При этом можно комбинировать новые колонки со старыми. Например так:
<div class="row">
<div class="col15-md-3 col15-md-offset-0 col-sm-6">
</div>
<div class="col15-md-3 col15-md-offset-0 col-sm-6">
</div>
<div class="col15-md-3 col15-md-offset-0 col-sm-6">
</div>
<div class="col15-md-3 col15-md-offset-0 col-sm-6">
</div>
<div class="col15-md-3 col15-md-offset-0 col-sm-6 col-sm-offset-3">
</div>
</div>
Комментарии: 15
А что на github-то не выложишь? Хочется посмотреть, а скачивать себе не хочется) Да и найти потом проще будет, когда понадобится.
Замечание принято. Постараюсь быстренько исправиться)
А не проще ли это было встроенными средствами TB сделать? Там как бы это все переменными в less файлах можно задать и все будет работать полностью на стандартном коде и без всяких костыльных файлов
Сразу 12ти и 15ти колоночный макет будет работать?
Хотя при любом раскладе лично мне было бы очень интересно посмотреть на работу less с использованием ТВ.
Хотя при любом раскладе лично мне было бы очень интересно посмотреть на работу less с использованием ТВ.
Через less можно исправить и подвести к нужному виду 90% TB, на мой взгляд это единственно верный путь работы с ним, чтобы не плодить тонны лишнего кода и всякие important. По поводу сеток всегда можно найти нужную и универсальную, теже 20 колонок дают и 5 и 2 и 4 одинаковых, а при использовании offset будет 3 колонки, учитывая более мелкий размер самой колонки в 1 будет все корректно и нормально отображаться
Извиняюсь, не сразу понял, что TB — это Twitter Bootstrap.
Я сначала подумал, что имеются в виду ТВ (template variables) MODx =))
Я сначала подумал, что имеются в виду ТВ (template variables) MODx =))
getbootstrap.com/customize/ Поменять @grid-columns на 15 и все.
Если просто сгенерировать 15-ти колоночный макет мы потеряем 12-ти колоночный, а он необходим, чтобы страницу, например, делить пополам: col-md-6 и col-md-6
По сути с этого я и начал.
По сути с этого я и начал.
Ну 20 тогда или 30 :)
Вариант))
Тогда уж 60 — делится на 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)))
я бы бил по рукам дизайнера рисующего по смешанной сетке.
Представь себе компанию у которой 5 товаров и идеальным вариантом их представления является 5-ти колоночная сетка, чтобы можно было сравнить характеристики.
Причём здесь дизайнер?!
Причём здесь дизайнер?!
Так раз где-то необходимо разделить пополам, а где-то разделить на 5, то нужно и сетку подобрать нужную. Но если вас устраивает играться с версткой, то да, выгораживайте дизайнера. нафиг сетку))
Автор что за ацкий код с классами? просто добавь новые классы в css вот хорошая инструкция для бутстрапа 3 и 4 версий
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.