Search the Community

Showing results for tags 'bootstrap'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML и CSS
    • Для начинающих
    • Препроцессоры, постпроцессоры и шаблонизаторы
    • Методологии
    • Фреймворки и библиотеки
  • JavaScript
    • Для начинающих
    • Фреймворки и библиотеки
    • Скрипты и плагины
  • Разработка сайтов
    • Для начинающих
    • Инструменты разработки, сборки и автоматизации
    • Аудит и анализ кода
    • Программное обеспечение разработчика
    • Веб-дизайн
    • Мобильные платформы
    • Open Source
  • Серверное программирование
    • Для начинающих
    • PHP
    • Платформы и языки программирования
    • Базы данных
    • Скрипты, готовые движки, CMS, конструкторы
  • Полезное
    • Библиотека полезных приемов и решений
    • Ресурсы
  • Сервер
    • Техническая поддержка
    • Веб-сервер
    • Базы данных
    • Хостинг
    • Домены
  • Интернет-маркетинг, SEO
    • Поисковая оптимизация
    • Поисковые системы
    • Продвижение и монетизация веб-сайта
    • Сервисы статистики и аналитики
    • Услуги и сервис
    • Покупка и продажа
  • Коммерческие услуги
    • Freelance
    • Работа
    • Услуги и сервис
  • Давайте поговорим о ...
    • Общий
    • Хобби, отдых и развлечение
    • Человек и общество
    • Флейм
  • Наш форум
    • Конкурсы
    • Работа форума

Calendars

  • События в Украине
  • События в России
  • События форума
  • События партнёров
  • Все события

Blogs

  • CMS (Content Management System)
  • Руководство верстальщика
  • Блог HTMLforum.io

Marker Groups

  • Members
  • Front-end
  • Back-end
  • Education
  • Looking for job
  • Offering job

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Web site


ICQ


Jabber


Skype


From


Interests

Found 135 results

  1. Всем привет. В данный момент изучаю Bootstrap и задался таким вопросом. По правилам сетки Bootstrap, если я не ошибаюсь row и col должны быть внутри элемента с классом container. Но вот если при вёрстке макет разделён на отдельные блоки, например: header отдельно, далее ещё пару блоков с информацией и за ним footer. Как при таком варианте правильнее будет сделать порядок: общий тег container, вместо стандартного wrapper и далее внутри него все вышеперечисленные теги или же нужно создать container для каждого раздела? А если, например, у каждого из этих разделов свой фон? Тогда уже нужно идти по второму варианту: делать разделы на 100% ширину браузера, прописывать им фон, а вот внутри них уже делать div'ы с классом container, которые уже ограничат ширину блоков с контентом?
  2. Здравствуйте, я начинающий верстальщик, только учусь сейчас изучаю технологию Bootstrap и у меня возникла проблема, есть три блока с контентом, каждый занимает по 4 колонки то есть использую col-md-4, в сетке бутстрапа в макете все отлично сходиться вместе с 20px margin-right, но в верстке как только в CSS пишу margin хотя бы 1 px, последний блок сезжает на строчку ниже. Подскажите как с этим быть заранее спасибо.
  3. Интернет-маркетинговое агентство Top-Life. Мы ищем в команду Junior Web разработчика. Что мы ожидаем от кандидата: Навыки HTML5, CSS3, JavaScript; Знания PHP5-7‚ MySQL‚ jQuery, ajax; Опыт в верстке; Наличие опыта разработки и знание различных CMS (1С Битрикс, UMI, ModX, WordPress и другие) будет плюсом; Опыт работы и наличие портфолио приветствуется; Умение и желание работать в команде; Аккуратность (осмысленность) в работе. Задачи, которые вам предстоит решать: Современная адаптивная кроссбраузерная верстка (HTML5+CSS3); Применение готовой верстки к CMS (1С-Битрикс, Wordpress); Условия: Оформление по ТК РФ Заработная плата: от 20 000 до 40 000 руб; График работы: 5/2 с 10.00–19.00, обед с 14.00–15.00; На территории работодателя; Молодой‚ профессиональный коллектив; Корпоративные мероприятия; Чай, кофе и печеньки с нас; Мы даем возможность не просто работать‚ а создавать и развиваться. Для связи: Антон тел: 8(981)897-42-46 mail: a.majstrenko@top-life.su hh: https://spb.hh.ru/vacancy/30397980
  4. AlexanderLebedev

    Работа слайдера с bootstrap

    Имеется слайдер, "//" если удалить эти строки , то все работает. Там collapse от bootstrap, скрыть и показать блок. А когда всё на месте, с скрытием, то он показывает так Помогите исправить, сложно найти рабочий подобный слайдер. Есть мнение что конфликтуют JS, но как их поставить чтоб всё норм было. <!-- Наружная реклама --> <div id="collapse_1" class="collapse" aria-labelledby="heading_1" data-parent="#accordionExample"> // ЭТА УДАЛИТЬ НАДО ЧТОБ РАБОТАЛО <div class="container header"> <div class="row align-items-center"> <div class="card-body card align-items-center bg-lightgrey"> <h5> <img src="http://www.cyberforum.ru/images/header/nar.png" width="105" height="80"> Наружное и внутреннее оформление </h5> </div> </div> <!-- Слайдер --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <!-- Конец слайдера --> </div> </div> // ЭТА УДАЛИТЬ ЧТОБ РАБОТАЛО НАДО <!-- Конец наружной рекламы --> СКРИПТЫ В КОНЦЕ BODY <!-- Скрипты --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="js/slider.js"></script> <script type="text/javascript"> var swiper = new Swiper('.swiper-container', { slidesPerView: 3, spaceBetween: 30, loop: false, loopFillGroupWithBlank: false, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } }); </script> <script src="js/bootstrap.js"></script> <!-- Конец скрипты --> После уменьшении или увеличении страницы всё работает как надо. Что за логика ?
  5. Всем привет. У меня возникла проблема, я не могу поместить прозрачное меню navbar на слайдер bootstrap 4. Получается, что меню вверху, а под ним слайдер( HTML: CSS: Вопрос решил. Слайдер нельзя помещать в хедер. Добавить свойства header { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; }
  6. Отличается-ли bootstrap-sass от bootstrap-scss ? Если я пишу код на scss а подключаю стили npm bootstrap-sass ? Делаю все это через npm.
  7. Есть сайт на бутстрапе. Нужно реализовать такой интерфейс с модальными окнами чтобы окон могло быть сколько угодно чтобы при закрытии текущего окна можно было вернуться к предыдущему и обновить его содержимое через ajax. Хватит ли на такое стандартного бутстрапа или надорасширение искать? Можно ли сделать jquery ui окна адаптивными?
  8. Доброго времени суток. Eсть опыт в адаптивной кроссбраузерной верстке более 3-х лет. Присутствуют знания таких языков как: html(продвинутый уровень); css(продвинутый уровень); js(базовый уровень); jQuery(базовый уровень); php(базовый уровень); Так же имеются знания фреймворков, систем и препроцессоров: bootstrap; less; sass Владею навыками: Wordpress и соответствующей интеграцией под данную CMS. Joomla Одна из последних работ http://test1.ramos78h.beget.tech/ По всем вопросам в skype: sergio09931, ВК: id392591806, почта: ramos7691@gmail.com
  9. Верстаю для тренировки и пытаюсь сделать адаптивную версию, при просмотре с мобильных один блок наезжает на другой. Думала, что колонки в bootstrap автоматически сдвигаются одна за одной в мобильных версиях. перепробовала уже много чего и не могу понять в чем все-таки проблема. вот код: https://jsfiddle.net/6jgoewz5/ http://piccy.info/view3/12360772/8e3e730ee144105131409f09bbe3231f/ как можно исправить?
  10. Добрый день, форумчане! Необходимо сверстать данную страничку. Нужно, чтобы некоторые колонки были обвернуты рамкой + логотип. Есть мысля делать это все при помощи fieldset+legend. Но, как видно по картинке, блоки должны располагаться непосредственно от рамки и лого, не внутри филдсета. Также еще нужно, чтобы при наведении на блоки применялся hover-эффект (по дефолту на них стоит фильтр размывания, при наведении этот фильтр должен исчезать). Собсна, в чем вопрос: как реализовать подобную рамку и лого, чтобы еще и до колонок смог достучаться ?
  11. Прошу прощения за мой дилетантский вопрос: Есть макет сайта вот такого плана (картинка во вложении). Все блоки на сайте размещены сеткой, у каждого блока высота равна или x, или 2x, или 3x, ширина тоже - y, или 2y. Пробую сделать на Bootstrap, но, из-за высоты, бутстрап размещает 4-й блок не под 2-м, а под первым, с новой строки. Пример: https://www.codeply.com/go/dwyEv5gprw Подскажите, как решить данный вопрос? Заранее спасибо!
  12. Добрый день! Возникла проблема: при просмотре сайта на экране с разрешением меньше стандартного (стандартным принят размер 1200px) временами происходит дергание блоков. Причина - использование стилей. При разрешении экрана от 1200 px и более используются стили styles.css при разрешении экрана менее 1200 px применяются стили @media.css. Получается, что на маленьких экранах при обновлении страницы или при клике по пункту меню вначале происходит загрузка стилей styles.css и лишь за тем @media.css, в итоге, происходит небольшое подергивание блоков. Как можно решить эту проблему? Styles.css - набор стилей по умолчанию, для стандартных экранов. @media.css - набор классов, рассчитанных под адаптацию для экранов различного разрешения. main.css - хранит информацию для настройки css3 анимации одного из блоков подгружаемой страницы main.html. Порядок подключения стилей на главную страницу index.html следующий: <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/styles.css" rel="stylesheet"> <link href="css/main.css" rel="stylesheet"> <link href="css/@media.css" rel="stylesheet"> Ошибка отображена на скринах. Адрес сайта: hexamech.ru
  13. Форумчане, хотел у вас узнать насколько важен pixel perfect в современной верстке. Верстаю учебный макет, дизайнер сделал его вполне красиво, но когда верстаешь - падинги у элементов везде разные (допустим внутри списка у элементов li), либо margin в блоках, и таким моментов море........такое чувство что когда дизайнер рисовал макет, он особо не заморачивался и пихал на глаз, и мне приходится для каждого из элементов списка допустим использовать nth-child, пытаясь добиться попиксельного сходства с макетом родителем. Скажите, по вашему опыту, все это дрочь? Или есть такие заказчики которые требуют идеальной совместимости? Или все же хватает красоты и 100% сходства добиваться не стоит?
  14. Меня зовут Абдулов, я Front-End разработчик. Цену и сроки обсудим после просмотра макета. Вот одна из моих версток - tokmaganbet.github.io/blacksea Могу сверстать/сделать : Landing page Натянуть на WP Сайт-визитки Корпоративные сайты Адаптивные и отзывчивые сайты Навыки: HTML 5 CSS3 Javascript(jQuery) Умею пользоваться : Pixel Perfect Gulp Sass(Scss) Bootstrap GitHub FlexBox Email : tokmaganbeta@gmail.com Skype : abdulov_96
  15. Адаптивная верстка за символическую плату (а может и бесплатно) с использованием Bootstrap. Пишите в л/с, договоримся. Пример: https://3pdt.github.io/eventide/
  16. Доброго времени суток. Проблема лежит в Bootstrap menu, точнее в телефонной версии, так называемый гамбургер появляется только на экранах разрешения 767px шириной, а хотелось чтобы гамбургер меню было на планшетах. Причина заключается в том, что это первоначальное меню, и оно еще будет дополняться. (хотя и уже такое на телефоне не приятно видеть). Как и где поменять размер смены обычного меню на гамбургер? Сайт если будет нужен http://izhprint.org/ bootstrap файл тоже прикрепил. Заранее спасибо за помощь! bootstrap.css
  17. Здравствуйте, Никак не могу найти причину почему колонки съезжают. Знаю, что одна колонка ниже остальных, но как это влияет на bootstrap не понимаю. Посмотрите пожалуйста? http://xn—-7sbqkbjlgtakdhickq1a2n.xn--p1ai/
  18. Здравствуйте, дорогие форумчане. Я - новичок самоучка, поэтому для вас проблема может быть не очень сложная. Мне нужно сделать выпадающий список, как на рисунке. Интересует меня то, как сделать такие оглавления, как на изображении ("по сторам", "по товару"), чтоб они не выпадали вместе с option. Простите, если не совсем понятно и корректно выражаюсь!
  19. Добрый день. При создании верхнего меню сайта с сеткой bootstrap правая часть падает вниз под левую. Не могу найти в чем причина. Код https://jsfiddle.net/aw0qvc0e/
  20. Всем привет! Давно сам не просил помощи и сам не советовал. Но вот настал момент, когда я застрял на простой задаче. Есть стандартная сетка бутстрап. Верстка примерно такая https://codepen.io/Schamil74/pen/QqYEGY Есть блок .text1(выделен цветом и подписан), который нужно растянуть за контейнер. Как лучше сверстать ? Сейчас куском за контейнером блок - .row_green
  21. Нужно сделать расстояние между фотками, но если я добавлю margin-left вся дальнейшая адаптивность катиться в тартарары. https://jsfiddle.net/4uc2xLqz/2/
  22. Не могу понять как сделать чтобы изображения встали в ряд и сделать им одинаковый размер. https://jsfiddle.net/4uc2xLqz/
  23. Добрый день. Столкнулся с неожиданной проблемой. На айфонах блоки сайта наезжают друг на друга, на винде и андроиде всё работает нормально. Вьевпорт указан. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> На айфонах сайт выглядит так: Должен выглядеть вот так: Задачу осложняет то что у меня нет iOS устройств чтобы можно было протестить, а все эмуляторы, какие пробовал, выдают что всё верно. Кто-нибудь сталкивался с подобным? В чем может быть проблема?
  24. Здравствуйте. Появилась проблема при верстке по сетке Bootstrap. <div class="col-xs-12 col-md-6>текст1</div> <div class="col-xs-12 col-md-6>текст2</div> текст2 находится не справа от текст1, а снизу Такая же проблема с before. текст в списеке снизу before, а не справа Помогите разобраться <body> <div class="container-fluid"> <div class="meny"> <div class="row"> <a name="top"></a> <div class="col-xs-12"> <nav> <ul class="list-menu"> <li><a href="#top">Главная</a></li> <li><a href="#skills">Навыки</a></li> <li><a href="#portfolio">Портфолио</a></li> <li><a href="#contacts">Контакты</a></li> </ul> </nav> </div> </div> </div> <div class="meny-arrow"></div> <div class="contents"> <article> <div class="row height-vh"> <div class="col-xs-12 col-md-6 center top-text"> <div class="name"> текст1 </div> </div> <div class="col-xs-12 col-md-6 top-text"> <div class="about"> <p>текст2 </p> </div> </div> </div> </article> <div class="row skills height-vh"> <a name="skills"></a> <h2>Практические навыки</h2> <div class="col-xs-12 col-md-6 list-skills"> <ul> <li><h4>HTML</h4></li> <li><h4>CSS</h4></li> <li><h4>HTML</h4></li> <li><h4>HTML</h4></li> </ul> </div> <div class="col-xs-12 col-md-6"> </div> </div> </div> </body> * { padding: 0; margin: 0; } body { font-family: 'PT Sans', sans-serif; } nav { background: #006589; padding: 15px; box-shadow: 0 0 10px rgba(0,0,0,1); height: 100vh; } .list-menu{ list-style: none; } .list-menu li a{ color: #fff; display: block; padding: 5px 15px 0 0; font-size: 24px; text-decoration: none; } /*.list-menu li a:hover{ background: #4db6f4; }*/ .height-vh { height: 100vh; } .indent { padding: 20px; } .center { text-align: center; } .top-text { margin: 40px; } .name { } .about { font-size: 18px; } .skills { background: #f0f0f0; } .list-skills ul { list-style: none; } .list-skills li:before { content: url(../images/inputs.png); display: inline-block; } .fleft { float: left; } .fright { float: right; }
  25. Html <header> <div class="container services"> <div class="row"> <div class="col-md-2 col-xs-2 service"> <a href="#"> <img src="img/Shape 108.png" class="main" alt=""> <p>Услуги<br/>поликлиники</p> </a> </div> <div class="col-md-offset-1 col-xs-offset-1 col-md-2 col-xs-2 service"> <a href="#"> <img src="img/Shape 127.png" class="main" alt=""> <p>Услуги<br/>поликлиники</p> </a> </div> <div class="col-md-offset-1 col-xs-offset-1 col-md-2 col-xs-2 service "> <a href="#"> <img src="img/Shape 106.png" class="main" alt=""> <p>Услуги<br/>поликлиники</p> </a> </div> <div class="col-md-offset-1 col-xs-offset-1 col-md-2 col-xs-2 service"> <a href="#"> <img src="img/Shape 97.png" class="main" alt=""> <p>Услуги<br/>поликлиники</p> </a> </div> </div> </div> </header> CSS .service { text-align: center; margin-right: 32px; position: relative; padding:0; } .service:last-child{ margin-right: 0; } .service-item { } .service img { max-width: 100%; display: block; margin: 0 auto; } .service a { display: block; } .service a p { display: block; text-decoration: none; font-size: 16px; font-weight: bold; color: #2a2a2a; }