Поиск по сайту

Результаты поиска по тегам 'bootstrap'.

  • Поиск по тегам

    Введите теги через запятую.
  • Поиск по автору

Тип публикаций


Категории и разделы

  • Основной форум
    • Для начинающих
    • Проблемы верстки
    • Обсуждение работ
    • Работа форума
    • Флейм
  • Полезное
    • Библиотека полезных приемов и решений
    • Ресурсы
  • Веб-программирование
    • Javascript
    • Серверные технологии
    • СУБД
    • CMS
  • Работа: спрос, предложение, вакансии
    • Коммерческие услуги

Календари

  • IT events in Ukraine
  • IT events in Russia
  • События форума

Блоги

  • CMS (Системы управления контентом)

Группы меток

  • Разработчики
  • Front-end
  • Back-end
  • Обучение
  • Ищу работу
  • Предлагаю работу



Фильтр по количеству...

Найдено 115 результатов

  1. Добрый день. Столкнулся с неожиданной проблемой. На айфонах блоки сайта наезжают друг на друга, на винде и андроиде всё работает нормально. Вьевпорт указан. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> На айфонах сайт выглядит так: Должен выглядеть вот так: Задачу осложняет то что у меня нет iOS устройств чтобы можно было протестить, а все эмуляторы, какие пробовал, выдают что всё верно. Кто-нибудь сталкивался с подобным? В чем может быть проблема?
  2. Здравствуйте. Появилась проблема при верстке по сетке 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; }
  3. 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; }
  4. В бустрапе контейнер создает свою стандартную ширину 1140 вроде, я ставлю свою 1024 и у меня слетает nav меню для мобильного разрешения HTML <header> <div class="container"> <div class="row hidden-xs"> <div class=" col-lg-3 header-logo"> <p>Burgers<span>.co</span></p> </div> <div class="col-lg-7 col-lg-offset-2 header-menu"> <ul class="nav nav-pills "> <li class="active"><a href="#">Home</a></li> <li><a href="#">Our Burgers</a></li> <li><a href="#">What Else?</a></li> <li><a href="#">Photos</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <nav class="navbar navbar-default hidden-md hidden-sm hidden-lg"> <div class="container-fluid"> <div class="navbar-header"> <div class="col-xs-2 header-logo"> <p>Burgers<span>.co</span></p> </div> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Our Burgers</a></li> <li><a href="#">What Else?</a></li> <li><a href="#">Photos</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </nav> </header> CSS html, body { font-family: 'Rubik', sans-serif; font-family: 'Martel', serif; } .header-logo p { display: block; font-family: 'Martel', serif; font-size: 26px; color: #0e1d2b; text-transform: uppercase; padding: 30px 50px; font-weight: bold; } .header-logo p span{ color: #ffa326; } .header-menu ul { list-style-type: none; } .header-menu a{ display: block; text-decoration: none; color: #3e4a55; } .nav-pills > li > a:hover{ color: #3e4a55; opacity: .8; background: #fff; } .nav-pills > li > a:focus{ color: #3e4a55; background: #fff; } .nav-pills > li.active > a { background: #fff; color: #3e4a55; border-bottom: 4px solid #ffa326; border-radius:0; } .nav-pills > li.active > a:hover { background: #fff; color: #3e4a55; opacity: .8; } .nav-pills > li.active > a:active { background: #fff; color: #3e4a55; } .nav-pills > li.active > a:focus { background: #fff; color: #3e4a55; } .header-menu { margin-top:25px; } .navbar-header .header-logo p{ padding: 0; margin-top: 7px; } .nav > li > a { text-transform: uppercase; }
  5. Всем привет! Столкнулся со следующей проблемой: Верстаю макет на Bootstrap и столкнулся с тем, что не получается нормально отпозиционировать элементы, имеющие, во-первых, свойство transform: rotate(-90deg); во-вторых, абсолютное позиционирование для того, чтобы прилепить их к правому краю экрана. Итак, вот исходный код файлов: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <title>Туризм</title> </head> <body> <div class="container-fluid turism_main"> <div class="row"> <div class="company-name"> <p>LuckyFox</p> <p>Travel</p> </div> <div class="aside_main col-xs-12"> <a href="#"><img src="img/afterparty.png" alt=""></a> </div> </div> <div class="aside-content"> <div class="aside-contact"> <i class="fa fa-volume-control-phone" aria-hidden="true"></i> Связаться с нами </div> <div class="aside-mail"> <i class="fa fa-envelope-o" aria-hidden="true"></i> Подписаться </div> <div class="aside-calendar"> <a href="#">Календарь</a> </div> <div class="aside-lang"> <span class="active">EN</span> / RU </div> </div> </div> </body> </html> А вот здесь style.css: .turism_main { background: gray; background-size: cover; height: 100vh; width: 100vw; color: #fff; position: relative; } .company-name { font-size: 2em !important; letter-spacing: 2px; opacity: .7; position: absolute; right: 45%; left: 45%; text-align: center !important; display: block; line-height: 1; margin-top: 15px; width: 200px; } .aside_main { text-align: right; padding: 0; } .aside-content { z-index: 999; position: absolute; right: -195px; top: 400px; transform: rotate(-90deg); font-size: .8em; background: black; } .aside-content div, .aside-content a{ display: inline-block; color: white; } .aside-content i { padding-right: 10px; color: #e9ba02; font-weight: bold; } .aside-contact, .aside-mail { padding: 5px 10px 5px 10px; border: 1px solid white; margin-right: 20px; } .aside-calendar, .aside-lang { margin-left: 20px; } Не спрашивайте меня, почему я сделал кривую строку .row и засунул в нее эту ссылку справа. Изначально можно было сделать ее position: absolute, я так и сделал, но потом стал мучаться с сабжем и переделал, в надежде, что поможет. Если вам потребуется вообще переделать напрочь весь .aside-*, то пожалуйста, лишь бы было понятно, почему вы это делаете. Потому что мне нужно понять. И еще есть один вопрос: Почему, когда я вписываю что-то в .aside-content , то он начинает ехать влево? Ведь у него не увеличивается ни длина, ни ширина. А если я увеличиваю width, например, то он тоже уезжает далеко... Еще раз повторю задачу: Нужно сделать так, чтобы весь блок .aside-content был прилеплен к правому краю и каким-то образом был адаптирован, если я уменьшаю экран по вертикали. В данный момент этот блок просто под .container-fluid ... Как быть? Сначала решил не прикреплять картинку, потом, все же, решил. Чтобы было нагляднее...
  6. Как в bootstrap сделать что бы фон меню(ленточка) выходил за края container? Возможно ли это вообще?
  7. Помогите корректно составить верстку. Есть готовый код ниже: <div class="wrapper"> <div class="header"> HEADER </div> <div class="content"> <button> START </button> </div> <div class="footer"> AUTHOR </div> </div> Нужно что бы у header класса была высота 30% окна браузера, у контента 60%, а у футера 10%. Кроме этого у них у всех должны быть вертикальные выравнивания. Почему-то ничего не получаеться. Не растягиваются блоки по высоте, растягиваются по контенту и в итоге не занимают все окно браузера! Если кто может написать корректный HTML/CSS код, напишите плиз! На крайняк можно использовать Bootstrap.
  8. Проблема в таблицах bootstrap, то есть таблица выводится вся и с bootstrap делиться на страницы для сокращения и удобства в использование! так вот есть в таблица, и в них, используются ссылки такого вида id (<a id="rank">rank</a>) при клике срабатывает скрипт, на главной странице где по стандарту 10 строк выводит все работает,но стоит перелистнуть страницу перестает работать,(так же с "user-table_length") остальные с помощью bootstrap перенесены на другие стр.. там id click не работает пример таблицы, может кто видел
  9. Как сверстать картинку, выходящую за сетку бутстрап? Как лучше сверстать это!
  10. табы запоминают выбор вкладки

    тут с таким моментом столкнулся. есть несколько табов на странице, причем в нескольких табах существуют другие табы. при выборе вкладки, позиция сохраняется и при перезагрузке страницы выбранный таб остается нажатым, но не всегда правильно. как это можно отключить на стадии инициализации?
  11. Доброго времени суток. Нахожусь на начальном этапе карьеры веб-разработчика, поэтому готов сверстать ваш psd макет за символическую цену. Использую bootstrap, поэтому адаптивная верстка не проблема. Связаться со мной можно по почте: [email protected]
  12. Здравствуйте дамы и господа!) У меня к Вам такой вопрос, как можно правильно реализовать следующее: Мне нужно, чтобы при клике на строку/слово в тексте, галерея BOOTSTRAP Galerey переключалась на требуемый слайд и у слова, связанного с активным слайдов появлялось выделение в виде смены цвета текста, и подчеркиванием. Так же мне нужно, чтобы это работало и было связано с автоматической сменой слайдов. Т.е. слайды к примеру менялись бы каждые секунд 5-ть, при этом слова в тексте автоматически бы выделялись в зависимости от активного слайда. К примеру текст такой: И такая галерея: <div class="col-xs-12 col-sm-12 col-lg-offset-1 col-lg-4 carousel slide article-slide" id="searchAndReplace"> <div class="carousel-inner cont-slider"> <div class="item active"> <img class="img-responsive" alt="Google company" title="Google company" src="<%=request.getContextPath() %>/lib/upload/img/270220172230.png"> </div> <div class="item "> <img class="img-responsive" alt="Real phone" title="Real phone" src="<%=request.getContextPath() %>/lib/upload/img/270220172245.png"> </div> </div> </div> Как такое реализовать ? Заранее благодарю Вас за ответ!
  13. Подскажите, как сверстать такой блок с использованием Bootstrap?
  14. Добрый день. Вас приветствует команда студии разработки и продвижения freedots.ru Если вы Front-end разработчик и делаете круто, то высылайте свое портфолио на [email protected] и вместе мы поработаем над интересными проектами Основные требования: Опыт работы в отрасли не менее 2 лет. Знание языков разметки: HTML, CSS. Знание JS Знание препроцессоров LESS/SASS Знание фреймворков: Bootstrap/Foundation Знание библиотек: jquery.js, желательно знание js фреймворков: angular.js/vue.js Знание сборщиков проектов, таких как: webpack Расположение: Россия > Москва Занятость/ЗП: Занятость:фикс ЗП:40 000 - 60 000 руб. График: обсуждаемо С уважением, команда Freedots.
  15. Верстаю сайты на HTML5, CSS3, JavaScript с использованием библиотеки JQuery. Имею опыт работы с Bootstrap3. Примеры вёрсток : 1) https://astonevart.github.io/eventide-landing/ 2)https://astonevart.github.io/styletour/ Также могу сделать полноценный сайт на php и разместить на Wordpress! Сделаю все качественно, быстро, и современно!!! skype : astonevart e-mail : [email protected]
  16. подскажите пожалуйста как в bootstrap3 сверстать страничку с пустыми полями в шапке, которые продолжаются до правого и левого края экрана? при этом необходимо чтобы контент по-прежнему оставался ограниченной ширины JSFIDDLE
  17. Друзья! Вместе с bootstrap загружаю в такой последовательности еще один стиль, чтобы все что буду править в стандартном шаблоне, выносить в него. Загружаю в head, в такой последовательности <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/template.css"> Надо поменять стиль шрифта. Делаю так - в файл template.css добавляю @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800'); body { font-family: 'Open Sans', sans-serif; } Но на странице все равно загружается дефолтный шрифт body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; На странице текст в тэге body > p Подскажите, где я не прав? Спасибо!
  18. Здравствуйте. Предлагаю свои услуги по верстке PSD макетов в HTML5/CSS3 с использованием несложных скриптов jQuery на основе bootstrap. Чистый, структурированный код. Внедрение различных jQuery плагинов и скриптов. Цена для каждого проекта индивидуальна и зависит от сложности макета и необходимого функционала. По цене со мной всегда можно договориться. Оплата: - WebMoney Интересует долгосрочное сотрудничество. Контакты: email: [email protected] Skype: скидываю в л/с Примеры верстки:
  19. Ищем Веб-разработчиков в команду. Ищем как fullstack разработчиков, так и отдельно на backend или frontend. Команда занимается реализацией сложных веб-проектов и приложений. Задачи достаточно сложные и интересные, для нас важно качество. Стек технологий: Node.JS, React.JS, Bootstrap Требования: Опыт работы с Javascript от 2-х лет; Уверенное знание Node.JS, React.JS, Bootstrap; Мы предлагаем: Бюджет 2400 $ Длительную занятость от 6ти месяцев, Перспективы карьерного роста до Тимлида, Перспективы длительного сотрудничества над другими проектам, Оплату два раза в месяц, возможны варианты, Мы готовы к предоплате, Работу удаленную на фултайм. Пишите на почту: [email protected]
  20. Чем больше знаете фреймворков, тем больше к вам интерес! Задача создать аналитическое приложение на NodeJS / React Мы предлагаем: Длительную занятость от 6ти месяцев, Перспективы карьерного роста до Тимлида, Перспективы длительного сотрудничества над другими проектам, Деньги платим точно в срок, кстати в долларах оклад ) Предоплату вам закинем, и ежемесячный оклад, Командой разработку мы ведем, Удаленно и фултайм Заинтересовались? Пишите на почту: [email protected]
  21. Услуги HTML/CSS/jQuery-верстки

    Здравствуйте. Предоставляю услуги по HTML5/CSS3-верстке веб-сайтов с применением JavaScript/jQuery. Верстаю кроссплатформенно (медиазапросы, Bootstrap), кроссбраузерно, валидно . Преимущества: Умеренная (договорная) цена Разумные (договорные) сроки выполнения заказа Всегда на связи Удобная файловая структура готового проекта Имею наглядное портфолио выполненных работ Верстаю сайты разного уровня сложности Заинтересовались? Пишите: Моя почта или [email protected] Skype: romanonishencko И снова ссылка на портфолио >> http://bit.ly/2k9C253 Пара примеров из портфолио:
  22. Добрый день, реализовываю мега меню использую плагины Bootsrap: tabs и collapse ссылка на прототип (codpen) Нужная логика: При клике на родительскую категорию (Одежда, Техника, Для дома) открываются в сайдбаре, ее дочерние категории. — реализовано По клику на дочернюю категорию открывается, в правой колонке, содержимое связанного с дочерней категорией таба — реализовано Подкатегории (Мужская одежда, Женская …) первой родительской категории (Одежда) открыты по умолчанию — реализовано При клике на другую родительскую категорию, открываются ее дочерние и скрываются дочерние категории, предыдущей активной — реализовано При клике на родительскую категорию и открытии ее дочерних должен активироваться таб связанный с первой дочерней категорией — частично реализовано, срабатывает только один раз (при первом клике, на последующих, не срабатывет) При повторном клике на родительскую категорию с открытыми дочерними, дочерние скрываются + скрываться таб связанный с одной из ее дочерних категоий — не реализовано скрытие таба Возникли сложности со скрытием табов (последний пункт списка с логикой) и активацией таба первой дочерней категории, при клике по родительской. Код: $('li.panel').click(function() { $(this).children().find('a:first').tab('show'); Открывает таб первой подкатегории только один раз. Если я на примере кликну по род. категории «Техника», то откроются ее дочерние категории (Смартфоны, Планшеты) и активируется так первой подкатегории (Смартфоны) скриншот, но если если я после этого, к примеру, кликну по другой род. категории «Одежда», а потом снова кликну по категории «Техника», таб связанный с первой дочерней «Смартфоны» не будет активен — скриншот.
  23. Ищу работу удаленно

    Здравствуйте. Меня зовут Вавилкин Максим. Я ищу удаленную работу. Я уверенно знаю: Html и css. Знаю технику адаптивной верстки. При верстке придерживаюсь методологии БЭМ и в некоторых случаях использую Bootstrap. Также есть базовые знания Js и php. К работе отношусь очень ответственно, и всегда завершаю дела до конца. К письму прикладываю ссылку на свой сайт резюме. https://maxvilson.github.io/portfolio/build/
  24. Только начинаю набирать опыт сайтостроения. Окончил курсы PHP+MySQL+JS! Сделаю за минимальную плату адаптивный сайт/блог/landing-page. Моя почта : [email protected]
  25. Есть проблема. Меню на бутстрапе, в десктопной версии отображается идеально, но в адаптивном режиме (при уменьшенном разрешении) выпадающие меню списка скрыты. Это мой первый сайт, не знаю, где копать. Код тут: http://codepen.io/esx/pen/RGXqBZ На втором скриншоте видно, что кнопка "Услуги" раскрывается не полностью, кнопка "О нас" вообще ничего не показывает. Помогите, плиз.