Source

Hijira zuwa v4

Bootstrap 4 shine babban sake rubutawa gabaɗayan aikin. An taƙaita manyan canje-canjen da aka fi sani a ƙasa, tare da ƙarin takamaiman canje-canje ga abubuwan da suka dace.

Canje-canje masu tsayayye

Motsawa daga Beta 3 zuwa ƙaƙƙarfan sakinmu v4.x, babu canje-canje masu karye, amma akwai wasu manyan canje-canje.

Bugawa

  • Kafaffen kayan aikin buga bugu. A baya can, yin amfani da .d-print-*aji ba zato ba tsammani zai ƙetare kowane .d-*aji. Yanzu, sun dace da sauran kayan aikin mu na nuni kuma suna aiki ne kawai ga waccan kafofin watsa labarai ( @media print).

  • Faɗaɗɗen kayan aikin nunin bugu don dacewa da sauran abubuwan amfani. Beta 3 zuwa sama sun sami block, inline-block, inline, da none. Stable v4 ƙara flex, inline-flex, table, table-row, da table-cell.

  • Kafaffen samfotin bugu yana nunawa a cikin masu bincike tare da sabbin nau'ikan bugu waɗanda ke ƙayyade @page size.

Beta 3 yana canzawa

Yayin da Beta 2 ya ga mafi yawan sauye-sauyen ɓarkewar mu yayin lokacin beta, amma har yanzu muna da ƴan kaɗan waɗanda ke buƙatar magance su a cikin sakin Beta 3. Waɗannan canje-canjen suna aiki idan kuna ɗaukaka zuwa Beta 3 daga Beta 2 ko kowane tsohuwar sigar Bootstrap.

Daban-daban

  • An cire $thumbnail-transitioncanjin da ba a yi amfani da shi ba. Ba mu canza wani abu ba, don haka karin lamba ne kawai.
  • Kunshin npm baya haɗa da kowane fayiloli banda tushen mu da fayilolin dist; idan kun dogara da su kuma kuna gudanar da rubutun mu ta node_modulesbabban fayil ɗin, ya kamata ku daidaita aikinku.

Siffofin

  • Sake rubuta duka al'ada da tsoffin akwatunan rajista da rediyo. Yanzu, duka biyun suna da tsarin HTML madaidaici (na waje <div>tare da ɗan'uwa <input>da <label>) da kuma salon shimfidawa iri ɗaya (tsararrun tsoho, layi tare da aji mai gyara). Wannan yana ba mu damar tsara alamar ta dogara da yanayin shigarwar, sauƙaƙe tallafi don disabledsifa (a da yana buƙatar aji na iyaye) da mafi kyawun goyan bayan ingantaccen sigar mu.

    A matsayin wani ɓangare na wannan, mun canza CSS don sarrafa background-images da yawa akan akwatunan rajista na al'ada da rediyo. A baya can, ɓangaren da aka cire yanzu .custom-control-indicatoryana da launi na bango, gradient, da alamar SVG. Keɓance gradient na bango yana nufin maye gurbin duk waɗannan duk lokacin da kuke buƙatar canza ɗaya kawai. Yanzu, muna da .custom-control-label::beforega cika da gradient da kuma .custom-control-label::afterrike da icon.

    Don yin rajistan layi na al'ada, ƙara .custom-control-inline.

  • Zaɓin da aka sabunta don ƙungiyoyin maɓalli na tushen shigarwa. Maimakon [data-toggle="buttons"] { }salo da hali, muna amfani da datasifa don halayen JS kawai kuma muna dogara da sabon .btn-group-toggleaji don salo.

  • An cire .col-form-legenda cikin ni'imar inganta dan kadan .col-form-label. Wannan hanyar .col-form-label-smkuma .col-form-label-lgana iya amfani dashi akan <legend>abubuwa cikin sauƙi.

  • Abubuwan shigar da fayil na al'ada sun sami canji zuwa canjin $custom-file-textSass ɗin su. Ba taswirar Sass ce mai gida ba kuma a yanzu tana iko da kirtani ɗaya kawai - Browsemaɓallin kamar yadda yanzu shine kawai sinadari mai ƙima da aka samar daga Sass ɗin mu. Rubutun Choose fileyanzu ya fito daga .custom-file-label.

Ƙungiyoyin shigarwa

  • Addons na rukunin shigar yanzu sun keɓanta da wurin sanya su dangane da shigarwar. Mun sauke .input-group-addonkuma .input-group-btndon sababbin azuzuwan biyu, .input-group-prependda .input-group-append. Dole ne ku yi amfani da append ko riga-kafi a bayyane yanzu, tare da sauƙaƙa yawancin CSS ɗin mu. A cikin abin ƙara ko riga-kafi, sanya maɓallan ku kamar yadda zasu wanzu a ko'ina, amma kunsa rubutu a cikin .input-group-text.

  • Salon tabbatarwa yanzu ana tallafawa, kamar yadda ake samun bayanai da yawa (kodayake za ku iya inganta shigarwa ɗaya kawai a kowace ƙungiya).

  • Dole ne azuzuwan girman su kasance akan iyaye .input-groupba nau'ikan nau'ikan nau'ikan nau'ikan nau'ikan iri ɗaya ba.

Beta 2 yana canzawa

Yayin da muke cikin beta, muna da nufin samun sauye-sauye masu karye. Koyaya, abubuwa ba koyaushe suke tafiya kamar yadda aka tsara ba. A ƙasa akwai canje-canjen da za a ɗauka a hankali yayin ƙaura daga Beta 1 zuwa Beta 2.

Karyewa

  • Cire $badge-colorm da kuma amfani da shi akan .badge. Muna amfani da aikin bambancin launi don zaɓar colordangane da background-color, don haka mai canzawa ba dole ba ne.
  • Sake sunan grayscale()aikin don gujewa karya rikici tare da tacewar gray()CSS .grayscale
  • Sake suna .table-inverse, .thead-inverse, da .thead-defaultzuwa .*-darkda .*-light, wanda ya dace da tsarin launi ɗin mu da aka yi amfani da shi a wani wuri.
  • Tebur masu amsawa yanzu suna haifar da azuzuwan ga kowane madaidaicin grid. Wannan ya karye daga Beta 1 a cikin abin da .table-responsivekuke amfani da shi ya fi kama da .table-responsive-md. Za ka iya yanzu amfani .table-responsiveko .table-responsive-{sm,md,lg,xl}yadda ake bukata.
  • Goyan bayan Bower da aka jefar kamar yadda aka soke manajan kunshin don madadin (misali, Yarn ko npm). Duba Bower/Bower#2298 don cikakkun bayanai.
  • Bootstrap har yanzu yana buƙatar jQuery 1.9.1 ko sama da haka, amma ana ba ku shawarar amfani da sigar 3.x tunda masu binciken v3.x suna tallafawa Bootstrap tare da v3.x yana da wasu gyare-gyaren tsaro.
  • An cire .form-control-labelaji mara amfani. Idan kun yi amfani da wannan ajin, kwafi ne na .col-form-labelajin wanda ke tsaye a tsakiya <label>tare da abin da ke da alaƙa da shi a cikin shimfidar tsari na kwance.
  • Canza color-yiqdaga mahaɗin da ya haɗa da colorkayan zuwa aikin da ke dawo da ƙima, yana ba ku damar amfani da ita don kowace kadarar CSS. Misali, maimakon color-yiq(#000), zaku rubuta color: color-yiq(#000);.

Karin bayanai

  • An ƙaddamar da sabon pointer-eventsamfani akan modal. Na waje .modal-dialogyana wucewa ta cikin abubuwan da suka faru tare pointer-events: noneda dannawa na al'ada (yana ba da damar sauraron kawai .modal-backdropdon kowane dannawa), sannan ya ƙi shi don ainihin .modal-contenttare da pointer-events: auto.

Takaitawa

Anan akwai manyan abubuwan tikitin da zaku so ku sani lokacin ƙaura daga v3 zuwa v4.

Tallafin mai lilo

  • An sauke tallafin IE8, IE9, da iOS 6. v4 yanzu shine kawai IE10+ da iOS 7+. Don shafukan da ke buƙatar ɗayan waɗannan, yi amfani da v3.
  • Ƙara goyan bayan hukuma don Android v5.0 Lollipop's Browser da WebView. Sigar farko na Android Browser da WebView suna kasancewa kawai ba bisa ka'ida ba.

Canje-canje na duniya

  • An kunna Flexbox ta tsohuwa. Gabaɗaya wannan yana nufin ƙaura daga masu iyo da ƙari a cikin abubuwan da muka haɗa.
  • Canja daga Ƙananan zuwa Sass don fayilolin CSS na tushen mu.
  • An canza shi daga pxzuwa remmatsayin rukunin CSS ɗin mu na farko, kodayake har yanzu ana amfani da pixels don tambayoyin kafofin watsa labarai da halayen grid kamar yadda girman nau'in bai shafi wuraren kallon na'urar ba.
  • Girman font na duniya ya ƙaru daga 14pxzuwa 16px.
  • An sabunta matakan grid don ƙara zaɓi na biyar (yana magana da ƙananan na'urori a 576pxda ƙasa) da kuma cire -xsinfix daga waɗannan azuzuwan. Misali .col-6.col-sm-4.col-md-3:.
  • Maye gurbin keɓan jigon zaɓi na zaɓi tare da zaɓuɓɓuka masu daidaitawa ta masu canjin SCSS (misali, $enable-gradients: true).
  • Gina tsarin da aka sabunta don amfani da jerin rubutun npm maimakon Grunt. Dubi package.jsonduk rubutun, ko karatun aikin mu don buƙatun ci gaban gida.
  • Ba a iya amfani da Bootstrap mara amsawa.
  • An jefar da Mai Haɓakawa kan layi don ƙarin fa'idar saiti mai fa'ida da gine-gine na musamman.
  • Ƙara sabbin azuzuwan masu amfani don nau'i-nau'i na ƙimar kadarorin CSS gama gari da gajerun hanyoyin tazarar tazara.

Tsarin Grid

  • An matsa zuwa flexbox.
    • Ƙara tallafi don flexbox a cikin grid mixins da darussa da aka riga aka ayyana.
    • A matsayin wani ɓangare na flexbox, an haɗa da tallafi don azuzuwan daidaitawa a tsaye da a kwance.
  • Sunayen ajin grid da aka sabunta da sabon matakin grid.
    • An ƙara sabon smmatakin grid a ƙasa 768pxdon ƙarin iko mai girma. Yanzu muna da xs, sm, md, lgda xl. Wannan kuma yana nufin kowane matakin ya tashi sama da matakin ɗaya (don haka .col-md-6a cikin v3 yanzu yana .col-lg-6cikin v4).
    • xsAn canza azuzuwan grid don kada a buƙaci infix don ƙarin wakilcin daidai cewa sun fara amfani da salo a min-width: 0kuma ba saita ƙimar pixel ba. Maimakon .col-xs-6, yanzu .col-6. Duk sauran matakan grid suna buƙatar infix (misali, sm).
  • Sabunta girman grid, mixins, da masu canji.
    • Gutters grid yanzu suna da taswirar Sass don haka zaku iya tantance takamaiman faɗuwar gutter a kowane wurin karya.
    • Abubuwan haɗin grid da aka sabunta don amfani da make-col-readymahaɗin prep da kuma make-coldon saita da flexkuma max-widthdon girman shafi ɗaya.
    • Canja tsarin grid na kafofin watsa labarai na neman karyewa da faɗin kwantena don lissafin sabon matakin grid da tabbatar da ginshiƙai suna rarraba daidai gwargwado ta 12iyakar girmansu.
    • Yanzu ana sarrafa wuraren karya grid da faɗin kwantena ta taswirar Sass ( $grid-breakpointsda $container-max-widths) maimakon ɗimbin ɗimbin masu canji daban-daban. Waɗannan suna maye gurbin masu @screen-*canji gabaɗaya kuma suna ba ku damar keɓance matakan grid gabaɗaya.
    • Tambayoyin kafofin watsa labarai kuma sun canza. Maimakon maimaita sanarwar tambayar mu ta kafofin watsa labarai da ƙima iri ɗaya kowane lokaci, yanzu muna da @include media-breakpoint-up/down/only. Yanzu, maimakon rubutawa @media (min-width: @screen-sm-min) { ... }, kuna iya rubutawa @include media-breakpoint-up(sm) { ... }.

Abubuwan da aka gyara

  • Fale-falen fale-falen, babban hoto, da rijiyoyi don sabon abin da ya ƙunshi duka, katunan .
  • An jefar da font ɗin Glyphicons. Idan kana buƙatar gumaka, wasu zaɓuɓɓuka sune:
  • An sauke Affix jQuery plugin.
    • Muna ba da shawarar yin amfani da position: stickymaimakon. Dubi HTML5 Shiga don cikakkun bayanai da takamaiman shawarwarin cikawa. Shawara ɗaya ita ce a yi amfani da @supportsƙa'ida don aiwatar da ita (misali, @supports (position: sticky) { ... })
    • Idan kuna amfani da Affix don amfani da ƙarin, nau'ikan da ba positionsu da kyau, polyfills ɗin bazai goyi bayan shari'ar amfanin ku ba. Ɗayan zaɓi don irin wannan amfani shine ɗakin karatu na ScrollPos-Styler na ɓangare na uku .
  • An jefar da bangaren pager saboda ainihin maɓallan da aka keɓance shi.
  • An sake fasalin kusan duk abubuwan da aka gyara don amfani da ƙarin masu zaɓen aji marasa gida maimakon na musamman na zaɓaɓɓun yara.

Ta bangaren

Wannan jeri yana nuna maɓalli na canje-canje ta hanyar sashi tsakanin v3.xx da v4.0.0.

Sake yi

Sabon zuwa Bootstrap 4 shine Sake yi, sabon salo wanda ke ginawa akan Normalize tare da namu ɗan ra'ayi sake saitin salo. Masu zaɓin da ke bayyana a cikin wannan fayil ɗin suna amfani da abubuwa kawai-babu azuzuwan nan. Wannan ya keɓance salon sake saitin mu daga tsarin sassan mu don ingantaccen tsari. Wasu mahimman sake saitin wannan sun haɗa da box-sizing: border-boxcanji, motsawa daga emzuwa remraka'a akan abubuwa da yawa, tsarin haɗin kai, da yawancin sake saitin kashi.

Rubutun rubutu

  • An matsar da duk .text-abubuwan amfani zuwa _utilities.scssfayil ɗin.
  • Sauke .page-headerkamar yadda za a iya amfani da salon sa ta hanyar kayan aiki.
  • .dl-horizontal has been dropped. Instead, use .row on <dl> and use grid column classes (or mixins) on its <dt> and <dd> children.
  • Redesigned blockquotes, moving their styles from the <blockquote> element to a single class, .blockquote. Dropped the .blockquote-reverse modifier for text utilities.
  • .list-inline now requires that its children list items have the new .list-inline-item class applied to them.

Images

  • Renamed .img-responsive to .img-fluid.
  • Renamed .img-rounded to .rounded
  • Renamed .img-circle to .rounded-circle

Tables

  • Nearly all instances of the > selector have been removed, meaning nested tables will now automatically inherit styles from their parents. This greatly simplifies our selectors and potential customizations.
  • Renamed .table-condensed to .table-sm for consistency.
  • Added a new .table-inverse option.
  • Added table header modifiers: .thead-default and .thead-inverse.
  • Renamed contextual classes to have a .table--prefix. Hence .active, .success, .warning, .danger and .info to .table-active, .table-success, .table-warning, .table-danger and .table-info.

Forms

  • Moved element resets to the _reboot.scss file.
  • Renamed .control-label to .col-form-label.
  • Renamed .input-lg and .input-sm to .form-control-lg and .form-control-sm, respectively.
  • Dropped .form-group-* classes for simplicity’s sake. Use .form-control-* classes instead now.
  • Dropped .help-block and replaced it with .form-text for block-level help text. For inline help text and other flexible options, use utility classes like .text-muted.
  • Dropped .radio-inline and .checkbox-inline.
  • Consolidated .checkbox and .radio into .form-check and the various .form-check-* classes.
  • Horizontal forms overhauled:
    • Dropped the .form-horizontal class requirement.
    • .form-group no longer applies styles from the .row via mixin, so .row is now required for horizontal grid layouts (e.g., <div class="form-group row">).
    • Added new .col-form-label class to vertically center labels with .form-controls.
    • Added new .form-row for compact form layouts with the grid classes (swap your .row for a .form-row and go).
  • Added custom forms support (for checkboxes, radios, selects, and file inputs).
  • Replaced .has-error, .has-warning, and .has-success classes with HTML5 form validation via CSS’s :invalid and :valid pseudo-classes.
  • Renamed .form-control-static to .form-control-plaintext.

Buttons

  • Renamed .btn-default to .btn-secondary.
  • Dropped the .btn-xs class entirely as .btn-sm is proportionally much smaller than v3’s.
  • The stateful button feature of the button.js jQuery plugin has been dropped. This includes the $().button(string) and $().button('reset') methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
    • Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4.
  • Change buttons’ [disabled] to :disabled as IE9+ supports :disabled. However fieldset[disabled] is still necessary because native disabled fieldsets are still buggy in IE11.

Button group

  • Rewrote component with flexbox.
  • Removed .btn-group-justified. As a replacement you can use <div class="btn-group d-flex" role="group"></div> as a wrapper around elements with .w-100.
  • Dropped the .btn-group-xs class entirely given removal of .btn-xs.
  • Removed explicit spacing between button groups in button toolbars; use margin utilities now.
  • Improved documentation for use with other components.
  • Switched from parent selectors to singular classes for all components, modifiers, etc.
  • Simplified dropdown styles to no longer ship with upward or downward facing arrows attached to the dropdown menu.
  • Dropdowns can be built with <div>s or <ul>s now.
  • Rebuilt dropdown styles and markup to provide easy, built-in support for <a> and <button> based dropdown items.
  • Renamed .divider to .dropdown-divider.
  • Dropdown items now require .dropdown-item.
  • Dropdown toggles no longer require an explicit <span class="caret"></span>; this is now provided automatically via CSS’s ::after on .dropdown-toggle.

Grid system

  • Added a new 576px grid breakpoint as sm, meaning there are now five total tiers (xs, sm, md, lg, and xl).
  • Renamed the responsive grid modifier classes from .col-{breakpoint}-{modifier}-{size} to .{modifier}-{breakpoint}-{size} for simpler grid classes.
  • Dropped push and pull modifier classes for the new flexbox-powered order classes. For example, instead of .col-8.push-4 and .col-4.pull-8, you’d use .col-8.order-2 and .col-4.order-1.
  • Added flexbox utility classes for grid system and components.

List groups

  • Rewrote component with flexbox.
  • Replaced a.list-group-item with an explicit class, .list-group-item-action, for styling link and button versions of list group items.
  • Added .list-group-flush class for use with cards.
  • Rewrote component with flexbox.
  • Given the move to flexbox, alignment of dismiss icons in the header is likely broken as we’re no longer using floats. Floated content comes first, but with flexbox that’s no longer the case. Update your dismiss icons to come after modal titles to fix.
  • The remote option (which could be used to automatically load and inject external content into a modal) and the corresponding loaded.bs.modal event were removed. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.
  • Rewrote component with flexbox.
  • Dropped nearly all > selectors for simpler styling via un-nested classes.
  • Instead of HTML-specific selectors like .nav > li > a, we use separate classes for .navs, .nav-items, and .nav-links. This makes your HTML more flexible while bringing along increased extensibility.

The navbar has been entirely rewritten in flexbox with improved support for alignment, responsiveness, and customization.

  • Responsive navbar behaviors are now applied to the .navbar class via the required .navbar-expand-{breakpoint} where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling.
  • .navbar-default is now .navbar-light, though .navbar-dark remains the same. One of these is required on each navbar. However, these classes no longer set background-colors; instead they essentially only affect color.
  • Navbars now require a background declaration of some kind. Choose from our background utilities (.bg-*) or set your own with the light/inverse classes above for mad customization.
  • Given flexbox styles, navbars can now use flexbox utilities for easy alignment options.
  • .navbar-toggle is now .navbar-toggler and has different styles and inner markup (no more three <span>s).
  • Dropped the .navbar-form class entirely. It’s no longer necessary; instead, just use .form-inline and apply margin utilities as necessary.
  • Navbars no longer include margin-bottom or border-radius by default. Use utilities as necessary.
  • All examples featuring navbars have been updated to include new markup.

Pagination

  • Rewrote component with flexbox.
  • Explicit classes (.page-item, .page-link) are now required on the descendants of .paginations
  • Dropped the .pager component entirely as it was little more than customized outline buttons.
  • An explicit class, .breadcrumb-item, is now required on the descendants of .breadcrumbs

Labels and badges

  • Consolidated .label and .badge to disambiguate from the <label> element and simplify related components.
  • Added .badge-pill as modifier for rounded “pill” look.
  • Badges are no longer floated automatically in list groups and other components. Utility classes are now required for that.
  • .badge-default has been dropped and .badge-secondary added to match component modifier classes used elsewhere.

Panels, thumbnails, and wells

Dropped entirely for the new card component.

Panels

  • .panel to .card, now built with flexbox.
  • .panel-default removed and no replacement.
  • .panel-group removed and no replacement. .card-group is not a replacement, it is different.
  • .panel-heading to .card-header
  • .panel-title to .card-title. Depending on the desired look, you may also want to use heading elements or classes (e.g. <h3>, .h3) or bold elements or classes (e.g. <strong>, <b>, .font-weight-bold). Note that .card-title, while similarly named, produces a different look than .panel-title.
  • .panel-body to .card-body
  • .panel-footer to .card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, and .panel-danger have been dropped for .bg-, .text-, and .border utilities generated from our $theme-colors Sass map.

Progress

  • Replaced contextual .progress-bar-* classes with .bg-* utilities. For example, class="progress-bar progress-bar-danger" becomes class="progress-bar bg-danger".
  • Replaced .active for animated progress bars with .progress-bar-animated.
  • Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons.
  • All CSS has been un-nested and renamed, ensuring each class is prefixed with .carousel-.
    • For carousel items, .next, .prev, .left, and .right are now .carousel-item-next, .carousel-item-prev, .carousel-item-left, and .carousel-item-right.
    • .item is also now .carousel-item.
    • For prev/next controls, .carousel-control.right and .carousel-control.left are now .carousel-control-next and .carousel-control-prev, meaning they no longer require a specific base class.
  • Removed all responsive styling, deferring to utilities (e.g., showing captions on certain viewports) and custom styles as needed.
  • Removed image overrides for images in carousel items, deferring to utilities.
  • Tweaked the Carousel example to include the new markup and styles.

Tables

  • Removed support for styled nested tables. All table styles are now inherited in v4 for simpler selectors.
  • Added inverse table variant.

Utilities

  • Display, hidden, and more:
    • Made display utilities responsive (e.g., .d-none and d-{sm,md,lg,xl}-none).
    • Dropped the bulk of .hidden-* utilities for new display utilities. For example, instead of .hidden-sm-up, use .d-sm-none. Renamed the .hidden-print utilities to use the display utility naming scheme. More info under the Responsive utilities section of this page.
    • Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
  • Type:
    • Added responsive variations to our text alignment classes .text-{sm,md,lg,xl}-{left,center,right}.
  • Alignment and spacing:
  • Clearfix updated to drop support for older browser versions.

Vendor prefix mixins

Bootstrap 3’s vendor prefix mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use Autoprefixer, they’re no longer necessary.

Removed the following mixins: 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

Documentation

Our documentation received an upgrade across the board as well. Here’s the low down:

  • We’re still using Jekyll, but we have plugins in the mix:
    • bugify.rb is used to efficiently list out the entries on our browser bugs page.
    • example.rb is a custom fork of the default highlight.rb plugin, allowing for easier example-code handling.
    • callout.rb is a similar custom fork of that, but designed for our special docs callouts.
    • jekyll-toc is used to generate our table of contents.
  • All docs content has been rewritten in Markdown (instead of HTML) for easier editing.
  • Pages have been reorganized for simpler content and a more approachable hierarchy.
  • We moved from regular CSS to SCSS to take full advantage of Bootstrap’s variables, mixins, and more.

Responsive utilities

All @screen- variables have been removed in v4.0.0. Use the media-breakpoint-up(), media-breakpoint-down(), or media-breakpoint-only() Sass mixins or the $grid-breakpoints Sass map instead.

Our responsive utility classes have largely been removed in favor of explicit display utilities.

  • The .hidden and .show classes have been removed because they conflicted with jQuery’s $(...).hide() and $(...).show() methods. Instead, try toggling the [hidden] attribute or use inline styles like style="display: none;" and style="display: block;".
  • All .hidden- classes have been removed, save for the print utilities which have been renamed.
    • Removed from 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
    • Removed from v4 alphas: .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Print utilities no longer start with .hidden- or .visible-, but with .d-print-.
    • Old names: .visible-print-block, .visible-print-inline, .visible-print-inline-block, .hidden-print
    • Sabbin darasi : .d-print-block, .d-print-inline,.d-print-inline-block.d-print-none

Maimakon yin amfani da .visible-*azuzuwan fayyace, kuna sanya wani abu a bayyane ta hanyar kawai kada ku ɓoye shi a girman allo. Kuna iya haɗa .d-*-noneaji ɗaya tare da .d-*-blockaji ɗaya don nuna kashi ɗaya kawai akan tazarar da aka bayar na girman allo (misali .d-none.d-md-block.d-xl-noneyana nuna kashi akan matsakaita da manyan na'urori kawai).

Lura cewa canje-canje zuwa wuraren karya grid a cikin v4 yana nufin cewa za ku buƙaci tafiya wuri mafi girma don cimma sakamako iri ɗaya. Sabbin azuzuwan masu amfani ba sa yunƙurin ɗaukar ƙananan lamuran da ba a saba gani ba inda ba za a iya bayyana yanayin ganuwa a matsayin kewayon girman kallon kallo guda ɗaya ba; a maimakon haka za ku buƙaci amfani da CSS na al'ada a irin waɗannan lokuta.