После загрузки полного пакета bootstrap 3 из http://getbootstrap.com я заметил, что для темы есть отдельный файл css. Как его использовать? Пожалуйста, объясните?
Я включил bootstrap-theme.css в мой существующий проект начальной загрузки, но нет никакой разницы в выходе.
После загрузки Bootstrap 3.x вы получите bootstrap.css и bootstrap-theme.css (не говоря уже о мини-версиях этих файлов, которые также присутствует).
bootstrap.css полностью оформлен и готов к использованию, если это ваше желание. Возможно, это немного просто, но он готов, и он есть.
Вам не нужно использовать bootstrap-theme.css, если вы этого не хотите, и все будет хорошо.
bootstrap-theme.css - это то, что пытается указать имя файла: это тема для начальной загрузки, которая креативно считается "темой начальной загрузки". Имя файла несколько путает вещи, так как базовый bootstrap.css уже применял стиль, и я, во-первых, рассмотрел бы эти стили по умолчанию. Но этот вывод, по-видимому, неверен в свете сказанного в разделе примеров документации Bootstrap в отношении этого файла bootstrap-theme.css:
"Загрузите необязательную тему Bootstrap для визуально расширенного опыта".
Вышеуказанная цитата найдена здесь http://getbootstrap.com/getting-started/#examples на миниатюре, которая ссылается на эту страницу примера http://getbootstrap.com/examples/theme/. Идея состоит в том, что bootstrap-theme.css - это тема , и она необязательна.
О темах на BootSwatch.com: эти темы не реализованы, как bootstrap-theme.css. Темы BootSwatch - это измененные версии оригинала bootstrap.css. Таким образом, вы определенно НЕ должны использовать тему из BootSwatch и файла bootstrap-theme.css в то же время.
О вашей собственной пользовательской теме: вы можете изменить bootstrap-theme.css при создании своей собственной темы. Это может упростить изменение стиля, не нарушая при этом какой-либо из встроенных функций Bootstrap.
Пример стилей css: http://getbootstrap.com/examples/theme/
Если вы хотите посмотреть, как выглядит пример без файла bootstrap-theme.css, откройте инструменты разработчика браузера и удалите ссылку из <head> примера, а затем вы можете сравнить его.
Я знаю, что это старый вопрос, но отправил его на всякий случай, если кто-то ищет пример того, как он выглядит.
Обновление
bootstrap.css= основная структура css (сетки, базовые стили и т.д.)
bootstrap-theme.css= расширенный стиль (3D-кнопки, градиенты и т.д.). Этот файл является необязательным и вообще не влияет на функциональность бутстрапа, он только улучшает внешний вид.
Обновление 2
С выпуском v3.2.0 Bootstrap добавили возможность просмотра темы css на страницах документа. Если вы перейдете на одну из страниц документа (css, components, javascript) вы должны увидеть ссылку "Просмотр темы" внизу боковой навигационной панели, которую вы можете использовать для включите и выключите тему css.
Во-первых, bootstrap-theme.css - это не что иное, как эквивалент стиля Bootstrap 2.x в Bootstrap 3. Если вы действительно хотите его использовать, просто добавьте его ALONG с помощью bootstrap.css (сокращенная версия тоже будет работать).
Bootstrap-theme.css - это дополнительный файл CSS, который вам необязателен. Он дает 3D-эффекты для кнопок и некоторых других элементов.
Как указано другими, имя файла bootstrap-theme.css очень сбивает с толку. Я бы выбрал что-то вроде bootstrap-3d.css или bootstrap-fancy.css, которое было бы более наглядным из того, что он на самом деле делает. То, что мир видит в качестве "темы Bootstrap", - это вещь, которую вы можете получить от BootSwatch, который является совершенно другим зверем.
С учетом сказанного, эффекты довольно приятные - градиенты и тени и тому подобное. К сожалению, этот файл повредит темам BootSwatch, поэтому я решил вникнуть в то, что потребуется, чтобы заставить его играть с ними хорошо.
Bootstrap-theme.css создается из файла theme.less в источнике Bootstrap. Поврежденные элементы (начиная с Bootstrap v3.2.0):
Файл theme.less зависит от:
@import "variables.less";
@import "mixins.less";
В коде используются цвета, определенные в переменных. в нескольких местах, например:
// Give the progress background some depth
.progress {
#gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}
Вот почему bootstrap-theme.css полностью испортит темы BootSwatch. Хорошей новостью является то, что темы BootSwatch также создаются из файлов переменных .less, поэтому вы можете просто создать bootstrap-theme.css для своей темы BootSwatch.
Правильный способ сделать это - обновить процесс сборки темы, но здесь это быстрый и грязный способ. Замените файл variables.less в источнике Bootstrap тем, который был создан в вашей теме Bootswatch, и создайте его, и у вас есть файл bootstrap-theme.css для вашей темы Bootswatch.
Building Bootstrap может показаться сложным, но на самом деле это очень просто:
Готово. Видите, это было легко, не так ли?
Я знаю, что этот пост немного старый, но...
Как отметил "witttness".
О вашей собственной пользовательской теме При создании собственной темы вы можете изменить bootstrap-theme.css. Это может упростить изменение стиля, не нарушая при этом какой-либо из встроенных функций Bootstrap.
Я вижу, что Bootstrap видел на протяжении многих лет, что каждый хочет что-то немного отличающееся от основных стилей. Хотя вы можете изменить bootstrap.css, это может сломать вещи, и это может сделать обновление до более новой версии настоящей болью и трудоемкой. Загрузка с сайта "тема" означает, что вы должны ждать , если, что создатель обновляет эту тему, иногда большой , если, правильно?
Некоторые создают собственный файл custom.css, и это нормально, но если вы используете "bootstrap-theme.css", многие вещи уже построены, и это позволяет вам быстрее сворачивать свою собственную тему без "разрушения ядра бутстрапа".css. Мне для некоторых не нравится 3D-кнопки и градиенты большую часть времени, поэтому измените их с помощью bootstrap-theme.css. Добавьте поля или отступы, измените радиус на свои кнопки, и т.д....
Скорее старый пост, но я подумал, что добавлю два цента о темах. Понятно, что многие люди (включая меня) любят структуру бутстрапа с ее гибкой сеткой, но мы также хотим отличить себя от других сайтов "из коробки". Доступность уникальных тем и шаблонов начальной загрузки взорвалась в последние несколько лет. Недавно я создал свой собственный сайт, чтобы предоставить некоторые из этих тем: http://thetoolsmith.com (бесстыдный плагин)
Суть в том, что вам по-прежнему нужна базовая платформа bootstrap, но вы можете модифицировать или добавлять стили в bootstrap-theme.css, чтобы она работала вместе с основными файлами, но при этом выглядела иначе, чем вы можете ваш собственный.