Как выровнять модальное окно bootstrap по центру
Обновлено: 09.05.2024
Используйте модальный плагин Bootstrap для добавления диалогов на ваш сайт для лайтбоксов, уведомлений пользователей или полностью настраиваемого контента.
Как это работает
До того как начать работу с модальными компонентами Bootstrap, ознакомьтесь со следующей информацией, т.к. параметры недавно изменились.
- Модальные окна сделаны на HTML, CSS и JavaScript. Они располагаются поверх всего документа и блокируют прокрутку тела документа , вместо него прокручивая модальные окна
- Клик вне модального элемента автоматически закрывает его.
- Bootstrap позволяет активировать лишь один модальный элемент за раз. Вложенные модальные элементы не поддерживаются, т.к. мы думаем, что они принесли бы неудобства.
- Модальные элементы имеют position: fixed , что может вызвать иногда их частичную отрисовку. Мы рекомендуем размещать модальные элементы на самом верху страницы, когда возможно, для избегания сбоев и влияния других элементов на корректную работу модальных элементов .modal .
- Опять же – из-за position: fixed есть некоторые сложности при использовании их на мобильных устройствах. Смотри документацию поддержки в браузерах.
- Из-за семантики HTML5 атрибут autofocus не работает с модальными элементами Bootstrap. Чтобы добиться такого же эффекта, используйте собственный JavaScript:
Далее – использование и примеры.
Примеры
Модальные компоненты
Ниже – пример статичного модального компонента (это значит, что его position и display преодолены). В примере есть заголовок модального компонента, тело (требуется для padding ), футер модального компонента (по желанию). Мы советуем включать заголовки с отклонением действия, когда возможно, или обеспечить другой явный путь отклонить действие.
Modal title
Modal body text goes here.
Онлайн демо
Изменяйте рабочий пример модального элемента по клику на кнопку ниже. Окно сползет вниз и возникнет в верху страницы.
Modal title
Woohoo, you're reading this text in a modal!
Статический фон
Modal title
I will not close if you click outside me. Don't even try to press escape key.
Прокрутка длинного содержимого
Когда модальные элементы становятся слишком длинными для зоны видимости девайса, они прокручиваются независимо от самой страницы. Попробуйте пример ниже.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
How can you position the modal vertically in the center when you don't know the exact height of the modal?
Is it possible to have the modal centered and have overflow:auto in the modal-body, but only if the modal exceeds the screen height?
I have tried using this:
This gives me the result I need when the content is much larger than vertical screen size, but for small modal contents it's pretty much unusable.
34 Answers 34
And adjust a little bit .fade class to make sure it appears out of the top border of window, instead of center
I was actually overriding this by mistake, thanks for pointing out out it actually works behind the scenes.
I clarify that this does not work very well on Mobile. Because the definition ":after" having a height of 100% and can automatically move the modal to down of the page. I just solved declaring .modal
Absolutely great, but I would recommend using it only above 768px and leave default setting on mobile. Top position is best for modals when the screen height is small. I've also adjusted an animation to make it appear from the center, here the working example if anyone needs it: codepen.io/anon/pen/zGBpNq
This solution shift modal window to right for 2px, cause :before element. But this can be solved by add same code for :after
1. How can you position the modal vertically in the center when you don't know the exact height of the modal?
To absolute center the Bootstrap 3 Modal without declaring a height, you will first need to overwrite the Bootstrap CSS by adding this to your style sheet:
This will position the modal-dialogs top-left corner in the center of the window.
We have to add this media query or else the modal margin-left is wrong on small devices:
Now we will need to adjust its position with JavaScript. To do that we give the element a negative top and left margin equal to half of its height and width. In this example we will be using jQuery since it is available with Bootstrap.
Notice the negative margin-right? This removes the space added by inline-block. That space causes the modal to jump to the bottom of the page @media width < 768px.
2. Is it possible to have the modal centered and have overflow:auto in the modal-body, but only if the modal exceeds the screen height?
This is possible by giving the modal-body an overflow-y:auto and a max-height. This takes a bit more work to get it working properly. Start with adding this to your style sheet:
We will use jQuery again to get the window height and set the max-height of the modal-content first. Then we have to set the max-height of the modal-body, by subtracting the modal-content with the modal-header and modal-footer:
Мой первый пост.
Центрирование блока относительно другого блока относительно часто-попадающаяся задача, это очередное ее решение. Для меня оно стало самым универсальным и покрывающим все кейсы, с которыми я когда-либо сталкивался.
Формулировка
Центрировать модальное окно по горизонтали и вертикали.
- Габариты модалки могут быть указаны в любых единицах измерения. Или же могут быть не указаны вовсе.
- Отзывчивость. При ресайзе окна, модалка подстраивается под текущий размер.
- Если модалка сверстана так, что у нее еcть min-height/min-width, то при ресайзе окна до меньших размеров должен появляться скролл.
- IE 9+.
- Позиционирование должны быть реализовано на CSS, без применения JS.
Работает прекрасно, нареканий нет. Но нам такой способ не подходит, ибо мы не хотим зависеть от размеров модального окна.
Первый способ, который удовлетворяет всем перечисленным требованиям я увидел у Jabher. Речь идет об использовании свойства transform и его значения translate вместо margin. Вот как это работает:
Магия! Теперь мы не зависим от габаритов .modal_container. Все потому что translate отталкивается от размеров элемента, к которому применятся свойство. Напомню, что процентные значения свойства margin будут вычисляться относительно размеров родителя, что нам явно не подходит.
Теперь о минусах. Используя свойство transform, мы столкнемся с субпиксельным рендерингом. Проще говоря, контент при ресайзе начнет замыливаться, результат выглядит скверно, особенно это заметно при рендере текста и тонких линий, вроде однопиксельных бордеров. Я не смог найти решений этой проблемы, если у вас они есть — пожалуйста, поделитесь в комментариях.
Тадаам
Не так давно я нашел изумительный по своей простоте способ. На помощь спешат инлайн блоки. Их легко центрировать по-горизонтали, навесив text-align: center на родителя. Немного подумав, я вспомнил про замечательное свойство vertical-align. Как оно работает? Если этому свойству задать значение middle, то элементы с этим свойством будут центрироваться по-вертикали друг относительно друга. А это значит, что помимо элемента .modal, в .fixed-overlay должен быть еще кто-то, кто поможет нашей модалке встать по-центру окна. Высота этого кого-то должна быть равна высоте .fixed-overlay. На роль этого помощника напрашивается псевдоэлемент:
Используйте плагин модального окна Bootstrap для JavaScript, чтобы добавить на свой сайт диалоговые окна для лайтбоксов, уведомлений пользователей или полностью настраиваемого контента.
Как это устроено
Прежде чем приступить к работе с модальным компонентом Bootstrap, обязательно прочтите следующее, поскольку параметры нашего меню недавно изменились.
- Модальные окна создаются с помощью HTML, CSS и JavaScript. Они располагаются поверх всего остального в документе и удаляют прокрутку из , так что вместо этого прокручивается модальное содержимое.
- Клик по модальному «фону» автоматически закрывает модальный.
- Bootstrap поддерживает только одно модальное окно за раз. Вложенные модальные окна не поддерживаются, поскольку мы считаем, что они неудобны для пользователей.
- В модальных окнах используется position: fixed , что иногда может быть немного специфичным при его рендеринге. По возможности размещайте модальный HTML-код на верхнем уровне, чтобы избежать потенциального вмешательства со стороны других элементов. Вы, вероятно, столкнетесь с проблемами при вложении .modal в другой фиксированный элемент.
- Еще раз, из-за position: fixed есть некоторые предостережения при использовании модальных окон на мобильных устройствах. См. нашу документацию по поддержке браузеров для получения дополнительной информации.
- Из-за того, как HTML5 определяет свою семантику, атрибут HTML autofocus не действует в Bootstrap. модальные окна. Чтобы добиться того же эффекта, используйте собственный JavaScript:
Эффект анимации этого компонента зависит от медиазапроса prefers-reduced-motion . См. раздел с уменьшенным движением в нашей документации по специальным возможностям.
Продолжайте читать, чтобы увидеть демонстрации и инструкции по использованию.
Примеры
Модальные компоненты
Ниже приведен пример статического модального окна (это означает, что его position и display были переопределены). Включены модальный заголовок, модальное тело (требуется для padding ) и модальный нижний колонтитул (необязательно). Мы просим вас по возможности включать модальные заголовки с действиями по отклонению или предоставить другое явное действие по отклонению.
Заголовок модального окна
Здесь идет основной текст модального окна
Живая демонстрация
Переключите рабочую модальную демонстрацию, нажав кнопку ниже. Он будет скользить вниз и исчезать из верхней части страницы.
Заголовок модального окна
Уууу, вы читаете этот текст в модальном!
Статический фон
Заголовок модального окна
Я не закроюсь, если ты щелкнешь вне меня. Даже не пытайтесь нажимать клавишу выхода.
Прокрутка длинного контента
Когда модальные окна становятся слишком длинными для области просмотра или устройства пользователя, они прокручиваются независимо от самой страницы. Попробуйте демонстрацию ниже, чтобы понять, что мы имеем в виду.
Заголовок модального окна
Это некий заполнитель, показывающий поведение при прокрутке модальных окон. Вместо того, чтобы повторять модальный текст, мы используем встроенный стиль, устанавливающий минимальную высоту, тем самым увеличивая длину всего модального окна и демонстрируя прокрутку переполнения. Когда содержимое становится длиннее, чем высота области просмотра, при прокрутке модальное окно перемещается по мере необходимости.
Вы также можете создать прокручиваемое модальное окно, которое позволяет прокручивать модальное тело, добавляя .modal-dialog-scrollable к .modal-dialog .
Заголовок модального окна
Это некий заполнитель, показывающий поведение при прокрутке модальных окон. Мы используем повторяющиеся разрывы строк, чтобы продемонстрировать, как контент может превышать минимальную внутреннюю высоту, тем самым показывая внутреннюю прокрутку. Когда содержимое становится длиннее, чем предопределенная максимальная высота модального окна, содержимое будет обрезано и прокручивается внутри модального окна.
Это содержимое должно появиться внизу после прокрутки.
Центрование по вертикали
Добавьте .modal-dialog-centered к .modal-dialog для вертикального центрирования модального окна.
Заголовок модального окна
This is a vertically centered modal.
Заголовок модального окна
Это некий заполнитель для отображения модального окна с вертикальным центрированием. Мы добавили здесь дополнительную копию, чтобы показать, как работает вертикальное центрирование модального окна в сочетании с прокручиваемыми модальными окнами. Мы также используем несколько повторяющихся разрывов строк, чтобы быстро увеличить высоту содержимого, тем самым вызывая прокрутку. Когда содержимое становится длиннее, чем предопределенная максимальная высота модального окна, содержимое будет обрезано и прокручивается внутри модального окна.
Всплывающие подсказки и всплывающие окна
Всплывающие подсказки и всплывающие подсказки могут быть помещены в модальные окна по мере необходимости. Когда модальные окна закрываются, любые всплывающие подсказки и всплывающие окна также автоматически закрываются.
Заголовок модального окна
Всплывающие окна в модальном окне
Эта кнопка вызывает всплывающее окно при нажатии.
Всплывающие подсказки в модальном окне
Эта ссылка и эта ссылка имеют всплывающие подсказки при наведении курсора.
Использование сетки
Используйте сеточную систему Bootstrap в модальном окне, вложив .container-fluid в .modal-body . Затем используйте обычные классы системы сетки, как и везде.
Сетки в модальных окнах
Изменяющееся модальное содержимое
У Вас есть несколько кнопок, которые запускают одно и то же модальное окно с немного разным содержимым? Используйте event.relatedTarget и HTML data-* атрибуты, чтобы изменять содержимое модального окна в зависимости от какая кнопка была нажата.
Ниже представлена живая демонстрация, за которой следуют примеры HTML и JavaScript. Для получения дополнительной информации прочтите документацию по модальным событиям для получения подробной информации о relatedTarget .
Открыть модальное окно для @mdo Открыть модальное окно для @fat Открыть модальное окно для @getbootstrap
Переключение между модальными окнами
Модалка 1
Модалка 2
Изменение анимации
Переменная $modal-fade-transform определяет состояние преобразования .modal-dialog перед модальной плавной анимацией, переменная $modal-show-transform определяет преобразование .modal-dialog в конец модальной плавной анимации.
Если Вам нужна, например, анимация с увеличением, Вы можете установить $modal-fade-transform: scale(.8) .
Удаление анимации
Для модальных окон, которые просто появляются, а не исчезают при просмотре, удалите класс .fade из Вашей модальной разметки.
Динамические высоты
Если высота модального окна изменяется, пока он открыт, Вы должны вызвать myModal.handleUpdate() , чтобы скорректировать положение модального окна в случае появления полосы прокрутки.
Доступность
Не забудьте добавить aria-labelledby=". " , ссылаясь на Заголовок модального окна, в .modal . Кроме того, Вы можете дать описание Вашего модального диалога с помощью aria-describedby в .modal . Обратите внимание, что Вам не нужно добавлять role="dialog" , поскольку мы уже добавляем его через JavaScript..
Встраивание видео с YouTube
Встраивание видео YouTube в модальные окна требует дополнительного JavaScript не в Bootstrap для автоматической остановки воспроизведения и т.д. См. этот полезный пост о переполнении стека для получения дополнительной информации.
Дополнительные размеры
Модальные окна имеют три необязательных размера, доступных через классы модификаторов, которые помещаются в .modal-dialog . Эти размеры действуют в определенных контрольных точках, чтобы избежать горизонтальных полос прокрутки на более узких окнах просмотра.
| Размер | Класс | Максимальная ширина модального окна |
|---|---|---|
| Маленькое | .modal-sm | 300px |
| По умочланию | нет | 500px |
| Большое | .modal-lg | 800px |
| Очень большое | .modal-xl | 1140px |
Наш модальный класс по умолчанию без модификатора представляет собой модальное окно «среднего» размера.
Очень большое модальное окно
Большое модальное окно
Маленькое модальное окно
Полноэкранное модальное окно
Другое переопределение - это возможность вывести модальное окно, охватывающее область просмотра пользователя, доступное через классы модификаторов, которые помещаются в .modal-dialog .
| Класс | Доступность |
|---|---|
| .modal-fullscreen | Всегда |
| .modal-fullscreen-sm-down | Меньше 576px |
| .modal-fullscreen-md-down | Меньше 768px |
| .modal-fullscreen-lg-down | Меньше 992px |
| .modal-fullscreen-xl-down | Меньше 1200px |
| .modal-fullscreen-xxl-down | Меньше 1400px |
Полноэкранный Полноэкранный меньше sm Полноэкранный меньше md Полноэкранный меньше lg Полноэкранный меньше xl Полноэкранный меньше xxl
Полноэкранное модальное окно
Полноэкранный меньше sm
Полноэкранный меньше md
Полноэкранный меньше lg
Полноэкранный меньше xl
Полноэкранный меньше xxl
Переменные
Адаптивные полноэкранные модальные окна генерируются с помощью карты $breakpoints и цикла в scss/_modal.scss .
Использование
Модальный плагин переключает ваш скрытый контент по запросу с помощью атрибутов данных или JavaScript. Он также переопределяет поведение прокрутки по умолчанию и генерирует .modal-backdrop , чтобы предоставить область клика для отклонения отображаемых модальных окон при щелчке вне модального окна.
Через атрибуты данных
Переключение
Отклонение
Отклонение может быть достигнуто с помощью атрибута data на кнопке внутри modal, как показано ниже:
или на кнопке за пределами modal с помощью data-bs-target , как показано ниже:
Хотя поддерживаются оба способа отклонения модального окна, имейте в виду, что удаление модального окна извне не соответствует шаблону проектирования модального диалога WAI-ARIA. Делайте это на свой страх и риск.
Через JavaScript
Создайте модальное окно с одной строкой JavaScript:
Параметры
Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-bs- , как в data-bs-backdrop="" .
| Наименование | Тип | По умолчанию | Описание |
|---|---|---|---|
| backdrop | boolean or the string 'static' | true | Включает элемент модального фона. В качестве альтернативы укажите static для фона, который не закрывает модальное окно при нажатии. |
| keyboard | boolean | true | Закрывает модальное окно при нажатии клавиши выхода. |
| focus | boolean | true | При инициализации фокусируется на модальном окне. |
Методы
Асинхронные методы и переходы
Все методы API асинхронны и запускают переход. Они возвращаются к вызывающей стороне, как только переход начинается, но до его завершения. Кроме того, вызов метода переходного компонента будет проигнорирован.
Passing options
Активирует Ваш контент как модальное окно. Принимает необязательные параметры object .
toggle
Вручную переключает модальное окно. Возврат к вызывающей стороне до того, как модальное окно было фактически показано или скрыто (т.е. до того, как произойдет событие shown.bs.modal или hidden.bs.modal ).
Открывает модальное окно вручную. Возврат к вызывающей стороне до фактического отображения модального окна (т.е. до того, как произойдет событие shown.bs.modal ).
Also, you can pass a DOM element as an argument that can be received in the modal events (as the relatedTarget property).
Скрывает модальное окно вручную. Возврат к вызывающей стороне до того, как модальное окно было фактически скрыто (т.е. до того, как произойдет событие hidden.bs.modal ).
handleUpdate
Вручную скорректируйте положение модального окна, если высота модального окна изменяется, пока он открыт (то есть в случае появления полосы прокрутки).
dispose
Уничтожает элемент модальное окно. (Удаляет сохраненные данные в элементе DOM)
getInstance
Статический метод, позволяющий получить модальный экземпляр, связанный с элементом DOM.
getOrCreateInstance
Статический метод, который позволяет вам получить модальный экземпляр, связанный с элементом DOM, или создать новый, если он не был инициализирован.
События
Модальный класс Bootstrap предоставляет несколько событий для подключения к модальным функциям. Все модальные события запускаются в самом модальном окне (то есть в ).
Используйте модальный плагин Bootstrap для добавления диалогов на ваш сайт для лайтбоксов, уведомлений пользователей или полностью настраиваемого контента.
Как это работает
До того как начать работу с модальными компонентами Bootstrap, ознакомьтесь со следующей информацией, т.к. параметры недавно изменились.
- Модальные окна сделаны на HTML, CSS и JavaScript. Они располагаются поверх всего документа и блокируют прокрутку тела документа , вместо него прокручивая модальные окна
- Клик вне модального элемента автоматически закрывает его.
- Bootstrap позволяет активировать лишь один модальный элемент за раз. Вложенные модальные элементы не поддерживаются, т.к. мы думаем, что они принесли бы неудобства.
- Модальные элементы имеют position: fixed , что может вызвать иногда их частичную отрисовку. Мы рекомендуем размещать модальные элементы на самом верху страницы, когда возможно, для избегания сбоев и влияния других элементов на корректную работу модальных элементов .modal .
- Опять же – из-за position: fixed есть некоторые сложности при использовании их на мобильных устройствах. Смотри документацию поддержки в браузерах.
- Из-за семантики HTML5 атрибут autofocus не работает с модальными элементами Bootstrap. Чтобы добиться такого же эффекта, используйте собственный JavaScript:
Далее – использование и примеры.
Примеры
Модальные компоненты
Ниже – пример статичного модального компонента (это значит, что его position и display преодолены). В примере есть заголовок модального компонента, тело (требуется для padding ), футер модального компонента (по желанию). Мы советуем включать заголовки с отклонением действия, когда возможно, или обеспечить другой явный путь отклонить действие.
Modal title
Modal body text goes here.
Онлайн демо
Изменяйте рабочий пример модального элемента по клику на кнопку ниже. Окно сползет вниз и возникнет в верху страницы.
Modal title
Woohoo, you're reading this text in a modal!
Статический фон
Modal title
I will not close if you click outside me. Don't even try to press escape key.
Прокрутка длинного содержимого
Когда модальные элементы становятся слишком длинными для зоны видимости девайса, они прокручиваются независимо от самой страницы. Попробуйте пример ниже.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Читайте также: