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

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

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

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

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


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

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

Календари

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

Блоги

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

Группы меток

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



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

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

  1. 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; }
  2. В бустрапе контейнер создает свою стандартную ширину 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; }
  3. Всем привет! Столкнулся со следующей проблемой: Верстаю макет на 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 ... Как быть? Сначала решил не прикреплять картинку, потом, все же, решил. Чтобы было нагляднее...
  4. Как в bootstrap сделать что бы фон меню(ленточка) выходил за края container? Возможно ли это вообще?
  5. Помогите корректно составить верстку. Есть готовый код ниже: <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.
  6. Проблема в таблицах bootstrap, то есть таблица выводится вся и с bootstrap делиться на страницы для сокращения и удобства в использование! так вот есть в таблица, и в них, используются ссылки такого вида id (<a id="rank">rank</a>) при клике срабатывает скрипт, на главной странице где по стандарту 10 строк выводит все работает,но стоит перелистнуть страницу перестает работать,(так же с "user-table_length") остальные с помощью bootstrap перенесены на другие стр.. там id click не работает пример таблицы, может кто видел
  7. Как сверстать картинку, выходящую за сетку бутстрап? Как лучше сверстать это!
  8. тут с таким моментом столкнулся. есть несколько табов на странице, причем в нескольких табах существуют другие табы. при выборе вкладки, позиция сохраняется и при перезагрузке страницы выбранный таб остается нажатым, но не всегда правильно. как это можно отключить на стадии инициализации?
  9. Доброго времени суток. Нахожусь на начальном этапе карьеры веб-разработчика, поэтому готов сверстать ваш psd макет за символическую цену. Использую bootstrap, поэтому адаптивная верстка не проблема. Связаться со мной можно по почте: rbzone402@gmail.com
  10. Здравствуйте дамы и господа!) У меня к Вам такой вопрос, как можно правильно реализовать следующее: Мне нужно, чтобы при клике на строку/слово в тексте, галерея 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> Как такое реализовать ? Заранее благодарю Вас за ответ!
  11. Подскажите, как сверстать такой блок с использованием Bootstrap?
  12. Добрый день. Вас приветствует команда студии разработки и продвижения freedots.ru Если вы Front-end разработчик и делаете круто, то высылайте свое портфолио на hr@freedots.ru и вместе мы поработаем над интересными проектами Основные требования: Опыт работы в отрасли не менее 2 лет. Знание языков разметки: HTML, CSS. Знание JS Знание препроцессоров LESS/SASS Знание фреймворков: Bootstrap/Foundation Знание библиотек: jquery.js, желательно знание js фреймворков: angular.js/vue.js Знание сборщиков проектов, таких как: webpack Расположение: Россия > Москва Занятость/ЗП: Занятость:фикс ЗП:40 000 - 60 000 руб. График: обсуждаемо С уважением, команда Freedots.
  13. Верстаю сайты на HTML5, CSS3, JavaScript с использованием библиотеки JQuery. Имею опыт работы с Bootstrap3. Примеры вёрсток : 1) https://astonevart.github.io/eventide-landing/ 2)https://astonevart.github.io/styletour/ Также могу сделать полноценный сайт на php и разместить на Wordpress! Сделаю все качественно, быстро, и современно!!! skype : astonevart e-mail : astonevart@gmail.com
  14. подскажите пожалуйста как в bootstrap3 сверстать страничку с пустыми полями в шапке, которые продолжаются до правого и левого края экрана? при этом необходимо чтобы контент по-прежнему оставался ограниченной ширины JSFIDDLE
  15. Друзья! Вместе с 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 Подскажите, где я не прав? Спасибо!
  16. Ищем Веб-разработчиков в команду. Ищем как fullstack разработчиков, так и отдельно на backend или frontend. Команда занимается реализацией сложных веб-проектов и приложений. Задачи достаточно сложные и интересные, для нас важно качество. Стек технологий: Node.JS, React.JS, Bootstrap Требования: Опыт работы с Javascript от 2-х лет; Уверенное знание Node.JS, React.JS, Bootstrap; Мы предлагаем: Бюджет 2400 $ Длительную занятость от 6ти месяцев, Перспективы карьерного роста до Тимлида, Перспективы длительного сотрудничества над другими проектам, Оплату два раза в месяц, возможны варианты, Мы готовы к предоплате, Работу удаленную на фултайм. Пишите на почту: avelnison@gmail.com
  17. Чем больше знаете фреймворков, тем больше к вам интерес! Задача создать аналитическое приложение на NodeJS / React Мы предлагаем: Длительную занятость от 6ти месяцев, Перспективы карьерного роста до Тимлида, Перспективы длительного сотрудничества над другими проектам, Деньги платим точно в срок, кстати в долларах оклад ) Предоплату вам закинем, и ежемесячный оклад, Командой разработку мы ведем, Удаленно и фултайм Заинтересовались? Пишите на почту: avelnison@gmail.com
  18. Здравствуйте. Предоставляю услуги по HTML5/CSS3-верстке веб-сайтов с применением JavaScript/jQuery. Верстаю кроссплатформенно (медиазапросы, Bootstrap), кроссбраузерно, валидно . Преимущества: Умеренная (договорная) цена Разумные (договорные) сроки выполнения заказа Всегда на связи Удобная файловая структура готового проекта Имею наглядное портфолио выполненных работ Верстаю сайты разного уровня сложности Заинтересовались? Пишите: Моя почта или roman.onishencko@yahoo.com Skype: romanonishencko И снова ссылка на портфолио >> http://bit.ly/2k9C253 Пара примеров из портфолио:
  19. Добрый день, реализовываю мега меню использую плагины Bootsrap: tabs и collapse ссылка на прототип (codpen) Нужная логика: При клике на родительскую категорию (Одежда, Техника, Для дома) открываются в сайдбаре, ее дочерние категории. — реализовано По клику на дочернюю категорию открывается, в правой колонке, содержимое связанного с дочерней категорией таба — реализовано Подкатегории (Мужская одежда, Женская …) первой родительской категории (Одежда) открыты по умолчанию — реализовано При клике на другую родительскую категорию, открываются ее дочерние и скрываются дочерние категории, предыдущей активной — реализовано При клике на родительскую категорию и открытии ее дочерних должен активироваться таб связанный с первой дочерней категорией — частично реализовано, срабатывает только один раз (при первом клике, на последующих, не срабатывет) При повторном клике на родительскую категорию с открытыми дочерними, дочерние скрываются + скрываться таб связанный с одной из ее дочерних категоий — не реализовано скрытие таба Возникли сложности со скрытием табов (последний пункт списка с логикой) и активацией таба первой дочерней категории, при клике по родительской. Код: $('li.panel').click(function() { $(this).children().find('a:first').tab('show'); Открывает таб первой подкатегории только один раз. Если я на примере кликну по род. категории «Техника», то откроются ее дочерние категории (Смартфоны, Планшеты) и активируется так первой подкатегории (Смартфоны) скриншот, но если если я после этого, к примеру, кликну по другой род. категории «Одежда», а потом снова кликну по категории «Техника», таб связанный с первой дочерней «Смартфоны» не будет активен — скриншот.
  20. Здравствуйте. Меня зовут Вавилкин Максим. Я ищу удаленную работу. Я уверенно знаю: Html и css. Знаю технику адаптивной верстки. При верстке придерживаюсь методологии БЭМ и в некоторых случаях использую Bootstrap. Также есть базовые знания Js и php. К работе отношусь очень ответственно, и всегда завершаю дела до конца. К письму прикладываю ссылку на свой сайт резюме. https://maxvilson.github.io/portfolio/build/
  21. Только начинаю набирать опыт сайтостроения. Окончил курсы PHP+MySQL+JS! Сделаю за минимальную плату адаптивный сайт/блог/landing-page. Моя почта : astonevart@gmail.com
  22. Есть проблема. Меню на бутстрапе, в десктопной версии отображается идеально, но в адаптивном режиме (при уменьшенном разрешении) выпадающие меню списка скрыты. Это мой первый сайт, не знаю, где копать. Код тут: http://codepen.io/esx/pen/RGXqBZ На втором скриншоте видно, что кнопка "Услуги" раскрывается не полностью, кнопка "О нас" вообще ничего не показывает. Помогите, плиз.
  23. Привет всем форумчанам, я верстаю сайты разной сложности. Стандартную верстку буду делать за 300 рублей, а если у вас сложный, пишите договоримся! Еще делаю натяжку шаблона на DLE. Спасибо за внимание!
  24. Здравствуйте! Все кто знаком с бутстрап, наверняка пользовались встроенным аккордеоном (collapse.js). Штука весьма полезная и очень удобная. Но вот кое какой функционал не доведен до ума. А именно возможность перехода к нужному развернутому слою, и дальнейшей работе с меню аккордеона. Подробнее: есть страница (PAGE1) на которой 10 кнопок и 10 слоев. Слои имеют id по порядку (el1, el2, el3, el4, el5 и т.д.). Есть кнопки которые открывают эти слои (Салаты, Супы, Гарниры ...). Есть другая страница, на которой есть ссылки типа: /PAGE1/?menu=sreda#el3. Надо что бы при переходе с этой страницы на PAGE1 открылся элемент 3. решение такое существует и работает. Извлекает хэш и открывает нужный слой, если хэш пустой, то открывает первый слой. <script> $(function(){ var hash = window.location.hash; $('.panel-collapse').hide(); $('.panel-collapse').each(function(){ $(this).removeClass('in'); }); if (hash) { $(hash).show().addClass('in'); } else { $('#el1').show().addClass('in'); } }); </script> Но после перехода не работает меню на странице. Т.к. URL имеет вид /PAGE1/?menu=sreda#el3, то 3 слой всегда открыт. А остальные слои просто не работают. Прошу вашей помощи, доработать так, что бы и нужный слой открывался, и все остальное на странице после этого работало. Спасибо.
  25. Что я хочу сделать. На странице очень много мелких картинок. При клике на одну из них, открывается модальное окно со слайдером внутри. В слайдере представлены все картинки существующие на странице, при чем первым слайдом будет та картинка, по которой кликнули. Но я завис на очень раннем этапе. Я уверен, что-то похожее уже делали, я не смог найти. Буду благодарен, если ткнете носом. Накидал пример из 3х картинок, но даже в консоли получаю ошибку. Не знаю почему. https://jsfiddle.net/mnu2zL3k/