Налаштування шаблону CSS Bootstrap

Я тільки починаю роботу з Bootstrap з Twitter і мені цікаво, що таке «найкращі практики» для налаштування. Я хочу розробити систему, яка використовуватиме всю потужність шаблону css (Bootstrap чи іншого), бути повністю (і легко) модифікованою, бути стійкою (тобто - коли наступна версія Bootstrap вийде з Twitter, я не хочу ' не треба починати спочатку.

Наприклад, я хочу додати фонові зображення до верхньої навігації. Схоже, є три способи досягти цього:

1. Змініть класи .topbar у bootstrap.css. Мені це особливо не подобається, тому що у мене буде багато елементів .topbar, і я не обов'язково хочу їх змінювати однаково.
2. Створіть нові класи з моїми фоновими зображеннями та застосуйте обидва стилі (новий та завантажувальний елемент до мого елемента). Це може створити конфлікти стилів, яких можна уникнути, роздягнувши клас .topbar в окремі класи, а потім лише використовуючи фрагменти, на які не наступає мій спеціальний клас. Знову ж таки для цього потрібно більше роботи, ніж я вважаю, що потрібно, і хоча вона гнучка, це не дозволить мені легко оновлювати bootstrap.css, коли Twitter випустить наступну партію.
3. Використовуйте змінні в .LESS для досягнення налаштувань. Це, здається, є хорошим підходом, але не використовується. МЕНШЕ У мене виникають занепокоєння щодо компіляції css на клієнті та щодо стійкості коду.

Хоча я використовую Bootstrap, це питання можна узагальнити до будь-якого шаблону css.

Заздалегідь дякую за вклад.

Найкраще це зробити.

1. вилка twitter-bootstrap з github та клонується локально.

вони дуже швидко змінюють бібліотеку / фреймворк (вони розходяться внутрішньо. Деякі вважають за краще бібліотеку, я б сказав, що це фреймворк, оскільки міняйте свій макет з моменту завантаження його на вашу сторінку). Ну ... розгортання / клонування дозволить легко отримати нові майбутні версії.

2. Не змінюйте файл bootstrap.css

Це ускладнить ваше життя, коли вам потрібно оновити завантажувальний пакет (і вам потрібно буде це зробити).

3. Створіть свій власний файл css та перезапишіть, коли вам потрібні оригінальні матеріали для завантаження

Скажімо, якщо вони встановлюють верхню панель, скажімо, color: black;але ви хочете її білою, створіть новий дуже специфічний селектор для цієї верхньої панелі та скористайтеся цим правилом на певній верхній панелі. Наприклад, для таблиці, це було б <table class="zebra-striped mycustomclass">. Якщо ви декларуєте свій файл css після bootstrap.css, це замінить все, що ви хочете.

Оновлення 2019 - Bootstrap 4

Я переглядаю це питання налаштування Bootstrap для 4.x, який тепер використовує SASS замість менше. Загалом, є 2 способи налаштування Bootstrap ...

1. Прості заміщення CSS

Один із способів налаштування - це просто використання CSS для заміни Bootstrap CSS. Для ремонтопридатності налаштування CSS поміщаються в окремий custom.cssфайл, так що bootstrap.cssзалишки не змінюються. Посилання на custom.cssнаступне після того, bootstrap.cssяк будуть вирішені зміни в роботі ...

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">

Просто додайте всі необхідні зміни в користувальницьку CSS. Наприклад...

    /* remove rounding from cards, buttons and inputs */
    .card, .btn, .form-control {
        border-radius: 0;
    }

До ( bootstrap.css)

Після (з custom.css)

Виконуючи налаштування, слід розуміти специфіку CSS . Перевіряє custom.cssнеобхідність використання селекторів, які є такими ж специфічними, як і bootstrap.css.

Зауважте, що !importantв користувацькому CSS немає необхідності використовувати , якщо ви не перекриєте один з класів Bootstrap Utility . Специфіка CSS завжди працює для одного класу CSS, щоб перекрити інший.

2. Налаштуйте за допомогою SASS

Якщо ви знайомі з SASS (і вам слід скористатися цим методом), ви можете налаштувати Bootstrap зі своїм власним custom.scss. У документах Bootstrap є розділ, який пояснює це, однак документи не пояснюють, як використовувати існуючі змінні у вашому custom.scss. Наприклад, давайте змінимо колір тла тіла на #eeeeeeта змінимо / змінимо синій primaryконтекстний колір на змінну Bootstrap$purple ...

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* use a variable to override primary */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

Це також працює для створення нових спеціальних класів . Наприклад, тут я додаю purpleв тему квітів , що створює все в CSS для btn-purple, text-purple, bg-purple, alert-purpleі т.д. ...

/* add a new purple custom color */
$theme-colors: (
  purple: $purple
);

https://www.codeply.com/go/7XonykXFvP

За допомогою SASS ви повинні @import bootstrap після налаштування, щоб змусити їх працювати! Після того, як SASS компілюється в CSS ( це потрібно зробити за допомогою вузла компілятора SASS, gulp-sass, npm webpack тощо ), отриманий CSS є індивідуальним завантажувальним завантажувачем. Якщо ви не знайомі з SASS, ви можете налаштувати Bootstrap за допомогою такого інструмента, як цей створений вами конструктор тем .

Спеціальне демонстраційне завантаження (SASS)

Примітка. На відміну від 3.x, Bootstrap 4.x не пропонує офіційного інструменту налаштування. Однак ви можете завантажити сітку лише CSS або скористатися іншим спеціальним інструментом збирання 4.x, щоб заново побудувати CSS Bootstrap 4 за бажанням.

Пов'язане:
Як розширити / змінити (налаштувати) Bootstrap 4 за допомогою SASS
Як змінити основний колір завантажувача?
Як створити новий набір кольорів стилів у Bootstrap 4 за допомогою sass
Як налаштувати Bootstrap

Я думаю, що офіційно кращим способом тепер є використання Менше, або динамічно перекрити bootstrap.css (використовуючи less.js), або перекомпілювати bootstrap.css (використовуючи Node або менш компілятор).

З документації Bootstrap , ось як перевизначити стилі bootstrap.css динамічно:

Завантажте найновіший Less.js і включіть шлях до нього (і Bootstrap) у <head>.

 <link rel="stylesheet/less" href="/path/to/bootstrap.less">
    <script src="/path/to/less.js"></script>

Щоб перекомпілювати файли .less, просто збережіть їх та перезавантажте сторінку. Less.js компілює їх і зберігає їх у локальних сховищах.

Або якщо ви віддаєте перевагу статичній компіляції нового bootstrap.css зі своїми власними стилями (для виробничих середовищ):

Встановіть інструмент командного рядка МЕНШЕ через Node та запустіть таку команду:

$ lessc ./less/bootstrap.less > bootstrap.css

З часу відповіді Паблуеса ще в грудні, тепер є кращий спосіб налаштувати Bootstrap.

Використання: Bootswatch для створення вашого bootstrap.css

Bootswatch будує звичайний Twitter Bootstrap з останньої версії (що б ви не встановили в каталог завантаження), але також імпортує ваші налаштування. Це полегшує використання останньої версії Bootstrap, зберігаючи користувальницький CSS, не змінюючи нічого про ваш HTML. Ви можете просто перекинути файли boostrap.css.

Ви можете використовувати шаблон завантаження з

http://www.initializr.com/

який включає всі файли без завантаження. Потім ви можете змінити змінні / оновити менше файлів, як хочете, і це автоматично складе файл css. Під час розгортання компілюйте файл менше в css.

Найкращий варіант, на мою думку, - це скомпілювати власний менший файл, включаючи bootstrap.less, нестандартний файл variables.less та власні правила:

1. Клоніруйте завантажувач у вашій кореневій папці: git clone https://github.com/twbs/bootstrap.git
2. Перейменуйте це "завантажувальний"
3. Створіть файл package.json: https://gist.github.com/jide/8440609
4. Створіть Gruntfile.js: https://gist.github.com/jide/8440502
5. Створіть папку "менше"
6. Скопіюйте bootstrap / less / variables.less у папку "менше"
7. Змінення контуру шрифту: @icon-font-path: "../bootstrap/fonts/";
8. Створіть нестандартний файл style.less у папці "менше", яка імпортує bootstrap.less та ваш власний файл variables.less: https://gist.github.com/jide/8440619
9. Біжи npm install
10. Біжи grunt watch

Тепер ви можете змінювати змінні будь-яким способом, заміняти правила завантаження у вашому користувальницькому файлі style.less, і якщо якийсь день ви хочете оновити завантажувальний файл, ви можете замінити всю папку завантажувальної програми!

EDIT: Я створив котло Bootstrap за допомогою цієї техніки: https://github.com/jide/bootstrap-boilerplate

Нещодавно я написав пост про те, як я робив це в Udacity за останні пару років. Цей метод означає, що ми мали змогу оновлювати Bootstrap всякий раз, коли хотіли, не маючи конфліктів, зливали роботу тощо тощо.

Пост іде більш глибоко з прикладами, але основна ідея:

• Зберігайте первозданну копію завантажувального коду і перезаписуйте його зовні.
• Змініть один файл (bootstrap's variables.less), щоб включити власні змінні.
• Зробіть файл свого сайту @include bootstrap.less, а потім перейдіть до нього.

Це означає використання МЕНШЕ та компіляції його до CSS, перш ніж відправляти його клієнтові (Клієнт МЕНШЕ, якщо вибагливий, і я, як правило, уникаю цього), але це НАДАЧНО добре для ремонтопридатності / оновлення, а отримання меншої компіляції дійсно дуже просто . Зв'язаний код github має приклад, використовуючи грунт, але є багато способів цього досягти - навіть графічні інтерфейси, якщо це ваша справа.

Використовуючи це рішення, ваш приклад проблема виглядатиме так:

• Змініть колір панелі навігації за допомогою @ navbar-inverse-bg у змінних.less (не завантажувальних)
• Додайте свої власні стилі навігації до bootstrap_overrides.less, перезаписуючи все, що вам потрібно, під час проходження.
• Щастя

Коли настає час оновити завантажувальний інструмент, ви просто поміняєте незайману копію завантажувального завантажувального пристрою, і все ще працюватиме (якщо завантажувальний пристрій вніс зміни, вам потрібно буде оновити зміни, але вам доведеться це зробити все одно)

Повідомлення в блозі з прохідними знаходиться тут .

Приклад коду на github знаходиться тут .

Використовуйте менше з Bootstrap ...

Ось документи Bootstrap про те, як використовувати менше

(вони перейшли з попередніх відповідей)