Задать вопрос
PretorDH

Pretor DH

HTML5, CSS3, PHP, JS - люблю в чистом виде.
Ответы пользователя по тегу Bootstrap

  • Серверная часть под Bootstrap?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Обьясню популярно.
    Вашу ситуациию можно стравнить с рабочим строителем - он никогда не поймет архитектора.

    1-10 левел. HTML5 + CSS5 вообще не програмирование, это пасивные сущности. BOOTSTRAP это даже не сущность, это набор патернов - не более. Если вы выучили набор патернов, но не понимаете как работает HTML и CSS, вы помощник дизайнера/верстальщика. Фактически Вы чернорабочий - научились держать лопату, рыть канавы и перекидать мешки с места на место, без вреда для здоровья.

    10-30 левел. Изучив HTML и CSS на таком уровне, что понимаете как изменяя CSS придать правильный вид любой разметке. Учится здесь довольно быстро 1 годик, и 1 год опыта.
    Теперь: Вы фактически научились забивать гвозди, и выставлять доски по уровню.

    30-70 левел. JS, PHP, Node.js - уже програмирование. Там совсем другая парадигма. И начинать нужно с парадигмы програмирования. Понять что такое переменные, циклы, условия. Изучить алгоритмы, Обьектную модель, наследование, чэйнинг..., изучить серверные фреймворки Yii, Simphony, WP и т.д. Здесь быстрых результатов не ждать!!!, учится лет 5 и года 3 опыта в програмировании.
    Теперь ваш уровень соответствует специалисту по прокладке инженерных сетей - сантехнику, электрику.

    70-80 левел. Изучив сетевые протоколы, структуру серверов, архитектуру програмного обеспечения, серверные языки програмированя, взаимодействие инфраструктур и много чего ещё, вы только тогда станете Фулстак разработчиком (и в итоге архитектором програмного обеспечения 80 уровня). Но учится на рахитектора минимум 10 лет и еще 5 лет опыта в проектировании ПО.

    P.S. На вашем уровне, Вам подойдет например делать контен на готовых конструкторах WIX или CMS Wordpress. Сдесь много знаний не надо, надо научится регить домен, покупать хостинг, устанавливать в панели хостинга нужную CMS. И самое малое изучить саму CMS.
    Ответ написан
    5 комментариев
    5 комментариев

  • Что лучше — общий всё-в-одном style.css или несколько файлов .css?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    С переходом на протокол HTTP2 держать файлы раздельно даже на сервере будет лучше. Не будет разницы, ибо пакетироваться они будут на уровне протокола.

    Но даже сейчас лучше разделить стили блочной разметки от украшательств и грузить их раздельно. Подключать media queries CSS, не в CSS а в HTML отдельными файлами, указанием атрибута media:
    <link rel="stylesheet" media="all and (min-color-index: 256)" href="..." />


    А ещё лучше, подключать с каждой страницей только те стили, которые на ней используются :)

    Чтобы это можно было сделать, верстальщик должен сделать раздельные сборки:
    • Стартовую таблицу стилей которая грузится на всех страницах. Сюда входят: сброс браузеров, хеадер, футер (если он fixed внизу видимого), стили видимого при загрузке домашней страницы. ТОЛЬКО то, что видно на самом большом экране без элементов которые появляются во время прокрутки.
    • Основную таблицу стилей для разметки страниц контента. То что входит во все страницы контента, без специфичности. Ну и не фиксированный футер тот, что после контента. Эти стили должны быть загружены уже после загрузки основного контента.
    • Специфичные стили для отдельных страниц. Эти грузятся отдельно на каждой странице свои стили и по надобности объединяются с Основной разметкой контента.
    • Таблица стилей форм. Все формы на сайте должны грузится с одной таблицы. А не быть специфичными для разных страниц. Формы это не контент!!! У форм ОБЯЗАТЕЛЬНО должна быть отдельная таблица стилей. Она подключается при включении формы генератором форм на бекенде. Даже строка поиска в хедере. Все элементы input, textarea, option должны быть описаны в отдельной таблице стилей. Эти стили объединяются с основной или стартовой таблицей как будет надо.


    P.S. Уточню по Основной таблице стилей фактически сборок должно быть минимум 6 (мобильная, планшетная, малая, средняя, ретина, печатная).
    Верстка ВСЕГДА должна быть мобайлфёрст. И сновная таблица должна быть на мобильной версии сайта. А потом ёё расширять и естественно подключать атрибутом media по надобности. Сборка в порядке возрастания сначала узкоспециализированная таблица для мобильников. Для планшетников подключается только отдельный файл с планшетной и мобильной таблицами стилей собранные в кучу. И так далее...

    P.P.S. Cборщики (gulp) собирающие в один файл, это посредственное решение в лоб грубой силой, дабы не заморачиваться.
    Ответ написан
    4 комментария
    4 комментария

  • Откуда берется отступ при сжатии?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Перенесите класс contacts_header в родительский блок .

    <div class="contacts_header col-lg-5 col-md-4 col-sm-12 col-xs-12">
<div class="">
Москва, Ладожская ул., д. 1/2 <i class="fa fa-map-marker"></i> 
<br>
<a href="tel:+74957751401"> +7 (495) 775-14-01</a> <i class="fa fa-mobile"></i>
<br>

Пон- Сб 11:00 - 23:30 <i class="fa fa-clock-o"></i><br>
Вс 13:00 - 23:30 <i class="fa fa-clock-o"></i>

</div>
</div>
    Ответ написан
    Комментировать
    Комментировать

  • Адаптивная верстка. Правильно ли?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Вот это не правильно:
    style="height: 603px;"

    Определи класс и задай высоту в нем.
    Для картинки указывай ширину в арибуте, а не инлайн-стиле.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как правильно сверстать одинаковые блоки в bootstrap?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Простое решение:
    Ограничить высоту колонок через max-height: XXXpx;.
    И поставить text-overflow: ellipsis;.
    При клике или :hover открывать весь блок.

    или По сложнее:
    Сверстать три колонки и пропорционально распихать блоки по ним. Но этот вариант подойтет только для фиксированой верстки. Flex-box

    или Сложное но простое:
    Использовать masonry.js.

    P.S. Класс clearfix используется совсем для других целей.
    Ответ написан
    2 комментария
    2 комментария

  • Как организовать правильное вертикальное выравнивание div'ов?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Вот статья про Bootstrap и 3 колонки одинаковой высоты.
    Но лично мене не нравится такое решение.

    Вот решение в 3 правила адаптивное по ширине и высоте .

    <main>
    <div>
        <p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p>
    </div>
    <div>
        <p>Span</p><p>Span</p><p>Span</p>
    </div>
    <div>
        <p>Span</p><p>SpanSpanSpanSpan</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p>
    </div>
</main>

    main {
    position:relative;     /* должно быть отлично от static */
    overflow:hidden;
}
div {
    vertical-align:top;
    position:relative;
    display:inline-block;
    z-index:1;             /* заменить на background:gray; если плохо использовать z-index */
}
div:after {
    content:'';
    position:absolute;
    left:0;right:0;
    bottom:-1000%;      /* здесь максимально возможная разница между блоками в процентах (здесь х10)*/
    top:0;z-index:-1;      /* заменить top на top:100%; если нужно забрать z-index */
    background:gray;
}
    Ответ написан
    Комментировать
    Комментировать