Завантаживши повний пакет завантажувальної програми 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 AND bootstrap-theme.cssфайл одночасно.
Про власну власну тему: Ви можете змінити, bootstrap-theme.cssстворюючи власну тему. Це може полегшити внесення змін до стилю, не випадково порушивши будь-яку з цих вбудованих благ Bootstrap.
Для прикладу стилів css дивіться: http://getbootstrap.com/examples/theme/
Якщо ви хочете побачити, як виглядає приклад без файлу bootstrap-theme.css, відкрийте інструменти для розробників браузера та видаліть посилання з <head> прикладу, і тоді ви можете порівняти його.
Я знаю, що це давнє питання, але він розмістив його на всякий випадок, якщо хтось шукає приклад того, як це виглядає я.
Оновлення
bootstrap.css = основна рамка css (сітки, основні стилі тощо)
bootstrap-theme.css= розширений стиль (тривимірні кнопки, градієнти тощо). Цей файл необов’язковий і зовсім не впливає на функціональність завантажувального пристрою, він лише покращує зовнішній вигляд.
Оновлення 2
З випуском v3.2.0 Bootstrap додали можливість перегляду css теми на сторінках doc. Якщо ви переходите на одну з сторінок doc ( css , компоненти , javascript ), ви побачите посилання "Тема попереднього перегляду" внизу бічної навігації, яку ви можете використовувати для вмикання та вимкнення css теми.
bootstrap.cssтемою з Bootswatch.com, як там написано на сайті, і я все ще можу використовувати bootstrap-theme.cssнавіть тему Bottswatch?
bootstrap-themeBootswatch. Це все одно заплутало мій сайт.
По-перше, bootstrap-theme.cssце не що інше, як еквівалент стилю Bootstrap 2.x у Bootstrap 3. Якщо ви дійсно хочете ним користуватися, просто додайте його НАЗАД bootstrap.css(мінімізована версія також буде працювати).
Як зазначають інші, ім'я файлу bootstrap-theme.css дуже заплутане. Я вибрав би щось на кшталт bootstrap-3d.css або bootstrap-fancy.css, яке було б більш описовим, що він насправді робить. Те, що світ бачить як "Тема завантаження", - це те, що ви можете отримати від BootSwatch, який є абсолютно іншим звіром.
З урахуванням сказаного, ефекти дуже приємні - градієнти та тіні та інше. На жаль, цей файл спричинить загрозу на темах BootSwatch, тому я вирішив розібратися в тому, що потрібно для того, щоб він добре зіграв з ними.
Bootstrap-theme.css генерується з файлу theme.less у джерелі Bootstrap. Елементи, на які постраждали, є (станом на Bootstrap v3.2.0):
Файл topic.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 також створені з файлів variables.less, тому ви можете просто створити bootstrap-theme.css для вашої теми BootSwatch.
Правильний спосіб зробити це - оновити процес збирання теми, але ось швидкий і брудний шлях. Замініть файл variables.less у джерелі Bootstrap на файл із вашої Bootswatch Theme та побудуйте його та вуаля, у вас є файл bootstrap-theme.css для вашої теми Bootswatch.
Побудова Bootstrap може здатися жахливою, але насправді це дуже просто:
Зроблено. Бачите, це було легко, чи не так?
Я знаю, що ця публікація якось стара, але ...
Як вказувало "дотепність".
Про власну власну тему Ви можете змінити bootstrap-theme.css під час створення власної теми. Це може полегшити внесення змін до стилю, не випадково порушивши будь-яку з цих вбудованих благ Bootstrap.
Я бачу це так, як Bootstrap протягом багатьох років бачив, що кожен хоче чогось трохи іншого, ніж основні стилі. Хоча ви можете змінити bootstrap.css, це може зламати речі, і це може зробити оновлення до нової версії справжнім болем і забирає багато часу. Завантаження з сайту "Тема" означає, що вам доведеться почекати, якщо цей автор оновить цю тему, велика, якщо іноді, правда?
Деякі створюють власний файл "custom.css", і це нормально, але якщо ви використовуєте "bootstrap-theme.css", багато чого вже створено, і це дозволяє швидше прокручувати власну тему ", не порушуючи ядра завантажувальної програми. .css. Мені для більшості часу не подобаються тривимірні кнопки та градієнти, тому міняйте їх за допомогою bootstrap-theme.css. Додати поля або відступи, змінити радіус для кнопок, і так далі ...