Перехід з Bootstrap 2 до версії 3

Bootstrap — фреймворк для створення веб-інтерфейсів. Його використано і для шаблону сайту який ви читаєте.

Нещодавно вийшла нова гілка фреймворку, версії 3. Дещо сильно змінилося, але, в основному, оновлення не потребує надзвичайних зусиль.

Тепер Bootstrap "Передусім мобільний". Тобто не потрібно окремо оголошувати в коді що сторінка буде адаптивною для мобільних пристроїв. Хоча накрилад малюнки, навпаки, тепер персонально потрібно оголошувати адаптивними (клас .img-responsive).

Стовпці більше не маркуються класом .span* і замінені на .col-md-*. З’явилися різні типи стовпців: для десктопів, планшетів і мобільних (.col-xs-, .col-sm-, .col-md-, .col-lg-). В залежності від пристрою будуть діяти саме ті класи, що найбільше підходять до розміру екрану.

Змінилася розмітка панелі навігації (отієї смужки з меню що вгорі сайту). Тепер потрібно:

• взагалі забрати .navbar-inner
• .brand замінити на .navbar-brand
• .navbar-brand і .navbar-toggle розташувати всередині .navbar-header
• додатково, поруч з класом .nav додати .navbar-nav

Стандартні кнопки (сірого кольору) тепер обов’язково мають мати клас .btn-default.

Поля вводу, тепер, за замовчуванням мають ширину 100%. Розташовуйте їх у відповідному <div> щоб задати потрібний розмір.

Іконки тепер представлені не малюнками, а шрифтом (підключається автоматично, через CSS Bootstrap). В класі іконки потрібно вказувати .glyphicon і .glyphicon-*.

Зникли елементи навігації (використовуються наприклад для бокових меню). Замість них можна використовувати списки класу .list-group. Проте виглядають трохи по-іншому (було-стало):

Змінився опис модальних вікон. З’явилися класи для підсвітки рядків таблиці (різними кольорами). З’явилися панелі — блоки сторінки з заголовком.

Офіційна сторінка Bootstrap описує нововведення в версії 3. Корисна стаття з основними змінами у версіях є на Bootply. Там само пропонують сервіс для автоматичної конвертації коду з версії 2 на 3 (не тестував).