olegzpr

Чаще всего, как уже написали, встречается в URL, но все же его значение чуть более шире - slug это уникальная строка идентификатор, понятная человеку (в отличие от ID) и содержащая только "безопасные" символы:
- 0-9
- a-z (общепринято - в нижнем регистре)
- символ -
- иногда еще символ _
Могут использоваться не только в URL для понятности, но и, например, в запросах к БД (в первую очередь - на уровне АПИ) - ведь
SELECT * FROM pages WHERE category="some-slug"
более понятно, чем
SELECT * FROM pages WHERE category=126.
На уровне API это выглядит как
get_pages_in_category( 'some-slug' )
или
$object->get_pages_in_category( 'some-slug' ).
В общем, это человеко-понятный уникальный идентификатор.

Расскажите плиз о технологии, и чем развёрнутей, тем лучше.

Вот захотел ты сделать сайт SPA или PWA с любимой тебе вёрсткой на базе Twitter Bootstrap и любимой библиотеки Vue. Сверстал. Поповеры не появляются, дропдауны не выпадают, модалки не открыватся, формы не валидируются, клики не работают.

Оригинальный Twitter Bootstrap имеет поддержку интерактивных элементов на Javascript. Реализовано это на библиотеке jQuery. Если делаешь на Vue, придётся подключать ещё и jQuery, что лишняя библиотека на 100+ килобайт, что, конечно, не катастрофа (пока ты не на мобилке).

Vue работает с состояниями привязывает данные к отображению, а jQuery работает с DOM и событиями. Это вопрос производительности. Работа JQuery начитается когда загружен и распарсен JS и HTML. Работа Vue начинается в тот момент, когда загружен и распарсен JS, то есть чуть раньше. jQuery модифицирует DOM на лету, перестраивая текущий документ. Vue работает с shadow DOM, а затем подсовывает уже готовую интерактивную страницу в пустой документ, что быстрее (разница в секунды на десктопе, десятки секунд на м...).

Vue реализует компонентную парадигму. Куски страницы являются изолированными кусочками кода (HTML CSS JS), которые цепляются между собой динамически, а обмениваются данными через аттрибуты и события. Предположим, что вы решили следовать компонентной парадигме, тогда согласно вот такому примеру нужно будет увязать самостоятельно все интерактивные компоненты. Компонента-кнопка. Компонента-поле ввода. Компонента-форма. Компонента-контейнер. Получается около 50 компонент. Для некоторых надо будет написать логику на jQuery. Если посмотреть на код jQuery этих микрокомпонент, то он окажется несложный, его вполне можно переписать на Vue. Ну там класс заменить или клик отработать. Когда от кода jQuery не останется следа, его можно будет из проекта удалить.

И вот получается Bootstrap-Vue

На компоненты побили. От Jquery избавились. Написано в единой парадигме. Работает быстрее.

Добавляем тот факт, что в Vue можно не импортировать компоненты, которые не нужны (например, я не работаю с дропдаунами и модальным окнами) и код становится меньше, грузится быстрее, работает быстрее.

Так же будет Не лишним оценить технологию: плюсы, минусы, стоит ли вообще с этим работать ...

Это сам изучай и сравнивай. Навыки и опыт воздушно-капельным и через Internet не передаётся

Кажется я сам разобрался =)
Все дело в наличии табулярной формы, которая как раз имеет data-pjax. Алгоритм получается такой.

Ссылка/кнопка при обработке data-method ищет ближайшую форму, если находит, то применяет все действия к ней, если не находит, создает новую форму.
Меняет action и method для данной формы на установленные соответственно.
Ну а дальше все просто. Спасибо дебагеру хрома.

В итоге, чтобы добиться AJAX поведения для data-method и data-confirm нужно обернуть такую ссылку в форму с установленным data-pjax. Извращение конечно, но пока разработчики ничего лучше не сделали.

Ещё вариант
jsfiddle.net/enrvfm9u

div:htn-child(1,4) {
   color: green;
}
div:htn-child(2,5) {
   color: pink;
}
div:htn-child(3,6) {
   color: blue;
}

Если количество блоков неизвестно, пишите формулу.
Для 1,4,7 и так далее :nth-child(4n+4)
Для 2,5,8 и так далее :nth-child(3n+2)
Для 3,6,9 и так далее :nth-child(3n+3)
В помощь nth-calculator.com

Скрипт не в браузере работает, а на сервере.
Запускай через CRON

Добавить дополнительные классы в начало своего css или в конец bootstrap.css:

.col-xs-five,
.col-sm-five,
.col-md-five,
.col-lg-five {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-five {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-five {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-five {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-five {
        width: 20%;
        float: left;
    }
}

Паддинг выставить по своему усмотрению. Точнее не трогать, если не меняли дефолтный бутстраповский.

Нашел еще один вариант с использованием встроенных классов:

<div class="row">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <div class="col-sm-12">Column 1</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 2</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 3</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 4</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 5</div>
    </div>
  </div>
</div>

Если надо на каком-то разрешении выстроить их по вертикали, нужно просто сделать display: block классу .btn-group

Вот тут.