174

После загрузки полного пакета начальной загрузки 3 с http://getbootstrap.com я заметил, что для темы есть отдельный файл css. Как это использовать? Пожалуйста, объясни?

Я включил bootstrap-theme.cssв свой существующий проект начальной загрузки, но нет разницы в выводе.

html css twitter-bootstrap-3

— Юварадж П
источник

382

После загрузки Bootstrap 3.x вы получите bootstrap.css и bootstrap-theme.css (не говоря уже о сокращенных версиях этих файлов, которые также присутствуют).

bootstrap.css

bootstrap.cssполностью стилизован и готов к использованию, если это ваше желание. Это возможно немного ясно, но оно готово, и это там.

Вам не нужно использовать bootstrap-theme.css, если вы не хотите, и все будет хорошо.

самозагрузки-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

О темах на BootSwatch.com: Эти темы не реализованы как bootstrap-theme.css. Темы BootSwatch - это модифицированные версии оригинала bootstrap.css. Таким образом, вы определенно не должны использовать тему из BootSwatch И bootstrap-theme.cssфайл одновременно.

Пользовательская тема

О вашей собственной пользовательской теме: вы можете изменить bootstrap-theme.cssпри создании своей собственной темы. Это может упростить внесение изменений в стиль без случайного нарушения каких-либо встроенных функций Bootstrap.

— witttness
источник

68

Это должен быть выбранный ответ.

— Патрик Каллен

11

Уведомление о Bootswatch.com очень полезно. Спасибо.

— Даниэль Кмак

@Daniel ... но это должно быть реорганизовано в соответствии с новым направлением twbs / bootstrap, чтобы иметь стабильную, согласованную функцию для его тематических клиентов

— Luca G. Soave

Разве файл bootstrap-theme.css больше не является переопределением, то есть bootstrap.css настраивает вас таким образом, чтобы вы могли использовать bootstrap со всеми соответствующими стилями. Bootstrap-theme.css предназначен для переопределения стилей БЕЗ изменения базового CSS-файла. Здесь важно, что при обновлении до начальной загрузки XX вы заменяете базовый файл CSS, и вам не придется беспокоиться о потере всех ваших настроек. Возможно, вам придется настроить файл темы, но это гораздо меньше проблем. Возможно то, что вы говорили.

— Жак

2

Больше всего смущает то, что если вы используете функцию настройки на сайте начальной загрузки ( getbootstrap.com/customize ), она помещает ваши настройки в bootstrap.css, а не в файл темы. Эта страница также не содержит параметров для изменения чего-либо, связанного с темой (tm). Насколько я вижу, файл темы просто добавляет кучу градиентов и теней и ничего больше не делает.

— C.List

90

Для примера стилей CSS взгляните на: http://getbootstrap.com/examples/theme/

Если вы хотите увидеть, как пример выглядит без файла bootstrap-theme.css, откройте инструменты разработчика браузера и удалите ссылку из <head> примера, а затем сравните ее.

~~Я знаю, что это старый вопрос, но разместил его на тот случай, если кто-то ищет пример того, как я выгляжу.~~

Обновить

bootstrap.css = основная структура CSS (сетки, основные стили и т. д.)

bootstrap-theme.css= расширенный стиль (3D кнопки, градиенты и т. д.). Этот файл не является обязательным и не влияет на функциональность начальной загрузки, он только улучшает внешний вид.

Обновление 2

С выпуском v3.2.0 Bootstrap добавлена возможность просмотра темы css на страницах документации. Если вы перейдете на одну из страниц документа ( CSS , компоненты , Javascript ), вы должны увидеть ссылку «Просмотр темы» в нижней части боковой панели, которую вы можете использовать для включения и выключения темы CSS.

— joshhunt
источник

Спасибо, что ответили на этот вопрос, так как ваш ответ имел смысл. Мне было интересно, знаете ли, я бы просто заменил содержимое bootstrap.cssтемы на Bootswatch.com, как там написано на сайте, и я все еще мог бы использовать bootstrap-theme.cssдаже с темой Bottswatch?

— преломил Паладин

3

bootstrap.css = основной CSS-фреймворк (сетки, основные стили и т. д.) bootstrap-theme.css = расширенный стиль (3D-кнопки и т. д.) Я никогда не использовал его, но только взглянул на него, и Bootswatch, похоже, редактирует файл bootstrap.css удовлетворить свои потребности. Таким образом, чтобы использовать его, все, что вам нужно сделать, это загрузить файл bootstrap.css из Bootswatch и использовать его. Не используйте bootstrap-theme.css, так как это, вероятно, будет конфликтовать с CSS из Bootswatch.

— Joshhunt

Спасибо человек, цени ответ! Это то, что я заметил, просто не вернулся сюда. Без изменений вы не можете использовать bootstrap-themeс Bootswatch. Это все равно испортило мой сайт.

— преломленный паладин

72

Во-первых, bootstrap-theme.cssэто не что иное, как эквивалент стиля Bootstrap 2.x в Bootstrap 3. Если вы действительно хотите его использовать, просто добавьте его bootstrap.cssДОЛЖНО (минимизированная версия также будет работать).

— androphone
источник

4

Напоминаем, что если вы используете сторонние загрузочные css файлы, лучше закомментируйте официальный bootstrap-theme.css.

— Cheung

163

Почему это принятый ответ? Это даже не ответ. Сожалею. Все это говорит о том, что является эквивалентом файла в Bootstrap 2, и любой, кто не знаком с Bootstrap 2, теперь должен будет найти другой ответ, чтобы узнать, что делает этот файл.

— Марио Авад

4

Но это все, что я хочу знать.

— Владимир

9

Согласитесь с @MarioAwad, это не ответ. Это также сбивает с толку, поскольку я думал, что это просто поддержка старого Bootstrap css, что только частично верно.

— Яннис Дран

1

В BS 3.2, в том числе тема CSS действительно меняет внешний вид, добавляя 3D-оттенки для кнопок и других вещей. Смотрите ответ joshhunt для деталей.

— RajV

31

Bootstrap-theme.css - это дополнительный файл CSS, который вы можете использовать не обязательно. Он дает 3D-эффекты для кнопок и некоторых других элементов.

— Jowen
источник

14

Как утверждают другие, имя файла bootstrap-theme.css очень запутанное. Я бы выбрал что-то вроде bootstrap-3d.css или bootstrap-fancy.css, которое было бы более наглядным описанием того, что он на самом деле делает. То, что мир видит как «Bootstrap Theme» - это то, что вы можете получить от BootSwatch, который является совершенно другим зверем.

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

МЕНЬШЕ

Bootstrap-theme.css генерируется из файла theme.less в источнике Bootstrap. Уязвимые элементы (начиная с Bootstrap v3.2.0):

Элементы списка
Кнопки
Изображений
Dropdowns
Navbars
Оповещения
Прогресс-бары
Список групп
Панели
углубления

Файл theme.less зависит от:

@import "variables.less";
@import "mixins.less";

В коде используются цвета, определенные в variables.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 также создаются из файлов variables.less, поэтому вы можете просто создать файл bootstrap-theme.css для своей темы BootSwatch.

Сборка bootstrap-theme.css

Правильный способ сделать это - обновить процесс сборки Theme, но здесь есть быстрый и грязный способ. Замените файл variables.less в источнике Bootstrap файлом из вашей темы Bootswatch и создайте его, и вуаля у вас есть файл bootstrap-theme.css для вашей темы Bootswatch.

Само создание Bootstrap

Сборка Bootstrap может показаться сложной, но на самом деле все очень просто:

Загрузите исходный код Bootstrap
Загрузите и установите NodeJS
Откройте командную строку и перейдите к исходной папке начальной загрузки. Введите «npm install». Это добавит папку «node_modules» в проект и загрузит все необходимое для Node.
Установите grunt глобально (опция -g), набрав "npm install -g grunt-cli"
Переименуйте папку «dist» в «dist-orig», затем перестройте ее, набрав «grunt dist». Теперь проверьте, есть ли новая папка "dist", которая содержит все, что вам нужно для использования вашей пользовательской сборки Bootstrap.

Готово. Видите, это было легко, не так ли?

— Этот парень
источник

2

Я знаю, что этот пост довольно старый, но ...

Как указал «свидетель».

О вашей собственной пользовательской теме Вы можете изменить bootstrap-theme.css при создании собственной темы. Это может упростить внесение изменений в стиль без случайного нарушения каких-либо встроенных функций Bootstrap.

Я вижу, как Bootstrap на протяжении многих лет видел, что каждый хочет чего-то немного отличного от основных стилей. Хотя вы можете изменить bootstrap.css, это может сломать вещи и сделать обновление до более новой версии реальным занятием и отнимает много времени. Загрузка с сайта «тема» означает, что вам придется ждать, если этот создатель обновит эту тему, большой, если иногда, верно?

Некоторые собирают свой собственный файл «custom.css», и это нормально, но если вы используете «bootstrap-theme.css», многие вещи уже созданы, и это позволяет вам быстрее катить свою собственную тему, не нарушая ядро начальной загрузки. .css. Мне, например, больше всего не нравятся 3D кнопки и градиенты, поэтому меняйте их с помощью bootstrap-theme.css. Добавьте поля или отступы, измените радиус кнопок и так далее ...

— user1946683
источник

Как использовать bootstrap-theme.css с bootstrap 3?