Мигриране към v4

Bootstrap 4 е основно пренаписване на целия проект. Най-забележителните промени са обобщени по-долу, последвани от по-конкретни промени в съответните компоненти.

Стабилни промени

Преминавайки от Beta 3 към нашата стабилна версия v4.0, няма революционни промени, но има някои забележителни промени.

Печат

• Коригирани повредени помощни програми за печат. Преди това използването на .d-print-*клас неочаквано отменяше всеки друг .d-*клас. Сега те съответстват на другите ни помощни програми за показване и се прилагат само за тази медия ( @media print).

• Разширени налични помощни програми за дисплей за печат, за да съответстват на други помощни програми. Бета 3 и по-стари версии имаха само block, inline-block, inlineи none. Добавена е стабилна v4 flex, inline-flex, table, table-rowи table-cell.

• Коригирано изобразяване на предварителен преглед на печат в различни браузъри с нови стилове на печат, които указват @page size.

Бета 3 промени

Въпреки че Бета 2 видя по-голямата част от нашите критични промени по време на бета фазата, но все още имаме няколко, които трябва да бъдат разгледани в Бета 3 изданието. Тези промени се прилагат, ако актуализирате до Beta 3 от Beta 2 или която и да е по-стара версия на Bootstrap.

Разни

• Премахна неизползваната $thumbnail-transitionпроменлива. Не прехвърляхме нищо, така че беше просто допълнителен код.
• Пакетът npm вече не включва никакви файлове, различни от нашите сорс и dist файлове; ако сте разчитали на тях и сте изпълнявали нашите скриптове през node_modulesпапката, трябва да адаптирате своя работен процес.

Форми

• Пренаписа както персонализираните, така и стандартните квадратчета за отметка и радиостанции. Сега и двата имат съвпадаща HTML структура (външна <div>със сродник <input>и <label>) и едни и същи стилове на оформление (подредени по подразбиране, вградени с клас модификатор). Това ни позволява да стилизираме етикета въз основа на състоянието на входа, опростявайки поддръжката на disabledатрибута (преди това изискваше родителски клас) и поддържайки по-добре нашето валидиране на формуляр.

  Като част от това сме променили CSS за управление на множество background-imageквадратчета за отметка и радиостанции в потребителски формуляри. Преди това премахнатият .custom-control-indicatorелемент имаше фонов цвят, градиент и SVG икона. Персонализирането на градиента на фона означаваше да заменяте всички тези всеки път, когато трябваше да промените само един. Сега имаме .custom-control-label::beforeзапълване и градиент и .custom-control-label::afterманипулации на иконата.

  За да направите персонализирана вградена проверка, добавете .custom-control-inline.

• Актуализиран селектор за групи бутони, базирани на въвеждане. Вместо [data-toggle="buttons"] { }за стил и поведение, ние използваме dataатрибута само за JS поведение и разчитаме на нов .btn-group-toggleклас за стилизиране.

• Премахнато .col-form-legendв полза на леко подобрено .col-form-label. По този начин .col-form-label-smи .col-form-label-lgможе да се използва върху <legend>елементи с лекота.

• Персонализираните въведени файлове получиха промяна в тяхната $custom-file-textSass променлива. Това вече не е вложена Sass карта и сега захранва само един низ – Browseбутонът, тъй като сега е единственият псевдоелемент, генериран от нашия Sass. Сега Choose fileтекстът идва от .custom-file-label.

Входни групи

• Добавките за входни групи вече са специфични за тяхното разположение спрямо вход. Отпаднахме .input-group-addonи .input-group-btnза два нови класа .input-group-prependи .input-group-append. Трябва изрично да използвате добавяне или добавяне сега, опростявайки голяма част от нашия CSS. В рамките на добавяне или добавяне поставете бутоните си така, както биха съществували навсякъде другаде, но обвийте текста в .input-group-text.

• Вече се поддържат стилове за валидиране, както и множество входове (въпреки че можете да валидирате само един вход на група).

• Класовете за оразмеряване трябва да са на родителя .input-group, а не на отделните елементи на формата.

Бета 2 промени

Докато сме в бета версия, ние се стремим да нямаме критични промени. Нещата обаче не винаги вървят по план. По-долу са важните промени, които трябва да имате предвид, когато преминавате от Бета 1 към Бета 2.

Разбиване

• Премахната $badge-colorпроменлива и нейното използване на .badge. Използваме функция за цветови контраст, за да изберем colorвъз основа на background-color, така че променливата е ненужна.
• Преименувана grayscale()функция, за gray()да се избегне прекъсване на конфликт с основния CSS grayscaleфилтър.
• Преименуван .table-inverseна , .thead-inverse, и .thead-defaultна .*-darkи .*-light, съответстващ на нашите цветови схеми, използвани другаде.
• Отзивчивите таблици вече генерират класове за всяка точка на прекъсване на мрежата. Това се различава от Beta 1 по това, че използваният от .table-responsiveвас е по-скоро като .table-responsive-md. Сега можете да използвате .table-responsiveили .table-responsive-{sm,md,lg,xl}според нуждите.
• Премахната поддръжка на Bower като мениджър на пакети е отхвърлена за алтернативи (напр. Yarn или npm). Вижте bower/bower#2298 за подробности.
• Bootstrap все още изисква jQuery 1.9.1 или по-нова версия, но ви съветваме да използвате версия 3.x, тъй като поддържаните браузъри на v3.x са тези, които Bootstrap поддържа, плюс v3.x има някои поправки за сигурност.
• Премахна неизползвания .form-control-labelклас. Ако сте използвали този клас, той е дубликат на .col-form-labelкласа, който е центрирал вертикално a <label>със свързания с него вход в хоризонтални оформления на формуляри.
• Променен е color-yiqот mixin, който включва colorсвойството, на функция, която връща стойност, което ви позволява да го използвате за всяко CSS свойство. Например, вместо color-yiq(#000), бихте написали color: color-yiq(#000);.

Акценти

• Въведена е нова pointer-eventsупотреба на модалните. Външният .modal-dialogпреминава през събития с pointer-events: noneза персонализирано обработване на щраквания (което прави възможно просто да слушате .modal-backdropза всякакви щраквания) и след това го противодейства за действителното .modal-contentс pointer-events: auto.

Резюме

Ето големите билети, за които трябва да знаете, когато преминавате от v3 към v4.

Поддръжка на браузър

• Отпадна поддръжката на IE8, IE9 и iOS 6. v4 вече е само IE10+ и iOS 7+. За сайтове, които се нуждаят от едно от тези, използвайте v3.
• Добавена е официална поддръжка за браузъра и WebView на Android v5.0 Lollipop. По-ранните версии на Android Browser и WebView остават само неофициално поддържани.

Глобални промени

• Flexbox е активиран по подразбиране. Като цяло това означава отдалечаване от плаващите и повече в нашите компоненти.
• Превключихме от Less към Sass за нашите изходни CSS файлове.
• Превключихме от pxкъм remкато наша основна CSS единица, въпреки че пикселите все още се използват за медийни заявки и поведение на мрежата, тъй като екраните на устройството не се влияят от размера на шрифта.
• Общият размер на шрифта се увеличи от 14pxна 16px.
• Преработени нива на мрежата за добавяне на пета опция (адресиране на по-малки устройства на 576pxи по-долу) и премахнати -xsинфиксите от тези класове. Пример: .col-6.col-sm-4.col-md-3.
• Отделната незадължителна тема е заменена с конфигурируеми опции чрез SCSS променливи (напр. $enable-gradients: true).
• Системата за изграждане е преработена, за да използва поредица от npm скриптове вместо Grunt. Вижте package.jsonвсички скриптове или readme на нашия проект за нуждите на местното развитие.
• Вече не се поддържа използване на Bootstrap без реагиране.
• Изхвърлихме онлайн персонализатора в полза на по-обширна документация за настройка и персонализирани компилации.
• Добавени са десетки нови полезни класове за обичайни двойки свойства-стойност на CSS и преки пътища за интервал между маржове/подложки.

Мрежова система

• Преместен във flexbox.
  • Добавена е поддръжка за flexbox в grid mixins и предварително дефинирани класове.
  • Като част от flexbox, включена поддръжка за класове за вертикално и хоризонтално подравняване.
• Актуализирани имена на класове на мрежата и ново ниво на мрежата.
  • Добавено е ново smниво на мрежата по-долу 768pxза по-подробен контрол. Сега имаме xs, sm, md, lgи xl. Това също означава, че всяко ниво е издигнато с едно ниво нагоре (така че .col-md-6във v3 вече е .col-lg-6във v4).
  • xsкласовете на мрежата са променени, за да не изискват инфикса за по-точно представяне, че започват да прилагат стилове при min-width: 0, а не при зададена стойност на пиксела. Вместо .col-xs-6, сега е .col-6. Всички други нива на мрежата изискват инфикса (напр. sm).
• Актуализирани размери на мрежата, миксини и променливи.
  • Улуците на мрежата вече имат карта на Sass, така че можете да укажете конкретни ширини на улуците при всяка точка на прекъсване.
  • Актуализирани мрежови миксини за използване на make-col-readyподготвителен миксин и make-colза задаване на flexи max-widthза индивидуално оразмеряване на колони.
  • Променени точки на прекъсване на медийни заявки за мрежова система и ширини на контейнери, за да се отчете новото ниво на мрежата и да се гарантира, че колоните се делят равномерно на 12при максималната им ширина.
  • Точките на прекъсване на мрежата и ширините на контейнера вече се обработват чрез Sass карти ( $grid-breakpointsи $container-max-widths) вместо няколко отделни променливи. Те заместват @screen-*изцяло променливите и ви позволяват напълно да персонализирате нивата на мрежата.
  • Медийните заявки също са променени. Вместо да повтаряме нашите декларации за медийни заявки с една и съща стойност всеки път, сега имаме @include media-breakpoint-up/down/only. Сега, вместо да пишете @media (min-width: @screen-sm-min) { ... }, можете да пишете @include media-breakpoint-up(sm) { ... }.

Компоненти

• Изпуснати панели, миниатюри и кладенци за нов всеобхватен компонент, карти .
• Премахна шрифта на иконата Glyphicons. Ако имате нужда от икони, някои опции са:
  • версията нагоре по веригата на Glyphicons
  • Октикони
  • Шрифт Awesome
  • Вижте страницата Разширяване за списък с алтернативи. Имате допълнителни предложения? Моля, отворете тема или PR.
• Премахна приставката Affix jQuery.
  • Препоръчваме да използвате position: stickyвместо това. Вижте записа HTML5 Моля за подробности и конкретни препоръки за полифил. Едно предложение е да се използва @supportsправило за прилагането му (напр. @supports (position: sticky) { ... })/
  • Ако сте използвали Affix за прилагане на допълнителни, не position-стилове, полифилите може да не поддържат вашия случай на употреба. Една опция за такива употреби е библиотеката ScrollPos-Styler на трета страна .
• Отпадна компонентът на пейджъра, тъй като по същество беше леко персонализирани бутони.
• Преработени са почти всички компоненти, за да се използват повече невложени селектори на клас вместо прекалено специфични селектори за деца.

По компонент

Този списък подчертава ключови промени по компоненти между v3.xx и v4.0.0.

Рестартирайте

Новото в Bootstrap 4 е Reboot , нов стилов лист, който се основава на Normalize с нашите собствени донякъде упорити стилове за нулиране. Селекторите, които се появяват в този файл, използват само елементи - тук няма класове. Това изолира нашите стилове за нулиране от нашите стилове на компоненти за по-модулен подход. Някои от най-важните нулирания, които това включва, са box-sizing: border-boxпромяната, преминаване от emкъм remединици на много елементи, стилове на връзки и много нулиране на елемент на формуляр.

Типография

• Преместих всички .text-помощни програми във _utilities.scssфайла.
• Изпуснат .page-header, тъй като, освен границата, всички негови стилове могат да се прилагат чрез помощни програми.
• .dl-horizontalе отпаднал. Вместо това, използвайте .rowon <dl>и използвайте класове колони на мрежата (или миксини) върху неговите <dt>и <dd>децата.
• Персонализираният <blockquote>стил се премести в класовете - .blockquoteи в .blockquote-reverseмодификатора.
• .list-inlineсега изисква елементите от списъка на децата му да имат .list-inline-itemприложен към тях новия клас.

Изображения

• Преименувана .img-responsiveна .img-fluid.
• Преименуван .img-roundedна.rounded
• Преименуван .img-circleна.rounded-circle

Маси

• Почти всички екземпляри на >селектора са премахнати, което означава, че вложените таблици вече автоматично ще наследяват стилове от своите родители. Това значително опростява нашите селектори и потенциални персонализации.
• Отзивчивите таблици вече не изискват обгръщащ елемент. Вместо това просто поставете .table-responsiveдесния на <table>.
• Преименувано .table-condensedна .table-smза последователност.
• Добавена е нова .table-inverseопция.
• Добавени модификатори на заглавката на таблицата: .thead-defaultи .thead-inverse.
• Преименувани контекстуални класове, за да имат .table--префикс. Следователно .active, .success, .warning, .dangerи .infoдо .table-active, .table-success, .table-warning, .table-dangerи .table-info.

Форми

• Преместеният елемент се нулира във _reboot.scssфайла.
• Преименувана .control-labelна .col-form-label.
• Преименувани .input-lgи съответно .input-smна .form-control-lgи .form-control-sm.
• Прекъснати .form-group-*часове заради простотата. Вместо това сега използвайте .form-control-*класове.
• Премахнато .help-blockи заменено с .form-textпомощен текст на ниво блок. За вграден помощен текст и други гъвкави опции използвайте помощни класове като .text-muted.
• Изпуснат .radio-inlineи .checkbox-inline.
• Консолидирани .checkboxи .radioв .form-checkи различните .form-check-*класове.
• Преработени хоризонтални форми:
  • Отпадна .form-horizontalизискването за клас.
  • .form-groupвече не прилага стилове от .rowvia mixin, така че .rowсега се изисква за хоризонтални мрежови оформления (напр. <div class="form-group row">).
  • Добавен е нов .col-form-labelклас към вертикално центрирани етикети с .form-controls.
  • Добавено е ново .form-rowза оформления на компактни формуляри с класовете на решетката (разменете своя .rowза .form-rowи тръгвайте).
• Добавена е поддръжка на персонализирани формуляри (за квадратчета за отметка, радиостанции, селекции и въвеждане на файлове).
• Заменени класове .has-error, .has-warningи .has-successс валидиране на HTML5 формуляр чрез CSS :invalidи :validпсевдокласове.
• Преименувана .form-control-staticна .form-control-plaintext.

Бутони

• Преименувана .btn-defaultна .btn-secondary.
• Изцяло премахна .btn-xsкласа, тъй като .btn-smе пропорционално много по-малък от v3.
• Функцията за бутон за проследяване на състоянието на button.jsплъгина jQuery е премахната. Това включва $().button(string)и $().button('reset')методите. Препоръчваме вместо това да използвате малко персонализиран JavaScript, което ще има предимството да се държи точно както искате.
  • Обърнете внимание, че другите функции на приставката (квадратчета за отметка на бутони, радиостанции на бутони, бутони с едно превключване) са запазени във v4.
• Променете бутоните [disabled]на :disabledкакто IE9+ поддържа :disabled. Въпреки това fieldset[disabled]все още е необходимо, тъй като родните забранени полета все още са с грешки в IE11 .

Група бутони

• Пренаписан компонент с flexbox.
• Премахнато .btn-group-justified. Като заместител можете да използвате <div class="btn-group d-flex" role="group"></div>като обвивка около елементи с .w-100.
• Изцяло .btn-group-xsпремахна класа поради премахването на .btn-xs.
• Премахнато изрично разстояние между групите бутони в лентите с инструменти на бутоните; използвайте помощните програми за марж сега.
• Подобрена документация за използване с други компоненти.

падащи менюта

• Превключени от родителски селектори към отделни класове за всички компоненти, модификатори и т.н.
• Опростени падащи стилове, които вече не се доставят със стрелки, обърнати нагоре или надолу, прикрепени към падащото меню.
• Падащите менюта могат да бъдат изградени с <div>s или <ul>s сега.
• Преустроени падащи стилове и маркиране, за да осигурят лесна, вградена поддръжка за <a>и <button>базирани падащи елементи.
• Преименувана .dividerна .dropdown-divider.
• Елементите от падащото меню вече изискват .dropdown-item.
• Превключвателите на падащото меню вече не изискват изричен <span class="caret"></span>; това вече се предоставя автоматично чрез CSS ::afterна .dropdown-toggle.

Мрежова система

• Добавена е нова 576pxточка на прекъсване на мрежата като sm, което означава, че вече има общо пет нива ( xs, sm, md, lgи xl).
• Преименува класовете модификатори на адаптивната мрежа от .col-{breakpoint}-{modifier}-{size}на .{modifier}-{breakpoint}-{size}за по-прости класове на мрежата.
• Изпуснати модификаторни класове за натискане и изтегляне за новите класове, захранвани от flexbox order. Например, вместо .col-8.push-4и .col-4.pull-8бихте използвали .col-8.order-2и .col-4.order-1.
• Добавени са помощни класове на flexbox за мрежова система и компоненти.

Избройте групи

• Пренаписан компонент с flexbox.
• Заменен a.list-group-itemс явен клас, .list-group-item-action, за стилизиране на връзки и версии на бутони на елементи от списъчна група.
• Добавен .list-group-flushклас за използване с карти.

Модален

• Пренаписан компонент с flexbox.
• Като се има предвид преминаването към flexbox, подравняването на иконите за отхвърляне в заглавката вероятно е нарушено, тъй като вече не използваме плаващи елементи. Плаващото съдържание е на първо място, но с flexbox това вече не е така. Актуализирайте иконите си за отхвърл��не, за да идват след модалните заглавия, за да коригирате.
• Опцията remote(която може да се използва за автоматично зареждане и инжектиране на външно съдържание в модал) и съответното loaded.bs.modalсъбитие бяха премахнати. Препоръчваме вместо това да използвате шаблони от страна на клиента или рамка за обвързване на данни или да извикате сами jQuery.load .

навигация

• Пренаписан компонент с flexbox.
• Изпуснати са почти всички >селектори за по-опростен стил чрез невложени класове.
• Вместо специфични за HTML селектори като .nav > li > a, ние използваме отделни класове за .navs, .nav-items и .nav-links. Това прави вашия HTML по-гъвкав, като същевременно носи увеличена разширяемост.

Навигационна лента

Навигационната лента е изцяло пренаписана във flexbox с подобрена поддръжка за подравняване, отзивчивост и персонализиране.

• Отзивчивите поведения на навигационната лента вече се прилагат към .navbarкласа чрез необходимото .navbar-expand-{breakpoint} място, където избирате къде да свиете навигационната лента. Преди това беше по-малко променлива модификация и изискваше повторно компилиране.
• .navbar-defaultе сега .navbar-light, но .navbar-darkостава същият. Едно от тях се изисква на всяка навигационна лента. Тези класове обаче вече не задават background-colors; вместо това те по същество засягат само color.
• Навигационните ленти вече изискват някаква фонова декларация. Изберете от нашите помощни програми за фон ( .bg-*) или задайте свои собствени със светлинните/инверсните класове по-горе за безумно персонализиране .
• Предвид стиловете на flexbox, навигационните ленти вече могат да използват помощни програми flexbox за лесни опции за подравняване.
• .navbar-toggleе сега .navbar-togglerи има различни стилове и вътрешно маркиране (не повече от три <span>s).
• Заряза .navbar-formнапълно класа. Вече не е необходимо; вместо това просто използвайте .form-inlineи приложете маржин помощни програми, ако е необходимо.
• Навигационните ленти вече не включват margin-bottomили border-radiusпо подразбиране. Използвайте помощни програми, ако е необходимо.
• Всички примери, включващи навигационни ленти, са актуализирани, за да включват ново маркиране.

Пагинация

• Пренаписан компонент с flexbox.
• Вече се изискват явни класове ( .page-item, .page-link) за наследниците на .paginations
• Изцяло премахна .pagerкомпонента, тъй като беше малко повече от персонализирани контурни бутони.

галета

• Вече се изисква явен клас, .breadcrumb-item, за потомците на .breadcrumbs

Етикети и значки

• Преименуван .labelна .badgeза разграничаване от <label>елемента.
• Изпуснах .badgeкомпонента, тъй като беше почти идентичен с етикетите. Вместо това използвайте .badge-pillмодификатора заедно с компонента етикет за този заоблен вид.
• Значките вече не се пускат автоматично в списъчни групи и други компоненти. Сега за това се изискват полезни класове.
• .badge-defaultе премахнат и .badge-secondaryдобавен, за да съответства на класовете модификатори на компоненти, използвани другаде.

Панели, миниатюри и кладенци

Отпадна изцяло за новия компонент на картата.

Панели

• .panelдо .card, вече изграден с flexbox.
• .panel-defaultпремахнати и без смяна.
• .panel-groupпремахнати и без смяна. .card-groupне е заместител, различен е.
• .panel-headingда се.card-header
• .panel-titleкъм .card-title. В зависимост от желания външен вид може също да искате да използвате заглавни елементи или класове (напр <h3>. , .h3) или удебелени елементи или класове (напр <strong>. , <b>, .font-weight-bold). Обърнете внимание, че .card-titleмакар и с подобно име, създава различен вид от .panel-title.
• .panel-bodyда се.card-body
• .panel-footerда се.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warningи .panel-dangerбяха премахнати за .bg-, .text-и .borderпомощни програми, генерирани от нашата $theme-colorsSass карта.

Напредък

• Заменени контекстуални .progress-bar-*класове с .bg-*помощни програми. Например, class="progress-bar progress-bar-danger"става class="progress-bar bg-danger".
• Заменен .activeза анимирани ленти за напредък с .progress-bar-animated.

Въртележка

• Ревизиран е целият компонент, за да се опрости дизайна и стила. Имаме по-малко стилове, които да замените, нови индикатори и нови икони.
• Целият CSS е де-вложен и преименуван, като се гарантира, че всеки клас има префикс с .carousel-.
  • За елементи от въртележка, .next, .prev, .leftи .rightсега са .carousel-item-next, .carousel-item-prev, .carousel-item-leftи .carousel-item-right.
  • .itemе и сега .carousel-item.
  • За предишни/следващи контроли .carousel-control.rightи .carousel-control.leftса сега .carousel-control-nextи .carousel-control-prev, което означава, че вече не изискват специфичен базов клас.
• Премахнати са всички адаптивни стилове, отлагайки се на помощни програми (напр. показване на надписи в определени екрани) и персонализирани стилове, ако е необходимо.
• Премахнати замени на изображения за изображения в елементи от въртележка, отлагайки помощните програми.
• Променен е примерът на Carousel, за да включи новото маркиране и стилове.

Маси

• Премахната поддръжка за стилизирани вложени таблици. Всички стилове на таблици вече са наследени във v4 за по-прости селектори.
• Добавен вариант на обратна таблица.

Помощни програми

• Показване, скрито и още:
  • Помощните програми за показване са отзивчиви (напр. .d-noneи d-{sm,md,lg,xl}-none).
  • Премахна по-голямата част от .hidden-*помощните програми за нови помощни програми за дисплей . Например, вместо .hidden-sm-up, използвайте .d-sm-none. Преименува .hidden-printпомощните програми, за да използва схемата за именуване на помощната програма за показване. Повече информация в секцията Responsive utilities на тази страница.
  • Добавени .float-{sm,md,lg,xl}-{left,right,none}класове за отзивчиви плаващи елементи и премахнати .pull-leftи .pull-rightтъй като те са излишни за .float-leftи .float-right.
• Тип:
  • Добавени са адаптивни варианти към нашите класове за подравняване на текст .text-{sm,md,lg,xl}-{left,center,right}.
• Подравняване и разстояние:
  • Добавени са нови помощни програми за полета и подложки за всички страни, плюс вертикални и хоризонтални стенограми.
  • Добавено натоварване на помощни програми за flexbox .
  • Отпадна .center-blockза новия .mx-autoклас.
• Clearfix е актуализиран, за да прекрати поддръжката за по-стари версии на браузъра.

Миксини за префикс на доставчик

Миксините на префикса на доставчика на Bootstrap 3 , които бяха отхвърлени във v3.2.0, бяха премахнати в Bootstrap 4. Тъй като използваме Autoprefixer , те вече не са необходими.

Премахнати са следните миксини: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, , rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d,user-select

Документация

Нашата документация също получи надграждане навсякъде. Ето най-ниското:

• Все още използваме Jekyll, но имаме плъгини в микса:
  • bugify.rbсе използва за ефективно изброяване на записите на нашата страница с грешки в браузъра .
  • example.rbе персонализирано разклонение на highlight.rbплъгина по подразбиране, което позволява по-лесно боравене с примерен код.
  • callout.rbе подобно персонализирано разклонение на това, но предназначено за нашите специални допълнителни документи.
  • markdown-block.rbсе използва за изобразяване на фрагменти на Markdown в HTML елементи като таблици.
  • jekyll-toc се използва за генериране на нашето съдържание.
• Цялото съдържание на документи е пренаписано в Markdown (вместо в HTML) за по-лесно редактиране.
• Страниците са реорганизирани за по-просто съдържание и по-достъпна йерархия.
• Преминахме от обикновен CSS към SCSS, за да се възползваме напълно от променливите на Bootstrap, миксините и др.

Отзивчиви помощни програми

всичко@screen- променливи са премахнати във v4.0.0. Вместо това използвайте миксините media-breakpoint-up(), media-breakpoint-down(), или media-breakpoint-only()Sass или $grid-breakpointsкартата на Sass.

Нашите адаптивни помощни класове до голяма степен са премахнати в полза на изрични displayпомощни програми.

• Класовете .hiddenи .showса премахнати, защото са в конфликт с jQuery $(...).hide()и$(...).show() методитеВместо това опитайте да превключите [hidden]атрибута или използвайте вградени стилове като style="display: none;"и style="display: block;".
• Всички .hidden-класове са премахнати, с изключение на помощните програми за печат, които са преименувани.
  • Премахнато от v3:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
  • Премахнато от v4 alpha:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Помощните програми за печат вече не започват с.hidden- или .visible-, а с .d-print-.
  • Стари имена: .visible-print-block,.visible-print-inline , .visible-print-inline-block,.hidden-print
  • Нови класове: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Вместо да използвате изрични .visible-*класове, вие правите елемент видим, като просто не го скривате при този размер на екрана. Можете да комбинирате един .d-*-noneклас с един .d-*-blockклас, за да покажете елемент само на даден интервал от размери на екрана (напр. .d-none.d-md-block.d-xl-noneпоказва елемента само на средни и големи устройства).

Имайте предвид, че промените в точките на прекъсване на мрежата във v4 означават, че ще трябва да отидете с една точка на прекъсване, за да постигнете същите резултати. Новите отзивчиви помощни класове не се опитват да приспособят по-рядко срещаните случаи, при които видимостта на даден елемент не може да бъде изразена като единичен непрекъснат диапазон от размери на прозореца за изглед; вместо това ще трябва да използвате персонализиран CSS в такива случаи.