HTML\CSSTwitter Bootstrap 3: Сетка — принципи работы

В Twitter Bootstrap 3 модульная сетка состоит из 12 колонок, которые при фиксированной верстке занимают 1170 пикселей. Сетка изначально является адаптивной/отзывчивой (responsive) и ориентированна на мобильные устройства. Если во второй версии бутстрап это было дополнительной опцией, в третьей версии это является базовым.

В третьей версии появились классы, для верстки под различные типы экранов. Если выразить двумя словами, то эти классы определяют правило: Если ширина экрана меньше заданного классом диапазона — то блоки будут ложится друг за другом и иметь ширину 100%. Если ширина экрана больше — блок будет просто масштабироваться.

.col-xc < 768px (мобильные устройства).

.col-sm 768px — 992px (планшеты).

.col-md 992px — 1200px (декстопные компьютеры).

.col-lg — > 1200px (для устройств с большим экраном).

Читать далее...

HTML\CSSTwitter Bootstrap: Carousel отключить автоматическую прокрутку

Задача: отключить автоматическую прокрутку для компонента Bootstrap Carousel.

Иногда необходимости в автоматической смене слайдов карусели нет, и стоит задача отключить автопрокрутку. Для этого в старой версии Bootstrap 2 можно было воспользоваться кодом:

$(document).ready(function(){
    // disable carousel cycling
    $('.carousel').carousel({ interval: false });
});

В новой версии Twitter Bootstrap 3 это можно сделать проще, достаточно добавить атрибут data-interval="false":

Читать далее...