Основные настройки страницы

[DmitryBorisenko33]

Здравствуйте. У меня возникли затруднения с основными настройками страницы.

{
 "configs": [
  "/config.live.json",
  "/config.option.json",
  "/config.setup.json"
 ],
 "class":"col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6",
 "content": [
  {
   "type": "h5",
   "title": "{{SSDP}}",
   "class":"alert-warning"
  },
{
   "type": "h4",
   "title": "Device ID: {{chipID}}"
  },
{
   "type": "h4",
   "title": "IP address: {{ip}}"
  },
{
   "type": "hr"
 },
{
   "type": "link",
   "title": "Сценарии",
   "action": "/page.htm?scenario",
   "class": "btn btn-block btn-primary"
  },
  {
   "type": "link",
   "title": "Главная",
   "action": "/page.htm?index",
   "class": "btn btn-block btn-danger btn-sm"
  }
 ]
}

Вот это код моей страницы. Она состоит из блока который размещен по центру экрана. Я хотел бы научиться изменять размер этого блока по горизонтали. Я пытался редактировать класс но не получилось.

Еще хотелось бы научиться добавлять header title and footer...

[renat2985]

То есть вы хотите весь главный блок сделать других размеров?
Для этого вам нужно в самом верху играться с этой строчкой:
"class":"col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6",
Можете попробовать заменить на это, блок станет значительно больше:
"class":"col-sm-offset-1 col-sm-10",
Так же можно этот блок сдвинуть в левую или правую часть на нужное расстояние. Почитайте о Bootstrap Grid.

Но есть 1 момент. К сожалению все что находится вне content":[*] не меняется динамически, то есть нажав на VIEW вы не увидите изменений. Нужно нажать SAVE и обновить страницу.

[DmitryBorisenko33]

Описания Bootstrap Grid приведены в этой ссылке: https://getbootstrap.com/docs/4.1/examples/grid/
Существует несколько типов отображения страниц:

sm для устройств ≥576px,
md для устройств ≥768px,
lg для устройств ≥992px,
xl для устройств ≥1200px.

Это значит что когда мы пишем строку:

"class":"
col-sm-offset-1 col-sm-10
col-md-offset-2 col-md-8
col-lg-offset-3 col-lg-6",

то мы задаем пропорции экрана для каждого типа устройств в отдельности.

Можно увидеть что отступ offset растет с увеличением количества пикселей. Что логично потому что он не нужен большим на устройствах с маленьким экраном.

Еще очень важный нюанс в том что если я напишу в класс только sm
"col-sm-offset-1 col-sm-10"
то устройство поделит экран по стандарту sm для всех устройств принудительно даже для тех у кого будет ширина экрана больше ≥576 выглядеть это будет так:

Если я напишу класс так(sm md):
"col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8"
то устройство поделит экран по стандарту md для устройств у которых поперечное разрешение больше ≥768px:

Если я напишу класс так(sm md lg):
"col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6"
то устройство поделит экран по стандарту lg для устройств у которых поперечное разрешение больше ≥992px:

то есть вывод такой:

576px > sm > 768px
768px > md > 992px
992px > lg > 1200px

Из описания я понял что весь экран делится на 12 частей. И если ты пишешь col-sm-12 то значит блок будет во всю ширину. Если напишешь к примеру col-sm-6 то это половина из возможной ширины.
Параметр col-sm-offset-1 будет значить что я оставлю на офсет 1/12 полной ширины страницы.

То есть редактируя страницу нужно в первую очередь понимать какой из вариантов отображения сейчас активен на твоем устройстве: sm md или lg. И тогда станет ясно что поменять что бы получить результат.

[renat2985]

Да, все правильно. Спасибо за подробное описание, наверняка кому-то пригодится.
Есть много вспомогательных сайтов которые помогаю сделать нужные размеры на разных дивайсах. Мне нравится вот этот http://shoelace.io/ С лево выбираешь устройство, по серединке размеры блока на этом устройстве и в конце с право копируешь полученный class

[DmitryBorisenko33]

Я воспользовался предложенным сайтом. Очень крутая вещь.
Вышло вот так для устройств Desktop:

Тут же можно увидеть как это будет выглядеть на телефоне:

[DmitryBorisenko33]

Проэксперементировал с размещением header title и footer на странице.

Для проверки я добавил вот такой код:

 "title":[
{
   "type": "h2",
   "title": "MY TITLE"
  }
],

Получил вот такой результат:

смотрится очень круто.

Хотелось спросить а как создать несколько блоков рядом?

[renat2985]

Посмотрите вот это мое видео https://youtu.be/HcyibmxBZio

[alecseys]

Доброго времени суток!
У меня возникла проблема при попытки использовать title cсовместно с socket. После каждого нового поступления данных через socket генерится новая строка в блоке title. В чем моя ошибка?

[alecseys]

В связи с тем, что заголовок в блоке title предполагался статический, решил вопрос, путем корректировки файла index.html.gz.

[reo1978]

Здравствуйте подскажите как изменить фон(цвет) контейнера в котором располагается контент на странице управления например?

[renat2985]

@reo1978