Source

Migrasi menyang v4

Bootstrap 4 minangka rewrite utama saka kabeh proyek. Owah-owahan sing paling penting diringkes ing ngisor iki, banjur owah-owahan sing luwih spesifik kanggo komponen sing cocog.

owah-owahan stabil

Ngalih saka Beta 3 kanggo release v4.x stabil kita, ora ana owah-owahan bejat, nanging ana sawetara owah-owahan kacathet.

Printing

  • Ndandani keperluan print rusak. Sadurunge, nggunakake .d-print-*kelas bakal ndadak overrule sembarang .d-*kelas liyane. Saiki, padha cocog karo utilitas tampilan liyane lan mung ditrapake kanggo media kasebut ( @media print).

  • Expanded kasedhiya sarana tampilan print kanggo cocog keperluan liyane. Beta 3 lan lawas mung duwe block, inline-block, inline, lan none. Stabil v4 ditambahake flex, inline-flex, table, table-row, lan table-cell.

  • Rendering pratinjau cetak tetep ing browser kanthi gaya cetak anyar sing nemtokake @page size.

Beta 3 owah-owahan

Nalika Beta 2 ndeleng akeh owah-owahan sing rusak sajrone fase beta, nanging kita isih duwe sawetara sing kudu ditangani ing rilis Beta 3. Owah-owahan iki ditrapake yen sampeyan nganyari menyang Beta 3 saka Beta 2 utawa versi Bootstrap sing luwih lawas.

macem-macem

  • $thumbnail-transitionMbusak variabel sing ora digunakake . Kita ora transisi apa-apa, dadi mung kode ekstra.
  • Paket npm ora ana maneh file liyane saka file sumber lan dist; yen sampeyan ngandelake lan nglakokake skrip liwat node_modulesfolder kasebut, sampeyan kudu ngganti alur kerja sampeyan.

Formulir

  • Tulis maneh kothak lan radio khusus lan standar. Saiki, loro-lorone duwe struktur HTML sing cocog (njaba <div>karo sedulur <input>lan <label>) lan gaya tata letak sing padha (standar ditumpuk, inline karo kelas modifier). Iki ngidini kita nggawe gaya label adhedhasar negara input, nyederhanakake dhukungan kanggo disabledatribut kasebut (sadurunge mbutuhake kelas induk) lan luwih ndhukung validasi formulir.

    Minangka bagéan saka iki, kita wis diganti CSS kanggo ngatur macem-macem background-images ing kothak centhang wangun adat lan radio. .custom-control-indicatorSadurunge, unsur sing saiki dibusak duwe werna latar mburi, gradien, lan lambang SVG. Kustomisasi gradien latar mburi tegese ngganti kabeh saben sampeyan kudu ngganti mung siji. Saiki, kita kudu .custom-control-label::beforengisi lan gradien lan .custom-control-label::afternangani lambang kasebut.

    Kanggo nggawe inline mriksa khusus, tambahake .custom-control-inline.

  • Pamilih dianyari kanggo kelompok tombol basis input. Tinimbang [data-toggle="buttons"] { }kanggo gaya lan prilaku, kita nggunakake dataatribut mung kanggo prilaku JS lan gumantung ing .btn-group-togglekelas anyar kanggo noto.

  • Dibusak .col-form-legending sih saka rada apik .col-form-label. Kanthi cara iki .col-form-label-smlan .col-form-label-lgbisa digunakake ing <legend>unsur kanthi gampang.

  • Input file khusus nampa owah-owahan menyang $custom-file-textvariabel Sass. Iki dudu peta Sass sing bersarang lan saiki mung nguwasani siji senar — Browsetombol amarga saiki mung siji-sijine unsur pseudo sing digawe saka Sass. Teks Choose filekasebut saiki asale saka .custom-file-label.

Klompok input

  • Addons klompok input saiki khusus kanggo panggonan sing relatif marang input. Kita wis dropped .input-group-addonlan .input-group-btnkanggo rong kelas anyar, .input-group-prependlan .input-group-append. Sampeyan kudu kanthi tegas nggunakake append utawa prepend saiki, nyederhanakake akeh CSS kita. Ing append utawa prepend, selehake tombol kaya sing bakal ana ing ngendi wae, nanging bungkus teks ing .input-group-text.

  • Gaya validasi saiki didhukung, uga macem-macem input (sanajan sampeyan mung bisa validasi siji input saben grup).

  • Kelas ukuran kudu ing induk .input-grouplan dudu unsur wangun individu.

Beta 2 owah-owahan

Nalika ing beta, kita ngarahake ora ana owah-owahan sing rusak. Nanging, kabeh ora mesthi kaya sing direncanakake. Ing ngisor iki ana owah-owahan sing kudu digatekake nalika pindhah saka Beta 1 menyang Beta 2.

Pecah

  • Variabel dibusak $badge-colorlan panggunaane ing .badge. Kita nggunakake fungsi kontras werna kanggo Pick a coloradhedhasar background-color, supaya variabel ora perlu.
  • Ganti jeneng grayscale()fungsi kanggo gray()ngindhari konflik karo grayscalefilter asli CSS.
  • Ganti jeneng .table-inverse, .thead-inverse, lan .thead-defaultmenyang .*-darklan .*-light, cocog karo skema warna sing digunakake ing papan liya.
  • Tabel responsif saiki ngasilake kelas kanggo saben breakpoint kothak. Iki bubar saka Beta 1 amarga sing .table-responsivesampeyan gunakake luwih kaya .table-responsive-md. Sampeyan saiki bisa nggunakake .table-responsiveutawa yen .table-responsive-{sm,md,lg,xl}perlu.
  • Dhukungan Bower sing diturunake minangka manajer paket wis ora digunakake kanggo alternatif (contone, Benang utawa npm). Waca bower / bower # 2298 kanggo rincian.
  • Bootstrap isih mbutuhake jQuery 1.9.1 utawa luwih, nanging sampeyan disaranake nggunakake versi 3.x wiwit browser v3.x didhukung sing Bootstrap ndhukung plus v3.x wis sawetara mbenakake keamanan.
  • Mbusak .form-control-labelkelas sing ora digunakake. Yen sampeyan nggawe nggunakake kelas iki, iku duplikat saka .col-form-labelkelas sing vertikal tengah a <label>karo iku digandhengake input ing noto wangun horisontal.
  • Ngganti color-yiqsaka mixin sing kalebu colorproperti menyang fungsi sing ngasilake nilai, ngidini sampeyan nggunakake kanggo properti CSS. Contone, tinimbang color-yiq(#000), sampeyan bakal nulis color: color-yiq(#000);.

Sorotan

  • Ngenalke pointer-eventspanggunaan anyar ing modals. Njaba .modal-dialogliwat acara karo pointer-events: nonekanggo ngatur klik adat (dadi iku bisa kanggo mung ngrungokake .modal-backdropkanggo klik sembarang), lan banjur counteracts kanggo nyata .modal-contentkaro pointer-events: auto.

Ringkesan

Mangkene item tiket gedhe sing sampeyan pengin ngerti nalika pindhah saka v3 menyang v4.

Dhukungan browser

  • Dhukungan IE8, IE9, lan iOS 6 ilang. v4 saiki mung IE10+ lan iOS 7+. Kanggo situs sing mbutuhake salah sawijining, gunakake v3.
  • Ditambahake dhukungan resmi kanggo Browser lan WebView Android v5.0 Lollipop. Versi sadurungé saka Browser Android lan WebView tetep mung ora resmi didhukung.

owah-owahan global

  • Flexbox diaktifake kanthi gawan. Umumé iki tegese pamindhahan adoh saka floats lan liyane ing komponen kita.
  • Ngalih saka Kurang dadi Sass kanggo file CSS sumber kita.
  • Diowahi saka minangka unit CSS utami, sanajan piksel isih digunakake kanggo pitakon media lan prilaku kothak amarga tampilan piranti ora kena pengaruh ukuran jinis px.rem
  • Ukuran font global tambah 14pxsaka 16px.
  • Tier kothak sing diowahi kanggo nambah pilihan kaping lima (nganggo piranti sing luwih cilik ing 576pxngisor) lan mbusak -xsinfix saka kelas kasebut. Tuladha: .col-6.col-sm-4.col-md-3.
  • Ngganti tema opsional sing kapisah karo opsi sing bisa dikonfigurasi liwat variabel SCSS (contone, $enable-gradients: true).
  • Sistem mbangun dirombak nggunakake seri skrip npm tinimbang Grunt. Deleng package.jsonkabeh skrip, utawa readme proyek kita kanggo kabutuhan pembangunan lokal.
  • Panggunaan Bootstrap sing ora responsif ora didhukung maneh.
  • Ninggalake Customizer online kanggo dokumentasi persiyapan sing luwih ekstensif lan mbangun sing disesuaikan.
  • Nambahake puluhan kelas utilitas anyar kanggo pasangan nilai properti CSS umum lan trabasan jarak margin / padding.

Sistem grid

  • Dipindhah menyang flexbox.
    • Dhukungan ditambahake kanggo flexbox ing campuran kothak lan kelas sing wis ditemtokake.
    • Minangka bagéan saka flexbox, kalebu dhukungan kanggo kelas alignment vertikal lan horisontal.
  • Jeneng kelas kothak dianyari lan undakan kothak anyar.
    • smNambahake undakan kothak anyar ing ngisor 768pxiki kanggo kontrol luwih granular. Saiki kita duwe xs, sm, md, lglan xl. Iki uga ateges saben undakan wis nabrak munggah siji tingkat (dadi .col-md-6ing v3 saiki .col-lg-6ing v4).
    • xskelas kothak wis diowahi kanggo ora mbutuhake infix kanggo luwih akurat makili sing padha miwiti aplikasi gaya ing min-width: 0lan ora Nilai piksel pesawat. Tinimbang .col-xs-6, saiki .col-6. Kabeh undakan kothak liyane mbutuhake infiks (contone, sm).
  • Dianyari ukuran kothak, mixin, lan variabel.
    • talang kothak saiki duwe peta Sass supaya sampeyan bisa nemtokake jembar talang tartamtu ing saben breakpoint.
    • Campuran kothak sing dianyari kanggo nggunakake make-col-readymixin persiapan lan nyetel make-colukuran kolom individu.flexmax-width
    • Ganti breakpoints query media sistem kothak lan ambane wadhah kanggo akun undakan kothak anyar lan mesthekake kolom bisa dipérang merata dening 12ing jembaré maksimum.
    • Titik putus kothak lan ambane wadhah saiki ditangani liwat peta Sass ( $grid-breakpointslan $container-max-widths) tinimbang sawetara variabel sing kapisah. Iki ngganti kabeh @screen-*variabel lan ngidini sampeyan ngatur tingkat kothak kanthi lengkap.
    • Pitakonan media uga wis diganti. Tinimbang mbaleni deklarasi pitakon media kanthi nilai sing padha saben wektu, saiki kita duwe @include media-breakpoint-up/down/only. Saiki, tinimbang nulis @media (min-width: @screen-sm-min) { ... }, sampeyan bisa nulis @include media-breakpoint-up(sm) { ... }.

Komponen

  • Panel dropped, gambar cilik, lan sumur kanggo komponen anyar kabeh-nyakup, kertu .
  • Font lambang Glyphicons ilang. Yen sampeyan butuh lambang, sawetara opsi yaiku:
  • Mbusak plugin Affix jQuery.
  • Mbusak komponen pager amarga tombol kasebut rada disesuaikan.
  • Refactored meh kabeh komponen kanggo nggunakake luwih un-nested pamilih kelas tinimbang over-spesifik anak pamilih.

Miturut komponen

Dhaptar iki nyorot owah-owahan kunci miturut komponen antarane v3.xx lan v4.0.0.

Urip maneh

Anyar kanggo Bootstrap 4 yaiku Reboot , lembar gaya anyar sing dibangun ing Normalisasi kanthi gaya reset sing rada manut. Pamilih sing katon ing file iki mung nggunakake unsur-ora ana kelas ing kene. Iki ngisolasi gaya reset saka gaya komponen kanggo pendekatan sing luwih modular. Sawetara ngreset paling penting iki kalebu owah- box-sizing: border-boxowahan, pindhah saka emkanggo remUnit ing akeh unsur, gaya link, lan akeh unsur ngreset.

Tipografi

  • Dipindhah kabeh .text-keperluan kanggo _utilities.scssfile.
  • Dropped .page-headerminangka gaya bisa diterapake liwat utilitas.
  • .dl-horizontalwis dropped. Nanging, gunakake lan gunakake kelas kolom kothak (utawa campuran) ing .rowlan bocah- bocah.<dl><dt><dd>
  • Blockquotes dirancang maneh, obah gaya saka <blockquote>unsur kanggo kelas siji .blockquote,. Ninggalake .blockquote-reversemodifier kanggo keperluan teks.
  • .list-inlinesaiki mbutuhake item dhaptar anak duwe .list-inline-itemkelas anyar sing ditrapake.

Gambar

  • Ganti jeneng .img-responsivedadi .img-fluid.
  • Ganti jeneng .img-roundeddadi.rounded
  • Ganti jeneng .img-circledadi.rounded-circle

Tabel

  • Saklawasé kabeh kedadean >pamilih wis dibusak, tegese tabel nested saiki bakal kanthi otomatis warisan gaya saka tuwane. Iki banget nyederhanakake pamilih lan kustomisasi potensial.
  • Ganti jeneng .table-condensedkanggo .table-smkonsistensi.
  • Nambahake .table-inversepilihan anyar.
  • Added tabel header modifiers: .thead-defaultlan .thead-inverse.
  • Ganti jeneng kelas kontekstual dadi .table--awalan. Mula .active, .success, .warning, .dangerlan .infokanggo .table-active, .table-success, .table-warning, .table-dangerlan .table-info.

Formulir

  • Dipindhah unsur ngreset menyang _reboot.scssfile.
  • Ganti jeneng .control-labeldadi .col-form-label.
  • Ganti jeneng .input-lglan .input-smkanggo .form-control-lglan .form-control-sm, mungguh.
  • Kelas dropped .form-group-*kanggo kesederhanaan. Gunakake .form-control-*kelas tinimbang saiki.
  • Dibuwang .help-blocklan diganti karo .form-textkanggo teks bantuan tingkat blok. Kanggo teks bantuan inline lan opsi fleksibel liyane, gunakake kelas sarana kaya .text-muted.
  • Diturunake .radio-inlinelan .checkbox-inline.
  • Consolidated .checkboxlan .radiomenyang .form-checklan macem-macem .form-check-*kelas.
  • Formulir horisontal dirombak:
    • Ngilangi .form-horizontalsyarat kelas.
    • .form-groupora ditrapake maneh gaya saka .rowliwat mixin, dadi .rowsaiki dibutuhake kanggo tata letak kothak horisontal (contone, <div class="form-group row">).
    • Added .col-form-labelkelas anyar kanggo label vertikal tengah karo .form-controls.
    • Ditambahake anyar .form-rowkanggo tata letak wangun kompak karo kelas kothak (swap Panjenengan .rowkanggo .form-rowlan pindhah).
  • Dhukungan formulir khusus sing ditambahake (kanggo kothak centhang, radio, pilih, lan input file).
  • Ganti .has-error, .has-warning, lan .has-successkelas karo validasi formulir HTML5 liwat CSS :invalidlan :validpseudo-kelas.
  • Ganti jeneng .form-control-staticdadi .form-control-plaintext.

Tombol

  • Ganti jeneng .btn-defaultdadi .btn-secondary.
  • Mbusak .btn-xskelas kabeh minangka .btn-smproporsional luwih cilik tinimbang v3.
  • Fitur tombol stateful saka button.jsjQuery plugin wis dropped. Iki kalebu $().button(string)lan $().button('reset')cara. Disaranake nggunakake JavaScript khusus cilik, sing bakal entuk manfaat kanggo tumindak kaya sing dikarepake.
    • Elinga yen fitur liyane saka plugin (kotak centhang tombol, radio tombol, tombol siji-toggle) wis disimpen ing v4.
  • Ganti tombol ' [disabled]menyang :disabledIE9+ ndhukung :disabled. Nanging fieldset[disabled]isih perlu amarga fieldset dipatèni asli isih ana bug ing IE11 .

Klompok tombol

  • Rewrote komponen karo flexbox.
  • Dibusak .btn-group-justified. Minangka panggantos sampeyan bisa nggunakake <div class="btn-group d-flex" role="group"></div>minangka wrapper watara unsur karo .w-100.
  • Dropped .btn-group-xskelas tanggung diwenehi aman saka .btn-xs.
  • Mbusak spasi eksplisit antarane klompok tombol ing toolbar tombol; nggunakake utilitas margin saiki.
  • Dokumentasi sing luwih apik kanggo digunakake karo komponen liyane.
  • Ngalih saka pamilih induk menyang kelas tunggal kanggo kabeh komponen, modifiers, etc.
  • Gaya gulung mudhun sing disederhanakake supaya ora dikirim maneh nganggo panah munggah utawa mudhun sing dipasang ing menu gulung mudhun.
  • Dropdowns bisa dibangun karo <div>s utawa <ul>s saiki.
  • Gaya gulung mudhun lan markup sing dibangun maneh kanggo nyedhiyakake dhukungan sing gampang lan dibangun kanggo item gulung mudhun <a>lan adhedhasar.<button>
  • Ganti jeneng .dividerdadi .dropdown-divider.
  • Item dropdown saiki mbutuhake .dropdown-item.
  • Ngalih mudhun ora mbutuhake eksplisit maneh <span class="caret"></span>; iki saiki kasedhiya kanthi otomatis liwat CSS ::aftering .dropdown-toggle.

Sistem grid

  • 576pxNambahake breakpoint kothak anyar minangka sm, tegese saiki ana limang total undakan ( xs, sm, md, lg, lan xl).
  • Ganti jeneng kelas modifier kothak responsif saka .col-{breakpoint}-{modifier}-{size}kanggo .{modifier}-{breakpoint}-{size}kelas kothak prasaja.
  • Kelas modifier push lan pull kanggo kelas flexbox-powered anyar order. Contone, tinimbang .col-8.push-4lan .col-4.pull-8, sampeyan bakal nggunakake .col-8.order-2lan .col-4.order-1.
  • Nambahake kelas sarana flexbox kanggo sistem kothak lan komponen.

Dhaptar klompok

  • Rewrote komponen karo flexbox.
  • Diganti a.list-group-itemkaro kelas eksplisit, .list-group-item-action, kanggo link noto lan versi tombol item klompok dhaftar.
  • Added .list-group-flushkelas kanggo nggunakake kertu.
  • Rewrote komponen karo flexbox.
  • Amarga pamindhahan menyang flexbox, alignment lambang ngilangi ing header bisa uga rusak amarga kita ora nggunakake floats maneh. Konten terapung luwih dhisik, nanging nganggo flexbox sing ora kaya ngono. Nganyari lambang ngilangi sampeyan sawise judhul modal kanggo ndandani.
  • Opsi remote(sing bisa digunakake kanggo mbukak lan nyuntikake konten eksternal kanthi otomatis menyang modal) lan loaded.bs.modalacara sing cocog dicopot. Disaranake tinimbang nggunakake template sisih klien utawa framework data naleni, utawa nelpon jQuery.load dhewe.
  • Rewrote komponen karo flexbox.
  • Mundhut meh kabeh >pamilih kanggo gaya sing luwih gampang liwat kelas sing ora ana sarang.
  • Tinimbang pamilih khusus HTML kaya .nav > li > a, kita nggunakake kelas kapisah kanggo .navs, .nav-items, lan .nav-links. Iki nggawe HTML luwih fleksibel nalika nambah ekstensibilitas.

Navbar wis ditulis maneh ing flexbox kanthi dhukungan sing luwih apik kanggo keselarasan, responsif, lan kustomisasi.

  • Prilaku navbar responsif saiki Applied kanggo .navbarkelas liwat dibutuhake .navbar-expand-{breakpoint} ngendi sampeyan milih ngendi kanggo ambruk navbar. Sadurunge iki modifikasi Kurang variabel lan dibutuhake recompiling.
  • .navbar-defaultsaiki .navbar-light, sanadyan .navbar-darktetep padha. Salah siji iki dibutuhake ing saben navbar. Nanging, kelas iki ora maneh nyetel background-colors; tinimbang padha ateges mung mengaruhi color.
  • Navbars saiki mbutuhake deklarasi latar mburi sawetara jinis. Pilih saka utilitas latar mburi kita ( .bg-*) utawa atur dhewe karo kelas cahya / kuwalik ing ndhuwur kanggo kustomisasi mad .
  • Diwenehi gaya flexbox, navbar saiki bisa nggunakake utilitas flexbox kanggo pilihan alignment gampang.
  • .navbar-togglesaiki .navbar-togglerlan duwe gaya beda lan markup batin (ora luwih telung <span>s).
  • Mudhun .navbar-formkelas kabeh. Iku ora perlu maneh; tinimbang, mung nggunakake .form-inlinelan aplikasi keperluan margin minangka perlu.
  • Navbar ora kalebu margin-bottomutawa minangka border-radiusstandar. Gunakake utilitas yen perlu.
  • Kabeh conto sing nampilake navbar wis dianyari kanggo nyakup markup anyar.

Pagination

  • Rewrote komponen karo flexbox.
  • Kelas eksplisit ( .page-item, .page-link) saiki dibutuhake ing turunane .paginations
  • Mbusak .pagerkomponen kasebut amarga luwih cilik tinimbang tombol garis khusus.
  • Kelas eksplisit, .breadcrumb-item, saiki dibutuhake ing keturunan .breadcrumbs

Label lan lencana

  • Digabungake .labellan .badgedisambiguate saka <label>unsur lan nyederhanakake komponen sing gegandhengan.
  • Ditambahake .badge-pillminangka modifier kanggo tampilan "pil" bunder.
  • Lencana ora otomatis ngambang ing grup dhaptar lan komponen liyane. Kelas sarana saiki dibutuhake kanggo iku.
  • .badge-defaultwis dropped lan .badge-secondaryditambahake kanggo cocog kelas modifier komponen digunakake ing panggenan liya.

Panel, gambar cilik, lan sumur

Dropped tanggung kanggo komponen kertu anyar.

Panel

  • .panelkanggo .card, saiki dibangun karo flexbox.
  • .panel-defaultdibusak lan ora diganti.
  • .panel-groupdibusak lan ora diganti. .card-groupdudu pengganti, beda.
  • .panel-headingkanggo.card-header
  • .panel-titlekanggo .card-title. Gumantung saka tampilan sing dikarepake, sampeyan uga pengin nggunakake unsur judhul utawa kelas (contone <h3>, .h3) utawa unsur utawa kelas sing kandel (contone <strong>, <b>, .font-weight-bold). Elinga yen .card-title, sanajan jeneng sing padha, ngasilake tampilan sing beda karo .panel-title.
  • .panel-bodykanggo.card-body
  • .panel-footerkanggo.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, lan .panel-dangerwis dropped kanggo .bg-, .text-, lan .borderkeperluan kui saka $theme-colorspeta Sass kita.

kemajuan

  • Ngganti .progress-bar-*kelas kontekstual karo .bg-*keperluan. Contone, class="progress-bar progress-bar-danger"dadi class="progress-bar bg-danger".
  • Diganti .activekanggo garis kemajuan animasi karo .progress-bar-animated.
  • Ndandani kabeh komponen kanggo nyederhanakake desain lan gaya. Kita duwe gaya sing luwih sithik kanggo sampeyan timpa, indikator anyar, lan lambang anyar.
  • Kabeh CSS wis un-nested lan diganti jeneng, mesthekake saben kelas wis prefixed karo .carousel-.
    • Kanggo item carousel, .next, .prev, .left, lan .rightsaiki .carousel-item-next, .carousel-item-prev, .carousel-item-left, lan .carousel-item-right.
    • .itemuga saiki .carousel-item.
    • Kanggo prev / kontrol sabanjuré, .carousel-control.rightlan .carousel-control.leftsaiki .carousel-control-nextlan .carousel-control-prev, tegese padha ora mbutuhake kelas basa tartamtu.
  • Mbusak kabeh gaya responsif, nundha kanggo keperluan (contone, nuduhake katrangan ing viewports tartamtu) lan gaya khusus yen perlu.
  • Dibusak overrides gambar kanggo gambar ing item carousel, deferring kanggo keperluan.
  • Tweaked conto Carousel kanggo nyakup markup lan gaya anyar.

Tabel

  • Mbusak dhukungan kanggo tabel nested gaya. Kabeh gaya tabel saiki diwarisake ing v4 kanggo pamilih sing luwih prasaja.
  • Nambahake varian tabel kuwalik.

Utilitas

  • Tampilan, didhelikake, lan liya-liyane:
    • Digawe utilitas tampilan responsif (contone, .d-nonelan d-{sm,md,lg,xl}-none).
    • Mundhut akeh .hidden-*utilitas kanggo utilitas tampilan anyar . Contone, tinimbang .hidden-sm-up, nggunakake .d-sm-none. Ganti jeneng .hidden-printutilitas kanggo nggunakake skema penamaan sarana tampilan. Info liyane ing bagean Utilitas responsif ing kaca iki.
    • Added .float-{sm,md,lg,xl}-{left,right,none}kelas kanggo ngambang responsif lan dibusak .pull-leftlan .pull-rightwiwit padha keluwih kanggo .float-leftlan .float-right.
  • Tipe:
    • Nambahake variasi responsif menyang kelas keselarasan teks .text-{sm,md,lg,xl}-{left,center,right}.
  • Alignment lan spasi:
  • Clearfix dianyari kanggo ngeculake dhukungan kanggo versi browser lawas.

Campuran awalan vendor

Campuran awalan vendor Bootstrap 3 , sing ora digunakake ing v3.2.0, wis dibusak ing Bootstrap 4. Awit kita nggunakake Autoprefixer , ora perlu maneh.

Dibusak campuran ing ngisor iki : 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,translate3duser-select

Dokumentasi

Dokumentasi kita uga nampa upgrade ing papan. Mangkene sing paling ngisor:

  • Kita isih nggunakake Jekyll, nanging kita duwe plugin ing campuran:
    • bugify.rbdigunakake kanggo dhaptar entri kanthi efisien ing kaca bug browser kita .
    • example.rbminangka garpu khusus saka highlight.rbplugin gawan, saéngga luwih gampang nangani conto-kode.
    • callout.rbminangka garpu khusus sing padha, nanging dirancang kanggo panggilan dokumen khusus.
    • jekyll-toc digunakake kanggo ngasilake daftar isi kita.
  • Kabeh isi docs wis ditulis maneh ing Markdown (tinimbang HTML) kanggo editing luwih gampang.
  • Kaca wis diatur maneh kanggo isi sing luwih prasaja lan hierarki sing luwih gampang dicedhaki.
  • Kita pindhah saka CSS biasa menyang SCSS kanggo njupuk kauntungan saka variabel Bootstrap, campuran, lan liya-liyane.

Utilitas responsif

Kabeh @screen-variabel wis dibusak ing v4.0.0. Gunakake campuran media-breakpoint-up(), media-breakpoint-down(), utawa media-breakpoint-only()Sass utawa $grid-breakpointspeta Sass.

Kelas utilitas responsif kita umume wis dicopot kanggo nggunakake displayutilitas eksplisit.

  • Kelas .hiddenlan .showwis dibusak amarga padha konflik karo jQuery $(...).hide()lan $(...).show()cara. Nanging, coba ganti [hidden]atribut utawa gunakake gaya inline kaya style="display: none;"lan style="display: block;".
  • Kabeh .hidden-kelas wis dibusak, kajaba kanggo print utilities kang wis diganti jeneng.
    • Dibusak saka 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
    • Dibusak saka 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
  • keperluan Print ora maneh miwiti karo .hidden-utawa .visible-, nanging karo .d-print-.
    • Jeneng lawas: .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 nggunakake .visible-*kelas eksplisit, sampeyan nggawe unsur katon kanthi ora ndhelikake ing ukuran layar kasebut. Sampeyan bisa gabungke siji .d-*-nonekelas karo siji .d-*-blockkelas kanggo nuduhake unsur mung ing interval tartamtu saka ukuran layar (contone .d-none.d-md-block.d-xl-none, nuduhake unsur mung ing piranti medium lan gedhe).

Elinga yen owah-owahan ing breakpoints kothak ing v4 tegese sampeyan kudu pindhah siji breakpoint luwih gedhe kanggo entuk asil sing padha. Kelas utilitas responsif anyar ora nyoba kanggo nampung kasus sing kurang umum ing ngendi visibilitas unsur ora bisa dituduhake minangka sawetara ukuran viewport sing cedhak; sampeyan bakal tinimbang kudu nggunakake CSS adat ing kasus kaya mengkono.