Вид материалов в несколько колонок для uCoz
Этот вид материала в 2 колонки на сайте, где идет адаптивность под все размеры монитора. Что имеет краткое описание и стильный дизайн. Можно много встретить порталов, где как раз идет 2 колонки, что позволяет на них разместить краткое описание и отличный вид изображение, что прикреплен в материалу. А если он еще настроен под все размеры монитора, то это отлично. Но здесь больше всего как мануал получается, так как берем один вид материала в 3 колонки и создаем из него две. Можно было написать все в комментариях, но решил изложить одной статьей, где также будет перекреплен архив с текстовым документом, где уже настроено все, вам только останется подогнать по своей фиксаций, что установлена на сайте. Как отрегулировать по ширине? В стилях в самом конце прописаны media и нам нужен только один. Код .col-lg-4{width:46.7%;}} Вот как раз 46.7% это регулирует ширину, что можно на один или на 5 колонок сделать, здесь пока выставлена на 2, у кого сильно фиксированный шаблон, то возможно не поместиться, что нужно процент просто уменьшить. У кого больше, то выставляем процент аналогично больше, чтоб заняло корректно всю ширину. Вот пример как будет визуально смотрется на сайте, где вы сами можете сделать шрифт у название шире, или нижнее плашку с функциями выше поднять. Это уменьшаем ширину экрана и как видим автоматически переходит в одну колонку, это где то смаркфон или планшет. Здесь уже размер мобильного аппарата, что также все данные остаются, но если только название длинное или много знаков, оно выстраиваются в 2 ряда, все зависит от численности знаков. Если с шириной все понятно, то приступаем к установке. Если у вас не установлены шрифтовые иконки, то ставим вверх сайта их, в самый потолок его. Что после установки вы подключили все шрифты и можете выставлять в дизайн, как это делается, можете прочесть в статье под эту тему написанную. Код <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> Нужно скачать архив, что все распечатано, где вы найдете текстовой документ, как раз на вид материала, что представлен на изображение выше. Вы можете поставить его полностью вид материала со стилями, так как стили стоят под style здесь заключены стили /style или убрать их и выставить в CSS, что потом намного облегчит настройка. Это выставление цветовой гаммы, если решите сменить, да и полностью редактировать легче стили, если в CSS прописаны. Надеюсь понятно написал, если материал понравился и вы видите, что можно его как то реализовать на своем сайте, то просто скачиваем. |
Поделиться в социальных сетях
Материал разместил
Комментарии: 10 | |
| |