Программирование | Блог Владимира ТюрюкОва

Добавление хлебных крошек в Битрикс

<?$APPLICATION->IncludeComponent(
    «bitrix:breadcrumb»,
    «breadcrumb»,
    array(
        «COMPOSITE_FRAME_MODE» => «A»,
        «COMPOSITE_FRAME_TYPE» => «AUTO»,
        «PATH» => «»,
        «SITE_ID» => «s2»,
        «START_FROM» => «1»,
        «COMPONENT_TEMPLATE» => «breadcrumb»
    ),
    false
);?>

не видно гамбургерное меню Bootstrap

добавить в стили класс

.navbar-toggle .icon-bar{ background-color: #fff;}

резиновая верстка на col-xx-xx Bootstrap 3

шаг этой разметки довольно большой что начинает сразу видеться на больших и маленьких экранах

к примеру фото каталога 100px на 100px задать для всех экранов col-md-2 col-xs-2… это значит что на средних экранах смотреться будет хорошо, на больших более 20′ будет разъезжаться в разные стороны а на совсем маленьких — телефонах текст описания из соседней col-xs-10 будет наезжать на фото

выход — свой стиль и прописать размеры используя свою медиа разметку

    @include BootstrapGridBreakpoint(xs) {
      height: auto;
      left:   0px;
        }
    @include BootstrapGridBreakpoint(sm) {
      height: auto;
      left:   0px;
    }

Включение фоновой отладки в браузерах Chrome

chrome://flags/

silent-debug-google-chrome

во вкладке найти Фоновый режим откладки :

silent-debug-google-chrome1

Фоновый режим отладки Mac, Windows, Linux, Chrome OS

Не показывать информационную панель, когда расширение связано со страницей с помощью API chrome debugger. Установка этого флажка позволяет выполнять отладку фоновых страниц расширений. #silent-debugger-extension-api

Включить

Ну и напоследок: «А зачем мне это нужно?» — чтобы отключить сообщение «Включен режим отладки NetBeans при отладке веб-страниц в NetBeans

сдвиги блоков, div, кнопок, картинок и т.п. CSS, Bootstrap

чтобы объект «съехал» нужно применить к нему стиль float:

со значением:

left; — влево
right; — вправо

сдвигает весь элемент, включая рамку, отступы и ширину рамки в указанном направлении (влево или вправо).

в Bootstrap это организовано добавлением класса уже содержащего этот стиль:

xx — число от 1 до 12 ширина сдвига, равная ширине колонки такого же формата. Эта ширина задается в процентах и ее можно увидеть в boostrap.css файле

отличия всех -sm-, -xs-,-md- классов в том, что у Boostrap есть 3 основных вида разрешения экрана контролируемых через


<span class="p">@media (</span><span class="n">max-width</span><span class="o">:</span> <span class="o">@</span><span class="n">screen-xs-max</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}

</span>

внутри boostrap.css таблицы стилей.
Итак, классы для:

для сдвига вправо:

col-sm-push-xx
col-xs-push-xx
col-md-push-xx

для сдвига влево:

col-sm-pull-xx
col-xs-pull-xx
col-md-pull-xx

чтобы сдвинуть колонки ВЛЕВО за счет увеличения свойства CSS margin-left (левого промежутка или поля между колонками) нужно использовать эти классы CSS из комплекта Boostrap:

только для сдвига влево:

col-sm-offset-xx
col-xs-offset-xx
col-md-offset-xx

Перенос по словам CSS, HTML

если часть содержимого контейнера скрывается, есть замечательное CSS свойство и его значение:

CSS код:

word-wrap: break-word;

оно делает так, чтобы текст переносился по словам на другую строку, а не прятался за границами контейнера (кнопки, div…)

Boostrap — картинка в круге (кружочке)

есть такой стиль в Boostrap

.img-circle {
border-radius: 50%;
}

если в class тега img, например, через пробел добавить img-circle будет картинка в круглой рамке — не надо писать в свою таблицу стилей такой тег — он стандартный для Boostrap

MS SQL конвертация (преобразование) строки в число

чтобы сконвертировать или преобразовать строку MS SQL в число (для последующего анализа по условию на больше, меньше, равно…) нужно использовать команду CAST и выразить как INT — целое число

CAST('12' AS INT)