Форум русской поддержки Joomla!® CMS
06.12.2016, 18:07:43 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Плитка на bootstrap

 (Прочитано 923 раз)
0 Пользователей и 1 Гость смотрят эту тему.
passer
Живу я здесь
******

Репутация: +69/-3
Offline Offline

Пол: Мужской
Сообщений: 829



« : 30.12.2015, 17:02:25 »

Господа верстальщики. Кто-то делал плитку на bootstrap. Чтобы в цикле вывести:
Код
<div class="row">
<?php foreach($items as $item) : ?>  
<div class="col-xs-4"><?php echo $item->text; /*Разная длинна текста и получается бардак*/ ?></div>
<?php endforeach; ?>
</div>
Т.е.
Код
<div class="col-xs-4"><?php echo $item->text; /*Разная длинна текста и получается бардак*/ ?></div>
повторяется много-много раз и с разной длиной текста.
В чистом bootstrap блоки смещаются, появляются пропуски, пустые места и пр.
Плотную плитку кто-то делал? Поделитесь стилями.
Записан
fbr
Живу я здесь
******

Репутация: +136/-6
Offline Offline

Сообщений: 1250


« Ответ #1 : 30.12.2015, 17:35:44 »

Стандартно - никак.
В UiKit это делается js-скриптом, прописываются каждому блоку абсолютные позиции

Теоретически думал на эту тему:
Решать на уровне php. Из исходного массива создать 3, по количеству колонок, и в 3 цикла набивать их вертикально.
Тогда они ровно лягут стопкой каждый в своей колонке.

Не проверял, может есть более изящный способ))
Записан
al-teen
Support Team
*****

Репутация: +221/-10
Offline Offline

Пол: Мужской
Сообщений: 2460



« Ответ #2 : 30.12.2015, 17:44:19 »

Сетка буцсрака - полный отстой именно по этой самой причине. Нужно каждый ряд оборачивать в div.row. 960grid этим не страдает например.
Если совсем все плохо и сетку уже не заменить, то можно использовать вот эту штуку
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #3 : 30.12.2015, 17:45:47 »

На UIkit сделай. Там намного проще и удобнее.
Записан
AlekVolsk
Профи
********

Репутация: +316/-3
Offline Offline

Пол: Мужской
Сообщений: 6457



« Ответ #4 : 30.12.2015, 17:47:47 »

Я много раз пытался сделать чистую плитку на bs2 и bs3 - штатными средствами фреймворка так и не получилось, всегда допил js.
На uikit блоки не позиционируются абсолютом, им просто устанавливается фиксированный размер скриптом, встроенным во фреймворк, причем скриптом - только высота, ширина - стилями.
Записан
fbr
Живу я здесь
******

Репутация: +136/-6
Offline Offline

Сообщений: 1250


« Ответ #5 : 30.12.2015, 17:53:07 »

..
На uikit блоки не позиционируются абсолютом, им просто устанавливается фиксированный размер скриптом, встроенным во фреймворк, причем скриптом - только высота, ширина - стилями.
Нет. Именно абсолютно.
Посмотрите исходный код плитки -  http://getuikit.com/docs/grid-js.html

Или может мы про разную плитку говорим?
Если речь о блоках одинаковой высоты - то да, js-ом делается просто.
Записан
al-teen
Support Team
*****

Репутация: +221/-10
Offline Offline

Пол: Мужской
Сообщений: 2460



« Ответ #6 : 30.12.2015, 17:59:17 »

Если имеется в виду такая плитка, как на grid.js, то лучше использовать Masonry.js или прочие аналоги. И там нафиг никакой бутстрап или кит не нужен.
Записан
passer
Живу я здесь
******

Репутация: +69/-3
Offline Offline

Пол: Мужской
Сообщений: 829



« Ответ #7 : 30.12.2015, 18:01:13 »

 Smiley Оказывается не только у меня мысль появилась. Через array_chunk или js решается. Через сss нет. Но не верстальщик ни разу, поэтому и вопрос. Может туплю.
Ок. Прикручу что нибудь стороннее. Uikit или Javascript-Equal-Height-Responsive-Rows. Спасибо за наводки. Просто bootstrap уже прикручен из коробки и не хотелось заморачиваться перед праздниками.
Записан
AlekVolsk
Профи
********

Репутация: +316/-3
Offline Offline

Пол: Мужской
Сообщений: 6457



« Ответ #8 : 30.12.2015, 18:03:48 »

Нет. Именно абсолютно.
Посмотрите исходный код плитки -  http://getuikit.com/docs/grid-js.html
Вы приводите пример динамического грида, это, имхо, немного другое. Я имел ввиду действие data-uk-grid-match
Записан
AlekVolsk
Профи
********

Репутация: +316/-3
Offline Offline

Пол: Мужской
Сообщений: 6457



« Ответ #9 : 30.12.2015, 18:04:56 »

Ок. Прикручу что нибудь стороннее. Uikit или ...
С гридом помогу, я их много уже понаделал Azn
Записан
passer
Живу я здесь
******

Репутация: +69/-3
Offline Offline

Пол: Мужской
Сообщений: 829



« Ответ #10 : 30.12.2015, 18:07:53 »

 Smiley Пасиб. Сам прикручу. Не долго.
P.S. А может array_chunk оставлю.
Записан
fbr
Живу я здесь
******

Репутация: +136/-6
Offline Offline

Сообщений: 1250


« Ответ #11 : 30.12.2015, 18:35:32 »

P.S. А может array_chunk оставлю.
В принципе, я это и имел ввиду, когда говорил о php варианте
Только есть подводный камень - если важна последовательность вывода, то при адаптивной верстке, когда колонки сложатся, последовательность измениться ..
Записан
passer
Живу я здесь
******

Репутация: +69/-3
Offline Offline

Пол: Мужской
Сообщений: 829



« Ответ #12 : 30.12.2015, 18:58:56 »

Ну да. Последовательность пока не важна. Будет важна отсортируем массивы. Или еще что придумаем.
Записан
Sven
Осваиваюсь на форуме
***

Репутация: +6/-5
Offline Offline

Сообщений: 119


« Ответ #13 : 31.12.2015, 00:48:30 »

В bootstrap4 ввели новый компонент "card". Его по разному можно компоновать, если правильно понял вот это вроде вам нужно:
http://v4-alpha.getbootstrap.com/components/card/#columns

Сам пока не вникал в принцип работы этих карточек, может там flex используется не знаю. Поддержка flex в браузерах вроде в районе 80% пока что.
Записан
al-teen
Support Team
*****

Репутация: +221/-10
Offline Offline

Пол: Мужской
Сообщений: 2460



« Ответ #14 : 31.12.2015, 00:56:02 »

Принцип основан на display: table-cell, а другой на display: inline-block
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet