Open DmitryBorisenko33 opened 5 years ago
То есть вы хотите весь главный блок сделать других размеров?
Для этого вам нужно в самом верху играться с этой строчкой:
"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 и обновить страницу.
Описания 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. И тогда станет ясно что поменять что бы получить результат.
Да, все правильно. Спасибо за подробное описание, наверняка кому-то пригодится. Есть много вспомогательных сайтов которые помогаю сделать нужные размеры на разных дивайсах. Мне нравится вот этот http://shoelace.io/ С лево выбираешь устройство, по серединке размеры блока на этом устройстве и в конце с право копируешь полученный class
Я воспользовался предложенным сайтом. Очень крутая вещь.
Вышло вот так для устройств Desktop:
Тут же можно увидеть как это будет выглядеть на телефоне:
Проэксперементировал с размещением header title и footer на странице.
Для проверки я добавил вот такой код:
"title":[
{
"type": "h2",
"title": "MY TITLE"
}
],
Получил вот такой результат:
смотрится очень круто.
Хотелось спросить а как создать несколько блоков рядом?
Посмотрите вот это мое видео https://youtu.be/HcyibmxBZio
Доброго времени суток!
У меня возникла проблема при попытки использовать title cсовместно с socket. После каждого нового поступления данных через socket генерится новая строка в блоке title. В чем моя ошибка?
В связи с тем, что заголовок в блоке title предполагался статический, решил вопрос, путем корректировки файла index.html.gz.
Здравствуйте подскажите как изменить фон(цвет) контейнера в котором располагается контент на странице управления например?
@reo1978
Здравствуйте. У меня возникли затруднения с основными настройками страницы.
Вот это код моей страницы. Она состоит из блока который размещен по центру экрана. Я хотел бы научиться изменять размер этого блока по горизонтали. Я пытался редактировать класс но не получилось.
Еще хотелось бы научиться добавлять header title and footer...