Пример стилей css см. здесь: http://getbootstrap.com/examples/theme/

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

Во-первых, bootstrap-theme.css — это не что иное, как эквивалент стиля Bootstrap 2.x в Bootstrap 3. Если вы действительно хотите его использовать, просто добавьте его ВМЕСТЕ с 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";

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

Сборка bootstrap-theme.css

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

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

Создание Bootstrap может показаться сложным, но на самом деле это очень просто:

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

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

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

Как указал «очевидец».

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

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

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