Поиск по сайту
Результаты поиска по тегам 'bootstrap'.
Найдено 115 результатов
-
Привет всем форумчанам, я верстаю сайты разной сложности. Стандартную верстку буду делать за 300 рублей, а если у вас сложный, пишите договоримся! Еще делаю натяжку шаблона на DLE. Спасибо за внимание!
-
Здравствуйте! Все кто знаком с бутстрап, наверняка пользовались встроенным аккордеоном (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 слой всегда открыт. А остальные слои просто не работают. Прошу вашей помощи, доработать так, что бы и нужный слой открывался, и все остальное на странице после этого работало. Спасибо.
-
Что я хочу сделать. На странице очень много мелких картинок. При клике на одну из них, открывается модальное окно со слайдером внутри. В слайдере представлены все картинки существующие на странице, при чем первым слайдом будет та картинка, по которой кликнули. Но я завис на очень раннем этапе. Я уверен, что-то похожее уже делали, я не смог найти. Буду благодарен, если ткнете носом. Накидал пример из 3х картинок, но даже в консоли получаю ошибку. Не знаю почему. https://jsfiddle.net/mnu2zL3k/
-
Всем привет, 2 редактора админики с одним файлом стилей. Не могу понять почему разная высота между полями . На этой старнице высота правильная : Страница 1 На этой странице : Страница 2 в высоте между полями появляются лишние 10 px. В инспекторе вижу что для обоих редакторов : form-control = padding-top:5px; padding-bottom:5px form-group =margin-top:10px; margin-bottom:10px Во второй странице редактор внутри таба со своими классами - но влияет ли это на высоту между полями и как не могу найти... Стили в файле стилей определены как : .form-horizontal .form-group { /*margin: 0px;*/ margin: 10px 0px 10px 0px; /*margin: 10px 5px 10px 5px;*/ /*padding: 0px;*/ /*border: 0px solid navy;*/ /*margin: 5px;*/ /*margin: 10px 5px 5px 5px;*/ padding: 0px; border: 1px solid navy; /* DEBUGGING */ } .form-control { /*height: 30px;*/ /*color: #808080;*/ padding: 5px 5px 5px 5px; /*margin: 5px 0px 5px 0px;*/ /*box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(215, 215, 215, 0.9);*/ height: 34px; width: 100%; color: #808080; margin: auto; display: block; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(215, 215, 215, 0.9); border: 0px dotted red; /*DEBUGGING*/ } .form-control:focus { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(128, 128, 128, 0.9); } Спасибо!
-
Наткнулся на не плохой ресурс по bootstrap 4. Надёюсь будет полезно http://mdbootstrap.com/bootstrap-tutorial/
-
Всем привет, В бутстрап верстке делаю форму с полями ввода в 2 колонки вроде : <div class="form-group col-sm-6"> <label class="col-sm-4 control-label">Id</label> <div class="col-sm-8"> <input type="text" name="id" id="id" class="form-control" value="26" size="8" maxlength="8" readonly=""> </div> </div> <div class="form-group col-sm-6 "> <label for="name" class="col-sm-4 control-label">Name</label> <div class="col-sm-8"> <input type="text" name="name" id="name" class="form-control " value="mm mmmmm With very very very very very long name" size="30" maxlength="100" placeholder="name of Tour. Must be unique in system"> </div> </div> <div class="form-group col-sm-6 "> <label for="email" class="col-sm-4 control-label">Email</label> <div class="col-sm-8"> <input type="text" name="email" id="email" class="form-control " value="[email protected]" size="30" maxlength="50" placeholder="Email of Tour. Must be unique in system"> </div> </div> <div class="row"></div> <div class="form-group col-sm-6 "> <label for="website" class="col-sm-4 control-label">Website</label> <div class="col-sm-8"> <input type="text" name="website" id="website" class="form-control " value="Website.com" size="30" maxlength="150" placeholder="Website of Tour. Must be valid url"> </div> </div> Но после 3-его поля email хочется следующие поля(начиная с Website) выводить с новой строки и для этого я вставил див с class="row". Это вроде работает, но хорошее дли это решение и можно ли сделать лучше ? Спасибо !
-
Bootstrap - slider. Необходимо переместить описание. Попробовал сделать это с помощью position:relative и position:absolute. Но получается перемещать только вверх-вниз. А как сделать это вправо-влево? Вот сам сайт
-
Открытие модального окна bootstrap при попытке уйти с страницы сайта
ellato44 добавил тему в Javascript
Доброго времени суток! Помогите решить задачку следующего характера: имеется код открытия модального окна - http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h пример так же ниже указан: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html> необходимо, чтобы при попытке пользователем закрыть вкладку страницы, т.е. при нахождении курсора скажем в 5px от кнопки закрытия вкладки запускалось модальное окно с контентом., при этом, чтобы не каждый раз оно запускалось, а один раз для каждого нового пользователя (тут дело с куки связано) пример встречал, но не получается мне новичку привязать к скрипту нужное мне модальное окно )) вот собственно пример: пример скрипта открытия модального окна при попытке уйти со страницы сайта взят отсюда - http://dimox.name/popup-window-on-first-web-site-visit (function($) { $(function() { // Проверим, есть ли запись в куках о посещении посетителя // Если запись есть - ничего не делаем if (!$.cookie('was')) { // Покажем всплывающее окно $('#boxUserFirstInfo').arcticmodal({ closeOnOverlayClick: false, closeOnEsc: true }); } // Запомним в куках, что посетитель к нам уже заходил $.cookie('was', true, { expires: 365, path: '/' }); }) })(jQuery) не получается приспособить данный скрипт для открытия такого модального окна.. помогите неучу? )) буду благодарен за помощь! -
оцените пожалуйста форму, которая добавляет в базу рецепты коктейлей: http://fh79272k.bget.ru/files/works/coctails/1/ в первую очередь хотелось бы услышать отзывы об архитектурке
-
дизайн бутстрап-формы поломался если добавить в стили control-label класс
mstdmstd добавил вопрос в Для начинающих
Всем привет, Взял стандартную бутстрап форму http://www.codeply.com/go/FbXMFSrGf2 дизайн которой сразу поломался, если добавить в стили control-label класс Имею в виду что лейблы отображаются сверху инпутов, а должны слева... А если убрать из определения стилей control-label - то лейблы отображаются слева от инпутов - что и нужно... Как правильно ? Спасибо ! -
Не могу сделать сайдбар с выпадающим меню, которое смещало бы контент
Vo.Wonder добавил вопрос в Проблемы верстки
Здравствуйте. Помогите разобраться, как сделать сайдбар с выпадающим меню. Сейчас всё обстоит так: 1. По нажатию на волшебную кнопку появляется скрытый ранее bootstrap-столбец, при этом с помощью JQuery я переопределяю классы для элементов, которые расположены справа от сайдбара, элементы перестраиваются и сдвигаются (картинка №1 - сайдбар не отображается, картинка №2 - сайдбар отображается и элементы смещены): Картинка 1 и Картинка 2 2. При нажатии на какой-либо из пунктов (например, Blog) появляется ещё один bootstrap-столбец, который тоже был скрыт. Элементы смещаются ещё правее (картинка №3). При этом мой убогий код выглядит примерно так: <div class="col-lg-3 main-menu no-padding"> <div class="menu-container"> <ul> <li><a href="">Home</a></li> <li><a href="">Store</a></li> <li class="blog"> Blog </li> <li><a href="">Community</a></li> <li><a href="">Contest</a></li> <li><a href="">About</a></li> <li><a href="">Content</a></li> </ul> </div> <div class="contact-container"></div> </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 sub-menu"> submenu </div> Как видите, элемент, который содержит подменю, находится вне основного списка элементов меню, что, конечно же, неправильно. Помогите, пожалуйста, разобраться, как сделать так, чтобы всё было семантически верно и подменю было внутри списка основного меню. Спасибо. -
помогите пожалуйста разобраться в вопросе обычно, делая компонент, разработчик предоставляет возможность добавить в html один элемент. например: <div id="megaSlider"></div> и затем подключенные скрипты заполняют этот компонент нужной разметкой и поведением. это красиво и лаконично. но не всегда удобно. например, если используется bootstrap и шаблонизатор типа underscore. в этом случае при написании компонента разработчику приходится поочерёдно открывать шаблоны и добавлять в них классы: container, row, col-md-6 и т. д. от такой деятельности голова пойдёт кругом но есть и другой путь. в теле страницы вместо <div id="megaSlider"></div> сразу сверстать bootstrap-сетку со всеми нужными классами и уже потом в неё скрипт будет добавлять нужные шаблоны вопрос: допустимо ли использование второго способа? подавляющее большинство компонентов, которые есть в интернете сделаны первым способом. возможно, для этого есть важные причины...
-
Помогите понять, почему блок наезжает на заголовок H1. Сайт сверстан на Bootstrap 3. Тут на всю ширину: Уменьшаем ширину, тут нормально: Верхнее меню перескочило, так и должно быть: Верхнее меню "схлопнулось", так и должно быть: А вот такого быть не должно. Верхний белый блок должен стать больше по высоте и черное меню должно оказаться ниже, чтобы синий заголовок не перекрывался: Еще хуже: Скажите, почему верхний белый блок остался по высоте тем же и что сделать, чтобы он увеличился на высоту синего заголовка и не закрывал его? Вот здесь выложил: http://xenglish.ru/bootstrap/
-
Всем привет, Подскажите, пожалуйста, я наткнулся на использование в бутстрап верстке для контрола классов form-control и input-sm вроде : <div class="col-xs-12 col-sm-8 col-md-8"> <input type="text" name="postal_code" id="postal_code" class="form-control input-sm" value="" size="4" maxlength="4" Читаю доки: Размеры полей Чтобы поменять размер элемента формы, ему можно назначить один из классов: .input-sm .input-lg Это что управление высотой контрола или что ?
-
Верстаю сайт на бутстрапе. Возник такой вопрос. Нужно чтобы левый сайдбар был фиксирован, а правые 2 блока скроллились. Причем сайдбар должен фиксироваться только после того как проскроллится шапка (шапку фиксировать не нужно). Прилагаю макет и примерную схему. P.S. Пробовал класс affix, но что-то не вышло, вероятно я неправильно его использовал.
-
Мне непонятно, как принято в мире : картинки заблаговременно подготавливают с одинаковым размером (соотношением сторон) или ожидается, что верстальщик сам подстроит слайдер так, чтобы разные картинки не ломали высоту? Если накидать разных по соотношению сторон картинок в слайдер, то слайдер будет меняться по высоте, поскольку будет подстраиваться под высотку картинки. Пытался сделать второй вариант, но не знаю насколько он хорош. Слайдер занимает всю высоту экрана. Для слишком больших экранов можно поставить ограничение по высоте, также как и для маленьких. Но это скорее хак, чем нормальное решение. Подключать отдельный слайдер не хочется, чтобы не грузить сайт. https://jsfiddle.net/p1nt8p5m/
-
Делал для себя. Любая аргументированная критика приветствуется. Макет сделан для ширины 1600 и 640. Может подразумевалась фиксированная ширина, но я сделал резину. Для того, чтобы удобнее было смотреть на мобильном, я добавил немного от себя. 1. Модифицировал меню. Оно кликабельное, происходит переход к соответствующим секциям. Возможно стоит совсем убрать Login, Sign up. Они не очень логично смотрятся (?) 2. Главный баннер является одновременно слайдером. Возможно поменяю эффект на fade, а не slide. 3. Главный баннер подстраивает свою высоту под высоту экрана, чтобы сильно не растягивать в высоту страницу. И сразу же заметил ошибку. Если на смартфоне смотреть в альбомном режиме, то баннер сильно обрезается и кнопку "Get Started" не видно вообще. Можно поставить что-то типа min-height : 500px, но не уверен. (?) 4. Все рецепты кликабельны. По нажатию появляется модальное окно со слайдером. Слайдер рабочий, а не двигается он из-за того, что там только одна картинка. На мобильном я убрал эффекты, которые появляются при наведении потому, что с телефона эффект наведения не воспроизвести. 5. В футере добавил кнопку возврата в топ страницы. В мобильном режиме кнопку убрал, чтобы не загромождать пространство. Мелкие косяки, которые еще не успел либо не знал как устранить: - на ширине 640 и меньше, по клику на кнопку выпадающего меню, появляется полоска под кнопкой. Как ее убрать не знаю. - в том же меню на той же ширине, текст "Sign up" съезжает в два ряда. Не знаю почему - блок "Introducing app". При уменьшении экрана, текст наезжает на айфон и становится плохочитабельным. Добавление тени, вокруг текста не помогло - тот же блок. Под надписью "Introducing app" полоска должна располагаться у левого края. - картинки выглядят не очень. Не знаю почему. Изображение айфона немного "надкушенное" снизу, картинки в секции "benefits" тоже выглядят как-то странно (?) Макет : https://www.behance.net/gallery/16951129/FREE-PSD-Multipurpose-Landing-Page Сайт: http://jakeweb.cc.ua/recipes/ Исходники: https://github.com/jakeweb/recipes.git
-
Привет всем! Это моя первая серьезная работа. Недавно делал несколько страниц для тренировки. Макет фиксированный, из фреймворков брал bootstrap3. Необходима поддержка IE8+ Ссылки: 1. Главная http://jakeweb.cc.ua/building/ 2. http://jakeweb.cc.ua/building/project.html 3. http://jakeweb.cc.ua/building/elements.html 4. http://jakeweb.cc.ua/building/catalog.html Исходники: https://github.com/jakeweb/building.git Изначально собирался сделать только одну страницу, но потом еще решил доделать остальные, поэтому структура css могла быть лучшей, если бы я планировал все изначально. Буду рад критике и советам.
-
Добрый день! Я начинающий верстальщик!Хочу для портфолио сверстать бесплатно( за мин плату) макетики адаптивные или фиксированные! Могу подключить JQuery , есть опыт работы с Bootstrap. Пишите : [email protected] skype: astonevart.
-
Делаю первый раз верстку под bootstrap — решил осваивать фреймворк и все такое. Проблема — «плывет» при сужении экрана. Он высокий, 400px, фоном стоит картинка. При сужении экрана столбцы, которые не помещаются по ширине, уходят вниз, но картинка не «размножается» по вертикали (вариант repeat-y не срабатывает так, как надо). Далее, под футером стоит еще одна строка (div height:80px) более темная по фону (в ней копирайты). При сужении экрана она не уходит вниз под все выстроившиеся вертикально колонки footer, а остается «прилеплена» к нему снизу, таким образом частично закрывая столбцы футера. Вот нормальный футер, который задуман: А вот после сжатия экрана: В варианте position: absolute; bottom: 0; блок просто залипал внизу страницы, "наезжая" на другие блоки, идущие до самого низа. Это уже пробовал.. и absolute, и fixed. Как вариант, видится мне в разных моделях девайсов делать разный CSS для footer.. но не знаю, как это сделать; и вопрос .bottomfooter тоже остается. Вот HTML (bootstrap настроен на 24 колонки, не на дефолтовые 12): <footer> <div class="container"> <div class="row"> <section class="col-md-8 col-md-offset-1"> <h3>Рассылка</h3> <!-- форма --> </section> <section class="col-md-6"> <h3>Контакты</h3> <!-- контент --> </section> <section class="col-md-8"> <h3>Форма обратной связи</h3> <!-- форма --> </section> </div> </div> </footer> <div class="clearfix"></div> <div class="bottomfooter"> <section class="col-md-6"> <!-- контент --> </section> <section class="col-md-12 text-center"> <!-- контент --> </section> <section class="col-md-5 text-right"> <!-- контент --> </section> <section class="col-md-1"> <!-- колонка-"заглушка" --> </section> </div>Вот CSS:.bottomfooter {height: 80px;padding: 10px 0;background-color: rgb(80,80,80);color: @text-color;font-size: @font-size-base;a {color: @text-color;}}footer {background-image: url('../images/footer-2.png');background-repeat: no-repeat; color: #dbdbdb; font-size: @font-size-base;.container { height: 400px;padding: 10px 0; background: @panel-footer-bg;
-
Здравствуйте. Необходимо сделать верстку по шаблону, требуется калькулятор с расчетом примерной стоимости. Функцию сделал, она работает, вывод тоже есть. Не могу придумать как добавить к числу знак доллара и "примерно". Также есть вопрос по поводу скрытия кнопки "Calculate" и появления на ее месте этого числа и кнопки Order, как на макете. Можно ли такое осуществить? Спасибо. Сейчас это выглядит так:
-
При вызове модального окна, прокрутка на странице блокируется и элементы немного смещаются в сторону (наверное из-за того, что прокрутка исчезает). Мне надо, чтобы скроллинг на основной странице работал, но в стилях не могу разобраться уже час как. Может у кого-то была такая проблема? Пример простой страницы с модальным окном. До После На песочнице не получается подключить файлы бутстрапа, поэтому выложу архив с страницей приведенной на скриншоте. https://yadi.sk/d/CPBzvMDjnyRgd
-
Ребзики, коллегушки .. Верстаю сайт под смартфоны на bootstrap. Подскажите пожалуйста нормальную фотогаллерею. Требования: 1. Не громоздкая. 2. Удобная для пользования с мобилки. Заранее приподнимаю шляпу в знак уважения.
-
В twitter bootstrap 3 если информация в поле таблицы очень длинная то таблица становится не очень читабельной. Поле становится очень широким и если не влазит то переносится. Видел примеры как поля делаются отдельным слоем и если очень длинные то заезжают за следующее поле без переноса. Подскажите есть ли в bootstrap готовое решение или как это лучше сделать?
-
Добрый день!Начинающий верстальщик, прислали тестовое, столкнулась с глупой проблемой. Не могу понять,как правильно разметить страницу для верстки бутстрапом. в макете дано 12 красных колонок (ширина слоя написано 960). Начинаю с div class="container", и дальше не понимаю... С остальными элементами вроде бы проблем нет. Прощу помощи по разъяснению, как правильно разметить конкретную страницу,перерыла весь ютуб с уроками, там все поверхностно.Макет в ссылке. Благодарю заранее. http://prntscr.com/8wapzv
