Вступление · Bootstrap v4.6
Посмотреть на GitHub Оригинал
Начните работу с Bootstrap, самой популярной в мире платформой для создания адаптивных сайтов, ориентированных на мобильные устройства, с jsDelivr и начальной страницей шаблона.
Быстрый старт
Хотите быстро добавить Bootstrap в свой проект? Используйте jsDelivr, бесплатный CDN с открытым исходным кодом. Используете менеджер пакетов или Вам нужно скачать исходные файлы? Перейдите на страницу загрузок.
CSS
Скопируйте и вставьте таблицу стилей <link>
в Ваш <head>
перед всеми остальными таблицами стилей, чтобы загрузить наш CSS.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
JS
Многие из наших компонентов требуют использования JavaScript для работы.
Поместите один из следующих <script>
в конце Ваших страниц, прямо перед закрывающим тегом </body>
, чтобы включить их. Сначала должен быть jQuery, затем Popper, а затем наши плагины JavaScript.
Связка
Включите каждый плагин Bootstrap JavaScript в один из двух наших пакетов. И bootstrap.bundle.js
и bootstrap.bundle.min.js
включают Popper для наших всплывающих подсказок и всплывающих окон, но не jQuery. Сначала включите jQuery, а затем пакет Bootstrap JavaScript. Дополнительную информацию о том, что включено в Bootstrap, можно найти в разделе содержимое.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn. jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
Раздельно
Если Вы решите использовать отдельные скрипты, сначала должен быть Popper (если Вы используете всплывающие подсказки или всплывающие окна), а затем наши плагины JavaScript.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
Компоненты
Интересно, какие компоненты явно требуют jQuery, нашего JavaScript и Popper? Щелкните ссылку “Показать компоненты” ниже. Если Вы не уверены в структуре страницы, продолжайте читать, чтобы увидеть пример шаблона страницы.
Показать компоненты, требующие JavaScript- Alerts: Уведомления для отклонений
- Buttons: Кнопки для переключения состояний и функции флажка/радио
- Carousel: Карусель для любого поведения слайдов, элементов управления и индикаторов
- Collapse: Сворачиваемый контент для переключения видимости контента
- Dropdowns: Выпадающие списки для отображения и позиционирования (также требуется Popper.js)
- Modals: Модальные окна для отображения, позиционирования и прокрутки
- Navbar: Панель навигации для расширения нашего плагина Сворачивания контента для реализации адаптивного поведения
- Scrollspy: Слежение прокрутки для поведения прокрутки и обновлений навигации
- Tooltips и popovers: Всплывающие подсказки и Всплывающие окна для отображения и позиционирования (также требуется Popper.js)
Стартовый шаблон
Убедитесь, что Ваши страницы настроены в соответствии с последними стандартами дизайна и разработки.
<!doctype html> <html lang="ru"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <title>Привет, мир!</title> </head> <body> <h2>Привет, мир!</h2> <!-- Дополнительный JavaScript; выберите один из двух! --> <!-- Вариант 1: пакет jQuery и Bootstrap (включает Popper) --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> <!-- Вариант 2: Отдельные JS для Popper и Bootstrap --> <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script> --> </body> </html>
Это все, что Вам нужно для выполнения общих требований к странице. Посетите Документацию по макету или наши официальные примеры, чтобы начать размещение содержимого и компонентов Вашего сайта.
Глобально важно
Bootstrap использует несколько важных глобальных стилей и настроек, о которых Вам необходимо знать при его использовании, и все они почти исключительно нацелены на
HTML5 doctype
Bootstrap требует использования документа типа HTML5. Без него Вы увидите несколько забавных неполных стилей, но его включение не должно вызывать каких-либо серьезных сбоев.
<!doctype html> <html lang="ru"> ... </html>
Адаптивный метатег
Bootstrap разработан как сначала мобильный, стратегия, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости с помощью медиа-запросов CSS. Чтобы обеспечить правильный рендеринг и сенсорное масштабирование для всех устройств, <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Вы можете увидеть пример этого в действии в стартовом шаблоне.
Box-sizing
Для более простого изменения размера в CSS мы переключаем глобальное значение box-sizing
с content-box
на border-box
. Это гарантирует, что padding
не влияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторым сторонним программным обеспечением, таким как Google Maps или Google Custom Search Engine.
В редких случаях Вам нужно отменить его, используйте что-то вроде следующего:
.selector-for-some-widget { box-sizing: content-box; }
WiВ приведенном выше фрагменте все вложенные элементы, включая сгенерированный контент с помощью ::before
и ::after
, будут наследовать указанный box-sizing
для этого .selector-for-some-widget
.
Узнайте больше о блочной модели и размерах на сайте CSS Tricks.
Reboot
Для улучшения кроссбраузерности рендеринга мы используем Перезагрузку, чтобы исправить несоответствия между браузерами и устройствами, обеспечивая при этом несколько более самоуверенный сброс общих элементов HTML.
Сообщество
Будьте в курсе развития Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов.
- Вступите в группу @getbootstrap_ru в Телеграм.
- Прочтите и подпишитесь на Официальный блог Bootstrap.
- Присоединяйтесь к официальной комнате Slack.
- Общайтесь с другими Бутстрапперами в IRC. На сервере
irc.libera.chat
, в канале#bootstrap
. - Справку по реализации можно найти на сайте Stack Overflow (с тегом
bootstrap-4
). - Разработчикам следует использовать ключевое слово
bootstrap
в пакетах, которые изменяют или расширяют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной доступности.
Вы также можете следить за @getbootstrap в Twitter, чтобы следить за последними сплетнями и потрясающими музыкальными клипами.
CSP и встроенные SVG
Некоторые компоненты Bootstrap включают встроенные SVG в наш CSS для единообразного и простого стиля компонентов в разных браузерах и на разных устройствах. Для организаций с более строгими конфигурациями CSP, мы задокументировали все экземпляры наших встроенных SVG (все из которых применяются через background-image
), поэтому Вы можете более тщательно изучить свои варианты.
- Close button (используется в предупреждениях и модальных окнах)
- Custom checkboxes and radio buttons
- Form switches
- Form validation icons
- Custom select menus
- Carousel controls
- Navbar toggle buttons
Основываясь на обсуждениях сообщества, некоторые варианты решения этой проблемы в Вашей собственной кодовой базе включают замену URL-адресов локально размещенными ресурсами, удаление изображений и использование встроенных изображений ( невозможно во всех компонентах) и изменение вашего CSP. Наша рекомендация — внимательно изучить свои собственные политики безопасности и при необходимости выбрать лучший путь для дальнейшего развития.
e0ne’s comments | jQuery из исходников
jQuery — достаточно мощный и удобный javascript framework. Последняя версия 1.4.4 имеет размер 179KB для разработчиков и всего-лишь 26KB для использования в production. 26 килобайт кода не много, но в таком сжатом формате разобраться практически не возможно даже с помощью дебаггера. В неупакованный версии разобраться проще, в дебаггере всё выглядит хорошо, но всё-равно все тонкости работы и устройства jQuery проходят мимо нас. В 7180-ти строках javascript-кода даже с помощью средств IDE и не менее мощной комбинации Ctrl+F найти нужный кусок кода не так уж и просто.Что же делать тем, кто хочет разобраться к том, как работает jQuery? Ответ достаточно простой: скачать исходники. Звучит странно и непонятно. В голове возникает вопрос: какие могут быть исходники у библиотеки, написанной на javascript? Под фразой “исходники jQuery” я подразумеваю то, что лежит у них в репозитории http://github. com/jquery/jquery.
Сразу уточню, что описываю я бранч версии 1.4.4. В текуoем master branch (trunk), в котором идёт работа над версией 1.5, переработан модуль ajax, из-за чего все, что к нему относится, вынесено в каталог /src/ajax. Кроме того, разработчики настоятельно не рекомендуют использовать последнюю версию из репозитария для production использования. На момент написания этого поста последняя версия — 1.5pre.
Итак, вернёмся к нашим баранам исходникам. В корне у нас есть следующие 4 каталога, файлы лицензий и файлы для build-систем (make и ant):
- build — файлы, необходимые для сборки;
- speed — тесты на производительность (benchmarks): необходимы для того, чтобы измерить производительность текущей версии, по сравнению со собранной из исходников; если вы не вносили никаких изменений — время выполнения обоих скриптов будет одинаковым;
- test — unit tests (модульные тесты), написанные с помощью qunit;
- src — сами исходники jQuery.
Для сборки необходимы Java 1.6.0 и выше и NodeJS, если вы будете собирать из master branch. Сборка выполняется одним из двух способов: с помощью ant, которому нужно передать в качестве параметра файл build.xml, либо с помощью выполнения команды make, которая доступна во всех *nix-системах. После сборки файлы jquery.js и jquery.min.js будут находится в папке /dist.
Какие же есть преимущества у использования такой версии jQuery? На мой взгляд, стоит выделить такие:
- В исходниках значительно проще разобраться, чем в одном собранном файле. Здесь каждый модуль расположен в отдельном файле (css.js, event.js и т.д.), что даёт возможность быстро и легко узнать как это всё работает. Этот способ и натолкнул меня на этот подход к использованию jQuery и написанию этого поста.
- Есть возможность отключить ненужные/не используемые модули для уменьшения размера итогового файла. Этот подход применяется при скачивании http://jqueryui. com/download с нужными компонентами.
- Можно вносить необходимые для проекта изменения и с помощью тестов убедиться что всё работает. Эти изменения также можно будет предлагать разработчикам jQuery в виде патчей.
- При использовании последней версии вы становитесь бета-тестерами и вносите свой, пусть и небольшой, но всё же вклад в развитие проектов :).
По своему опыту могу сказать, что даже для тестовых приложений использование самых последних исходников приносит достаточно много проблем: иногда это просто не собирается (http://forum.jquery.com/topic/can-t-build-latest-jquery-from-the-git-repository, могут не работать многие плагины, особенно с учетом переработанного в версии 1.5pre модуля ajax. Но при использовании бранча с последнего стабильного релиза, inho, плюсов значительно больше.
Поддержка jQuery — поддержка и распространение
Библиотека пользовательского интерфейса Kendo основана на jQuery, и все пакеты пользовательского интерфейса Kendo включают соответствующую уменьшенную библиотеку jQuery в своих каталогах js
.
Чтобы сценарии пользовательского интерфейса Kendo работали должным образом, включите ссылку на библиотеку jQuery в документ перед сценариями.
Текущая официальная версия пользовательского интерфейса Kendo требует jQuery версии 1.12.4. Обычно каждая новая выпущенная версия jQuery вносит критические изменения и несовместима с существующими версиями пользовательского интерфейса Kendo. В таких случаях используйте предыдущую версию jQuery, пока не будет выпущена следующая официальная версия пользовательского интерфейса Kendo, которая решает проблему. Обычно версия jQuery, поставляемая с пакетами обновлений пользовательского интерфейса Kendo, не изменяется, но обновляется в основных выпусках.
В следующей таблице приведен список версий jQuery, совместимых с основными выпусками Kendo UI и соответствующими пакетами обновлений.
Основные выпуски | версия jQuery | Комментарии |
---|---|---|
Кендо UI 2023. 1.117 (R1 2023) | 1.12.4 | Также совместим с 1.10.x, 2.2.x и 3.6.1 |
Кендо UI 2022.3.913 (R3 2022) | 1.12.4 | Также совместим с 1.10.x, 2.2.x и 3.6.1 |
Кендо UI 2022.2.510 (R2 2022) | 1.12.4 | Также совместим с 1.10.x, 2.2.x и 3.6.0 |
Кендо UI 2022.1.119 (R1 2022) | 1.12.4 | Также совместим с 1.10.x, 2.2.x и 3.6.0 |
Кендо UI 2021.3.914 (R3 2021) | 1.12.4 | Также совместим с 1.10.x, 2.2.x и 3.6.0 |
Кендо UI 2021.2.511 (R2 2021) | 1.12.4 | Также совместим с 1.10.x, 2.2.x и 3.6.0 |
Кендо UI 2021.1.119 (R1 2021) | 1. 12.4 | Также совместим с 1.10.x, 2.2.x и 3.5.1 |
Кендо UI 2020.3.915 (R3 2020) | 1.12.4 | Также совместим с 1.10.x, 2.2.x и 3.5.1 |
Кендо UI 2020.2.513 (R2 2020) | 1.12.4 | Также совместим с 1.10.x, 2.2.x и 3.5.1 |
Пользовательский интерфейс кендо 2020.1.114 (R1 2020) | 1.12.4 | Также совместим с 1.10.x, 2.2.x и 3.4.1 |
Пользовательский интерфейс кендо 2019.3.917 (R3 2019) | 1.12.4 | Также совместим с 1.10.x, 2.2.x и 3.4.1 |
Пользовательский интерфейс Кендо 2019.2.514 (R2 2019) | 1.12.4 | Также совместим с 1.10.x, 2.2.x и 3.4.1 |
Кендо UI 2019. 1.115 (R1 2019) | 1.12.4 | Также совместим с 1.10.x, 2.2.x и 3.3.1 |
Кендо UI 2018.3.911 (R3 2018) | 1.12.4 | Также совместим с 1.10.x, 2.2.x и 3.3.1 |
Кендо UI 2018.2.516 (R2 2018) | 1.12.4 | Также совместим с 1.10.x, 2.2.x и 3.3.1 |
Кендо UI 2018.1.117 (R1 2018) | 1.12.4 | Также совместим с 1.10.x, 2.2.x и 3.1.1 |
Кендо UI 2017.3.913 (R3 2017) | 1.12.3 | Также совместим с 1.10.x, 2.2.x и 3.1.1 |
Кендо UI 2017.2.504 (R2 2017) | 1.12.3 | Также совместим с 1.10.x, 2.2.x и 3.1.1 |
Кендо UI 2017.1.118 (R1 2017) | 1. 12.3 | Также совместим с 1.10.x, 2.2.x и 3.1.1 |
Пользовательский интерфейс Кендо 2016.3.1118 (R3 2016 SP2) | 1.12.3 | Также совместим с 1.10.x, 2.2.x и 3.1.1 |
Кендо UI 2016.3.914 (R3 2016) | 1.12.3 | Также совместим с 1.10.x и 2.2.x |
Кендо UI 2016.2.504 (R2 2016) | 1.12.3 | Также совместим с 1.10.x и 2.2.x |
Пользовательский интерфейс кендо 2016.1.112 (1 кв. 2016 г.) | 1.9.1 | Также совместим с 1.10.x и 2.1.x |
Кендо UI 2015.3.930 (3 кв. 2015 г.) | 1.9.1 | Также совместим с 1.10.x и 2.1.x |
Пользовательский интерфейс кендо 2015.2.624 (второй квартал 2015 г. ) | 1.9.1 | Также совместим с 1.10.x и 2.1.x |
Кендо UI 2015.1.318 (1 кв. 2015 г.) | 1.9.1 | Также совместим с 1.10.x и 2.1.x |
Пользовательский интерфейс кендо 2014.3.1119 (3 кв. 2014 г.) | 1.9.1 | Также совместим с 1.10.x и 2.1.x |
Пользовательский интерфейс кендо 2014.2.716 (второй квартал 2014 г.) | 1.9.1 | Также совместим с 1.10.x и 2.1.x |
Пользовательский интерфейс кендо 2014.1.318 (1 кв. 2014 г.) | 1.9.1 | Также совместим с 1.10.x и 2.0.x |
Пользовательский интерфейс кендо 2013.3.1119 (3 кв. 2013 г.) | 1.9.1 | Также совместим с 1.10.x и 2. 0.x |
Кендо UI 2013.2.716 (второй квартал 2013 г.) | 1.9.1 | — |
Кендо UI 2013.1.319 (1 кв. 2013 г.) | 1.9.1 | — |
Пользовательский интерфейс кендо 2012.3.1114 (3 кв. 2012 г.) | 1.8.2 | — |
Пользовательский интерфейс кендо 2012.2.710 (второй квартал 2012 г.) | 1.7.1 | — |
Кендо UI 2012.1.322 (1 кв. 2012 г.) | 1.7.1 | — |
Кендо UI 2011.3.1129 (3 кв. 2011 г.) | 1.7.1 | — |
Иногда для устаревшего веб-приложения может потребоваться более ранняя версия jQuery, с которой пользовательский интерфейс Kendo несовместим. В таких случаях используйте последнюю версию jQuery вместе с подключаемым модулем jQuery Migrate. Он восстанавливает устаревшие функции jQuery и обеспечивает необходимую обратную совместимость.
- Поддержка веб-браузера Kendo UI
- Поддержка экспорта PDF и Excel с помощью Kendo UI
- Поддержка операционной системы Kendo UI
- Политика поддержки более ранних версий от Kendo UI
Когда будет обновлена версия jQuery до последней в SSRS с 3.1.1 до 3.6.0
Балагангадхар Гурабатини (INFOSYS LIMITED) 1 Точка репутации
2022-07-28T02:55:06.643+00:00
мы использовали последнюю версию Microsoft.ReportingServices.ReportViewerControl.WebForms 150.1484.0 в нашей CRM, но версия jQuery еще не обновлена. все же версия, которую мы видим, это 3.1.1.
Когда jQuery будет обновлен до последней версии 3.6.0, поскольку в версии 3.1.1 есть уязвимости безопасности — https://snyk.io/vuln/npm:[email protected]
Службы отчетов SQL Server Службы отчетов SQL ServerТехнология SQL Server, поддерживающая создание, управление и доставку как традиционных бумажных отчетов, так и интерактивных веб-отчетов.
2345 вопросов
Войдите, чтобы подписаться
0 комментариев Без комментариев0 {count} голосов
Войдите, чтобы комментировать Сортировать по: Самый полезный
Самые полезные Самые новые Самые старые
АнияТанг-MSFT 5391 Очки репутации • Microsoft Vendor
2022-07-28T06:01:04.993+00:00
Привет @Balagangadhar Gourabathini (INFOSYS LIMITED)
В соответствии с примечаниями к выпуску элементов управления средства просмотра отчетов — службы отчетов SQL Server (SSRS) | Microsoft Learn, в настоящее время вы используете Microsoft.ReportingServices.ReportViewerControl.WebForms версии 150.1484.0, не помеченной как обновление версии JQuery 3.6.0. При необходимости вы можете обновиться до версии JQuery 3.6.0 самостоятельно, вы можете перейти по этой ссылке: https://blog.jquery.com/2021/03/02/jquery-3-6-0-released.