Могу ли я получить глистами бутстрапа из CDN?

Ответ 1

Если вы включаете таблицу стилей bootstrap.min.css в свой HTML файл, например, это (например):

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">

Затем шрифт Glyphicons будет автоматически загружен из того же места:

//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot
//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.svg
//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.ttf
//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff
//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff2

Это связано с тем, что шрифты загружаются с использованием относительных URL-адресов. Когда CSS в bootstrap.min.css анализируется, URL-адрес, с которого он был загружен, используется в качестве базы, а не URL вашего сайта.

Что касается precompiled Bootstrap: это полезно, если вы хотите разместить файлы на своем собственном веб-сервере (по какой-то причине). Они становятся доступными в виде zip файла, содержащего правильную структуру каталогов, необходимую для правильной работы вышеприведенного поведения. Он помечен как предварительно скомпилированный, потому что вы можете альтернативно загружать исходные файлы. Хотя файлы CSS и JavaScript считаются исходными файлами сами по себе, Bootstrap использует прекомпилятор на своем CSS, чтобы облегчить им запись больших файлов. Они также используют несколько небольших файлов JavaScript, которые объединены для выпуска с помощью сборки script. Вы можете увидеть это в действии в в своем репозитории GitHub.

Ответ 2

Что касается вопроса Glythicon

С новой версией бутстрапа (Bootstrap 4); Glythicons были полностью удалены, поэтому считайте их устаревшими и старайтесь не использовать их в текущих или будущих проектах. С учетом сказанного FontAwesome - это удивительная, легкая библиотека, которая имеет приятный CDN и очень проста в использовании.

CDN https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css

Если вы хотите быть ленивым, и вы всегда должны стараться быть ленивым! Используйте приведенный ниже код, как и любую ссылку, вставьте его в голову вашего проекта, чтобы сразу начать работу с ним!

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

FontAwesome - это обширная библиотека значков шрифтов, которую вы можете добавить к любому элементу DOM через вызовы класса. Его также очень дружественный браузер и не требует любого javascript для работы.

Вот руководство по началу работы: https://fortawesome.github.io/Font-Awesome/get-started/

И вот список значков: https://fortawesome.github.io/Font-Awesome/icons/

Что касается вопроса с предварительно скомпилированным vs CDN

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

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

Как правило, стандартная версия просто прекрасна, поскольку позже вы можете перезаписать ее собственным css. Если это нормально для вас, просто используйте CDN, так как это послужит вам стандартной версией Bootstrap.

Надеюсь, это поможет!

Ответ 3

Для тех, кто делает это в Rails, используя gem bootstrap-sass, вы не будете включать основную таблицу стилей начальной загрузки вручную в html, и вы не можете переопределить $ icon-font-path для этого, так как домен будет в конечном итоге заменено на ваше приложение.

Вместо этого переопределите объявление @font-face для Glyphicons после импорта начальной загрузки. Итак, в stylesheets/application.scss:

@import "bootstrap-sprockets";
@import "bootstrap";

@font-face{
  font-family:'Glyphicons Halflings';
  src:url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot");
  src:url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),
  url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff2") format("woff2"),
  url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff") format("woff"),
  url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.ttf") format("truetype"),
  url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular") format("svg")
}

Я обнаружил, что это необходимо при использовании конвейера Heroku, чтобы избежать компиляции этих путей для промежуточного приложения, в результате чего производственное приложение указывало назад на промежуточную загрузку для загрузки глификонов.

Ответ 4

Вместо импорта всей Bootstrap вы можете импортировать только глифы Bootstrap:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">