Авто
Рейтинг основных форумов
Городские форумы
Городской форум
Городской форум для новичков
Нижегородская политика
Жалобная книга
Бабский форум
Мужской
Анонимный медицинский форум
Дурацкие вопросы
Автофорумы
Автофорум главный
Девушка за рулем
ВАЗ форум
4х4 форум
Жалобный
Шевроле Форум
Такси
Автозапчасти
Гаражный форум
KIA-форум
Рено форум
Hyundai Форум
VAG Форум
Форумы покупок
Центр раздач: информационный форум
Глав-Пристрой (со всех форумов, взрослый)
Совместная покупка
Совместная покупка: центральный
Совместная покупка: взрослый
Совместная покупка: вкусный
Совместная покупка: мама и малыш
Совместная покупка: уютный
Совместная покупка: сбор предоплаты, раздачи
Совместная покупка: услуги
Совместная покупка: область
Совместная покупка: Дзержинск
Совместная покупка: Саров
Зарубежные интернет-покупки
Покупаем вместе
Покупаем Вместе: Основной
Покупаем вместе: БОЛЬШОЙ ШОПИНГ (взрослый)
Покупаем вместе: БЕБИ-ШОП (детский)
Покупаем вместе: ДОМОВОЙ
Покупаем вместе: ГАСТРОНОМ
Покупаем вместе: Сбор предоплаты, раздачи
Покупаем Вместе: пристрой
Покупаем Вместе: услуги
Выгодная покупка
Выгодная покупка - общие вопросы
Выгодная покупка - взрослый
Выгодная покупка - детский
Выгодная покупка - сбор предоплаты, раздачи
Выгодная покупка - объявления
Форум закупок
Мой малыш
Мой малыш - Основной
Мой малыш - Объявления. Общий
Мой малыш - Объявления: детская одежда
Мой малыш - Объявления: детская обувь
Мой малыш - Объявления: детский транспорт, игрушки, мебель
Халявный
Халявный (основной)
Котята и др. животные
Элитный (продажа неликвидных товаров)
Услуги
Домоводство
Полезный форум
Бытовые проблемы
Деревенский форум
Домоводство
Цветочный форум
Форум владельцев кошек
Дачный. Основной.
Бытовая Техника
Творческий
Рукоделие основной
Форумы по интересам
Фиолетовый форум
Сделаны в СССР
Музыкальный
Кино форум
Кладоискатели и коллекционеры
Рыболовный
Охотничий
Стильный форум
Флирт, Любовь, Знакомства
Фотофорум
Здоровье
Развитие Человека
Пивной форум
Кулинарный
Парфюмерный
Парфюмерная Лавка
Собачий форум
Собачий форум: Основной
Собачий форум: пристрой животных
Наши Дети
Наши дети
Школьный форум
Особые дети
Технофорумы
Интернет-НН
GPS форум
Мобильный форум
Техно-форум
Технотуса
Проф. и бизнес форумы
Бизнес форум
Фотография
Недвижимость
Банковский форум
Медицина
Форум трейдеров
Бухучет и аудит
Юридический
Подбор персонала
Разработчики ПО
Строительные форумы
Строительный форум (основной)
Окна
Форум электриков
Мебель
Кондиционирования и вентиляция
Форум строительных объявлений
Форум проектировщиков
Все строительные форумы
Туризм, отдых, экстрим
Туризм, отдых, экстрим
Спортивные форумы
Клуб болельщиков
Спортплощадка
Боевые искусства
Велофорумы Нижнего Новгорода
Велофорум Нижнего Новгорода
Путешествия
Нижегородская область
Недвижимость
Недвижимость
Ипотека
Земельный форум
ТСЖ
Садоводческое товарищество
Жилые районы
Автозаводский район
Сормовский район
Мещерское озеро
Все форумы районов
Форумы домов
Корабли
Новая Кузнечиха
Октава ЖК (ул. Глеба Успенского)
Мончегория ЖК
Аквамарин ЖК (Комсомольская пл.)
Сормовская Сторона ЖК
КМ Анкудиновский парк ЖК
Красная Поляна ЖК (Казанское шоссе)
Времена Года ЖК (Кстовский р-он)
Стрижи ЖК (Богородский р-он)
На Победной ЖК (Победная ул., у дома 18)
Окский берег ЖК (п. Новинки)
Цветы ЖК (ул. Академика Сахарова)
Деревня Крутая кп (Кстовский р-он)
Опалиха кп (Кстовский р-он)
Юг мкр. (Южный бульвар)
Гагаринские высоты мкр.
Бурнаковский мкр.
Белый город мкр. (60-лет Октября ул.)
Зенит ЖК (Гагарина пр.)
Седьмое небо ЖК
Все форумы домов
Частные форумы
Свадебный форум
Саровский Клуб Покупателей
Июньские мамочки
Форум безумных идей
Ночной форум
Королевство кривых зеркал
Ищу вторую половинку!
Лютики-цветочки КУПЛЯ-ПРОДАЖА
Отряд стройности
Пчеловодство
Форум ленивых
Волейбольный клуб туристов
Встречи для секса
Буду мамой!
Алкогольный форум
Лютики-цветочки
Котоводство
Форум сексуального опыта
Свободка
Форум модераторов
Форум забаненных
Новый форум модераторов
Отзывы и предложения (техподдержка)
Нужна помощь - проектирование интерфейса.
Серьёзная тема
24
18
Поделиться
Подскажите, пожалуйста! Делаю сайт, точнее панель управления своим проектом.
Пользователь логинится на сайте и по одной из ссылок заходит в список объектов (Компании).
У каждого из этих объектов множество свойств, которые было бы неплохо отобразить на экране.
То есть по сути - панель сводной информации (Бюджет и т.д.).
P.S. Также есть мысль поставить чекбокс совместимости с Законодательством РФ.
Она будет добавлять такие поля как ИНН, КПП и т.п.
Сложность ещё и в том, что каждый объект содержит ещё два списка объектов других типов (Сотрудники и Филиалы).
Поэтому есть мысль свойства самого объекта отобразить таким же виджетом, но отдельным.
И вот тут... Я использую AdminLTE, но нужного мне элемента нет - надо создавать самому.
А я пока не силён в адаптивной вёрстке. В общем, кто может подсказать, что почитать о проектировании интерфейсов?
Пользователь логинится на сайте и по одной из ссылок заходит в список объектов (Компании).
У каждого из этих объектов множество свойств, которые было бы неплохо отобразить на экране.
То есть по сути - панель сводной информации (Бюджет и т.д.).
P.S. Также есть мысль поставить чекбокс совместимости с Законодательством РФ.
Она будет добавлять такие поля как ИНН, КПП и т.п.
Сложность ещё и в том, что каждый объект содержит ещё два списка объектов других типов (Сотрудники и Филиалы).
Поэтому есть мысль свойства самого объекта отобразить таким же виджетом, но отдельным.
И вот тут... Я использую AdminLTE, но нужного мне элемента нет - надо создавать самому.
А я пока не силён в адаптивной вёрстке. В общем, кто может подсказать, что почитать о проектировании интерфейсов?
P.S. Обращался в поиск гугла - предлагает использовать для виджета iframe и практически все виджеты - для ВК и ФБ.
откуда данные нужно взять? если база данных ваша зачем нужны iframe?!
если БД ваша, что мешает сделаешь запросы в базу и вывести результат, где нужно и оформить, как нужно?
предполагаю, что AdminLTE на Bootstrap 3,
официальная документация - getbootstrap.com
посмотрите примеры готовых классов, которые нужно добавлять в html-разметку, например, простая панелька для какой либо инфы - getbootstrap.com/components/#panels-heading
если БД ваша, что мешает сделаешь запросы в базу и вывести результат, где нужно и оформить, как нужно?
предполагаю, что AdminLTE на Bootstrap 3,
официальная документация - getbootstrap.com
посмотрите примеры готовых классов, которые нужно добавлять в html-разметку, например, простая панелька для какой либо инфы - getbootstrap.com/components/#panels-heading
В том-то и дело, что виджет собственный и база тоже своя.
По поводу bootstrap - спасибо, я это уже знаю.
В том-то и проблема, что "простая панелька для инфы" меня не устроит.
Слишком много сводных данных, которые нужно отобразить.
И проблема не в том, чтобы отобразить эти данные.
Проблема в том, чтобы у виджета была адаптивная вёрстка.
Чтобы разметка виджета при просмотре на разных устройствах не поплыла.
По поводу bootstrap - спасибо, я это уже знаю.
В том-то и проблема, что "простая панелька для инфы" меня не устроит.
Слишком много сводных данных, которые нужно отобразить.
И проблема не в том, чтобы отобразить эти данные.
Проблема в том, чтобы у виджета была адаптивная вёрстка.
Чтобы разметка виджета при просмотре на разных устройствах не поплыла.
пишите, что про bootstrap знаете, тогда почему документацию не изучаете? там всё написано, смотрите адаптивную сетку (Grid system) - getbootstrap.com/css/#grid-options
например, так:
<div class="row">
<div class="col-sm-6">ТУТ ЗЕЛЁНЫЙ БЛОК</div>
<div class="col-sm-6">ТУТ ОРАНЖЕВЫЙ БЛОК</div>
</div>
используя класс .col-sm-6 для зелёного и оранжевого блоков они будут в один столбик на экранах с разрешением меньше или равно 768px (см. таблицу - Grid options).
например, так:
<div class="row">
<div class="col-sm-6">ТУТ ЗЕЛЁНЫЙ БЛОК</div>
<div class="col-sm-6">ТУТ ОРАНЖЕВЫЙ БЛОК</div>
</div>
используя класс .col-sm-6 для зелёного и оранжевого блоков они будут в один столбик на экранах с разрешением меньше или равно 768px (см. таблицу - Grid options).
Афраний писал(а)
AdminLTE
AdminLTE
этот шаблон используете? - usebootstrap.com/theme/adminlte
как я и думал он на bootstrap 3
Афраний писал(а)
Зелёный и оранжевый блок - НЕ СТРОКА. Это виджет.
Зелёный и оранжевый блок - НЕ СТРОКА. Это виджет.
какая разница, что там внутри дивов, если только ваш виджет не js-скриптом подгружается, так как js-скрипты могут свои стили задавать и конфликтовать с bootstrap.
в предыдущем комментариях дал ссылки на сетку bootstrap, ничего сложного там нет, примеры, как работает сетка приведены, а внутрь блоков пихайте что угодно.
для чего дал эту ссылку - getbootstrap.com/css/#grid-options
там же написано, какие классы нужно применять для адаптации.
сразу же после таблицы с описанием классов сетки дан пример, см. "Example: Stacked-to-horizontal"
префиксы:
".col-xs-" - работает на экранах <768px
".col-sm-" - работает на экранах?768px
".col-md-" - работает на экранах ?992px
".col-lg-" - работает на экранах ?1200px
после префикса идёт цифра, которая указывает сколько занимать ячеек для ширины блок,
сетка разделена на 12 ячеек, если нужно два блока поместить в одну строку, то разметка будет такая:
<div class="row">
<div class="col-sm-6">ТУТ ЗЕЛЁНЫЙ БЛОК</div>
<div class="col-sm-6">ТУТ ОРАНЖЕВЫЙ БЛОК</div>
</div>
класс .col-sm-6 расшифровывается так - "col-sm-" растянуть блок на всю ширину когда разрешение станет меньше или равно 768px,
цифра "6" после префикса ".col-sm-" указывает на то, что блок при разрешении экрана более 768px будет занимать ширину равной шести ячейкам из 12-ти, ..т.е. половину.
Ну смотрите внимательнее таблицы "Grid options" и "Example: Stacked-to-horizontal" , поиграйтесь с размером экрана в режиме разработчика - F12 в браузере гугл-хром, в верхнем правом углу при изменении экрана увидите циферки-пиксели, сравните их с указанными в таблицах и следите, что происходит с примерами в "Example: Stacked-to-horizontal".
больше я не знаю, как объяснить, на самом деле ничего сложного, всё готово, только указывай правильные классы.
готовую html-разметку можно также посмотреть в том же шаблоне AdminLTE, посмотрите исходный код похожих блоков, которые наиболее подходят под вашу задачу, да и всё.
себя поправлю..
немного не так, при разрешении более 768px блок будет занимать половину экрана (6 частей из 12), а при ширине менее 768px, если больше никаких классов не указано, займёт всю ширину экрана,
ведь можно сразу несколько классов задавать.
alexeyweb писал(а)
класс .col-sm-6 расшифровывается так - "col-sm-" растянуть блок на всю ширину когда разрешение станет меньше или равно 768px..
класс .col-sm-6 расшифровывается так - "col-sm-" растянуть блок на всю ширину когда разрешение станет меньше или равно 768px..
немного не так, при разрешении более 768px блок будет занимать половину экрана (6 частей из 12), а при ширине менее 768px, если больше никаких классов не указано, займёт всю ширину экрана,
ведь можно сразу несколько классов задавать.
alexeyweb писал(а)
Большая. Эти div имеют разные значения свойства display. Афраний писал(а)Зелёный и оранжевый блок - НЕ СТРОКА. Это виджет.
какая разница, что там внутри дивов, если только ваш виджет не js-скриптом подгружается, так как js-скрипты могут свои стили задавать и конфликтовать с bootstrap.По теме - спасибо, документацию читать я и сам умею. И про то, что можно задавать несколько классов - тоже знаю.
И готовую html-разметку я уже смотрел. Виджет пытался сделать по образу и подобию dashboard.
alexeyweb писал(а)
ничего, данный лишний див уже нарушает сетку bootstrap.
Вот! Тогда так... ничего, данный лишний див уже нарушает сетку bootstrap.
<div class=row>
<div class=col-sm-3> // прямоугольник
<div style=width: 40%;>ТУТ ЗЕЛЁНЫЙ БЛОК с баблом</div>
<div style=width: 60%;>ТУТ ОРАНЖЕВЫЙ БЛОК с владельцем</div>
</div>
</div>
... а вообще посмотрев на таблицы я решил, что виджет тоже лучше верстать через div
Так проще, чем рисовать колонки и делать слева таблицу, а справа надписи.
-----------------------
В общем, спасибо, разобрался.
P.S. Использую:
https://almsaeedstudio.com/themes/AdminLTE/index.html
https://almsaeedstudio.com/themes/AdminLTE/index.html
<div class="row">
<div class="прямоугольник">
<div class="col-sm-6">ТУТ ЗЕЛЁНЫЙ БЛОК с баблом</div>
<div class="col-sm-6">ТУТ ОРАНЖЕВЫЙ БЛОК с владельцем</div>
</div>
</div>
Вот что поставить в "прямоугольник", чтобы зелёный и оранжевый блоки не распадались и вёрстка не ехала?
И чтобы высота была одинаковой...
<div class="прямоугольник">
<div class="col-sm-6">ТУТ ЗЕЛЁНЫЙ БЛОК с баблом</div>
<div class="col-sm-6">ТУТ ОРАНЖЕВЫЙ БЛОК с владельцем</div>
</div>
</div>
Вот что поставить в "прямоугольник", чтобы зелёный и оранжевый блоки не распадались и вёрстка не ехала?
И чтобы высота была одинаковой...
ничего, данный лишний див уже нарушает сетку bootstrap.
см. ответ выше
см. ответ выше
Я думаю, если вы не можете сверстать элементарную страницу, вам не надо этим заниматься, а тем более делать панель управления.
Есть такой замечательный инструмент, Google называется, и уж если вы и тут не справляетесь я тогда не знаю...
Есть такой замечательный инструмент, Google называется, и уж если вы и тут не справляетесь я тогда не знаю...
ну человек учится, все когда то учились, тут ведь стоит один раз понять принцип, а дальше только опыт набирается и делаешь как по накатанной. и вроде как форумы созданы чтоб помогать, а на нюре порой и спросить то страшно.
Элементарную страницу я как раз сверстать могу.
Но в то время, когда я верстал, не то что смартфонов - мобильных телефонов ещё не было.
И про адаптивную вёрстку тогда ещё не слышали.
А теперь мне надо создать виджет, который будет подчиняться правилам адаптивной вёрстки.
И если Вы умеете читать, то увидите, что гугл я уже допрашивал. С пристрастием.
Но в то время, когда я верстал, не то что смартфонов - мобильных телефонов ещё не было.
И про адаптивную вёрстку тогда ещё не слышали.
А теперь мне надо создать виджет, который будет подчиняться правилам адаптивной вёрстки.
И если Вы умеете читать, то увидите, что гугл я уже допрашивал. С пристрастием.
ну вам же подсказали, что все "свое" должно быть внутри сетки класс "row" не должен ничем разделятся и после него должны быть блоки именно с ячейками, общая сумма которых должна быть 12, а вот потом вы можете вставлять любую другую разметку, главное без класса "row", иначе бутстрап подумает, что это новая сетка. Для каждого экрана у одного блока вы можите повесить разные классы, это какраз и будет управлять "шириной" и расположением ваших блоков. увы в бутстрапе идет жесткая привязка и например нельзя без костылей вырвать блоки из сетки. Я лично адаптив делаю сам, да, мороки больше, но четко понимаешь куда ты хочешь переместить свои элементы.
Спасибо. Это я уже понял.
И то, что мороки больше - это я тоже понял :-)
И то, что мороки больше - это я тоже понял :-)
Рейтинг основных форумов
Городские форумы
Городской форум
Городской форум для новичков
Нижегородская политика
Жалобная книга
Бабский форум
Мужской
Анонимный медицинский форум
Дурацкие вопросы
Автофорумы
Автофорум главный
Девушка за рулем
ВАЗ форум
4х4 форум
Жалобный
Шевроле Форум
Такси
Автозапчасти
Гаражный форум
KIA-форум
Рено форум
Hyundai Форум
VAG Форум
Форумы покупок
Центр раздач: информационный форум
Глав-Пристрой (со всех форумов, взрослый)
Совместная покупка
Совместная покупка: центральный
Совместная покупка: взрослый
Совместная покупка: вкусный
Совместная покупка: мама и малыш
Совместная покупка: уютный
Совместная покупка: сбор предоплаты, раздачи
Совместная покупка: услуги
Совместная покупка: область
Совместная покупка: Дзержинск
Совместная покупка: Саров
Зарубежные интернет-покупки
Покупаем вместе
Покупаем Вместе: Основной
Покупаем вместе: БОЛЬШОЙ ШОПИНГ (взрослый)
Покупаем вместе: БЕБИ-ШОП (детский)
Покупаем вместе: ДОМОВОЙ
Покупаем вместе: ГАСТРОНОМ
Покупаем вместе: Сбор предоплаты, раздачи
Покупаем Вместе: пристрой
Покупаем Вместе: услуги
Выгодная покупка
Выгодная покупка - общие вопросы
Выгодная покупка - взрослый
Выгодная покупка - детский
Выгодная покупка - сбор предоплаты, раздачи
Выгодная покупка - объявления
Форум закупок
Мой малыш
Мой малыш - Основной
Мой малыш - Объявления. Общий
Мой малыш - Объявления: детская одежда
Мой малыш - Объявления: детская обувь
Мой малыш - Объявления: детский транспорт, игрушки, мебель
Халявный
Халявный (основной)
Котята и др. животные
Элитный (продажа неликвидных товаров)
Услуги
Домоводство
Полезный форум
Бытовые проблемы
Деревенский форум
Домоводство
Цветочный форум
Форум владельцев кошек
Дачный. Основной.
Бытовая Техника
Творческий
Рукоделие основной
Форумы по интересам
Фиолетовый форум
Сделаны в СССР
Музыкальный
Кино форум
Кладоискатели и коллекционеры
Рыболовный
Охотничий
Стильный форум
Флирт, Любовь, Знакомства
Фотофорум
Здоровье
Развитие Человека
Пивной форум
Кулинарный
Парфюмерный
Парфюмерная Лавка
Собачий форум
Собачий форум: Основной
Собачий форум: пристрой животных
Наши Дети
Наши дети
Школьный форум
Особые дети
Технофорумы
Интернет-НН
GPS форум
Мобильный форум
Техно-форум
Технотуса
Проф. и бизнес форумы
Бизнес форум
Фотография
Недвижимость
Банковский форум
Медицина
Форум трейдеров
Бухучет и аудит
Юридический
Подбор персонала
Разработчики ПО
Строительные форумы
Строительный форум (основной)
Окна
Форум электриков
Мебель
Кондиционирования и вентиляция
Форум строительных объявлений
Форум проектировщиков
Все строительные форумы
Туризм, отдых, экстрим
Туризм, отдых, экстрим
Спортивные форумы
Клуб болельщиков
Спортплощадка
Боевые искусства
Велофорумы Нижнего Новгорода
Велофорум Нижнего Новгорода
Путешествия
Нижегородская область
Недвижимость
Недвижимость
Ипотека
Земельный форум
ТСЖ
Садоводческое товарищество
Жилые районы
Автозаводский район
Сормовский район
Мещерское озеро
Все форумы районов
Форумы домов
Корабли
Новая Кузнечиха
Октава ЖК (ул. Глеба Успенского)
Мончегория ЖК
Аквамарин ЖК (Комсомольская пл.)
Сормовская Сторона ЖК
КМ Анкудиновский парк ЖК
Красная Поляна ЖК (Казанское шоссе)
Времена Года ЖК (Кстовский р-он)
Стрижи ЖК (Богородский р-он)
На Победной ЖК (Победная ул., у дома 18)
Окский берег ЖК (п. Новинки)
Цветы ЖК (ул. Академика Сахарова)
Деревня Крутая кп (Кстовский р-он)
Опалиха кп (Кстовский р-он)
Юг мкр. (Южный бульвар)
Гагаринские высоты мкр.
Бурнаковский мкр.
Белый город мкр. (60-лет Октября ул.)
Зенит ЖК (Гагарина пр.)
Седьмое небо ЖК
Все форумы домов
Частные форумы
Свадебный форум
Саровский Клуб Покупателей
Июньские мамочки
Форум безумных идей
Ночной форум
Королевство кривых зеркал
Ищу вторую половинку!
Лютики-цветочки КУПЛЯ-ПРОДАЖА
Отряд стройности
Пчеловодство
Форум ленивых
Волейбольный клуб туристов
Встречи для секса
Буду мамой!
Алкогольный форум
Лютики-цветочки
Котоводство
Форум сексуального опыта
Свободка
Форум модераторов
Форум забаненных
Новый форум модераторов
Отзывы и предложения (техподдержка)
Последние темы форумов
Форум
Тема (Автор)
Ответов
Продавец-консультант (Нижний Новгород, ТЦ Сормовский)
Розничная сеть МТС
38000 -
51000 руб.
51000 руб.
Среднее образование, без опыта, полная занятость
Продавец-консультант (Нижний Новгород, ТЦ Небо)
Розничная сеть МТС
38000 -
51000 руб.
51000 руб.
Среднее образование, без опыта, полная занятость
Продавец-консультант (Нижний Новгород, Московское ш.)
Розничная сеть МТС
38000 -
51000 руб.
51000 руб.
Среднее образование, без опыта, полная занятость
Карта сайта | 18+
ООО «Сеть городских порталов»
© 1999 - 2024
Реклама на NN.RU +7 (831) 261-37-60, reklama52@iportal.ru
Раздел технической поддержки | Для Роскомнадзора и госорганов: juristnn@iportal.ru
Реклама на NN.RU +7 (831) 261-37-60, reklama52@iportal.ru
Раздел технической поддержки | Для Роскомнадзора и госорганов: juristnn@iportal.ru
Т.к. вы неавторизованы на сайте. Войти.
Т.к. тема является архивной.