Bootstrap google cdn: Introduction

Содержание

Введение. Начало работы · Bootstrap. Версия v4.1.3

Начните работу с Bootstrap, самым популярным в мире фреймворком для создания быстродействующих мобильных сайтов с загрузочным CDN и шаблонами стартовой страницы.

Быстрый старт

Хотите использовать Bootstrap в своем проекте? Bootstrap – библиотека шаблонов CSS, распространяемая свободно командой сайта MaxCDN. Нужна система управления пакетами или исходники Bootstrap? Посетите страницу загрузок.

CSS

Вставьте эту часть кода в <head>, перед всеми прочими файлами CSS, для загрузки Bootstrap.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Многие из наших компонентов требуют использования JavaScript. Точнее — им требуются jQuery, Popper.js и наши собственные плагины. Для активации плагинов разместите следующий кусок кода <script> в конце страниц, прямо перед закрывающим </body>. Сперва jQuery , потом Popper.js, потом наши.

Мы используем мини-сборку jQuery, но и полную можно использовать.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh3IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Любопытно, какие компоненты явно требуют jQuery, наших JS и Popper. js? Нажмите ссылку «Показать компоненты» ниже. Если вы не уверены в том, как правильно написать «коренную» структуру страницы, можете использовать наши шаблоны.

Показать компоненты, требующие JavaScript

Уведомления отмены

Кнопки изменения состояний и чекбоксов/»радио»

Карусель для поведения «слайд», элементы контроля и индикаторы

Коллапс для изменения видимости содержимого

Выпадающие элементы для отображения и расположения (также требует Popper.js)

Модальные окна для отображения, расположения и создания поведения прокрутки

Навбар для расширения нашего плагина коллапса для придания отзывчивого поведения

Выплывающие подсказки и окна для отображения и расположения (также требует Popper.js)

Отслеживание прокрутки и обновления навигации

Начальный шаблон страницы

Удостоверьтесь, что ваши страницы сверстаны по новейшим стандартам. Они должны включать и использовать HTML5 doctype и viewport meta tag для правильного «отзывчивого» поведения страниц. Вот как должен выглядеть «верхний», коренной код страницы:

<!doctype html>
<html lang="en">
  <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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h2>Hello, world!</h2>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code. jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh3IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Это все, что вам нужно из общих требований к странице. Посетите Обзорный раздел или наши официальные примеры для создания контента и компонентов вашего сайта.

Важные глобальные атрибуты

Bootstrap включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.

HTML5 doctype

Bootstrap требует использования doctype «HTML5». Без него у вас возникнут некоторые проблемы со стилями.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

«Отзывчивый» мета-тэг

Bootstrap разрабатывался как mobile first, т.е. его настройки прежде всего оптимизированы под мобильные устройства, а уж потом с помощью медиа-запросов мы подгоняем масштаб компонентов как нам необходимо на прочих устройствах. Вставьте этот кусок кода в <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Вы можете посмотреть пример этого в действии на странице starter template.

Размер ширины и высоты элемента

Для большей простоты масштабирования в CSS мы изменяем глобальное значение box-sizing с content-box на border-box. Это гарантирует, что padding не будет влиять на конечную вычисленную ширину элемента; однако может создать проблемы для сторонних приложений, таких как Google Maps или поисковой движок Google.

В том редком случае, когда вам надо преодолеть эти возможные баги, делайте так:

.selector-for-some-widget {
  box-sizing: content-box;
}

С использованием фрагмента кода, приведенного выше, вложенные элементы – включая сгенерированный через :before и :after контент – будут все наследовать заданный box-sizing для класса .selector-for-some-widget.

Узнайте больше о блоковой модели и параметризации размеров на CSS Tricks.

«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)

Для улучшенной кроссбраузерной визуализации мы применили «Ребут», обеспечивающий более продвинутые «сбросы стилей» для элементов HTML для коррекции мелких багов в браузерах и девайсах.

Оставайтесь в курсе последних новостей Bootstrap и вливайтесь в сообщество Bootstrap с помощью этих ресурсов:

@getbootstrap on Twitter.

The Official Bootstrap Blog.

the official Slack room.

Чат с камрадами по Bootstrap. Канал ##bootstrap на сервере irc.freenode.net.

Помощь в реализации Bootstrap 4 на Stackoverflow bootstrap-4).

При разработке через npm или аналогичные депозитарии, разработчикам следует использовать ключевое слово bootstrap в своих пакетах и библиотеках для максимальной видимости.

Вы также можете присоединиться @getbootstrap on Twitter для получения «свежайших» слухов и классных музыкальных клипов.

Бесплатные общедоступные CDN для jQuery, Bootstrap, JavaScript

Если у вас небольшой сайт или приложения для мобильных устройств, вы можете ускорить загрузку сайта и улучшить работу приложения, выгружая сценарий с помощью существующих публичных CDN. Загрузка популярных библиотек JavaScript из общедоступной сети доставки контента, позволяет сэкономить трафик и улучшить общее взаимодействие с пользователем

Рекомендуется загружать библиотеки из CDN через HTTPS, даже если ваш сайт использует только HTTP. Файлы CDN хранятся с заголовками CORS и Timing-Allow и могут храниться в течение 1 года.

РЕКОМЕНДУЕМ:
Как написать безопасный код на JavaScript

Google Hosted Libraries

Google Hosted Libraries — это стабильная, надежная, высокоскоростная, глобально доступная сеть распространения контента для самых популярных библиотек JavaScript.

Доступные библиотеки:

AngularJS, Angular Material, Angular UI Router, Dojo, Ext Core, Hammer.JS, jQuery, jQuery Mobile, jQuery UI, MooTools, Prototype, script.aculo.us, Shaka Player, SPF, SWFObject и загрузчик веб-шрифтов.

Microsoft Ajax CDN

Microsoft Ajax Content Delivery Network (CDN) содержит популярные сторонние библиотеки JavaScript, такие как: jQuery, и позволяет легко добавлять их в веб-приложения. Используя преимущества CDN, вы можете значительно повысить производительность ваших приложений Ajax. Содержимое CDN кэшируется на серверах, расположенных по всему миру.

Доступные библиотеки:

jQuery, jQuery Migrate, jQuery UI, jQuery Validation, jQuery Mobile, jQuery Cycle, jQuery DataTables, Modernizr, JSHint, Knockout, Globalize, Respond, Bootstrap, Bootstrap. и Ajax, ASP.NET MVC и ASP.NET SignalR.

jsDelivr CDN

jsDelivr — это бесплатный CDN с открытым исходным кодом, созданный для помощи разработчикам и веб-мастерам. Ограничений не существует, и разрешены все виды файлов, включая библиотеки JavaScript, плагины jQuery, фреймворки CSS, шрифты и многое другое.

Доступные библиотеки:

Размещено почти 2000+ проектов, включая jQuery, Modernizr, Bootstrap, Font Awesome и т. д.

Cloudflare

Все любят Google CDN, верно? Даже у Microsoft есть публичный CDN. Проблема в том, что они содержат только малое количество самых популярных библиотек. На cdnjs размещены все популярные библиотеки — JavaScript, CSS, SWF, изображения и т. д.

Доступные библиотеки:

Размещено более 3000 библиотек, включая: jquery, angular.js, twitter-bootstrap, font-awesome, moment.js, chart.js, bootstrap-datepicker, jqueryui, foundation, normalize, angular-ui-bootstrap, bootstrap-datetimepicker, angular-ui-router, semantic-ui, lodash.js, modernizr, select2, d3, vue, handlebars.js, fancybox, animate.css и т. д.

JQuery CDN

jQuery CDN поддерживает MaxCDN и последние стабильные выпуски своих библиотек JavaScript.

Доступные библиотеки:

jQuery Core, jQuery UI, jQuery Mobile, jQuery Color, QUnit, PEP.

PageCDN

PageCDN — это сеть доставки контента, ориентированная на ускорение веб-сайтов. PageCDN выполняет работу инновационным способом, чтобы обеспечить загрузку страниц в наименьшее возможное время.

Доступные библиотеки:

jQuery, Bootstrap, Angular, React, Vue, Easy Fonts, Font Awesome, Значки дизайна материалов, Значки перьев, Ionicons, Простые значки, Super Tiny Icons.

РЕКОМЕНДУЕМ:
Как обмануть нейронную сеть

На этом все. Я коротко рассказал о самых лучших бесплатных общедоступных CDN для jQuery, Bootstrap, JavaScript и т.д.

Загрузка…

html: Bootstrap CDN не работает

Я пытаюсь встроить загрузчик в HTML-файл. Я скопировал и вставил ссылки прямо с их сайта, а также внедрил новейшую версию jQuery. Стили шрифтов кажутся правильными, но панель навигации и другие классы не работают должным образом. Ниже мой код, а также скриншот с результатами.

<!DOCTYPE html>
        
        <html lang="en">
        
        <head>
    
        <meta charset="utf-8">
    
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <title>Bootstrap 101 Template</title>
    
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn. com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous">
    
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    
          </head>
        
          <body>
        
            <h2>Hello, world!</h2>
        
            <nav>
              <a href="#">Navbar</a>
              <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span></span>
              </button>
        
              <div>
                <ul>
                  <li>
                    <a href="#">Home <span>(current)</span></a>
                  </li>
                  <li>
                    <a href="#">Link</a>
                  </li>
                  <li>
                    <a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Dropdown
                    </a>
                    <div aria-labelledby="navbarDropdown">
                      <a href="#">Action</a>
                      <a href="#">Another action</a>
                      <div></div>
                      <a href="#">Something else here</a>
                    </div>
                  </li>
                  <li>
                    <a href="#">Disabled</a>
                  </li>
                </ul>
                <form>
                  <input type="search" placeholder="Search" aria-label="Search">
                  <button type="submit">Search</button>
                </form>
              </div>
            </nav>
        
            <script src="https://ajax. googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
           
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        
          </body>
        
        </html>

Это панель навигации, которую я скопировал прямо из документации по загрузке.

Также, как видите, в консоли нет ошибок

Автор: Adam Johnston
Источник
Размещён: 28.07.2019 06:59

Введение · Bootstrap

Начните работу с Bootstrap, самой популярной в мире платформой для создания адаптивных, ориентированных на мобильные устройства сайтов, с BootstrapCDN и начальной страницей шаблона.

Быстрый старт

Хотите быстро добавить Bootstrap в свой проект? Используйте BootstrapCDN, бесплатно предоставляемый ребятами из StackPath. Используете менеджер пакетов или вам нужно скачать исходные файлы? Перейдите на страницу загрузок.

CSS

Скопируйте и вставьте таблицу стилей в свой перед всеми другими таблицами стилей для загрузки нашего CSS.

JS

Многие из наших компонентов требуют использования JavaScript для работы. В частности, для них требуются jQuery, Popper.js и наши собственные плагины JavaScript. Поместите следующие
фрагмент на вашей веб-странице.

Мы рекомендуем загружать библиотеки из CDN через HTTPS, даже если у вас
собственный веб-сайт использует только HTTP. В настоящее время производительность высокая, а кеширование
работает точно так же. Файлы CDN обслуживаются
CORS
и
Время-Разрешить
заголовки и разрешено кешировать на 1 год.

D3.js

фрагмент:: <сценарий src = "https://ajax. googleapis.com/ajax/libs/d3js/6.5.0/d3.min.js">
сайт:: d3js.org
версий:: 6.5.0, 6.3.1, 6.2.0, 6.1.1, 5.16.0, 5.15.1, 5.15.0, 5.14.2, 5.12.0, 5.11.0, 5.9.7, 5.9.2, 5.9. 0, 5.8.0, 5.7.0, 4.13.0, 3.5.17

Додзё

фрагмент:: <сценарий src = "https://ajax.googleapis.com/ajax/libs/dojo/1.13.0/dojo/dojo.js">
сайт:: dojotoolkit.org
версий:: 1.13.0,
1.12.3, 1.12.2, 1.12.1,
1.11.5, 1.11.4, 1.11.3, 1.11.2, 1.11.1,
1.10.9, 1.10.8, 1.10.7, 1.10.6, 1.10.5, 1.10.4, 1.10.3, 1.10.2, 1.10.1, 1.10.0,
1.9.11, 1.9.10, 1.9.9, 1.9.8, 1.9.7, 1.9.6, 1.9.5, 1.9.4, 1.9.3, 1.9.2, 1.9.1, 1.9.0,
1.8.14, 1.8.13, 1.8.12, 1.8.11, 1.8.10, 1.8.9, 1.8.8, 1.8.7, 1.8.6, 1. 8.5, 1.8.4, 1.8.3, 1.8. 2, 1.8.1, 1.8.0,
1.7.12, 1.7.11, 1.7.10, 1.7.9, 1.7.8, 1.7.7, 1.7.6, 1.7.5, 1.7.4, 1.7.3, 1.7.2, 1.7.1, 1.7. 0,
1.6.5, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0,
1.5.6, 1.5.5, 1.5.4, 1.5.3, 1.5.2, 1.5.1, 1.5.0,
1.4.8, 1.4.7, 1.4.6, 1.4.5, 1.4.4, 1.4.3, 1.4.1, 1.4.0,
1.3.2, 1.3.1, 1.3.0,
1.2.3, 1.2.0,
1.1.1

Ext Core

фрагмент:: <сценарий src = "https://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js">
сайт:: sencha.com/products/extcore
версий:: 3.1.0, 3.0.0

Hammer.JS

фрагмент:: <сценарий src = "https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js">
сайт:: hammerjs. github.io
версий:: 2.0.8

Неопределенная наблюдаемая

фрагмент:
сайт:: https://github.com/material-motion/indefinite-observable-js
версий:: 2.0.1,
1.0.1

jQuery

3.x фрагмент:: <сценарий src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js ">
2.x фрагмент:: <сценарий src = "https://ajax. googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
1.x фрагмент:: <сценарий src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
сайт:: jquery.com
версий:: 3.5.1, 3.5.0, 3.4.1, 3.4.0, 3.3.1, 3.2.1, 3.2.0, 3.1.1, 3.1.0, 3.0.0,
2.2.4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.1.4, 2.1.3, 2.1.1, 2.1.0, 2.0.3, 2.0.2, 2.0.1, 2.0. 0,
1.12.4, 1.12.3, 1.12.2, 1.12.1, 1.12.0, 1.11.3, 1.11.2, 1.11.1, 1.11.0, 1.10.2, 1.10.1,
1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6. 2,
1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3. 0,
1.2.6, 1.2.3
примечание:: 3.3.0, 2.1.2, 1.2.5 и 1.2.4 не размещены из-за их короткой и нестабильной жизни в дикой природе.

jQuery Mobile

фрагмент:: <ссылка rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
сайт:: jquerymobile.com
версий:: 1.4.5, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0
примечание:: Эта библиотека зависит от jQuery. Вы также должны загрузить jQuery перед загрузкой этого модуля.

пользовательский интерфейс jQuery

фрагмент:: <ссылка rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
сайт:: jqueryui.com
версий:: 1.12.1, 1.12.0,
1.11.4, 1.11.3, 1.11.2, 1.11.1, 1.11.0, 1.10.4, 1.10.3, 1.10.2,
1.10.1, 1.10.0, 1.9.2, 1.9.1, 1.9.0, 1.8.24, 1.8.23, 1.8.22, 1.8.21,
1.8.20, 1.8.19, 1.8.18, 1.8.17, 1.8.16, 1.8.15, 1.8.14, 1.8.13,
1.8.12, 1.8.11, 1.8.10, 1.8.9, 1.8.8, 1.8.7, 1.8.6, 1.8.5, 1.8.4,
1.8.2, 1.8.1, 1.8.0, 1.7.3, 1.7.2, 1.7.1, 1.7.0, 1.6.0, 1.5.3, 1.5.2
примечание:: Эта библиотека зависит от jQuery. Вы также должны загрузить jQuery перед
загрузка этого модуля. Версия 1.8.3 не размещается из-за ее короткого
life, а псевдоним 1.8.3 фактически загружает 1.8.4.

Движение материалов

фрагмент:
сайт:: https://github.com/material-motion/material-motion-js
версий:: 0.1.0

MooTools

фрагмент:: <сценарий src = "https://ajax.googleapis.com/ajax/libs/mootools/1.6.0/mootools.min.js">
сайт:: mootools.сеть
версий:: 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.5, 1.4.4, 1.4.3,
1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.5, 1.2.4,
1.2.3, 1.2.2, 1.2.1, 1.1.2, 1.1.1
примечание:: Для версий 1.5.1 и ранее имя файла минифицированной версии называется mootools-yui-compressed.js вместо mintools.min.js.

Myanmar Tools

фрагмент:: <сценарий src = "https: // ajax. googleapis.com/ajax/libs/myanmar-tools/1.2.1/zawgyi_detector.min.js ">
<сценарий src = "https://ajax.googleapis.com/ajax/libs/myanmar-tools/1.2.1/zawgyi_converter.min.js">
сайт:: https://github.com/google/myanmar-tools/
рекомендуемые версии:: 1.2.1
всех размещенных версий:: 1.0.1; 1.1.0; 1.1,1; 1.1.3; 1.2.0; 1.2.1

Прототип

фрагмент:: <сценарий src = "https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js">
сайт:: prototypejs.org
версий:: 1.7.3.0, 1.7.2.0, 1.7.1.0, 1.7.0.0, 1.6.1.0, 1. 6.0.3, 1.6.0.2

скрипт.aculo.us

фрагмент:: <сценарий src = "https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js">
сайт:: script.aculo.us
версий:: 1.9.0, 1.8.3, 1.8.2, 1.8.1
примечание:: Эта библиотека зависит от Prototype . Перед загрузкой этого модуля вы должны загрузить Prototype.

Shaka Player

фрагмент:
сайт:: https://github.com/google/shaka-player/
рекомендуемые версии:: 3.0.8, 2.5.20, 2.4.7
всех размещенных версий:: 3.0.8, 2.5.20, 3.0.7, 2.5.19, 3.0.6, 2.5.18, 3.0.5, 2.5.17, 3.0.4, 2.5.16, 3.0.3, 2.5.15, 3.0 .2, 2.5.14, 3.0.1, 2.5.13, 3.0.0, 2.5.12, 2.5.11, 2.5.10, 2.5.9, 2.5.8, 2.5.7, 2.5.6, 2.5.5 , 2.5.4, 2.5.3, 2.5.2, 2.5.1, 2.5.0, 2.5.0-бета3, 2.5.0-beta2, 2.5.0-beta, 2.4.7, 2.4.6, 2.4.5, 2.4.4, 2.4.3, 2.4.2, 2.4.1, 2.4.0, 2.3.10, 2.3.9, 2.3.8, 2.3.7, 2.3.6, 2.3.5, 2.3.4, 2.3.3, 2.3.2, 2.3.1, 2.3.0, 2.2.10, 2.2.9, 2.2.8, 2.2. 7, 2.2.6, 2.2.5, 2.2.4, 2.2.1, 2.2.0, 2.1.9, 2.1.8, 2.1.7, 2.1.6, 2.1.5, 2.1.4, 2.1.3, 2.1.2, 2.1.1, 2.1.0, 2.0.9, 2.0.8, 2.0.6, 1.6.5

SPF

фрагмент:: <сценарий src = "https://ajax. googleapis.com/ajax/libs/spf/2.4.0/spf.js">
сайт:: YouTube.github.io/spfjs
версий:: 2.4.0, 2.3.2, 2.3.1, 2.3.0, 2.2.0, 2.1.2, 2.1.1, 2.1.0, 2.0.1, 2.0.0

SWFObject

фрагмент:: <сценарий src = "https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
сайт:: github.com/swfobject/swfobject
версий:: 2.2, 2.1

three.js

фрагмент:: <сценарий src = "https://ajax.googleapis.com/ajax/libs/threejs/r84/three.min.js">
сайт:: threejs.org
версий:: r84, r83, r82, r81, r80, r79, r78, r77, r76, r75, r74, r73, r72, r71, r70, r69, r68, r67, r49

Загрузчик веб-шрифтов

фрагмент>: <сценарий src = "https: // ajax. googleapis.com/ajax/libs/webfont/1.6.26/webfont.js ">
сайт:: github.com/typekit/webfontloader
версий:: 1.6.26, 1.6.16, 1.5.18, 1.5.10, 1.5.6, 1.5.3, 1.5.2, 1.5.0

Поиск и устранение неисправностей

Видите устаревшую версию? Убедитесь, что вы не используете ссылки "автоматическая версия", например
/ jqueryui / 1 / ... , но вместо этого используйте URL-адреса, относящиеся к точным версиям.Из-за опасений по поводу кеширования и отсутствия совместимости даже между младшими версиями у нас есть
устарела и перестала обновлять псевдонимы автоматической версии некоторое время назад, поэтому они будут
навсегда ссылаться на старую версию (чтобы не нарушать работу существующих сайтов, которые все еще их используют).

Если возникнут проблемы:

Введение в BootstrapCDN | Учебный курс по программированию в Беркли

Начало работы с BootstrapCDN может показаться пугающим для новых пользователей, но система построена так, чтобы быть интуитивно понятной. BootstrapCDN стал самым популярным во всем мире фреймворком для создания эффективных мобильных сайтов. К счастью, существует ряд отличных учебных пособий и курсов для начинающих по программированию, которые помогут вам изучить новейшую версию фреймворка, Bootstrap 4. Они позволяют новичкам быстро приступить к работе и начать разработку веб-проектов.

С появлением BootstrapCDN процесс создания первоклассных мобильных сайтов стал проще, чем когда-либо прежде. С помощью этой платформы пользователи могут загружать изображения, JavaScript и CSS удаленно с серверов платформы, резко сокращая время, затрачиваемое на выполнение задач и завершение проектов.

BootstrapCDN предоставляет множество преимуществ как для разработчиков, так и для пользователей. Поскольку он стал невероятно важным инструментом веб-разработки, который в ближайшие годы будет продолжать развиваться, важно освоиться с функциями и компонентами Bootstrap, когда вы начнете учиться программировать.

Если вам нужно быстро познакомиться с основами Bootstrap, его функциями и способами их использования, это краткое руководство по Bootstrap 4 поможет вам сразу приступить к работе. Bootstrap 4 относительно интуитивно понятен, так что ваши предыдущие знания быстро пригодятся. И, если вы записаны на курс для начинающих по кодированию, это руководство может послужить полезным справочником, к которому можно вернуться.

Что такое BootstrapCDN?

BootstrapCDN - это сеть доставки контента, предназначенная для веб-разработчиков, особенно тех, кто ориентирован на создание сайтов с мобильных устройств. Сети доставки контента, такие как Bootstrap, состоят из центров обработки данных и прокси-серверов, которые делают высококачественное и высокоскоростное распространение и хранение данных более доступным.Bootstrap имеет несколько важных преимуществ, которые способствуют его продолжающемуся росту.

Bootstrap, пожалуй, самый популярный и известный CDN, используемый в настоящее время; его легко скачать и предоставляет MaxCDN. BootstrapCDN использует сценарии NPM в своей системе сборки и поставляется с удобными инструментами, которые помогают сделать работу с фреймворком еще проще. Эти инструменты включают в себя множество тестов, которые вы можете запускать, компиляторы кода и т. Д. Различные функции BootstrapCDN предоставляют уникальные функции, которые помогают разработчикам более легко создавать и настраивать веб-контент.

Начало работы с BootstrapCDN

Начать использовать BootstrapCDN просто. Загрузите предварительно скомпилированный файл BootstrapCDN и распакуйте сжатую папку. Вы должны увидеть что-то подобное или очень похожее на следующее:

Копия

бутстрап /

├── CSS /

│ ├── bootstrap.css

│ ├── бутстрап.css.map

│ ├── bootstrap.min.css

│ ├── bootstrap.min.css.map

│ ├── bootstrap-grid.css

│ ├── bootstrap-grid. css.map

│ ├── bootstrap-grid.min.css

│ ├── bootstrap-grid.min.css.map

│ ├── bootstrap-reboot.css

│ ├── bootstrap-reboot.css.map

│ ├── bootstrap-reboot.min.css

│ └── bootstrap-reboot.min.css.map

└── js /

├── bootstrap.bundle.js

├── bootstrap.bundle.min.js

├── bootstrap.js

└── бутстрап.мин. js

Это базовая настройка BootstrapCDN. Он содержит предварительно скомпилированные файлы, которые позволяют быстро использовать их практически для любого проекта веб-разработки. BootstrapCDN предоставляет скомпилированные JS (bootstrap. *) И CSS. Мало того, он также предоставляет скомпилированные и миниатюрные JS (bootstrap. min *) и CSS. Он предоставляет исходные карты CSS (bootstrap. *. Map) для использования с инструментами разработчика, предоставляемыми определенными браузерами. Связанные файлы JS (bootstrap.bundle.js и bootstrap.bundle.min.js) включают Popper, но не включают jQuery.

Как запустить документацию локально в BootstrapCDN

Чтобы запустить документацию локально в BootstrapCDN, вам необходимо использовать Jekyll. Jekyll - это генератор статических сайтов, который включает файлы и шаблоны на основе Markdown. Вы можете установить зависимости Jekyll и Ruby одновременно с помощью пакета установки. Просто перейдите в командную строку и запустите npm run docs-serve , а затем перейдите в свой браузер и откройте http: // localhost: 9001 .

Вам также понадобятся исходные файлы BootstrapCDN и Node при локальном запуске документации. Просто скачайте и установите Node.js . Node.js управляет зависимостями BootstrapCDN. Отсюда вы можете перейти в корневой каталог / bootstrap .

Чтобы установить локальные зависимости, перечисленные в package.json, запустите установку NPM. Затем вы захотите установить Ruby и Bundler с установочным пакетом gem. Запустите установку пакета, чтобы настроить зависимости Ruby, такие как Jekyll, и различные плагины.Когда вы закончите, вы можете запускать команды из командной строки.

package.json содержит несколько задач и команд. Например, команда npm run dist создает каталог / dist со скомпилированными файлами, который использует Autoprefixer, Sass и UglifyJS. Npm test делает то же самое, но также запускает тесты локально.

Npm run docs создает JavaScript и CSS для документов, позволяя запускать документацию локально с помощью npm run docs-serve .Вы также можете использовать run npm run , чтобы увидеть все доступные сценарии NPM.

Пример шаблона BootstrapCDN

Ваши страницы должны быть настроены с учетом самых последних стандартов разработки и дизайна. По этой причине вам следует использовать тип документа HTML5. Обязательно включите метатег области просмотра, чтобы получить правильное поведение. Когда вы соберете все элементы вместе, ваши страницы должны выглядеть следующим образом:

Что такое Bootstrap CDN и некоторые распространенные бесплатные CDN? Блоги Webner

Bootstrap CDN и некоторые распространенные бесплатные CDN

Bootstrap - это самый популярный интерфейсный фреймворк для разработки адаптивных мобильных проектов в Интернете.Теперь я объясню, как использовать bootstrap CDN в вашем проекте.

CDN: CDN - это сеть доставки контента. CDN - это система распределенных серверов (сеть), которая доставляет веб-страницы и другой контент пользователям в зависимости от географического местоположения пользователя, происхождения веб-страницы и сервера доставки контента.

Как использовать Bootstrap CDN:

BootstrapCDN может загружать CSS, Javascript и изображений удаленно со своих серверов, и он использовался более чем на 7. 9 миллионов веб-сайтов по всему миру (включая 30% из топ-10 тысяч веб-сайтов) и обеспечивает более 70 миллиардов запросов в месяц.
Этот URL-адрес будет извлекать и загружать файлы с живого сервера начальной загрузки twitter. Если вы хотите использовать его локально или без Интернета, вы можете загрузить его с официального сайта начальной загрузки.
Включите файлы начальной загрузки CDN css и jquery в раздел Head своей веб-страницы, как показано ниже:


---------- // Другие файлы css или jquery -------------------

 //

Bootstrap разработал множество файлов css и jquery CDN для веб-разработчиков, доступных на официальном сайте.

Список некоторых CDN для веб-разработчиков:

Один из простейших способов повышения производительности сайта - обслуживание зависимостей страниц, таких как библиотеки JavaScript и фреймворки CSS, через общедоступную сеть доставки контента (CDN).Публичный CDN - это веб-сервис, в котором размещаются и обслуживаются проекты с открытым исходным кодом, используемые для веб-разработки (например, jQuery, AngularJS и Bootstrap). Публичные CDN позволяют веб-сайтам бесплатно пользоваться своими услугами.

Amazon AWS: Amazon Web Services (AWS) - это набор сервисов облачных вычислений, также называемых веб-сервисами, которые составляют платформу облачных вычислений, предлагаемую Amazon. com. В линейке AWS есть несколько разных продуктов: Amazon S3 и Amazon CloudFront.
Amazon S3 - это компонент онлайн-хранилища платформы Amazon, позволяющий хранить файлы в нескольких «корзинах».«Благодаря встроенной масштабируемости и безопасности Amazon S3 является отличным выбором для резервного копирования, архивирования, размещения файлов статического содержимого и мультимедийных файлов, например изображений для блогов.
CloudFront, предложение Amazon CDN, работающее совместно с S3. Вы можете настроить Amazon CloudFront с Amazon S3, где корзины S3 могут действовать как ваш исходный сервер, а не попадания, происходящие непосредственно на вашем исходном сервере.

Cloudflare: Cloudflare - один из самых быстрорастущих поставщиков Saas-решений в области безопасности и производительности, включая DNS и CDN.CloudFlare предлагает бесплатный базовый план, который включает в себя высокую производительность сайта, защиту безопасности и мощную статистику о ваших посетителях.

Cdnjs: Cdnjs - еще один популярный поставщик CDN с открытым исходным кодом, который предлагает массив популярных библиотек JavaScript и CSS, которые вы можете выбрать для ссылки в своем веб-проекте.

Google: Размещенные библиотеки Google - это стабильная, надежная, высокоскоростная, глобально доступная сеть распространения контента для самых популярных библиотек JavaScript с открытым исходным кодом.Google работает напрямую с ключевыми заинтересованными сторонами по каждой библиотеке и принимает последние версии по мере их выпуска.
Google предлагает CDN для jQuery, jQueryUI, Prototype, инструментов Moo, Dojo и т. Д. И многих других.

MaxCDN: MaxCDN была основана в 2009 году. MaxCDN имеет быстрые серверы и большое сообщество пользователей, а также веб-мастеров со всего мира. У них одно из самых быстрых откликов и гибкие модели ценообразования.

Microsoft: Сеть доставки содержимого (CDN) Microsoft Ajax содержит популярные сторонние библиотеки JavaScript, такие как jQuery, и позволяет легко добавлять их в свои веб-приложения.

Зачем использовать общедоступный CDN?

Производительность: CDN, как правило, может сократить время отклика вашей страницы, потому что они могут обслуживать ресурсы из разных географических местоположений, уменьшая расстояние, которое данные должны пройти, чтобы добраться до пользователя. По сравнению с многоцелевыми веб-серверами, такими как те, которые используются поставщиками общего веб-хостинга, CDN также имеют оптимизированную внутреннюю технологию, специально предназначенную для отправки статических ресурсов страницы, таких как изображения, файлы JS, таблицы стилей и т. Д.

Надежность: Общедоступные CDN в этом списке поддерживаются крупными технологическими компаниями, что дает вам некоторую уверенность в отношении их надежности и качества обслуживания.

Более высокая вероятность кэширования: Поскольку общедоступные сети CDN используются многими веб-сайтами, существует большая вероятность того, что пользователь, переходящий на ваш сайт, уже имеет ресурс, сохраненный в его браузере, что еще больше сокращает время отклика вашей страницы.

Webner Solutions - компания по разработке программного обеспечения, специализирующаяся на разработке систем управления страховыми агентствами, систем управления обучением и приложений Salesforce.Свяжитесь с нами по адресу [email protected] для получения информации о приложениях для страхования, электронного обучения и Salesforce.

Почему бы вам не использовать загрузочный CDN для программного обеспечения для создания веб-сайтов?

Вместо того, чтобы изменять начальную загрузку, почему вы не пишете одинаковые и идентичные модификации в одном файле, вы можете назвать веб-сайт программного обеспечения mobirise builderd-bootstrap.css

В противном случае мы не сможем связать загрузочную программу CDN

Если это правда, что Google любит отзывчивость, то официально он ненавидит медлительность и вес, а также НЕ минимизированный код

Таким образом, ОБЯЗАТЕЛЬНА CDN с по-настоящему минифицированным фреймворком bootstrap css.

Исправьте это как можно скорее

Спасибо

Тем не менее

Загрузка стандартного исходного файла bootstrap.min.css из загрузочного CDN приведет к тому, что клиент будет часто иметь тот же файл bootstrap.min.css в кеше его / ее браузера, что сделает его / ее навигацию еще быстрее.

Перенесите это на мобильные устройства, и это будет иметь на 400% большее значение и смысл

Связанные темы

Мы не используем бутстрап.min.css из загрузочного CDN, потому что некоторые пользователи могут работать без подключения к Интернету или их доступ к серверам CDN ограничен (Китай).

Да, мы могли бы добавить откат для открытия локального файла, если CDN недоступен, но загрузка этой страницы может занять много времени. После запроса страница ожидает ответа (а пользователь ничего не видит на своей странице), и если скорость его соединения низкая, это может занять несколько минут. Так что это может закончиться ошибкой.

Все зависит от ваших целей

Во-первых, похоже, что вы переворачиваете точку.

Дело не в bootstrap.min.css как локальном или из CDN

Дело в том, что вы модифицируете его, пока bootstrap.min.css является СТАНДАРТОМ. Если вы проверите значение слова СТАНДАРТ, вы поймете, почему нет смысла изменять его

А вот ответы на ваши попытки перенести точку в другое место 🙂

Если вы стремитесь распространить Mobirise на бизнес-уровне, помните, что здесь мы находимся в Европе, а другие - в США и Японии.

Континенты, где важен бизнес, а население имеет неограниченный доступ в Интернет и где важен бизнес.Бизнес часто полагается на позиционирование Google, и Google хочет сверхбыстрые отзывчивые веб-сайты.

В настоящее время вы удовлетворяете только второстепенным требованиям: если хотя бы часть может быть признана важной стороной, вы снова ошибаетесь:

Если это правда, что большинство людей (на континентах с большим количеством подключенных к Интернету устройств, Европа / США / Япония) имеют доступ в Интернет (у вас даже нет Mobirise на китайском языке), это также верно, что хостинги (большинство из) устанавливают ограничения в полосе пропускания, а также имеют низкую производительность или совместно используют полосу пропускания

Таким образом, загрузка бесполезного файла размером 150 Кбайт из / как Local - это двойной штраф.

И последнее, но не менее важное: здесь мы аргументируем тот факт, что вы изменяете файл, который является признанным стандартом, в то время как и поскольку у вас есть некоторый программный конструктор веб-сайтов css на экспортируемом веб-сайте, модификации стандартного bootstrap.min.css должны быть вставлены в такие CSS-коды mobirise или лучше добавить новый

bootstrap.software веб-сайт builder.css, который будет загружен сразу после bootstrap.min.css (на этот раз действительно уменьшен)

Это сбросит ситуацию к нормальной ситуации, когда веб-мастер будет волен решать, откуда загрузить из начальной загрузки.min.css (есть также хорошие скрипты, которые с 1-й попытки загрузятся с CDN и, если они недоступны, переключатся на локальные)

Надеюсь, мне удалось передать вам идею.

Почему для вас такой большой проблемой является добавление изменений, которые вы делаете в bootstrap.min.css, в виде новых строк в новом файле CSS, которые будут вызываться сразу после bootstrap. min.css, оставляя его нетронутым и таким образом давая свобода установки для загрузки из CDN?

Установка Bootstrap

Bootstrap часто критикуют за раздутую структуру - bootstrap.css файл содержит более 6700 строк кода! Браузер должен читать и обрабатывать этот код по мере загрузки страницы. Уменьшенный файл bootstrap.min.css форматируется как единый фрагмент кода без пробелов и разрывов строк. Разница в размере файла значительна.

Помимо использования миниатюрных файлов Bootstrap, вы можете повысить производительность сайта, установив ссылку на платформу Bootstrap в Bootstrap CDN (сеть доставки контента). Высокоскоростной сервер Bootstrap, вероятно, быстрее, чем ваш скромный веб-хост, и есть вероятность, что пользователь вашего сайта посетил другой сайт Bootstrap CDN, поэтому файлы уже кэшированы в его браузере.Милая!

При просмотре getbootstrap.com вы заметите, что есть несколько версий Bootstrap на выбор. Бета-версия Bootstrap 4 была выпущена в августе 2017 года - не стесняйтесь ее проверить. Однако мы будем использовать последний стабильный выпуск Bootstrap в этом классе: Bootstrap 3.3.7.

Запустите Dreamweaver. Перейдите в Файл> Создать и выберите «Нет». Щелкните кнопку Create.

Параметр «Нет» в окне «Новый документ».

HTML-файл откроется в новом окне документа. Сразу же перейдите в меню «Файл»> «Сохранить как», сохранив файл HTML как index.html в папке «Stop-Drop-Roll».

Зайдите на getbootstrap.com и скопируйте код базового шаблона.

Вернувшись в Dreamweaver, выберите «Правка»> «Выделить все» и нажмите клавишу «Удалить». Затем Правка> Вставьте код, который вы скопировали из Bootstrap.

Для применения форматирования Bootstrap вам потребуется несколько файлов: файл CSS со стилями Bootstrap, файл JavaScript с кодом Bootstrap JavaScript и библиотека jQuery.

Вы можете скопировать ссылки CDN с getbootstrap.com. Выберите ссылку «Последний скомпилированный и минимизированный CSS» и выберите «Правка»> «Копировать».

Вернувшись в Dreamweaver, выберите ссылку на bootstrap.min.css и нажмите клавишу «Удалить».

Правка> Вставьте ссылку, которую вы скопировали с веб-сайта Bootstrap.

Ссылка на библиотеку jQuery уже включена в ваш базовый шаблон.Он связан с файлом jQuery в сети доставки контента Google. Здесь не нужно вносить никаких изменений.

Однако вам нужно изменить ссылку на bootstrap.min.js. Вернитесь на getbootstrap.com. Скопируйте ссылку на «Последний скомпилированный и минифицированный JavaScript».

Вернитесь в файл index.html в Dreamweaver, выберите ссылку на bootstrap.min.js и нажмите клавишу Delete.

Вставьте ссылку на файл JavaScript, который вы скопировали с веб-сайта Bootstrap.

Итак, у вас есть базовый шаблон! Настройка этого метода занимает немного больше времени, чем использование диалогового окна «Новый документ» Dreamweaver, но его преимущество состоит в том, что файлы уменьшаются и загружаются через быстрый CDN.

Вы устанавливаете ссылку на bootstrap.min.css в Bootstrap CDN, jquery.min.css в Google CDN и bootstrap.min.js в Bootstrap CDN. Все три этих файла перечислены на панели инструментов «Связанные файлы» в верхней части интерфейса Dreamweaver.Если вы щелкните ссылку на bootstrap.min.css, вы увидите сообщение о том, что 'bootstrap.min.css' является удаленным файлом и не может быть отредактирован.

Создайте файл custom.css для любого настраиваемого форматирования. Вернитесь к исходному коду на панели инструментов «Связанные файлы». Перейдите в «Окно»> «Конструктор CSS», чтобы открыть панель «Дизайнер CSS», затем перетащите панель, чтобы она закрепилась за панелью «Файлы» (при перетаскивании панели вы увидите синий контур, когда панели готовы к закреплению).Щелкните значок + рядом с «Источниками». Выберите «Создать новый файл CSS».

Введите «custom.css» в поле «Файл / URL-адрес» и выберите «Добавить как ссылку». Щелкните ОК.

Убедитесь, что custom.css появляется после bootstrap.min.css. Вы хотите, чтобы ваши пользовательские стили переопределяли форматирование Bootstrap по умолчанию.

Выберите «Файл»> «Сохранить все». Ваш фреймворк Bootstrap установлен!

Flask-Bootstrap · PyPI

Описание проекта

Flask-Bootstrap упаковывает Twitter Bootstrap в расширение, которое в основном состоит
схемы под названием «bootstrap». Он также может создавать ссылки для обслуживания Bootstrap.
из CDN.

Использование

Вот пример:

 из flask.ext.bootstrap import Bootstrap

[...]

Bootstrap (приложение)

Это делает доступными некоторые новые шаблоны, в основном bootstrap_base.html и
bootstrap_responsive.html. Это пустые страницы, включающие все загрузочные
ресурсы и имеют заранее определенные блоки, в которые вы можете поместить свой контент. Ядро
блок для изменения - body_content, в противном случае см. исходный код шаблона
для большего количества возможностей.

URL-адрес bootstrap.static доступен для ссылки на Bootstrap.
ресурсов, но обычно в этом нет необходимости. Немного лучше использовать
фильтр шаблона bootstrap_find_resource, который внесет настройки CDN в
учетная запись.

Макросы

Доступно несколько макросов, которые сделают вашу жизнь проще. Их нужно импортировать
(Я рекомендую создать свой собственный шаблон base.html, расширяющий один из
сначала загрузите базовые шаблоны и включив туда макросы).

Пример «base.html »:

 {% extends "bootstrap_responsive.html"%}
{% import "bootstrap_wtf.html" как wtf%}

Формы

Шаблон bootstrap_wtf содержит макросы, которые помогут вам выводить формы
быстро. Самый простой способ - использовать их как вспомогательные средства для создания формы вручную:

 
  {{form.hidden_tag ()}}
  {{wtf.form_errors (форма, "только")}}

  {{wtf.horizontal_field (form.field1)}}
  {{wtf.horizontal_field (form.field2)}}

Однако часто вам просто нужно быстро заполнить форму и не нужно
интенсивная точная настройка:

 {{wtf.quick_form (форма)}}

Варианты конфигурации

Шаблоны используют несколько параметров конфигурации:

Опция	По умолчанию
BOOTSTRAP_USE_MINIFIED	True	Следует ли использовать уменьшенные версии файлов css / js.
BOOTSTRAP_JQUERY_VERSION	'1'	Эта версия jQuery включена в шаблон через Google CDN.Также уважает BOOTSTRAP_USE_MINIFIED. Установите значение None, чтобы вообще не включать jQuery. Обратите внимание, что неминифицированные ресурсы Bootstrap иногда отсутствуют на bootstrapcdn, поэтому лучше не использовать его, не включив BOOTSTRAP_USE_MINIFIED.
BOOTSTRAP_HTML5_SHIM	True	Включите исправления IE по умолчанию, которые обычно включаются при использовании начальной загрузки.
BOOTSTRAP_GOOGLE_ANALYTICS_ACCOUNT	Нет	Если установлено, включить шаблон Google Analytics с помощью этой учетной записи.
BOOTSTRAP_USE_CDN	Ложь	Если True, ресурсы Bootstrap не будут обслуживаться из локального экземпляра приложения, но вместо этого будут использовать сеть доставки контента (настроенную с помощью BOOTSTRAP_CDN_BASEURL).
BOOTSTRAP_CDN_BASEURL	Словарь с URL-адресами на cdnjs. com.	URL-адреса, к которым добавляются Bootstrap и другие имена файлов при использовании CDN.
BOOTSTRAP_CDN_PREFER_SSL	True	Если BOOTSTRAP_CDN_BASEURL начинается с //, добавьте к нему «https:».
BOOTSTRAP_FONTAWESOME	Ложь	Если True, FontAwesome будет включен.
BOOTSTRAP_CUSTOM_CSS	Ложь	Если True, файлы CSS Bootstrap загружаться не будут. Используйте это, если вы компилируете собственный файл css, который уже включает загрузку.

Установка

Либо установить с github с помощью pip, либо из PyPI.

Примечание по версии

Flask-Bootstrap пытается отслеживать выпуски Twitter Bootstrap.Управление версиями обычно осуществляется в виде версии Bootstrap - Flask-Bootstrap.
итерация. Например, версия 2.0.3-2 связывает версию Bootstrap
2.0.3 и является вторым выпуском Flask-Bootstrap, содержащим эту версию.

Если вам нужно полагаться на то, что ваши шаблоны не меняются, просто закрепите версию в
ваш setup.py.

FAQ

Почему в моем выводе шаблона появляются нежелательные автоматические экранирования?

Убедитесь, что ваши шаблоны имеют расширение .htm, .html, .xml или.xhtml.
Flask устанавливает режим Jinja2-autoescape в зависимости от файла шаблона
расширение (см. этот вопрос StackOverflow
для дополнительной информации).

Общее соглашение в приложениях Flask - называть ваши HTML-шаблоны
.html хотя.

Как я могу добавить в шаблон собственный javascript?

Используйте super () в Jinja2 вместе с bootstrap_js_bottom
блокировать. Супер-функция добавляет содержимое блока из родительского
шаблон, таким образом вы даже можете решить, хотите ли вы включить его раньше или
после jQuery / bootstrap.Пример:

 {% block bootstrap_js_bottom%}
  {{супер()}}

Bootstrap google cdn: Introduction · Bootstrap

Введение. Начало работы · Bootstrap. Версия v4.1.3

Быстрый старт

CSS

JS

Начальный шаблон страницы

Важные глобальные атрибуты

HTML5 doctype

«Отзывчивый» мета-тэг

Размер ширины и высоты элемента

«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)

Бесплатные общедоступные CDN для jQuery, Bootstrap, JavaScript

Google Hosted Libraries

Microsoft Ajax CDN

jsDelivr CDN

Cloudflare

JQuery CDN

PageCDN

html: Bootstrap CDN не работает

Введение · Bootstrap

Быстрый старт

CSS

JS

D3.js

Додзё

Ext Core

Hammer.JS

Неопределенная наблюдаемая

jQuery

jQuery Mobile

пользовательский интерфейс jQuery

Движение материалов

MooTools

Myanmar Tools

Прототип

скрипт.aculo.us

Shaka Player

SPF

SWFObject

three.js

Загрузчик веб-шрифтов

Поиск и устранение неисправностей

Введение в BootstrapCDN | Учебный курс по программированию в Беркли

Что такое Bootstrap CDN и некоторые распространенные бесплатные CDN? Блоги Webner

Почему бы вам не использовать загрузочный CDN для программного обеспечения для создания веб-сайтов?

Связанные темы

Установка Bootstrap

Flask-Bootstrap · PyPI

Описание проекта

Использование

Макросы

Формы

Варианты конфигурации

Установка

Примечание по версии

FAQ