Новости Joomla

Онлайн-трансляции Joomla-разработки Игоря Бердичевского

20 лет Joomla: Ринат Кажетов.В 2025 году Joomla исполнилось 20 лет

20 лет Joomla: Ринат Кажетов.В 2025 году Joomla исполнилось 20 лет

👩‍💻 20 лет Joomla: Ринат Кажетов.В 2025 году Joomla исполнилось 20 лет. Вокруг неё сложилось большое интернациональное русскоязычное сообщество. На сайте нашего сообщества и на Хабре к юбилею были собраны интервью с его видными представителями. Сегодня мы читаем интервью с Ринатом Кажетовым (@rkazhet). Ринат - один из администраторов чата русскоязычного Joomla-сообщества, из Казахстана. Это человек, который всегда знает или найдёт нужную ссылку, пристально следит за новостями в мире Joomla, многое узнаёт первым и просто очень отзывчивый человек. Интервью с Ринатом взял Евгений Сивоконь.Читать интервью@joomlafeed#joomla #community

20 лет Joomla: Ринат Кажетов

1   Вниз
0 Пользователей и 1 Гость просматривают эту тему.
  • 14 Ответов
  • 6747 Просмотров
*

passer

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

fbr

  • Завсегдатай
  • 1683
  • 210 / 7
Re: Плитка на bootstrap
« Ответ #1 : 30.12.2015, 16:35:44 »
Стандартно - никак.
В UiKit это делается js-скриптом, прописываются каждому блоку абсолютные позиции

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

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

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: Плитка на bootstrap
« Ответ #2 : 30.12.2015, 16:44:19 »
Сетка буцсрака - полный отстой именно по этой самой причине. Нужно каждый ряд оборачивать в div.row. 960grid этим не страдает например.
Если совсем все плохо и сетку уже не заменить, то можно использовать вот эту штуку
Записан
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Плитка на bootstrap
« Ответ #3 : 30.12.2015, 16:45:47 »
На UIkit сделай. Там намного проще и удобнее.
Записан
*

AlekVolsk

  • Гуру
  • 6913
  • 416 / 4
Re: Плитка на bootstrap
« Ответ #4 : 30.12.2015, 16:47:47 »
Я много раз пытался сделать чистую плитку на bs2 и bs3 - штатными средствами фреймворка так и не получилось, всегда допил js.
На uikit блоки не позиционируются абсолютом, им просто устанавливается фиксированный размер скриптом, встроенным во фреймворк, причем скриптом - только высота, ширина - стилями.
Записан
*

fbr

  • Завсегдатай
  • 1683
  • 210 / 7
Re: Плитка на bootstrap
« Ответ #5 : 30.12.2015, 16:53:07 »
Цитата: AlekVolsk от 30.12.2015, 16:47:47
..
На uikit блоки не позиционируются абсолютом, им просто устанавливается фиксированный размер скриптом, встроенным во фреймворк, причем скриптом - только высота, ширина - стилями.
Нет. Именно абсолютно.
Посмотрите исходный код плитки -  http://getuikit.com/docs/grid-js.html

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

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: Плитка на bootstrap
« Ответ #6 : 30.12.2015, 16:59:17 »
Если имеется в виду такая плитка, как на grid.js, то лучше использовать Masonry.js или прочие аналоги. И там нафиг никакой бутстрап или кит не нужен.
Записан
*

passer

  • Завсегдатай
  • 1013
  • 75 / 3
Re: Плитка на bootstrap
« Ответ #7 : 30.12.2015, 17:01:13 »
 ^-^ Оказывается не только у меня мысль появилась. Через array_chunk или js решается. Через сss нет. Но не верстальщик ни разу, поэтому и вопрос. Может туплю.
Ок. Прикручу что нибудь стороннее. Uikit или Javascript-Equal-Height-Responsive-Rows. Спасибо за наводки. Просто bootstrap уже прикручен из коробки и не хотелось заморачиваться перед праздниками.
Записан
*

AlekVolsk

  • Гуру
  • 6913
  • 416 / 4
Re: Плитка на bootstrap
« Ответ #8 : 30.12.2015, 17:03:48 »
Цитата: fbr от 30.12.2015, 16:53:07
Нет. Именно абсолютно.
Посмотрите исходный код плитки -  http://getuikit.com/docs/grid-js.html
Вы приводите пример динамического грида, это, имхо, немного другое. Я имел ввиду действие data-uk-grid-match
Записан
*

AlekVolsk

  • Гуру
  • 6913
  • 416 / 4
Re: Плитка на bootstrap
« Ответ #9 : 30.12.2015, 17:04:56 »
Цитата: passer от 30.12.2015, 17:01:13
Ок. Прикручу что нибудь стороннее. Uikit или ...
С гридом помогу, я их много уже понаделал :)
Записан
*

passer

  • Завсегдатай
  • 1013
  • 75 / 3
Re: Плитка на bootstrap
« Ответ #10 : 30.12.2015, 17:07:53 »
 ^-^ Пасиб. Сам прикручу. Не долго.
P.S. А может array_chunk оставлю.
Записан
*

fbr

  • Завсегдатай
  • 1683
  • 210 / 7
Re: Плитка на bootstrap
« Ответ #11 : 30.12.2015, 17:35:32 »
Цитата: passer от 30.12.2015, 17:07:53
P.S. А может array_chunk оставлю.
В принципе, я это и имел ввиду, когда говорил о php варианте
Только есть подводный камень - если важна последовательность вывода, то при адаптивной верстке, когда колонки сложатся, последовательность измениться ..
Записан
*

passer

  • Завсегдатай
  • 1013
  • 75 / 3
Re: Плитка на bootstrap
« Ответ #12 : 30.12.2015, 17:58:56 »
Ну да. Последовательность пока не важна. Будет важна отсортируем массивы. Или еще что придумаем.
Записан
*

Sven

  • Захожу иногда
  • 107
  • 6 / 5
Re: Плитка на bootstrap
« Ответ #13 : 30.12.2015, 23:48:30 »
В bootstrap4 ввели новый компонент "card". Его по разному можно компоновать, если правильно понял вот это вроде вам нужно:
http://v4-alpha.getbootstrap.com/components/card/#columns

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

al-teen

  • Глобальный модератор
  • 2385
  • 224 / 10
  • im
Re: Плитка на bootstrap
« Ответ #14 : 30.12.2015, 23:56:02 »
Принцип основан на display: table-cell, а другой на display: inline-block
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Bootstrap 4 карусель листает постер видео

Автор intcorp

 Ответов: 4
Просмотров: 2078 		Последний ответ 25.03.2018, 17:07:38
от intcorp
Вопрос по разметке Bootstrap 3

Автор Xzizz

 Ответов: 3
Просмотров: 1528 		Последний ответ 05.01.2017, 13:43:59
от dmitry_stas
Отключение Bootstrap

Автор Guram

 Ответов: 3
Просмотров: 1238 		Последний ответ 23.07.2015, 10:17:37
от darkghost
Bootstrap шрифт

Автор a.tarasenko

 Ответов: 0
Просмотров: 1355 		Последний ответ 12.03.2014, 01:09:38
от a.tarasenko
Bootstrap 3 и IE8 отображается как в мобилке

Автор wfedin

 Ответов: 1
Просмотров: 2139 		Последний ответ 09.03.2014, 22:04:59
от wfedin