Переход на v3.x · Bootstrap на русском
Руководство о том, как обновить Bootstrap v2.x в v3.x с акцентом на основных изменений, что нового, и то, что было удалено.
Bootstrap 3 нет обратной совместимости с версии v2.x. Используйте данное описание как основной путеводитель миграции с v2.x к v3.0. Для более детального ознакомления просмотрите объявления релиза что нового в v3.0.
Основные изменения классов
В этой таблице показаны различия стилей между v2.x и v3.0.
| Bootstrap 2.х | Bootstrap 3.0 |
|---|---|
.row-fluid | .row |
.span* | .col-md-* |
.offset* | .col-md-offset-* |
.brand | .navbar-brand |
. | .navbar-nav |
.nav-collapse | .navbar-collapse |
.nav-toggle | .navbar-toggle |
.btn-navbar | .navbar-btn |
.hero-unit | .jumbotron |
.icon-* | .glyphicon .glyphicon-* |
.btn | .btn .btn-default |
.btn-mini | .btn-xs |
.btn-small | .btn-sm |
.btn-large | .btn-lg |
.alert | .alert .alert-warning |
. | .alert-danger |
.visible-phone | .visible-xs |
.visible-tablet | .visible-sm |
.visible-desktop | Split into .visible-md .visible-lg |
.hidden-phone | .hidden-xs |
.hidden-tablet | .hidden-sm |
.hidden-desktop | Split into .hidden-md .hidden-lg |
.input-block-level | .form-control |
.control-group | .form-group |
.control-group.warning .control-group.error .control-group.success | . |
.checkbox.inline .radio.inline | .checkbox-inline .radio-inline |
.input-prepend .input-append | .input-group |
.add-on | .input-group-addon |
.img-polaroid | .img-thumbnail |
ul.unstyled | .list-unstyled |
ul.inline | .list-inline |
.muted | .text-muted |
.label | .label .label-default |
.label-important | .label-danger |
. | .text-danger |
.table .error | .table .danger |
.bar | .progress-bar |
.bar-* | .progress-bar-* |
.accordion | .panel-group |
.accordion-group | .panel .panel-default |
.accordion-heading | .panel-heading |
.accordion-body | .panel-collapse |
.accordion-inner | .panel-body |
navbar .nav
alert-error
form-group.has-*
text-errorЧто нового
Мы добавили новые элементы и изменили существующие. Здесь продемонстрированы новые или обновленные стили.
| Элемент | Описание |
|---|---|
| Panels | .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse |
| List groups | .list-group .list-group-item .list-group-item-text .list-group-item-heading |
| Glyphicons | .glyphicon |
| Jumbotron | .jumbotron |
| Extra small grid (<768px) | .col-xs-* |
| Small grid (≥768px) | .col-sm-* |
| Medium grid (≥992px) | .col-md-* |
| Large grid (≥1200px) | .col-lg-* |
| Responsive utility classes (≥1200px) | . .hidden-lg |
| Offsets | .col-sm-offset-* .col-md-offset-* .col-lg-offset-* |
| Push | .col-sm-push-* .col-md-push-* .col-lg-push-* |
| Pull | .col-sm-pull-* .col-md-pull-* .col-lg-pull-* |
| Input height sizes | .input-sm .input-lg |
| Input groups | .input-group.input-group-addon .input-group-btn |
| Form controls | .form-control .form-group |
| Button group sizes | .btn-group-xs .btn-group-sm .btn-group-lg |
| Navbar text | . |
| Navbar header | .navbar-header |
| Justified tabs / pills | .nav-justified |
| Responsive images | .img-responsive |
| Contextual table rows | .success .danger .warning .active .info |
| Contextual panels | .panel-success .panel-danger .panel-warning .panel-info |
| Modal | .modal-dialog .modal-content |
| Thumbnail image | .img-thumbnail |
| Well sizes | .well-sm .well-lg |
| Alert links | .alert-link |
visible-lg
navbar-textЧто удалено
Следующие элементы были удалены или изменены в v3.
0.
| Элемент | Удалено из 2.x | 3.0 Эквивалент |
|---|---|---|
| Form actions | .form-actions | N/A |
| Search form | .form-search | N/A |
| Form group with info | .control-group.info | N/A |
| Fixed-width input sizes | .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge | Use .form-control and the grid system instead. |
| Block level form input | .input-block-level | No direct equivalent, but forms controls are similar. |
| Inverse buttons | . | N/A |
| Fluid row | .row-fluid | .row (no more fixed grid) |
| Controls wrapper | .controls | N/A |
| Controls row | .controls-row | .row or .form-group |
| Navbar inner | .navbar-inner | N/A |
| Navbar vertical dividers | .navbar .divider-vertical | N/A |
| Dropdown submenu | .dropdown-submenu | N/A |
| Tab alignments | .tabs-left .tabs-right .tabs-below | N/A |
| Pill-based tabbable area | . | .tab-content |
| Pill-based tabbable area pane | .pill-pane | .tab-pane |
| Nav lists | .nav-list .nav-header | No direct equivalent, but list groups and .panel-groups are similar. |
| Inline help for form controls | .help-inline | No exact equivalent, but .help-block is similar. |
| Non-bar-level progress colors | .progress-info .progress-success .progress-warning .progress-danger | Use .progress-bar-* on the .progress-bar instead. |
btn-inverse
Дополнительные примечания
Другие изменения в v3.0 не столь очевидны.
Базовые классы, основные стили поведения были скорректированы для гибкости и нашего подхода mobile first. Вот неполный список:
- По умолчанию текстовые элементы управления формы теперь получают минимальный стиль. Для управления цветом фокуса и закругленными углами применяйте класс
.form-control. - Текстовые элементы управления формы с классом
.form-controlтеперь по умолчанию имеют ширину со значением 100%. Вкладывайте формы ввода в середину<div></div>для управления их шириной. .badgeбольше нет контекстных классов (-success,-primary,и т.д.)..btnдолжен также использовать.btn-default, чтобы создать кнопку по умолчанию..rowсейчас флюид.- Изображения неадаптивны по умолчанию. Используйте
.img-responsive, для тягучести<img>.
- Иконы, сейчас
.glyphicon, теперь на основе шрифта. Иконки также требует фундамента и иконка класса (например,.glyphicon .glyphicon-asterisk). - Typeahead было удалено, на пользу Twitter Машинописный.
- Модальные разметки существенно изменились. Это
.modal-header,.modal-body, и.modal-footerразделы теперь завернутые в.modal-contentи.modal-dialogдля лучшего мобильного стиля и поведения. Кроме того, вы не должны больше применяться.hideto.modalв разметке. - По состоянию на v3.1.0, HTML загружается
remoteОпция модальная теперь вводится в.modal-content(от v3.0.0 до v3.0.3, в.modal) а не в.modal-body. Это позволяет также легко изменять верхний и нижний колонтитулы модального, а не только модальное тело. - Флажок и радио особенности button. js плагин теперь оба использование
data-toggle="buttons"вместо того, чтобыdata-toggle="buttons-checkbox"илиdata-toggle="buttons-radio"в их разметке. - JavaScript события имеют пространства имен (namespaced). Например, чтобы обработать событие «show» в модалі, используйте
'show.bs.modal'. Для закладок «shown» используйте'shown.bs.tab', и т.д.
js плагин теперь оба использование Более подробную информацию о апгрейда до v3.0 смотрите на Bootply, где участники обсуждений преподают также и части кода.
BootstrapVue
BootstrapVue- v2.23.1
- GitHub
- Telegram
- Discord
- Open Collective
С помощью BootstrapVue Вы можете создавать в Интернете адаптивные,
ориентированные на мобильные устройства и доступные ARIA проекты, используя
Vue.
js и самую популярную в мире интерфейсную CSS-библиотеку CSS —
Bootstrap v4.
Bootstrap v4 самый популярный в мире фреймворк для создания адаптивных сайтов, ориентированных в первую очередь на мобильные устройства.
Vue.js logoVue.js (произносится как /vjuː/, как view) это прогрессивный фреймворк для создания пользовательских интерфейсов.
Текущая версия
v2.23.1
Обзор
BootstrapVue, состоящий из более чем 85 компонентов, более 45 доступных плагинов, нескольких директив и более 1200+ иконок,
обеспечивает одну из наиболее полных реализаций компонента BootstrapVue Bootstrap v4 и системы сеток, доступных для
Vue.js v2.6, вместе с обширным и автоматизированным повышением доступности WAI-ARIA.
Начать
Плейграунд
GitHub
Причины выбрать BootstrapVue
Отзывчивый
Сначала мобильный отзывчивый макет
Модульный
Импортируйте только те функции, которые Вам нужны
Доступный
Автоматическая разметка доступности WAI-ARIA
Современный
Создан с использованием Vue.js v2.6 и Bootstrap SCSS v4.6
Настраиваемый
Создавайте темы с SCSS переменными и глобальными параметрами
Бесплатный
Открытый исходный код на GitHub, MIT Лицензия
Интеграция с Nuxt.
js Nuxt.js logo+BootstrapVue logoЛегко интегрируйте BootstrapVue в свои проекты Nuxt.js с помощью нашего включенного модуля Nuxt.js. При желании Вы можете указать только необходимые компоненты, директивы и/или плагины.
Модуль BootstrapVue Nuxt.jsДокументация BootstrapVue создается с использованием BootstrapVue и генерируется с помощью Nuxt.js
Open Collective logo Поддержка BootstrapVue в Open Collective
Стать спонсором Стать сторонником ПожертвоватьПартнеры
BootstrapVue благодарит наших партнеров
| Значок | Описание | Пример |
|---|---|---|
| глификон глификон-звездочка | Попробуйте | |
| глификон глификон-плюс | Попробуйте | |
| глификон глификон-минус | Попробуйте | |
| глификон глификон-евро | Попробуйте | |
| глификон глификон-евро | Попробуйте | |
| глификон глификон-облако | Попробуйте | |
| глификон глификон-конверт | Попробуйте | |
| глификон глификон-карандаш | Попробуйте | |
| глификон глификон-стекло | Попробуйте | |
| глификон глификон-музыка | Попробуйте | |
| глификон глификон-поиск | Попробуйте | |
| глификон глификон-сердце | Попробуйте | |
| глификон глификон-звезда | Попробуйте | |
| глификон глификон-звезда-пусто | Попробуйте | |
| глификон глификон-пользователь | Попробуйте | |
| глификон глификон-пленка | Попробуйте | |
| глификон глификон-й большой | Попробуйте | |
| глификон глификон-й | Попробуйте | |
| глификон глификон-й-список | Попробуйте | |
| глификон глификон-ок | Попробуйте | |
| глификон глификон-удалить | Попробуйте | |
| глификон глификон-увеличение | Попробуйте | |
| глификон глификон-уменьшить масштаб | Попробуйте | |
| глификон глификон выключен | Попробуйте | |
| глификон глификон-сигнал | Попробуйте | |
| глификон глификон-шестерня | Попробуйте | |
| глификон глификон-мусор | Попробуйте | |
| глификон глификон-дом | Попробуйте | |
| глификон глификон-файл | Попробуйте | |
| глификон глификон-время | Попробуйте | |
| глификон глификон-дорога | Попробуйте | |
| глификон глификон-скачать-альт | Попробуйте | |
| глификон глификон-скачать | Попробуйте | |
| глификон глификон-загрузка | Попробуйте | |
| глификон глификон-входящие | Попробуйте | |
| глификон глификон-игра-круг | Попробуйте | |
| глификон глификон-повтор | Попробуйте | |
| глификон глификон-обновление | Попробуйте | |
| глификон глификон-список-альт | Попробуйте | |
| глификон глификон-замок | Попробуйте | |
| глификон глификон-флаг | Попробуйте | |
| глификон глификон-наушники | Попробуйте | |
| глификон глификон-громкость-выкл | Попробуйте | |
| глификон глификон-уменьшение громкости | Попробуйте | |
| глификон глификон-увеличение громкости | Попробуйте | |
| глификон глификон-qrcode | Попробуйте | |
| глификон глификон-штрих-код | Попробуйте | |
| глификон глификон-метка | Попробуйте | |
| глификон глификон-теги | Попробуйте | |
| глификон глификон-книга | Попробуйте | |
| глификон глификон-закладка | Попробуйте | |
| глификон глификон-принт | Попробуйте | |
| глификон глификон-камера | Попробуйте | |
| глификон глификон-шрифт | Попробуйте | |
| глификон глификон-полужирный | Попробуйте | |
| глификон глификон-курсив | Попробуйте | |
| глификон глификон-текст-высота | Попробуйте | |
| глификон глификон-текст-ширина | Попробуйте | |
| глификон глификон-выравнивание по левому краю | Попробуйте | |
| глификон глификон-выравнивание-центр | Попробуйте | |
| глификон глификон-выравнивание по правому краю | Попробуйте | |
| глификон глификон-выравнивание-выравнивание | Попробуйте | |
| глификон глификон-список | Попробуйте | |
| глификон глификон-отступ-влево | Попробуйте | |
| глификон глификон-отступ вправо | Попробуйте | |
| глификон глификон-facetime-видео | Попробуйте | |
| глификон глификон-изображение | Попробуйте | |
| глификон глификон-карта-маркер | Попробуйте | |
| глификон глификон-настроить | Попробуйте | |
| глификон глификон-оттенок | Попробуйте | |
| глификон глификон-редактировать | Попробуйте | |
| глификон глификон-поделиться | Попробуйте | |
| глификон глификон-чек | Попробуйте | |
| глификон глификон-движение | Попробуйте | |
| глификон глификон-шаг назад | Попробуйте | |
| глификон глификон-быстро-назад | Попробуйте | |
| глификон глификон-назад | Попробуйте | |
| глификон глификон-игра | Попробуйте | |
| глификон глификон-пауза | Попробуйте | |
| глификон глификон-стоп | Попробуйте | |
| глификон глификон-вперед | Попробуйте | |
| глификон глификон-быстрая перемотка вперед | Попробуйте | |
| глификон глификон-шаг вперед | Попробуйте | |
| глификон глификон-выталкивание | Попробуйте | |
| глификон глификон-шеврон-левый | Попробуйте | |
| глификон глификон-шеврон-правый | Попробуйте | |
| глификон глификон-плюс | Попробуйте | |
| глификон глификон-минус | Попробуйте | |
| глификон глификон-удалить-знак | Попробуйте | |
| глификон глификон-ок-знак | Попробуйте | |
| глификон глификон-вопросительный знак | Попробуйте | |
| глификон глификон-информационный знак | Попробуйте | |
| глификон глификон-скриншот | Попробуйте | |
| глификон глификон-удалить-круг | Попробуйте | |
| глификон глификон-ок-круг | Попробуйте | |
| глификон глификон-бан-круг | Попробуйте | |
| глификон глификон-стрелка-влево | Попробуйте | |
| глификон глификон-стрелка-вправо | Попробуйте | |
| глификон глификон-стрелка вверх | Попробуйте | |
| глификон глификон-стрелка вниз | Попробуйте | |
| глификон глификон-доля-альт | Попробуйте | |
| глификон глификон-изменить размер-полный | Попробуйте | |
| глификон глификон-изменить-маленький | Попробуйте | |
| глификон глификон-восклицательный знак | Попробуйте | |
| глификон глификон-подарок | Попробуйте | |
| глификон глификон-лист | Попробуйте | |
| глификон глификон-огонь | Попробуйте | |
| глификон глификон с открытыми глазами | Попробуйте | |
| глификон глификон-закрыть глаза | Попробуйте | |
| глификон глификон-предупреждающий знак | Попробуйте | |
| глификон глификон-плоскость | Попробуйте | |
| глификон глификон-календарь | Попробуйте | |
| глификон глификон-случайный | Попробуйте | |
| глификон глификон-комментарий | Попробуйте | |
| глификон глификон-магнит | Попробуйте | |
| глификон глификон-шеврон вверх | Попробуйте | |
| глификон глификон-шеврон-вниз | Попробуйте | |
| глификон глификон-ретвитнуть | Попробуйте | |
| глификон глификон-корзина | Попробуйте | |
| глификон глификон-папка-закрыть | Попробуйте | |
| глификон глификон-папка-открыть | Попробуйте | |
| глификон глификон-изменение размера-вертикаль | Попробуйте | |
| глификон глификон-изменение размера-горизонтальный | Попробуйте | |
| глификон глификон-жесткий диск | Попробуйте | |
| глификон глификон-рупор | Попробуйте | |
| глификон глификон-колокольчик | Попробуйте | |
| глификон глификон-сертификат | Попробуйте | |
| глификон глификон-большой палец вверх | Попробуйте | |
| глификон глификон-палец вниз | Попробуйте | |
| глификон глификон-правая рука | Попробуйте | |
| глификон глификон-левая рука | Попробуйте | |
| глификон глификон с поднятой рукой | Попробуйте | |
| глификон глификон вниз | Попробуйте | |
| глификон глификон-круг-стрелка-вправо | Попробуйте | |
| глификон глификон-круг-стрелка-влево | Попробуйте | |
| глификон глификон-круг-стрелка вверх | Попробуйте | |
| глификон глификон-круг-стрелка-вниз | Попробуйте | |
| глификон глификон-глобус | Попробуйте | |
| глификон глификон-гаечный ключ | Попробуйте | |
| глификон глификон-задачи | Попробуйте | |
| глификон глификон-фильтр | Попробуйте | |
| глификон глификон-портфель | Попробуйте | |
| глификон глификон-полноэкранный | Попробуйте | |
| глификон глификон-приборная панель | Попробуйте | |
| глификон глификон-скрепка | Попробуйте | |
| глификон глификон-сердце-пусто | Попробуйте | |
| глификон глификон-ссылка | Попробуйте | |
| глификон глификон-телефон | Попробуйте | |
| глификон глификон-канцелярская кнопка | Попробуйте | |
| глификон глификон-доллар США | Попробуйте | |
| глификон глификон-фунт стерлингов | Попробуйте | |
| глификон глификон-сортировка | Попробуйте | |
| глификон глификон-сортировка-по-алфавиту | Попробуйте | |
| глификон глификон-сортировка-по-алфавиту-альт | Попробуйте | |
| глификон глификон-сортировка-по-порядку | Попробуйте | |
| глификон глификон-сортировка-по-порядку-альт | Попробуйте | |
| глификон глификон-сортировка-по-атрибутам | Попробуйте | |
| глификон глификон-сортировка-по-атрибутам-альт | Попробуйте | |
| глификон глификон-неотмеченный | Попробуйте | |
| глификон глификон-развернуть | Попробуйте | |
| глификон глификон-свернуть вниз | Попробуйте | |
| глификон глификон-свернуть | Попробуйте | |
| глификон глификон-логин | Попробуйте | |
| глификон глификон-вспышка | Попробуйте | |
| глификон глификон-выход из системы | Попробуйте | |
| глификон глификон-новое окно | Попробуйте | |
| глификон глификон-запись | Попробуйте | |
| глификон глификон-сохранить | Попробуйте | |
| глификон глификон-открыть | Попробуйте | |
| глификон глификон-сохраненный | Попробуйте | |
| глификон глификон-импорт | Попробуйте | |
| глификон глификон-экспорт | Попробуйте | |
| глификон глификон-отправить | Попробуйте | |
| глификон глификон-дискета | Попробуйте | |
| глификон глификон-дискета-сохранение | Попробуйте | |
| глификон глификон-дискета-удалить | Попробуйте | |
| глификон глификон-дискета-сохранить | Попробуйте | |
| глификон глификон-дискета-открыть | Попробуйте | |
| глификон глификон-кредитная карта | Попробуйте | |
| глификон глификон-перенос | Попробуйте | |
| глификон глификон-столовые приборы | Попробуйте | |
| глификон глификон-заголовок | Попробуйте | |
| глификон глификон сжатый | Попробуйте | |
| глификон глификон-наушники | Попробуйте | |
| глификон глификон-телефон-альт | Попробуйте | |
| глификон глификон-башня | Попробуйте | |
| глификон глификон-статистика | Попробуйте | |
| глификон глификон-SD-видео | Попробуйте | |
| глификон глификон-HD-видео | Попробуйте | |
| глификон глификон-субтитры | Попробуйте | |
| глификон глификон-звук-стерео | Попробуйте | |
| глификон глификон-звук-долби | Попробуйте | |
| глификон глификон-звук-5-1 | Попробуйте | |
| глификон глификон-звук-6-1 | Попробуйте | |
| глификон глификон-звук-7-1 | Попробуйте | |
| глификон глификон-знак авторского права | Попробуйте | |
| глификон глификон-регистрационный знак | Попробуйте | |
| глификон глификон-облако-скачать | Попробуйте | |
| глификон глификон-облако-загрузка | Попробуйте | |
| глификон глификон-дерево-хвойное дерево | Попробуйте | |
| глификон глификон-дерево-лиственное | Попробуйте | |
| глификон глификон-cd | Попробуйте | |
| глификон глификон-сохранить-файл | Попробуйте | |
| глификон глификон-открытый-файл | Попробуйте | |
| глификон глификон повышения уровня | Попробуйте | |
| глификон глификон-копия | Попробуйте | |
| глификон глификон-паста | Попробуйте | |
| глификон глификон-предупреждение | Попробуйте | |
| глификон глификон-эквалайзер | Попробуйте | |
| глификон глификон-король | Попробуйте | |
| глификон глификон-королева | Попробуйте | |
| глификон глификон-пешка | Попробуйте | |
| глификон глификон-епископ | Попробуйте | |
| глификон глификон-рыцарь | Попробуйте | |
| глификон глификон-детская формула | Попробуйте | |
| глификон глификон-палатка | Попробуйте | |
| глификон глификон-доска | Попробуйте | |
| глификон глификон-кровать | Попробуйте | |
| глификон глификон-яблоко | Попробуйте | |
| глификон глификон-стирание | Попробуйте | |
| глификон глификон-песочные часы | Попробуйте | |
| глификон глификон-лампа | Попробуйте | |
| глификон глификон-дубликат | Попробуйте | |
| глификон глификон-копилка | Попробуйте | |
| глификон глификон-ножницы | Попробуйте | |
| глификон глификон-биткойн | Попробуйте | |
| глификон глификон-иена | Попробуйте | |
| глификон глификон-рубль | Попробуйте | |
| глификон глификон-шкала | Попробуйте | |
| глификон глификон-мороженое | Попробуйте | |
| глификон глификон со вкусом леденца на палочке | Попробуйте | |
| глификон глификон-образование | Попробуйте | |
| глификон глификон-вариант-горизонтальный | Попробуйте | |
| глификон глификон-опция-вертикаль | Попробуйте | |
| глификон глификон-меню-гамбургер | Попробуйте | |
| глификон глификон модальное окно | Попробуйте | |
| глификон глификон-масло | Попробуйте | |
| глификон глификон-зерно | Попробуйте | |
| глификон глификон-солнцезащитные очки | Попробуйте | |
| глификон глификон-размер текста | Попробуйте | |
| глификон глификон-текст-цвет | Попробуйте | |
| глификон глификон-текст-фон | Попробуйте | |
| глификон глификон-объект-выравнивание-верх | Попробуйте | |
| глификон глификон-объект-выравнивание-снизу | Попробуйте | |
| глификон глификон-объект-выравнивание-по горизонтали | Попробуйте | |
| глификон глификон-объект-выравнивание-влево | Попробуйте | |
| глификон глификон-объект-выравнивание-вертикаль | Попробуйте | |
| глификон глификон-объект-выравнивание-вправо | Попробуйте | |
| глификон глификон-треугольник справа | Попробуйте | |
| глификон глификон-треугольник-левый | Попробуйте | |
| глификон глификон-треугольник-дно | Попробуйте | |
| глификон глификон-треугольник-вершина | Попробуйте | |
| глификон глификон-консоль | Попробуйте | |
| глификон глификон-верхний индекс | Попробуйте | |
| глификон глификон-индекс | Попробуйте | |
| глификон глификон-меню-слева | Попробуйте | |
| глификон глификон-меню-справа | Попробуйте | |
| глификон глификон-меню-вниз | Попробуйте | |
| глификон глификон-меню-вверх | Попробуйте |
Bootstrap 3 в Liferay 6.
2, да! это возможноBootstrap 3 в Liferay 6.2, да! это возможно
Маркос Кастро
Дата публикации7 лет назад — 81555 Просмотров
Привет, ребята, сегодня я буду говорить на параллельную тему, как заменить Bootstrap 2.3.2 CSS в Liferay 6.2 на новый Bootstrap 3.x , я получил много вопросов по этому поводу, и я помог всем, чем смог, но я думаю, что этот пост и репозиторий GitHub с примером темы может помочь больше, чем некоторые электронные письма.
Прежде всего, я хотел бы сказать, что решение, которое я предлагаю сегодня , является личной работой (не официальной) и только одним из многих способов его достижения, но для меня это более простой способ, потому что мы только изменить тему.
Да, я написал слово « заменить «. Это решение удаляет Bootstrap 2.3.2. и добавьте Bootstrap 3.x (4 в ближайшем будущем). Это не способ поставить Bootstrap 3 поверх Bootstrap 2.
3.2, я не могу рекомендовать такое решение по многим причинам, например: это будет дублировать вес CSS, будет много конфликтов классов или будет очень сложно определить совместимость браузеров в вашем проекте.
Конечно, мы не можем заменить все ссылки на классы Bootstrap 2.3.2 на портале Liferay только при применении вашей темы, но их не так много, чтобы спасти классы, поэтому мы расширим эти старые классы из новых равных классов Bootstrap 3.x. , например: span6 будет работать как col-md-6.
это может звучать сложно, но не беспокойтесь, давайте посмотрим шаг за шагом (или перейдем непосредственно к репозиторию GitHub с примером):
Мы собираемся создать новую тему _styled на основе Boostrap 3.x, поэтому сначала все, вам нужно будет создать новую тему, используя новый SDK на основе gulp или обычный SDK.
Знаете ли вы, где в вашей теме находятся CSS-файлы Bootstrap 2.3.2? Не беспокойтесь, они находятся в каталоге «css/aui», так что давайте работать в этом каталоге.
1º Создайте новый файл aui.css в каталоге « css », затем мы должны удалить ссылки Bootstrap 2.3.2 в этом aui.css, таким образом Bootstrap 2.3.2 будет удален из нашей темы (файлы будут там, но они не будут загружены).
2º Теперь мы собираемся добавить новый Bootstrap, поэтому давайте скопируем файлы «Bootstrap 3.x sass-version» в новый каталог внутри «aui» с именем «bs3» и сослаться на него в aui.css.
Мы можем использовать разные способы получения sass-версии Bootstrap 3.x, загружать напрямую из репозитория Bootstrap-sass GitHub, используя Bower, npm, gem или compass, как вам удобнее.
3º Что ж, мы поменяли местами версии Bootstrap, но все старые классы, которые были удалены/переименованы в Bootstrap 3.x, выглядят не очень хорошо, поэтому их следует создавать как расширение равных классов в Bootstrap 3.x для этого мы будем использовать мой файл CSS с именем «_bs2_extender.
scss», который будет выполнять все основные расширения.
Несколько примеров того, что делает этот файл:
добавит файл под названием «_bs_liferay_fixes.scss», который содержит некоторые настройки.
Теперь мы можем развернуть тему, и мы должны увидеть что-то вроде этого:
Готово! у вас есть новая тема Bootstrap 3.x_styled, которую вы сможете использовать в качестве основы для создания тем Bootstrap 3.x Liferay 6.2.
В файле «_bs2_extender.scss» я расширил классы, которые я считаю минимальными для хорошей работы в Liferay 6.2, но не стесняйтесь удалять или добавлять, даже сотрудничая в репозитории GitHub этой темы.
Я рекомендую использовать эту тему, когда мы хотим использовать обновления Bootstrap 3.x, такие как его сетка или адаптивные средства. Если мы все еще пишем разметку Bootstrap 2.3.2, в этом не будет особого смысла, поэтому подумайте, какую версию Bootstrap вы хотите использовать.