Romych в 19:33, 8 квітня 2020

2020-04-08T19:33:05Z

Нова сторінка

←[[Bootstrap]]

Идея для Google Chrome экстеншена.

Для наглядности можно открыть http://bootstrap.zina.com.ua (или любой сайт на Bootstrap) и потестировать его с экстеншенами для Google Chrome:

* [https://chrome.google.com/webstore/detail/bootstrap-viewport/kflgmkikmbklpikoicfhonemdcemkdia?utm_source=chrome-app-launcher-info-dialog Bootstrap Viewport] — показывает в верхнем правом углу Viewport и режим Bootstrap (<code>lg</code>, <code>md</code>, <code>sm</code> или <code>sx</code>).<br>Альтернатива: [https://chrome.google.com/webstore/detail/viewport-detector/fpfdmgaahiocnoiaedbppoaipfjiiaep?utm_source=chrome-app-launcher-info-dialog Viewport Detector]
* [https://chrome.google.com/webstore/detail/bootstrap-3-resize-tool/bfbgdbiecfcepelcdmbokphbkoloeimp?utm_source=chrome-app-launcher-info-dialog Bootstrap 3 Resize Tool] — переключает размер окна браузера по основным режимам Bootstrap. <br>Альтернатива: [https://chrome.google.com/webstore/detail/bootstrap-resize-tool/fnlkljfogjamjaemldpapdokokkifmib?utm_source=chrome-app-launcher-info-dialog Bootstrap resize tool]
* [https://chrome.google.com/webstore/detail/bootstrap-overlay/aaplkmfheonlpjpnlofjemkabjdmidfi?utm_source=chrome-app-launcher-info-dialog Bootstrap Overlay] — накладывает на сайт сетку Bootstrap<br>Альтернатива (оригинальная версия): [https://chrome.google.com/webstore/detail/bootstrap-overlay/gjphocehogcokailappncpobkngnlhpe Bootstrap Overlay]

Сейчас есть такие неудобства:

* <code>Bootstrap Viewport</code> и <code>Bootstrap 3 Resize Tool</code> (как и их альтернативы) не поддерживают Bootstrap 4.
* <code>Bootstrap Overlay</code> — пропадает сетка при обновлении страницы. Когда работаешь в режиме LiveReload, она пропадает после первого же сохранения изменений в коде.

Идея в том, чтобы на основе этих плагинов сделать один с возможностями:

# Вкл/выкл режима отображения сетки (на основе <code>Bootstrap Overlay</code>).
# Вкл/выкл индикатора размера viewport и префикса справа вверху (на основе <code>Bootstrap Viewport</code>).
# Автоматическое определение версии Bootstrap на сайте и показ либо 4 кнопок для Bootstrap 3, либо 4 для Bootstrap 4 (на основе <code>Bootstrap 3 Resize Tool</code> или <code>Bootstrap resize tool</code>).

За основу интерфейса взять <code>Bootstrap 3 Resize Tool</code>, но добавить к нему 2 чекбокса: <code>Greed</code> для п. 1 и <code>Info</code> для п. 2.

Скриншот интерфейса: https://www.dropbox.com/s/o1e1yh2wenq8bxm/Chrome-Bootstrap-Extension.png?dl=0

[[Категория: Bootstrap]]

Bootstrap Viewports extension - Історія редагувань

Romych в 19:33, 8 квітня 2020