Source

Migrasi ka v4

Bootstrap 4 mangrupikeun panulisan ulang utama pikeun sakabéh proyék. Parobahan anu paling penting diringkeskeun di handap, dituturkeun ku parobahan anu langkung spésifik kana komponén anu relevan.

Parobahan stabil

Pindah ti Beta 3 ka release v4.0 stabil kami, euweuh parobahan megatkeun, tapi aya sababaraha parobahan kasohor.

Nyitak

  • Maneuh utilitas print rusak. Saméméhna, ngagunakeun .d-print-*kelas hiji teu disangka-sangka bakal overrule sagala .d-*kelas séjén. Ayeuna, aranjeunna cocog sareng utilitas tampilan anu sanés sareng ngan ukur dilarapkeun ka média éta ( @media print).

  • Dimekarkeun utilitas tampilan print sadia pikeun cocog Utiliti séjén. Béta 3 tur heubeul ngan kungsi block, inline-block, inline, jeung none. Stabil v4 ditambahkeun flex, inline-flex, table, table-row, jeung table-cell.

  • Ngalereskeun rendering sawangan citak dina panyungsi kalayan gaya citak anyar anu netepkeun @page size.

Béta 3 parobahan

Nalika Beta 2 ningali seueur parobihan parobihan kami salami fase béta, tapi urang masih gaduh sababaraha anu kedah diurus dina sékrési Beta 3. Parobihan ieu berlaku upami anjeun ngamutahirkeun ka Beta 3 tina Beta 2 atanapi versi Bootstrap anu langkung lami.

Rupa-rupa

  • Dipiceun $thumbnail-transitionvariabel henteu kapake. Kami henteu ngalihkeun nanaon, janten éta ngan ukur kode tambahan.
  • Paket npm henteu deui kalebet file sanés salain file sumber sareng dist kami; upami anjeun ngandelkeun aranjeunna sareng ngajalankeun skrip kami ngalangkungan node_modulespolder, anjeun kedah adaptasi alur kerja anjeun.

Bentuk

  • Tulis ulang kotak centang sareng radio khusus sareng standar. Ayeuna, duanana mibanda struktur HTML cocog (luar <div>jeung sibling <input>jeung <label>) jeung gaya perenah sarua (standar tumpuk, inline kalawan kelas modifier). Hal ieu ngamungkinkeun urang pikeun gaya labél dumasar kana kaayaan input urang, nyederhanakeun rojongan pikeun disabledatribut (saméméhna merlukeun kelas indungna) jeung hadé ngarojong validasi formulir urang.

    Salaku bagian tina ieu, kami geus robah CSS pikeun ngatur sababaraha background-images on custom kotak centang formulir na radio. Saméméhna, .custom-control-indicatorunsur anu ayeuna dipiceun ngagaduhan warna latar tukang, gradién, sareng ikon SVG. Kustomisasi gradién latar hartosna ngagentos sadayana éta unggal waktos anjeun kedah ngarobih ngan ukur hiji. Ayeuna, urang kudu .custom-control-label::beforengeusian sarta gradién sarta .custom-control-label::afterhandles ikon.

    Pikeun nyieun inline cek custom, tambahkeun .custom-control-inline.

  • Pamilih diropéa pikeun grup tombol dumasar-input. Gantina [data-toggle="buttons"] { }pikeun gaya jeung kabiasaan, kami nganggo dataatribut ngan pikeun JS kabiasaan sarta ngandelkeun .btn-group-togglekelas anyar pikeun styling.

  • Dipiceun .col-form-legenddina ni'mat a rada ningkat .col-form-label. Ku cara ieu .col-form-label-smsareng .col-form-label-lgtiasa dianggo dina <legend>elemen kalayan gampang.

  • Input file khusus nampi parobihan kana $custom-file-textvariabel Sass na. Éta henteu deui peta Sass anu disarangkeun sareng ayeuna ngan ukur kakuatan hiji senar- Browsetombol sabab ayeuna mangrupikeun hiji-hijina unsur pseudo anu dihasilkeun tina Sass kami. Téks Choose fileayeuna asalna tina .custom-file-label.

Grup input

  • Addons group input ayeuna husus pikeun panempatan maranéhanana relatif ka input. Kami geus turun .input-group-addonna .input-group-btnkeur dua kelas anyar, .input-group-prependjeung .input-group-append. Anjeun kedah sacara eksplisit ngagunakeun append atanapi prepend ayeuna, nyederhanakeun seueur CSS kami. Dina hiji append atawa prepend, nempatkeun tombol anjeun sakumaha maranéhna bakal aya di mana waé, tapi mungkus téks dina .input-group-text.

  • Gaya validasi ayeuna dirojong, kitu ogé sababaraha input (sanaos anjeun ngan ukur tiasa nga-validasi hiji input per grup).

  • Ukuran kelas kedah aya dina indungna .input-groupsareng sanés unsur bentuk individu.

Béta 2 parobahan

Nalika dina béta, kami tujuanna pikeun henteu ngarobih parobahan. Nanging, hal-hal henteu salawasna jalan sakumaha anu direncanakeun. Di handap ieu aya parobihan anu kedah diémutan nalika ngalih ti Beta 1 ka Beta 2.

Meupeuskeun

  • Dipiceun $badge-colorvariabel sarta pamakéan na on .badge. Urang ngagunakeun fungsi kontras warna pikeun nyokot hiji colordumasar kana background-color, jadi variabel teu perlu.
  • Ngaganti ngaran grayscale()fungsi pikeun gray()nyegah megatkeun konflik jeung CSS grayscalefilter asli.
  • Diganti ngaran .table-inverse, .thead-inverse, jeung .thead-defaultka .*-darkjeung .*-light, cocog jeung skéma warna urang dipaké di tempat séjén.
  • Tabel responsif ayeuna ngahasilkeun kelas pikeun tiap breakpoint grid. Ieu ngarecah tina Béta 1 yén anu .table-responsiveanjeun anggo langkung mirip .table-responsive-md. Anjeun ayeuna tiasa nganggo .table-responsiveatanapi .table-responsive-{sm,md,lg,xl}upami diperyogikeun.
  • Turunkeun dukungan Bower salaku manajer pakét parantos dileungitkeun pikeun alternatif (contona, Benang atanapi npm). Tempo bower / bower # 2298 pikeun detil.
  • Bootstrap masih merlukeun jQuery 1.9.1 atawa saluhureuna, tapi anjeun disarankan pikeun make versi 3.x saprak browser v3.x dirojong nyaéta nu Bootstrap ngarojong ditambah v3.x boga sababaraha perbaikan kaamanan.
  • Dipiceun .form-control-labelkelas teu dipaké. Upami anjeun nganggo kelas ieu, éta duplikat .col-form-labelkelas anu vertikal dipuseurkeun a <label>sareng input anu aya hubunganana dina perenah bentuk horizontal.
  • Ngarobih color-yiqtina mixin anu kalebet colorharta ka fungsi anu ngabalikeun nilai, ngamungkinkeun anjeun ngagunakeunana pikeun harta CSS. Contona, tinimbang color-yiq(#000), Anjeun kukituna nulis color: color-yiq(#000);.

Sorotan

  • Ngawanohkeun pointer-eventspamakéan anyar dina modals. Luar .modal-dialogngaliwatan acara kalayan pointer-events: nonepikeun penanganan klik custom (ngamungkinkeun ngan ngadangukeun on .modal-backdroppikeun clicks wae), lajeng counteracts eta pikeun sabenerna .modal-contentkalawan pointer-events: auto.

Ringkesan

Ieu mangrupikeun barang tikét ageung anu anjeun hoyong terang nalika ngalih ti v3 ka v4.

Rojongan browser

  • Turunkeun dukungan IE8, IE9, sareng iOS 6. v4 ayeuna ngan ukur IE10+ sareng ios 7+. Pikeun situs anu peryogi salah sahiji, paké v3.
  • Ditambahkeun dukungan resmi pikeun Browser Android v5.0 Lollipop sareng WebView. Versi saméméhna tina Browser Android jeung WebView tetep ngan teu resmi dirojong.

parobahan global

  • Flexbox diaktipkeun sacara standar. Sacara umum ieu hartina move jauh ti floats tur leuwih sakuliah komponén urang.
  • Ngalihkeun tina Kurang ka Sass pikeun file CSS sumber kami.
  • Ngalih ti pxsalaku remUnit CSS primér urang, sanajan piksel masih dipaké pikeun queries média jeung kabiasaan grid sakumaha viewports alat teu kapangaruhan ku ukuran tipe.
  • Ukuran font global ningkat 14pxtina 16px.
  • Tiers grid revamped pikeun nambahkeun hiji pilihan kalima (addressing alat leutik di 576pxna handap) jeung miceun -xsinfiks ti eta kelas. Contona: .col-6.col-sm-4.col-md-3.
  • Ngaganti téma pilihan anu misah sareng pilihan anu tiasa dikonfigurasi via variabel SCSS (contona, $enable-gradients: true).
  • Sistem ngawangun dirobih ngagunakeun séri skrip npm tinimbang Grunt. Tingali package.jsonkanggo sadaya naskah, atanapi readme proyék kami pikeun kaperluan pangwangunan lokal.
  • Pamakéan Bootstrap anu henteu responsif henteu didukung deui.
  • Turunkeun Customizer online pikeun milih dokuméntasi pangaturan anu langkung éksténsif sareng ngawangun khusus.
  • Ditambahkeun puluhan kelas utiliti anyar pikeun pasangan nilai-nilai CSS umum sareng potong kompas jarak margin / padding.

Sistim grid

  • Dipindahkeun ka flexbox.
    • Ditambahkeun dukungan pikeun flexbox dina campuran grid sareng kelas anu tos siap.
    • Salaku bagian tina flexbox, kaasup rojongan pikeun kelas alignment nangtung sarta horizontal.
  • Ngaran kelas grid diropéa sarta undakan grid anyar.
    • smNambahkeun undakan grid anyar di handap 768pxpikeun kontrol anu langkung granular. Urang ayeuna boga xs, sm, md, lgjeung xl. Ieu ogé hartosna unggal tingkatan parantos nabrak hiji tingkat (janten .col-md-6dina v3 ayeuna aya .col-lg-6dina v4).
    • xskelas grid geus dirobah pikeun teu merlukeun infiks pikeun leuwih akurat ngagambarkeun yén maranéhna mimiti nerapkeun gaya dina min-width: 0teu a set nilai piksel. Gantina .col-xs-6, éta ayeuna .col-6. Kabéh tiers grid séjén merlukeun infiks (misalna, sm).
  • Diropéa ukuran grid, mixins, sarta variabel.
    • Grid talang ayeuna gaduh peta Sass ku kituna anjeun tiasa nangtukeun lebar talang husus dina unggal breakpoint.
    • Diropéa mixins grid pikeun ngamangpaatkeun hiji make-col-readymixin prep sarta make-colpikeun ngeset flexsarta max-widthpikeun ukuran kolom individu.
    • Ngarobah titik putus query média sistem grid jeung lebar wadahna pikeun akun undakan grid anyar jeung mastikeun kolom anu merata bisa dibagi ku 12dina lebar max maranéhanana.
    • breakpoints grid jeung lebar wadahna ayeuna diatur via peta Sass ( $grid-breakpointsjeung $container-max-widths) tinimbang sakeupeul variabel misah. Ieu ngagantikeun @screen-*variabel sagemblengna tur ngidinan Anjeun pikeun pinuh ngaropéa tiers grid.
    • Patarosan média ogé parantos robih. Gantina ngulang deklarasi query média kami kalayan nilai anu sami unggal waktos, ayeuna urang gaduh @include media-breakpoint-up/down/only. Ayeuna, tinimbang nulis @media (min-width: @screen-sm-min) { ... }, anjeun tiasa nyerat @include media-breakpoint-up(sm) { ... }.

Komponén

  • Panels, gambar leutik, sareng sumur anu diturunkeun pikeun komponén énggal, kartu .
  • Leupaskeun font ikon Glyphicons. Upami anjeun peryogi ikon, sababaraha pilihan nyaéta:
  • Ngaleungitkeun plugin Affix jQuery.
    • Kami nyarankeun ngagunakeun position: stickygantina. Tingali entri HTML5 Mangga pikeun detil sareng rekomendasi polyfill khusus. Hiji saran nyaéta ngagunakeun @supportsaturan pikeun ngalaksanakeunana (contona, @supports (position: sticky) { ... })/
    • Upami anjeun nganggo Affix pikeun nerapkeun tambahan, non position-gaya, polyfills tiasa henteu ngadukung kasus panggunaan anjeun. Hiji pilihan pikeun kagunaan sapertos nyaéta perpustakaan ScrollPos-Styler pihak katilu .
  • Leupaskeun komponén pager sakumaha ieu dasarna rada ngaropéa tombol.
  • Refactored ampir kabéh komponén pikeun make leuwih un-nested pamilih kelas tinimbang leuwih-spésifik pamilih barudak.

Ku komponén

Daptar ieu highlights parobahan konci ku komponén antara v3.xx na v4.0.0.

Reboot

Anyar pikeun Bootstrap 4 nyaéta Reboot , a stylesheet anyar anu diwangun dina Normalize kalawan gaya reset rada opinionated urang sorangan. Pamilih anu muncul dina file ieu ngan ukur nganggo elemen-teu aya kelas di dieu. Ieu ngasingkeun gaya reset kami tina gaya komponén kami pikeun pendekatan anu langkung modular. Sababaraha resets pangpentingna ieu ngawengku nu box-sizing: border-boxrobah, pindah ti emka remunit dina loba elemen, gaya link, sarta loba formulir resets unsur.

Tipografi

  • Pindahkeun sadaya .text-utiliti kana _utilities.scssfile.
  • Diturunkeun .page-headersalaku gaya na tiasa diterapkeun via utilitas.
  • .dl-horizontalgeus turun. Gantina, make .rowon <dl>na make kelas kolom grid (atawa mixins) on na <dt>jeung <dd>barudak.
  • redesigned blockquotes, pindah gaya maranéhanana ti <blockquote>unsur ka kelas tunggal .blockquote,. Turunkeun .blockquote-reversemodifier pikeun utilitas téks.
  • .list-inlineayeuna merlukeun item daptar barudak na boga .list-inline-itemkelas anyar dilarapkeun ka aranjeunna.

Gambar

  • Diganti ngaran .img-responsivejadi .img-fluid.
  • Diganti ngaran .img-roundedjadi.rounded
  • Diganti ngaran .img-circlejadi.rounded-circle

tabél

  • Ampir kabéh instansi >pamilih geus dihapus, hartina tabel nested ayeuna bakal otomatis inherit gaya ti kolotna. Ieu pisan nyederhanakeun pamilih urang sareng kustomisasi poténsial.
  • Diganti ngaranna .table-condensedpikeun .table-smkonsistensi.
  • Ditambahkeun .table-inversepilihan anyar.
  • Ditambahkeun tabel lulugu modifiers: .thead-defaultjeung .thead-inverse.
  • Diganti ngaran kelas kontekstual boga .table--prefix. Ku kituna .active, .success, .warning, .dangerjeung .infoka .table-active, .table-success, .table-warning, .table-dangerjeung .table-info.

Bentuk

  • Unsur dipindahkeun resets kana _reboot.scssfile.
  • Diganti ngaran .control-labeljadi .col-form-label.
  • Diganti ngaran .input-lgjeung .input-smka .form-control-lgjeung .form-control-sm, masing-masing.
  • Turun .form-group-*kelas demi kesederhanaan. Anggo .form-control-*kelas ayeuna.
  • Diturunkeun .help-blocksareng diganti ku .form-textpikeun téks pitulung tingkat blok. Pikeun téks pitulung inline sareng pilihan fléksibel sanés, paké kelas utiliti sapertos .text-muted.
  • Diturunkeun .radio-inlinejeung .checkbox-inline.
  • Dihijikeun .checkboxjeung .radiokana .form-checkjeung rupa-rupa .form-check-*kelas.
  • Bentuk horisontal dirobih:
    • Turunkeun .form-horizontalsarat kelas.
    • .form-groupeuweuh nerapkeun gaya ti .rowvia mixin, jadi .rowayeuna diperlukeun pikeun layouts grid horizontal (misalna, <div class="form-group row">).
    • Ditambahkeun .col-form-labelkelas anyar pikeun labél puseur vertikal kalawan .form-controls.
    • Ditambahkeun anyar .form-rowpikeun perenah bentuk kompak sareng kelas grid (swap anjeun .rowsareng .form-rowangkat).
  • Ditambahkeun dukungan bentuk khusus (pikeun kotak centang, radio, pilih, sareng input file).
  • Diganti .has-error, .has-warning, jeung .has-successkelas kalawan HTML5 formulir validasi via CSS :invalidjeung :validpseudo-kelas.
  • Diganti ngaran .form-control-staticjadi .form-control-plaintext.

Kancing

  • Diganti ngaran .btn-defaultjadi .btn-secondary.
  • Turun .btn-xskelas sagemblengna sakumaha .btn-smproporsional leuwih leutik batan v3 urang.
  • Fitur tombol stateful tina button.jsplugin jQuery geus turun. Ieu ngawengku $().button(string)jeung $().button('reset')métode. Urang mamatahan ngagunakeun saeutik leutik custom JavaScript gantina, nu bakal boga kauntungan tina behaving persis cara rék ka.
    • Catet yén fitur séjén tina plugin (kotak centang tombol, radio tombol, tombol toggle tunggal) parantos disimpen dina v4.
  • Robah tombol ' [disabled]ka :disabledjadi IE9+ ngarojong :disabled. Sanajan kitu fieldset[disabled]masih perlu sabab fieldsets ditumpurkeun asli masih buggy di IE11 .

Grup tombol

  • Rewrote komponén kalawan flexbox.
  • Dipiceun .btn-group-justified. Salaku gaganti anjeun bisa make <div class="btn-group d-flex" role="group"></div>salaku wrapper sabudeureun elemen kalawan .w-100.
  • Turun .btn-group-xskelas sagemblengna dibéré panyabutan .btn-xs.
  • Dipiceun spasi eksplisit antara grup tombol dina toolbar tombol; nganggo utilitas margin ayeuna.
  • Dokuméntasi ningkat pikeun dianggo sareng komponén sanés.
  • Dipindahkeun tina pamilih indungna ka kelas tunggal pikeun sadaya komponén, modifier, jsb.
  • Gaya dropdown saderhana pikeun henteu deui dikirimkeun ku panah ka luhur atanapi ka handap anu digantelkeun kana menu lungsur.
  • Dropdowns tiasa diwangun ku <div>s atanapi <ul>s ayeuna.
  • Diwangun deui gaya dropdown jeung markup pikeun nyadiakeun gampang, diwangun-di rojongan pikeun <a>tur <button>dumasar item dropdown.
  • Diganti ngaran .dividerjadi .dropdown-divider.
  • Item dropdown ayeuna peryogi .dropdown-item.
  • Toggles dropdown henteu peryogi deui anu eksplisit <span class="caret"></span>; ieu ayeuna disadiakeun sacara otomatis via CSS urang ::afteron .dropdown-toggle.

Sistim grid

  • Ditambahkeun 576pxbreakpoint grid anyar salaku sm, hartina ayeuna aya lima total tiers ( xs, sm, md, lg, jeung xl).
  • Ngaganti ngaran kelas modifier grid responsif ti .col-{breakpoint}-{modifier}-{size}keur .{modifier}-{breakpoint}-{size}kelas grid basajan.
  • Turunkeun push sareng tarik kelas modifier pikeun kelas flexbox-Powered anyar order. Contona, tinimbang .col-8.push-4jeung .col-4.pull-8, Anjeun kukituna make .col-8.order-2jeung .col-4.order-1.
  • Ditambahkeun kelas utiliti flexbox pikeun sistem grid sareng komponenana.

Daptar grup

  • Rewrote komponén kalawan flexbox.
  • Diganti a.list-group-itemku kelas eksplisit, .list-group-item-action, Pikeun styling link na versi tombol tina daptar item grup.
  • kelas ditambahkeun .list-group-flushpikeun pamakéan ku kartu.
  • Rewrote komponén kalawan flexbox.
  • Dibikeun pindah ka flexbox, alignment ikon ngabubarkeun dina header sigana rusak sabab urang henteu nganggo floats. Eusi ngambang asalna heula, tapi kalayan flexbox éta henteu deui masalahna. Apdet ikon piceun anjeun datang sanggeus judul modal pikeun ngalereskeun.
  • Pilihan remote(anu tiasa dianggo pikeun otomatis ngamuat sareng nyuntik eusi éksternal kana modal) sareng loaded.bs.modalacara anu saluyu dihapus. Kami ngarékoméndasikeun tinimbang ngagunakeun templating sisi klien atawa kerangka data mengikat, atawa nelepon jQuery.load sorangan.
  • Rewrote komponén kalawan flexbox.
  • Turunkeun ampir sadaya >pamilih pikeun gaya anu langkung saderhana ngalangkungan kelas anu teu disarangkeun.
  • Gantina selectors HTML-spésifik kawas .nav > li > a, kami nganggo kelas misah pikeun .navs, .nav-items, jeung .nav-links. Hal ieu ngajadikeun HTML anjeun leuwih fleksibel bari bringing sapanjang ngaronjat extensibility.

Navbar parantos ditulis deui dina flexbox kalayan dukungan ningkat pikeun alignment, responsiveness, sareng kustomisasi.

  • Paripolah navbar responsif ayeuna dilarapkeun ka .navbarkelas via diperlukeun .navbar-expand-{breakpoint} dimana anjeun milih mana ambruk navbar nu. Saméméhna ieu modifikasi Kurang variabel sarta diperlukeun recompiling.
  • .navbar-defaultayeuna .navbar-light, sanajan .navbar-darktetep sarua. Salah sahiji ieu diperlukeun dina unggal navbar. Sanajan kitu, kelas ieu euweuh set background-colors; tibatan aranjeunna dina dasarna ngan mangaruhan color.
  • Navbars ayeuna peryogi deklarasi latar tukang tina sababaraha jinis. Pilih tina utilitas latar tukang kami ( .bg-*) atanapi setel anjeun nyalira kalayan kelas lampu / tibalik di luhur pikeun kustomisasi gila .
  • Dibikeun gaya flexbox, navbars ayeuna tiasa nganggo utilitas flexbox pikeun pilihan alignment gampang.
  • .navbar-togglekiwari .navbar-togglersarta boga gaya béda jeung markup jero (teu leuwih tilu <span>s).
  • Turun .navbar-formkelas sagemblengna. Éta henteu peryogi deui; tibatan, ngan make .form-inlinejeung nerapkeun Utiliti margin sakumaha perlu.
  • Navbars euweuh kaasup margin-bottomatawa border-radiussacara standar. Paké utiliti sakumaha perlu.
  • Sadaya conto anu nampilkeun navbar parantos diropéa pikeun kalebet markup énggal.

Pagination

  • Rewrote komponén kalawan flexbox.
  • Kelas eksplisit ( .page-item, .page-link) ayeuna diperlukeun dina turunan .paginations
  • Turun .pagerkomponén sagemblengna sabab éta saeutik leuwih ti tombol outline ngaropéa.
  • Hiji kelas eksplisit, .breadcrumb-item, Ayeuna diperlukeun dina turunan .breadcrumbs

Label jeung badges

  • Dihijikeun .labelsareng .badgedisambiguasi tina <label>unsur sareng nyederhanakeun komponén anu aya hubunganana.
  • Ditambahkeun .badge-pillsalaku modifier pikeun rounded "pil" katingal.
  • Badges henteu deui ngambang sacara otomatis dina grup daptar sareng komponén séjén. Kelas utiliti ayeuna diperyogikeun pikeun éta.
  • .badge-defaultgeus turun sarta .badge-secondaryditambahkeun kana cocog kelas modifier komponén dipaké nguap.

Panel, gambar leutik, sareng sumur

Turun sagemblengna pikeun komponén kartu anyar.

Panels

  • .panelka .card, ayeuna diwangun ku flexbox.
  • .panel-defaultdipiceun jeung euweuh ngagantian.
  • .panel-groupdipiceun jeung euweuh ngagantian. .card-grouplain panggantian, béda.
  • .panel-headingka.card-header
  • .panel-titleka .card-title. Gumantung kana tampilan anu dipikahoyong, anjeun ogé tiasa nganggo elemen judul atanapi kelas (contona <h3>, .h3) atanapi elemen atanapi kelas anu wani (contona <strong>, <b>, .font-weight-bold). Catet yén .card-title, bari ngaranna sarupa, ngahasilkeun tampilan béda ti .panel-title.
  • .panel-bodyka.card-body
  • .panel-footerka.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, sarta .panel-dangergeus turun pikeun .bg-, .text-, sarta .borderUtiliti dihasilkeun tina $theme-colorspeta Sass kami.

Kamajuan

  • Ngaganti .progress-bar-*kelas kontekstual sareng .bg-*utilitas. Contona, class="progress-bar progress-bar-danger"janten class="progress-bar bg-danger".
  • Diganti .activepikeun bar kamajuan animasi kalawan .progress-bar-animated.
  • Overhauled sakabéh komponén pikeun simplify rarancang jeung styling. Kami gaduh langkung sakedik gaya pikeun anjeun timpa, indikator énggal, sareng ikon énggal.
  • Kabéh CSS geus un-nested tur diganti ngaranna, mastikeun unggal kelas ieu prefixed kalawan .carousel-.
    • Pikeun barang carousel, .next, .prev, .left, jeung .rightayeuna .carousel-item-next, .carousel-item-prev, .carousel-item-left, jeung .carousel-item-right.
    • .itemayeuna oge .carousel-item.
    • Pikeun prev / kadali salajengna, .carousel-control.righttur .carousel-control.leftayeuna .carousel-control-nextna .carousel-control-prev, hartina maranéhna euweuh merlukeun kelas basa husus.
  • Dipiceun sagala styling responsif, deferring kana utiliti (misalna, némbongkeun captions on viewports tangtu) jeung gaya custom sakumaha diperlukeun.
  • Dipiceun overrides gambar pikeun gambar dina item carousel, deferring kana Utiliti.
  • Tweaked conto Carousel pikeun kalebet markup sareng gaya énggal.

tabél

  • Dipiceun rojongan pikeun tabel nested styled. Sadaya gaya tabel ayeuna diwariskeun dina v4 pikeun pamilih anu langkung saderhana.
  • Ditambahkeun varian tabel tibalik.

Utiliti

  • Tampilan, disumputkeun, sareng seueur deui:
    • Dijieunna Utiliti tampilan responsif (contona, .d-nonejeung d-{sm,md,lg,xl}-none).
    • Turunkeun seueur .hidden-*utilitas pikeun utilitas tampilan énggal . Contona, tinimbang .hidden-sm-up, make .d-sm-none. Ngaganti ngaran .hidden-printutiliti pikeun ngagunakeun skéma ngaran utiliti tampilan. Langkung seueur inpormasi dina bagian Utiliti responsif dina halaman ieu.
    • .float-{sm,md,lg,xl}-{left,right,none}kelas ditambahkeun pikeun floats responsif sarta dihapus .pull-leftsarta .pull-rightsaprak maranéhna geus kaleuleuwihan ka .float-leftna .float-right.
  • Tipe:
    • Nambahkeun variasi responsif kana kelas alignment téks urang .text-{sm,md,lg,xl}-{left,center,right}.
  • Alignment sareng jarak:
    • Nambahkeun margin responsif anyar sareng utilitas padding pikeun sadaya sisi, ditambah shorthand nangtung sareng horizontal.
    • Nambahkeun beban kapal tina utilitas flexbox .
    • Turun ka kelas .center-blockanyar .mx-auto.
  • Clearfix diropéa pikeun ngadukung vérsi browser anu langkung lami.

Campuran awalan vendor

Campuran awalan vendor Bootstrap 3 , anu dicabut dina v3.2.0, parantos dihapus dina Bootstrap 4. Kusabab kami nganggo Autoprefixer , aranjeunna henteu peryogi deui.

Dipiceun mixins handap: 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

Dokuméntasi

Dokuméntasi kami ogé nampi paningkatan dina papan ogé. Ieu handap handap:

  • Kami masih nganggo Jekyll, tapi kami gaduh plugins dina campuran:
    • bugify.rbdianggo pikeun épisién daptar éntri dina halaman bug browser urang.
    • example.rbmangrupakeun garpu custom tina highlight.rbplugin standar, sahingga pikeun gampang conto-kode penanganan.
    • callout.rbmangrupikeun garpu adat anu sami, tapi dirarancang pikeun panyabutan dokumén khusus urang.
    • jekyll-toc dianggo pikeun ngahasilkeun daptar eusi kami.
  • Sadaya eusi dokumén parantos ditulis deui dina Markdown (gaganti HTML) pikeun ngédit langkung gampang.
  • Kaca geus disusun deui pikeun eusi basajan tur hirarki leuwih dideukeutan.
  • Kami ngalih tina CSS biasa ka SCSS pikeun ngamangpaatkeun variabel Bootstrap, campuran, sareng seueur deui.

Utiliti responsif

Kabéh @screen-variabel geus dihapus dina v4.0.0. Anggo campuran media-breakpoint-up(), media-breakpoint-down(), atanapi media-breakpoint-only()Sass atanapi $grid-breakpointspeta Sass.

Kelas utilitas responsif kami sabagéan ageung parantos dihapus pikeun milih displayutilitas eksplisit.

  • The .hiddenjeung .showkelas geus dihapus sabab conflicted kalawan jQuery urang $(...).hide()jeung $(...).show()métode. Gantina, coba toggling [hidden]atribut atawa make gaya inline kawas style="display: none;"na style="display: block;".
  • Kabéh .hidden-kelas geus dihapus, simpen pikeun utilitas print nu geus diganti ngaranna.
    • Dipiceun tina 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
    • Dipiceun tina v4 alfa:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Utiliti print henteu deui dimimitian ku .hidden-atanapi .visible-, tapi ku .d-print-.
    • Ngaran heubeul: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Kelas anyar: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Tinimbang nganggo .visible-*kelas eksplisit, anjeun ngajantenkeun unsur katingali ku ngan saukur henteu nyumputkeunana dina ukuran layar éta. Anjeun tiasa ngagabungkeun hiji .d-*-nonekelas jeung hiji .d-*-blockkelas pikeun nembongkeun hiji unsur ukur dina interval tina ukuran layar (misalna .d-none.d-md-block.d-xl-nonenembongkeun unsur ukur dina alat sedeng jeung badag).

Catet yén parobihan kana breakpoints grid dina v4 hartosna anjeun kedah langkung ageung hiji breakpoint pikeun ngahontal hasil anu sami. Kelas utilitas responsif anyar teu nyobian nampung kasus kirang umum dimana pisibilitas unsur urang teu bisa dikedalkeun salaku rentang contiguous tunggal ukuran viewport; Anjeun bakal gantina kudu make CSS custom dina kasus kawas.