in English

V4

Bootstrap 4 - бөтен проектның төп язуы. Иң күренекле үзгәрешләр түбәндә ясала, аннары тиешле компонентларга конкрет үзгәрешләр кертелә.

Тотрыклы үзгәрешләр

Бета 3-дән безнең тотрыклы v4.x чыгарылышына күчү, бернинди үзгәрешләр дә юк, ләкин кайбер сизелерлек үзгәрешләр бар.

Басма

  • Тикшерелгән ватылган басмалар. Элегерәк, класс куллану .d-print-*көтмәгәндә бүтән .d-*классны юкка чыгарыр иде. Хәзер, алар безнең бүтән дисплей хезмәтләренә туры килә һәм шул медиага гына кагыла ( @media print).

  • Башка коммуналь хезмәтләргә туры килерлек басма дисплей ярдәмен киңәйттеләр. Бета 3 һәм аннан олырак кына block,,, һәм . Тотрыклы v4 өстәлде ,,,, һәм .inline-blockinlinenoneflexinline-flextabletable-rowtable-cell

  • Билгеле булган яңа бастыру стиле белән браузерларда бастырылган алдан карау @page size.

Бета 3 үзгәрә

Бета 2 бета этапта безнең күпчелек үзгәрешләрне күрсә дә, бездә әле Бета 3 чыгарылышында хәл ителергә тиешле берничә әйбер бар. Әгәр дә сез Бета 3-дән Бета-3 яки Bootstrap-ның иске версиясен яңартсагыз, бу үзгәрешләр кулланыла.

Төрле

  • Кулланылмаган $thumbnail-transitionүзгәрүчене бетерде. Без бернәрсәгә дә күчмәдек, шуңа күрә бу өстәмә код кына иде.
  • Npm пакеты безнең чыганактан һәм чит файллардан башка файлларны үз эченә алмый. әгәр сез аларга таянсагыз һәм безнең сценарийларны node_modulesпапка аша эшләсәгез, сез эш процессын җайлаштырырга тиеш.

Формалар

  • Гадәттәге һәм килешү пунктларын һәм радиоларны яңадан языгыз. Хәзер, икесенең дә HTML структурасы туры килә (тышкы <div>кардәшләр <input>белән <label>) һәм бер үк макет стильләре (килешү буенча, үзгәртелгән класс белән кертелгән). Бу безгә этикетканы кертү торышына нигезләнеп ясарга, disabledатрибутка ярдәмне гадиләштерергә (элек ата-аналар классын таләп итә) һәм безнең форманы тикшерүне яхшырак тәэмин итәргә мөмкинлек бирә.

    Моның бер өлеше буларак, без background-imageмахсус форма пунктларында һәм радиоларда берничә s белән идарә итү өчен CSSны үзгәрттек. Элегерәк, бетерелгән .custom-control-indicatorэлементның фон төсе, градиент һәм SVG иконасы булган. Фон градиентын көйләү - барысын гына алыштырырга кирәк булганны алыштыру дигән сүз. Хәзер бездә .custom-control-label::beforeтутыру һәм градиент бар һәм .custom-control-label::afterиконаны эшкәртәбез.

    Заказлы тикшерү ясау өчен, өстәгез .custom-control-inline.

  • Керү нигезендә төймә төркемнәре өчен селектор яңартылды. [data-toggle="buttons"] { }Стиль һәм тәртип өчен без атрибутны JS тәртибе өчен кулланабыз һәм стиллау өчен яңа класска dataтаянабыз ..btn-group-toggle

  • .col-form-legendБераз яхшырту файдасына алынды .col-form-label. Бу ысул .col-form-label-smһәм җиңеллек .col-form-label-lgбелән элементларда кулланырга мөмкин .<legend>

  • Махсус файл керемнәре аларның $custom-file-textSass үзгәрүчесенә үзгәрешләр алды. Бу инде ояланган Sass картасы түгел һәм хәзер бер сызыкны гына куя Browse- төймә хәзерге вакытта безнең Сасстан барлыкка килгән бердәнбер псевдо-элемент. Текст 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-ка күчкәндә истә тотарга тиешле үзгәрешләр.

Бозу

  • Variзгәрешле $badge-colorһәм аны куллану .badge. Без төс контраст функциясен кулланабыз , шуңа colorнигезләнеп background-colorүзгәрү кирәк түгел.
  • CSS туган фильтр белән конфликтны бозмас өчен grayscale()функциянең исеме үзгәртелде .gray()grayscale
  • Башка җирдә кулланылган төс схемаларыбызга үзгәртелде , .table-inverseһәм .thead-inverse..thead-default.*-dark.*-light
  • Nowаваплы таблицалар хәзерге вакытта һәрбер челтәр өчен класслар ясыйлар. Бу Бета 1-дән өзелә, чөнки .table-responsiveсез кулланган әйберләр күбрәк .table-responsive-md. Сез хәзер кирәк булганда куллана .table-responsiveаласыз .table-responsive-{sm,md,lg,xl}.
  • Пакет менеджеры буларак ташланган Бауэр ярдәме альтернатива өчен искергән (мәсәлән, җеп яки төн). Детальләр өчен баш күтәрүче / 2298 карагыз .
  • Bootstrap әле дә jQuery 1.9.1 яки югарырак таләп итә, ләкин сезгә 3.x версиясен кулланырга киңәш ителә, чөнки v3.x ярдәмендә браузерлар Bootstrap ярдәм итә һәм v3.x кайбер куркынычсызлык төзәтмәләре бар.
  • Кулланылмаган .form-control-labelкласс бетерелде. Әгәр дә сез бу классны кулланган булсагыз, бу классның дубликаты булган , горизонталь форма макетларына бәйләнгән кертү белән .col-form-labelвертикаль үзәкләштерелгән .<label>
  • color-yiqМөлкәтне үз эченә алган миксиннан кыйммәтне кайтаручы функциягә үзгәртте 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 кулланыгыз.
  • Android v5.0 Lollipop браузеры һәм WebView өчен рәсми ярдәм өстәлде. Android браузеры һәм WebViewның алдагы версияләре рәсми булмаган рәвештә генә кала.

Глобаль үзгәрешләр

  • Килешү буенча Flexbox кушылган. Гомумән, бу безнең компонентлар аша йөзүдән ераклашуны аңлата.
  • Безнең чыганак CSS файллары өчен Кечкенәдән Сасска күчә .
  • pxБезнең төп CSS берәмлеге итеп күчерелде, remпиксель һаман да медиа соравы һәм челтәр тәртибе өчен кулланыла, чөнки җайланма күренеше тип зурлыгына тәэсир итми.
  • Глобаль шрифт зурлыгы артты 14px.16px
  • Бишенче вариантны өстәр өчен челтәр дәрәҗәләрен яңарттылар (кечерәк җайланмаларга 576pxһәм аста) һәм -xsбу класслардан инфиксны бетерделәр. Мисал : .col-6.col-sm-4.col-md-3.
  • Аерым өстәмә теманы SCSS үзгәрүчәннәре аша конфигурацияләнә торган вариантлар белән алыштырды (мәсәлән, $enable-gradients: true).
  • Грунт урынына npm скриптларын куллану өчен капиталь ремонт системасы төзегез. package.jsonБарлык сценарийларны яки җирле үсеш ихтыяҗлары өчен безнең проектны карагыз .
  • Bootstrap'ны җавапсыз куллану инде ярдәм итми.
  • Онлайн Customizer-ны киңрәк урнаштыру документлары һәм махсуслаштырылган корылмалар файдасына ташлады.
  • Гомуми CSS милек-кыйммәт парлары һәм маржа / паддинг аралыгы кыска юллары өчен дистәләгән яңа файдалы класслар өстәлде.

Челтәр системасы

  • Флексбокка күчерелде.
    • Челтәр миксиннарында һәм алдан билгеләнгән классларда флексбок өчен ярдәм өстәлде.
    • Флексбоксның бер өлеше буларак, вертикаль һәм горизонталь тигезләү классларына булышлык кертелгән.
  • Челтәр класс исемнәре яңартылды һәм яңа челтәр дәрәҗәсе.
    • Күбрәк гранул контроль өчен түбәндә яңа smчелтәр дәрәҗәсе өстәлде. 768pxБездә хәзер xs,,, һәм . sm_ Бу шулай ук ​​һәр баскычның бер дәрәҗәгә күтәрелүен аңлата (шулай итеп v3 хәзер v4).mdlgxl.col-md-6.col-lg-6
    • 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) { ... }.

Компонентлар

  • Ташланган панельләр, эскизлар, яңа бөтен компонент, карточкалар өчен скважиналар .
  • Глификон иконасы шрифтын ташлады. Сезгә иконалар кирәк булса, кайбер вариантлар:
  • Affix jQuery плагинын ташлады.
    • Аның урынына кулланырга киңәш итәбез position: sticky. HTML5 карагыз Зинһар , детальләр һәм махсус полифилл тәкъдимнәре өчен керегез. Бер тәкъдим - аны @supportsтормышка ашыру өчен кагыйдә куллану (мәсәлән, @supports (position: sticky) { ... })
    • Әгәр сез өстәмә, стиль булмаган куллану өчен Affix кулланган булсагыз position, полифилллар сезнең куллану очракларыгызга булышмаска мөмкин. Мондый куллану өчен бер вариант - өченче як ScrollPos-Styler китапханәсе.
  • Пейджер компонентын ташлады, чөнки ул бераз көйләнгән төймәләр иде.
  • Барлык компонентларны диярлек рефакторлаштырган класс селекторларын куллану өчен, махсус балалар селекторлары урынына.

Компонент буенча

Бу исемлектә v3.xx һәм v4.0.0 арасында компонент буенча төп үзгәрешләр күрсәтелә.

Яңарту

Bootstrap 4 өчен яңа - Reboot , яңа стиль таблицасы, үзебезнең бераз фикерләнгән яңадан торгызу стиле белән Нормальләштерүгә нигезләнгән. Бу файлда күренгән селекторлар элементларны гына кулланалар - монда класслар юк. Бу безнең модульле караш өчен компонент стильләреннән торгызу стильләрен аера. Кайбер мөһим үзгәртүләр үз эченә ала, үзгәрү, күп элементларның берәмлекләренә box-sizing: border-boxкүчү, emстиль стиле һәм күпчелек форма элементларын яңадан торгызу.rem

Типография

  • Барлык .text-коммуналь хезмәтләрне _utilities.scssфайлга күчерделәр.
  • Аның стиле .page-headerкоммуналь хезмәтләр ярдәмендә кулланылырга мөмкин.
  • .dl-horizontalташланган. Киресенчә, .rowчелтәр <dl>колоннасы классларын (яки миксиннарны) кулланыгыз һәм аның <dt>балаларында <dd>.
  • <blockquote>Аларның стильләрен элементтан бер класска күчереп, блоккотларны яңадан эшләнгән , .blockquote. .blockquote-reverseТекст ярдәмендә модификаторны ташлады .
  • .list-inlineхәзер аның балалар исемлегенең яңа .list-inline-itemкласс кулланылуын таләп итә.

Рәсемнәр

  • Исеменә үзгәртелде .img-responsive..img-fluid
  • .img-roundedИсеменә үзгәртелде.rounded
  • .img-circleИсеменә үзгәртелде.rounded-circle

Таблицалар

  • Селекторның барлык очраклары диярлек >бетерелде, димәк, ояланган таблицалар хәзер автоматик рәвештә стильләрен ата-аналарыннан мирас итеп алалар. Бу безнең сайлап алучыларны һәм потенциаль көйләүләрне бик җиңеләйтә.
  • Эзлеклелек өчен .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инде .rowмиксин аша стильләр кулланылмый, шуңа күрә .rowхәзер горизонталь челтәр макетлары өчен кирәк (мәсәлән, <div class="form-group row">).
    • .col-form-labelS белән вертикаль үзәк ярлыкларына яңа класс .form-controlөстәлде.
    • .form-rowЧелтәр класслары белән компакт форма макетлары өчен яңа өстәлде (үзегезне .rowалыштырыгыз ) .form-row.
  • Өстәмә формалар ярдәме өстәлде (пунктлар, радио, сайлау һәм файл кертү өчен).
  • CS5 һәм псевдо-класслар аша HTML5 формасын тикшерү белән .has-errorалыштырылды ..has-warning.has-success:invalid:valid
  • Исеменә үзгәртелде .form-control-static..form-control-plaintext

Кнопкалар

  • Исеменә үзгәртелде .btn-default..btn-secondary
  • .btn-xsКлассны тулысынча ташладылар, .btn-smпропорциональ v3некеннән кечерәк.
  • JQuery плагинының дәүләт төймәсе үзенчәлеге button.jsтөшерелде. Бу ысулларны $().button(string)һәм $().button('reset')ысулларны үз эченә ала. Без аның урынына кечкенә генә JavaScript кулланырга киңәш итәбез, бу сез теләгәнчә эш итү файдасына.
    • Игътибар итегез, плагинның бүтән үзенчәлекләре (төймә пунктлары, төймә радиолары, бер тапкыр күчү төймәләре) v4 сакланган.
  • IE9 + [disabled]ярдәмендә төймәләрне үзгәртегез . Шулай да әле кирәк, чөнки инвалид кырлар IE11да әле дә хата .:disabled:disabledfieldset[disabled]

Кнопка төркеме

  • Флексбокс белән компонентны яңадан языгыз.
  • Чыгарылды .btn-group-justified. Алмаштыру рәвешендә сез <div class="btn-group d-flex" role="group"></div>элементлар белән уралган әйбер итеп куллана аласыз .w-100.
  • .btn-group-xsКлассны тулысынча бетерү өчен ташладылар .btn-xs.
  • Кнопка кораллар тактасындагы төркемнәр арасындагы ачык аралар бетерелде; хәзер маржа коммуналь хезмәтләрен кулланыгыз.
  • Башка компонентлар белән куллану өчен камилләштерелгән документлар.
  • Ата-аналар селекторларыннан барлык компонентлар, үзгәртүчеләр һ.б. өчен бердәнбер классларга күчә.
  • Гадиләштерелгән тамчы стильләр тамчы менюга бәйләнгән өскә яки аска караган уклар белән җибәрелмәс.
  • <div>Тамчыларны хәзер s яки s белән төзеп була <ul>.
  • Easyиңел, урнаштырылган ярдәм <a>һәм <button>нигезләнгән тамчы әйберләрен тәэмин итү өчен яңадан ачылу стиле һәм маркировкасы.
  • Исеменә үзгәртелде .divider..dropdown-divider
  • Хәзер тамчы әйберләр кирәк .dropdown-item.
  • Тамчы күчү ачыктан-ачык таләп итми <span class="caret"></span>; бу хәзер автоматик рәвештә CSS аша ::afterбирелә .dropdown-toggle.

Челтәр системасы

  • Яңа 576pxчелтәр ноктасы өстәлде , димәк , smхәзерге вакытта биш дәрәҗә бар (,,, xsһәм ) .smmdlgxl
  • Гади челтәр классларына җаваплы челтәр үзгәртүче классларының исемен үзгәрттеләр .col-{breakpoint}-{modifier}-{size}..{modifier}-{breakpoint}-{size}
  • Яңа флексбокс белән эшләнгән класслар өчен үзгәртү orderкласслары. Мисал өчен, урынына .col-8.push-4һәм .col-4.pull-8, сез кулланыр идегез .col-8.order-2һәм .col-4.order-1.
  • Челтәр системасы һәм компонентлары өчен flexbox ярдәм класслары өстәлде.

Төркемнәрне күрсәтегез

  • Флексбокс белән компонентны яңадан языгыз.
  • a.list-group-itemАчык класс белән алыштырылды .list-group-item-action, стильләштерү сылтамасы һәм исемлек төркем әйберләренең төймә версияләре өчен.
  • .list-group-flushКарточкалар белән куллану өчен класс өстәлде .
  • Флексбокс белән компонентны яңадан языгыз.
  • Флексбокка күчүне исәпкә алып, баштагы эштән чыгару иконаларының тигезләнеше бозылырга мөмкин, чөнки без инде флот кулланмыйбыз. Йөзелгән эчтәлек беренче булып килә, ләкин флексбок белән алай түгел. Модаль исемнәрдән соң килү өчен эштән чыгару иконаларын яңартыгыз.
  • Вариант ( бу remoteмодальгә тышкы эчтәлекне автоматик рәвештә йөкләү һәм кертү өчен кулланыла ала) һәм тиешле loaded.bs.modalвакыйга бетерелде. Моның урынына без клиент ягыннан шаблонны яки мәгълүматны бәйләүче рамканы кулланырга, яки jQuery.load шалтыратырга киңәш итәбез .
  • Флексбокс белән компонентны яңадан языгыз.
  • >Ояланмаган класслар аша гади стиллау өчен барлык селекторларны диярлек ташладылар .
  • HTML кебек махсус селекторлар урынына без s, s, s .nav > li > aөчен аерым класслар кулланабыз . Бу сезнең HTML-ны тагын да сыгылмалы итә..nav.nav-item.nav-link

Диңгез тактасы тигезләү, җаваплылык һәм көйләү өчен яхшыртылган ярдәм белән флексбокта тулысынча яңадан язылган.

  • Navаваплы диңгез тәртибе хәзерге вакытта класска кирәкле.navbar урын аша кулланыла . Элегерәк бу азрак үзгәрүчән модификация иде һәм кабат компиляция таләп ителде. .navbar-expand-{breakpoint}
  • .navbar-defaultхәзер .navbar-lightдә, .navbar-darkэлеккечә кала. Аларның берсе һәр диңгез тактасында кирәк. Ләкин, бу класслар инде куелмый background-color; киресенчә, алар бары тик тәэсир итәләр color.
  • Navbars хәзер ниндидер фон турында декларация таләп итә. Безнең фон коммуналь хезмәтләрен сайлагыз ( яки акылсыз көйләү өчен.bg-* югарыдагы якты / кире класслар белән үзегезнекен куегыз .
  • Флексбокс стильләрен исәпкә алып, диңгез плиткалары хәзер җиңел тигезләү вариантлары өчен flexbox ярдәмен куллана ала.
  • .navbar-toggleхәзер .navbar-togglerһәм төрле стильләр һәм эчке билгеләргә ия (өч <span>с юк).
  • .navbar-formКлассны бөтенләй ташлады . Бу инде кирәк түгел; киресенчә, .form-inlineкирәк булганда маржа ярдәмен кулланыгыз.
  • Navbars инде кертелми margin-bottomяки border-radiusкилешү буенча. Кирәк булганда коммуналь хезмәтләрне кулланыгыз.
  • Диңгез такталарын күрсәткән барлык мисаллар яңа билгеләр кертү өчен яңартылды.

Пагинация

  • Флексбокс белән компонентны яңадан языгыз.
  • Хәзерге вакытта нәселдә ачык класслар ( .page-item, ) кирәк.page-link.pagination
  • Компонентны тулысынча ташлады, .pagerчөнки ул махсуслаштырылган план төймәләреннән азрак иде.
  • Ачык нәселдән .breadcrumb-itemхәзерге вакытта ачык класс кирәк.breadcrumb

Ярлыклар һәм бейджлар

  • Консолидацияләнгән .labelһәм элементтан .badgeаерылу <label>һәм бәйләнешле компонентларны гадиләштерү.
  • .badge-pillТүгәрәк “таблетка” күренеше өчен модификатор итеп өстәлде .
  • Бейджлар исемлек төркемнәрендә һәм бүтән компонентларда автоматик рәвештә йөзмиләр. Моның өчен хәзер коммуналь класслар кирәк.
  • .badge-defaultташланган һәм .badge-secondaryбүтән урында кулланылган компонент модификатор классларына туры килгән.

Панельләр, эскизлар, коелар

Яңа карточка компоненты өчен тулысынча ташланды.

Панельләр

  • .panel, .cardхәзер флексбок белән төзелгән.
  • .panel-defaultалынды һәм алыштырылмады.
  • .panel-groupалынды һәм алыштырылмады. .card-groupалыштыру түгел, ул бүтән.
  • .panel-headingto.card-header
  • .panel-titleto .card-title. Кирәкле кыяфәткә карап, сез шулай ук ​​баш элементларны яки классларны (мәсәлән <h3>, .h3) яки калын элементлар яки классларны кулланырга телисез (мәсәлән , <strong>) . Игътибар итегез, охшаш исем белән аталса да, башкача күренеш тудыра .<b>.font-weight-bold.card-title.panel-title
  • .panel-bodyto.card-body
  • .panel-footerto.card-footer
  • .panel-primary,,,, .panel-successһәм .panel-infoбезнең Сасс картасыннан ясалган коммуналь хезмәтләр өчен .panel-warningташланды .panel-danger..bg-.text-.border$theme-colors

Алга китеш

  • Контекст .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алар билгеле бер класс таләп итмиләр.
  • Барлык җаваплы стильләрне бетерделәр, коммуналь хезмәтләргә калдырдылар (мәсәлән, кайбер күренеш портларында язулар күрсәтү) һәм кирәк булганда махсус стильләр.
  • Чыгарылган рәсем карусель әйберләрендәге рәсемнәр өчен юкка чыга, коммуналь хезмәтләргә калдыра.
  • Яңа маркировка һәм стильләрне кертү өчен Карусель мисалын сөртегез.

Таблицалар

  • Ояланган өстәлләр өчен ярдәм алынды. Барлык өстәл стильләре хәзер гади селекторлар өчен v4 мирас итеп алынган.
  • Кире өстәл варианты өстәлде.

Коммуналь хезмәтләр

  • Күрсәтү, яшерү һәм башкалар:
    • Дисплей коммуналь хезмәтләрен җаваплы итеп ясадылар (мәсәлән, .d-noneһәм d-{sm,md,lg,xl}-none).
    • .hidden-*Яңа дисплей коммуналь хезмәтләре өчен күпчелек коммуналь хезмәтләр ташланды . Мәсәлән, урынына .hidden-sm-up, кулланыгыз .d-sm-none. .hidden-printДисплейның исемнәрен атау схемасын куллану өчен, коммуналь хезмәтләрнең исемен үзгәрттеләр . Бу битнең җаваплы коммуналь бүлеге астында күбрәк мәгълүмат .
    • .float-{sm,md,lg,xl}-{left,right,none}Respаваплы йөзүләр өчен класслар өстәлде һәм бетерелде , чөнки .pull-leftалар .pull-rightартык кирәк түгел ..float-left.float-right
  • Төре:
    • Текстны тигезләү классларына җаваплы вариацияләр өстәлде .text-{sm,md,lg,xl}-{left,center,right}.
  • Тигезләү һәм аралар:
  • Clearfix иске браузер версияләренә ярдәмне төшерү өчен яңартылды.

Сатучы префикс миксиннары

Bootstrap 3 сатучы префикс миксиннары, v3.2.0 искергән, Bootstrap 4-та алынды. Без Autoprefixer кулланганга , алар инде кирәк түгел.

Түбәндәге катнашмаларны бетерделәр animation: ,,,,,,,,,,,,,,,,,,,,, _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _animation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-timing-functionbackface-visibilitybox-sizingcontent-columnshyphensopacityperspectiveperspective-originrotaterotateXrotateYscalescaleXscaleYskewtransform-origintransition-delaytransition-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

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

Безнең документлар тактада яңарту алды. Менә түбән төшү:

  • Без әле Jekyll кулланабыз, ләкин бездә плагиннар бар:
    • bugify.rbбезнең браузер хаталары битендәге язмаларны эффектив санап чыгу өчен кулланыла.
    • example.rbhighlight.rbүрнәк-код белән эшләүне җиңеләйтә торган килешү плагинының махсус формасы .
    • callout.rbаның охшаш гадәт формасы, ләкин безнең махсус документлар өчен эшләнгән.
    • jekyll-toc безнең эчтәлек таблицасын булдыру өчен кулланыла.
  • Барлык документларның эчтәлеге җиңелрәк редакцияләү өчен Маркдаунда (HTML урынына) яңадан язылган.
  • Гади эчтәлек һәм иерархия өчен битләр үзгәртелде.
  • Bootstrap үзгәрүчәннәреннән, миксиннардан һәм башкалардан тулысынча файдалану өчен без регуляр CSS-тан SCSS-ка күчендек.

Onsаваплы коммуналь хезмәтләр

Барлык @screen-үзгәрешләр дә v4.0.0 бетерелде. Аның урынына media-breakpoint-up(), media-breakpoint-down()яки media-breakpoint-only()Sass миксиннарын яки $grid-breakpointsSass картасын кулланыгыз.

Безнең җаваплы коммуналь класслар күбесенчә ачык коммуналь хезмәтләр файдасына алынды display.

  • .hiddenJQuery һәм ысуллары белән каршылыклы .showбулганга, класслар алынды . Киресенчә, атрибутны алыштырырга тырышыгыз яки кебек стильләрне кулланыгыз .$(...).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 алфавитыннан алынды:.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 кулланырга кирәк булачак.