Search the Community

Есть страничка http://florushka.com/feedback.php В голубых и желтых блоках одинаковый размер шрифта (14px, задан, собственно, одной и той же строкой в css). Проблема в том, что на телефоне один из них увеличивается, другой нет. Никак не могу понять, в чем магия Кто с таким сталкивался ? Есть идеи, в чем косяк ? Спасибо

Здравствуйте. Верстал я значит по-старинке и вдруг решил попробовать css фреймворки, а чтоб не мелочиться, то и препроцессоры. Ранее пытался использовать grid960, не понравилось( фиксированная ширина, адаптивности нет ). Почитал доки по Bootstrap, решил попробовать вместе с препроцессором Sass и его фреймворком Compass, так что кроме работы поделюсь впечатлениями о них. Сайт: http://electrouslugi-nn.ru/ Шаблон: https://yadi.sk/d/mQJWGuFtfSt4J В него входят подпапки psd(собственно макет), sass(файлы scss) и config.rb(конфигурационный файл sass). Хотелось бы получить информацию по следующим вопросам: Для каких целей служит класс .container-fluid? Пытался его использовать, но он имеет стрёмные паддинги 15px с боков, которые естественно оставляют белые поля. По-моему его с успехом заменяет div с width: 100%, или я чего-то не догоняю? Шаблон уныло смотрится в ie, даже в 9-м. Объясните пожалуйста, почему сетка сломалась? Т.к. нет макета под мобильные разрешения, верстал как Бог на душу положит, как бы вы оформили на моём месте? Для теста использовал режим адаптивного дизайна в Мозилле. Посоветуйте действительно полезные миксины Compass, те что я видел в основном направлены на поддержку старых ie. Разбил файлы scss на группы: _base.scss( тут шрифты и цвета ), media.scss(медиа-запросы), style.scss(основной файл). Правильно ли я поступил? Посоветуйте полезные приёмы для работы с sass.Мои впечатления: В Bootstrap слишком много кода, из которого must have только сетка, всё остальное сомнительной полезности. В принципе можно кастомную сборку использовать. Порадовал миксин Compass для создания спрайтов, действительно полезная штука. Ну и nesting sass конечно. Препроцессор не слишком ускорил разработку, думаю он актуален только на больших проектах. Можно быстро менять цветовую схему, просто поменяв значения переменных, и не надо лазить по всем файлам css с поиском и заменой.Буду рад конструктивным комментариям и советам

помогите пожалуйста вернуть .nav_top_inner под .header .оно уехало после того как я добавил float: left для .nav_top_inner ul lifiddle

Заинтересовался адаптивными сайтами на Bootstrap. И вот меня интересует такой вопрос: с помощью чего (каких правил CSS и т.д.) при разных размерах экранов появляются одни объекты (слои) и скрываются другие. Погуглил, но ничего дельного не нашел, мб не так гуглил. ) Меня интересует код, если кто-то подскажет буду благодарен. P.S.: На сколько я знаю все сделано без использования JS, на чистом CSS и HTML.

Наверное вопрос покажется глупым для многих, но как в Bootstrap правильно переопределять стили? Добавляя свой новый класс: <ul class="nav nav-tabs custom-nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li></ul>.custom nav-tabs { border-bottom: 2px solid #f00;}Или же можно сразу использовать классы bootstrap? <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li></ul>.nav-tabs { border-bottom: 2px solid #F00;}В тех примерах, что я находила был и первый и второй вариант, и теперь я сомневаюсь, как это делать правильно.

Использую Bootstrap. Подскажите пожалуйста, как сделать так, чтобы когда на маленьком экране меню исчезает и появляется кнопка меню, блок "order-now" оставался бы на своём месте (т.е. слева от кнопки меню)? <header id="header" class="site-header clearfix header main-header" role="banner"><div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt=""/></a> </div> <div class="navbar-collapse collapse"> <div class="menu-main_menu_ru-container"><ul class="nav-menu nav navbar-nav" id="menu-main_menu_ru"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-601" id="menu-item-601"><a href="/about-us-ru/">О нас</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-607" id="menu-item-607"><a href="/stati/">Статьи</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-622" id="menu-item-622"><a href="/faq-ru/">FAQ</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-624" id="menu-item-624"><a href="/texnologii/">Технологии</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-589" id="menu-item-589"><a href="/napishite-nam/">Написать нам</a></li> <li class="lang-item lang-item-20 lang-item-en menu-item menu-item-type-custom menu-item-object-custom menu-item-834-en" id="menu-item-834-en"><a hreflang="en" href="http://cardberry.com/en/"><img alt="English" title="English" src="/wp-content/plugins/polylang/flags/en_US.png"></a></li> </ul> </div> <ul class="nav navbar-nav navbar-right"> <li class="predzakazov" style="display: block;"> <div><? pll_e('Preorder_make'); ?></div> <div id="predzakaz_counter"></div> </li> <!-- Этот блок должен остаться на своём месте --> <li class="order-now"> <a href="javascript:;" onclick="modal();" id="link_open" onClick="ga('send', 'event', 'button', 'open_preorder');" data-toggle="modal" data-target="#ordernow1"><? pll_e('preorder'); ?></a> </li> <!-- --> </ul> </div> </div></div></header>

Всем привет ! Хотел бы поинтересоваться знаете ли вы курсы где с нуля создаются сайты с помощью bootstrap ? просто хочу использовать его для своей верстки, и хотел бы посмотреть как создаются вообще сайты с помощью bootstrap. Заранее спасибо

помогите пожалуйста решить проблему есть страничка, содержащая 2 блока, расположеных горизонтально. на экранах очень малой ширины эти блоки должны располагаться вертикально для наглядности на страничке определённый цвет фона соответствует определённой ширине экрана. белый фон это интересующая меня малая ширина

http://layout.kiev.ua/taxi Сайт верстался с помощью бутстрап 3. Так как с JS пока что на Вы, то использовал на главной странице дефолтный бутстраповский слайдер.

помогите пожалуйста разобраться. использовать less в бутстрапе можно двумя способами: компилировать файл при помощи вспомогательной программы и компилировать файл на лету со вторым способом понятно - подключается less.js и он добавляет код в ответ браузера. то есть код хранится в "оперативной памяти" браузера если использовать первый способ например с такой структурой, то не понятно где и как хранится скомпилированный код

помогите пожалуйста разобраться в документации к bootstrap3 есть пример. видно, что при клике по пункту верхнего меню происходит прокрутка страницы к соответствующей области. при этом пункт меню меняет цвет своего фона. это происходит потому что для li пункта добавляется класс active я сделал страничку, на которой реализован в точности такой же функционал. НО пункт верхнего меню не меняет цвет своего фона(потому что не добавляется класс .active). что я сделал не так? разработчикам бутстрапа нет смысла в свою документацию включать этот механизм без изменяющегося цвета фона ведь он в таком виде(без фона) есть в спецификации хтмл. а значит я что-то забыл добавить

подскажите пожалуйста как решить проблему на страничке в блоке .design при большой ширине экрана стрелки слайдера вынесены за пределы слайдера. при этом появляется нижний скролл. если его двинуть вправо, то совсем жуткие вещи происходят. можно ли избавиться от этого скролла? или как вообще поступают в подобных ситуациях? ТЗ такое, что на большой ширине экрана эти стрелочки должны быть вне слайдера

покритикуйте пожалуйста конкретно адаптивность. вёрстку умышленно взял простую чтобы ход мысли был явно виден не сочтите за шутку, но мне действительно важна критика этой странички. дело в том, что bootstrap3 использую довольно давно, но скорость вёрстки по прежнему низкая. хотя всё делаю вроде бы по правилам: делю макет на колонки, добавляю им набор классов типа col-x-x, при помощи медиа-запросов корректирую состояния содержимого колонок.

подскажите пожалуйста как в bootstrap3 сделать горизонтальное выравнивание картинки <div class="doc_outer"><img class="img-responsive" src="images/doc.png" alt="" /></div>помню, что был специальный класс, но не могу найти

помогите пожалуйста убрать скролл, который появляется при ширине окна 992px < width < 1006px (для удобства я вывел значение ширины в шапку) вот мои настройки для bootstrap http://getbootstrap.com/customize/?id=fbddbcf1a87480d1bf27#media-queries-breakpoints мне важно чтобы расстояние между .bg_blue_innerпо прежнему оставалось 66px, а ширина .page-header 992px

помогите пожалуйста понять зачем нужны в bootstrap настройки Container sizes я собрал страничку со следующими настройками Media queries breakpoints и Container sizes. как видите, значения для определённых ширин экрана просто дублировал. непонятно зачем нужно дублировать настройки для удобства текущая ширина странички выводится в футер

Подскажите пожалуйста по следующему моменту: Верстал при помощи bootstrap. В макете форма имеет такой вид: Но не получается сделать, чтобы форма накладывалась на background частично, т.е. вот что выходит: Я в верхнем div class="row" вывожу саму форму, а у нижнего div class="row" background'ом вывожу изображение. Как сделать что бы верхний row частично перекрывал нижний? Пробовал задать margin-bottom: -200px; и верхнему div'у z-index:2; а нижнему z-index1; Пока не получается.

помогите пожалуйста поправить выпадающее меню в bootstrap-вёрстке в адаптивной вёрстке в шапке поведение элементов в общем меня устраивает. красиво элементы я размещу позже но при малой ширине экрана(когда меню превращается в значок, расположенный в верхнем правом углу) после клика на этот значок меню открывается, затем смещается под лого, при этом не заполняет на 100% ширины экрана. в этом проблема. нельзя ли заставить это выпадающее меню показываться любым нормальным способом? вот fiddle, если так удобнее

Вопрос с подковыркой. Занимаюсь версткой ни так долго порядка года. Чистый CSS и HTML знаю нормально + где надо JS. Но на фрилансерских сайтах часто натыкаюсь на заказы типо "сверстать под фреймворк *****" задался вопросом что надо учить, раз рынок требует, выбрал bootstrap. Прочтение мануала ввело меня в полнейший ступор. Фреймворк тяжелый сам по себе подключает ряд библиотек на джава, использует LESS и много букв кода. так вот собственно вопрос технология CSS создавалась чтобы вынести все стили в отдельный файл и как следствие сделать более читабельным HTML код а здесь я вижу чтобы вместо того чтобы банальному банальный display: inline-block; присвоен целый класс, который опять же записывается в HTML документе только теперь все это с использованием дополнительных ресурсов мощности. шо за бред? или я не секу фишку?

Приветствую всех! У меня назрел вопрос по теме использования bootstrap. Я не понимаю, как с помощью этой библиотеки можно верстать уникальные дизайны. В теории все кажется достаточно простым и понятным, а на деле разработка превращается в кошмар и войну со стилями и полнейший хаос. В итоге, вместо быстроты и удобства, появляется ощущение какой-то искусственной усложненности и ненужности этого всего. Хочу обратиться к тем, кто успешно работает с bootstrap - как вы это делаете? Прошу дать мне советы, как нужно с этим работать и на что нужно обратить внимание. Чтение мануалов и гугл не помогают с проблемой. Еще подобная проблема у меня есть с препроцессорами Less, SASS. Я не могу их применять на практике, каждый раз запутываюсь, психую и в конце концов делаю стили по-старому. Препроцессоры мне кажутся просто ненужными и только все усложняющими штуками, но я понимаю, что без умения пользоваться этими технологиями жить дальше нельзя, и нужно как-то их осилить и понять. Если кто-то сталкивался с подобными трудностями - отпишите, пожалуйста, свой путь осваивания этих технологий.

Прошу оценить мой вариант небезызвестного макета Bislite http://bislite.esy.es/. Присутствуют страницы Portfolio и Contact us. Я пытался все сделать адаптивно - ресайзинг окна браузера приветствуется. Что еще:

есть тема на бутстрап в ней слайдер карусель и пару всплывающих ефектов нужно чтоб они работали в среде друпал 7 у меня не получилось вроде все подгрузил но анимации нет разбираться нет времени сейчас если кто может помочь предлогайте цену с указанием времени сам шаблон http://treba.info/hotel-theme/

Всем привет. Столкнулся с старым bootstrap'ом, Есть три span'а, левый и правый - span2, центральный соответственно span8, боковые должны исчезать на не desktop. Сделал, чтобы они исчезали, но как теперь сделать, чтобы центральный растягивался при исчезновении боковых. Сейчас центральный съезжает влево, а справа остается пустое место (где по сути влезает span2). Вот демо: http://jsfiddle.net/p4p83eqz/ Буду рад любым советам.

Добрый день! Собственно, проблема такая: есть стандартное модальное окно bootstrap'а. Везде работает хорошо, однако в IE8 в низу страницы появляются границы пустых div'ов от этого модального окна. Выглядят они так: respond.js подключен. Страницу можно посмотреть здесь: http://work4.a26.ru/test.html Подкажите пожалуйста хотя бы куда копать. Заранее благодарен!

http://cssportfolio.meximas.com/a.mihstore/ Буду рад услышать замечания и указания на ошибки. Спасибо всем, кто откликнется. Отмечу, что это не рабочий сайт, а лишь статичная страница для примера вёрстки.