Source

Migrasi ke v4

Bootstrap 4 adalah penulisan ulang utama dari keseluruhan proyek. Perubahan yang paling menonjol dirangkum di bawah ini, diikuti oleh perubahan yang lebih spesifik pada komponen yang relevan.

Perubahan stabil

Pindah dari Beta 3 ke rilis stabil v4.0, tidak ada perubahan yang mengganggu, tetapi ada beberapa perubahan penting.

Pencetakan

  • Memperbaiki utilitas cetak yang rusak. Sebelumnya, menggunakan .d-print-*kelas secara tak terduga akan mengesampingkan .d-*kelas lain. Sekarang, mereka cocok dengan utilitas tampilan kami yang lain dan hanya berlaku untuk media itu ( @media print).

  • Memperluas utilitas tampilan cetak yang tersedia untuk mencocokkan utilitas lain. Beta 3 dan yang lebih lama hanya memiliki block, inline-block, inline, dan none. v4 stabil ditambahkan flex, inline-flex, table, table-row, dan table-cell.

  • Memperbaiki rendering pratinjau cetak di seluruh browser dengan gaya cetak baru yang menentukan @page size.

Perubahan beta 3

Sementara Beta 2 melihat sebagian besar perubahan kami selama fase beta, tetapi kami masih memiliki beberapa yang perlu ditangani dalam rilis Beta 3. Perubahan ini berlaku jika Anda memperbarui ke Beta 3 dari Beta 2 atau versi Bootstrap yang lebih lama.

Aneka ragam

  • Menghapus $thumbnail-transitionvariabel yang tidak digunakan. Kami tidak mentransisikan apa pun, jadi itu hanya kode tambahan.
  • Paket npm tidak lagi menyertakan file apa pun selain file sumber dan dist kami; jika Anda mengandalkan mereka dan menjalankan skrip kami melalui node_modulesfolder, Anda harus menyesuaikan alur kerja Anda.

Formulir

  • Tulis ulang kotak centang dan radio kustom dan default. Sekarang, keduanya memiliki struktur HTML yang cocok (luar <div>dengan saudara kandung <input>dan <label>) dan gaya tata letak yang sama (standar tumpuk, sebaris dengan kelas pengubah). Ini memungkinkan kita untuk menata label berdasarkan status input, menyederhanakan dukungan untuk disabledatribut (sebelumnya membutuhkan kelas induk) dan mendukung validasi formulir kita dengan lebih baik.

    Sebagai bagian dari ini, kami telah mengubah CSS untuk mengelola beberapa background-images pada kotak centang dan radio formulir kustom. Sebelumnya, elemen yang sekarang dihapus .custom-control-indicatormemiliki warna latar belakang, gradien, dan ikon SVG. Menyesuaikan gradien latar belakang berarti mengganti semua itu setiap kali Anda perlu mengubah hanya satu. Sekarang, kita memiliki .custom-control-label::beforeuntuk mengisi dan gradien dan .custom-control-label::aftermenangani ikon.

    Untuk membuat pemeriksaan kustom sebaris, tambahkan .custom-control-inline.

  • Pemilih yang diperbarui untuk grup tombol berbasis input. Alih-alih [data-toggle="buttons"] { }untuk gaya dan perilaku, kami menggunakan dataatribut hanya untuk perilaku JS dan mengandalkan .btn-group-togglekelas baru untuk gaya.

  • Dihapus .col-form-legenddemi sedikit ditingkatkan .col-form-label. Cara ini .col-form-label-smdan .col-form-label-lgdapat digunakan pada <legend>elemen dengan mudah.

  • Input file khusus menerima perubahan pada $custom-file-textvariabel Sass mereka. Ini bukan lagi peta Sass bersarang dan sekarang hanya memberi kekuatan pada satu string— Browsetombol seperti itu sekarang menjadi satu-satunya elemen semu yang dihasilkan dari Sass kita. Teks Choose filesekarang berasal dari .custom-file-label.

Grup masukan

  • Add-on grup input sekarang khusus untuk penempatannya relatif terhadap input. Kami telah menjatuhkan .input-group-addondan .input-group-btnuntuk dua kelas baru, .input-group-prependdan .input-group-append. Anda harus secara eksplisit menggunakan append atau prepend sekarang, menyederhanakan sebagian besar CSS kami. Di dalam append atau prepend, tempatkan tombol Anda seperti yang ada di tempat lain, tetapi bungkus teks dalam .input-group-text.

  • Gaya validasi sekarang didukung, seperti juga beberapa input (meskipun Anda hanya dapat memvalidasi satu input per grup).

  • Kelas ukuran harus pada induk .input-groupdan bukan elemen bentuk individual.

Beta 2 berubah

Saat dalam versi beta, kami bertujuan untuk tidak memiliki perubahan yang melanggar. Namun, hal-hal tidak selalu berjalan sesuai rencana. Di bawah ini adalah perubahan penting yang perlu diingat saat berpindah dari Beta 1 ke Beta 2.

Pemecahan

  • Variabel yang dihapus $badge-colordan penggunaannya pada .badge. Kami menggunakan fungsi kontras warna untuk memilih colorberdasarkan background-color, jadi variabel tidak diperlukan.
  • Berganti nama menjadi grayscale()fungsi untuk gray()menghindari konflik pecah dengan grayscalefilter asli CSS.
  • Berganti nama .table-inverse, .thead-inverse, dan .thead-defaultto .*-darkdan .*-light, cocok dengan skema warna kami yang digunakan di tempat lain.
  • Tabel responsif sekarang menghasilkan kelas untuk setiap breakpoint grid. Ini istirahat dari Beta 1 karena .table-responsiveAnda telah menggunakan lebih seperti .table-responsive-md. Anda sekarang dapat menggunakan .table-responsiveatau .table-responsive-{sm,md,lg,xl}sesuai kebutuhan.
  • Menjatuhkan dukungan Bower sebagai manajer paket telah ditinggalkan untuk alternatif (misalnya, Benang atau npm). Lihat bower/bower#2298 untuk detailnya.
  • Bootstrap masih membutuhkan jQuery 1.9.1 atau lebih tinggi, tetapi Anda disarankan untuk menggunakan versi 3.x karena browser yang didukung v3.x adalah yang didukung Bootstrap plus v3.x memiliki beberapa perbaikan keamanan.
  • Menghapus .form-control-labelkelas yang tidak digunakan. Jika Anda menggunakan kelas ini, itu adalah duplikat dari .col-form-labelkelas yang dipusatkan secara vertikal <label>dengan input terkait dalam tata letak formulir horizontal.
  • Mengubah color-yiqdari mixin yang menyertakan colorproperti menjadi fungsi yang mengembalikan nilai, memungkinkan Anda menggunakannya untuk properti CSS apa pun. Misalnya, alih-alih color-yiq(#000), Anda akan menulis color: color-yiq(#000);.

Highlight

  • Memperkenalkan pointer-eventspenggunaan baru pada modals. Bagian luar .modal-dialogmelewati acara dengan pointer-events: noneuntuk penanganan klik khusus (memungkinkan untuk hanya mendengarkan .modal-backdropuntuk klik apa pun), dan kemudian menetralkannya untuk yang sebenarnya .modal-contentdengan pointer-events: auto.

Ringkasan

Berikut adalah item tiket besar yang ingin Anda ketahui saat berpindah dari v3 ke v4.

Dukungan peramban

  • Menjatuhkan dukungan IE8, IE9, dan iOS 6. v4 sekarang hanya IE10+ dan iOS 7+. Untuk situs yang membutuhkan salah satu dari itu, gunakan v3.
  • Menambahkan dukungan resmi untuk Browser dan WebView Android v5.0 Lollipop. Versi sebelumnya dari Browser Android dan WebView tetap hanya didukung secara tidak resmi.

Perubahan global

  • Flexbox diaktifkan secara default. Secara umum ini berarti menjauh dari pelampung dan lebih banyak lagi di seluruh komponen kami.
  • Beralih dari Less ke Sass untuk file CSS sumber kami.
  • Beralih dari pxke remsebagai unit CSS utama kami, meskipun piksel masih digunakan untuk kueri media dan perilaku kisi karena area pandang perangkat tidak terpengaruh oleh ukuran jenis.
  • Ukuran font global meningkat dari 14pxmenjadi 16px.
  • Tingkat kisi yang diubah untuk menambahkan opsi kelima (mengatasi perangkat yang lebih kecil di 576pxdan di bawah) dan menghapus -xsinfiks dari kelas tersebut. Contoh: .col-6.col-sm-4.col-md-3.
  • Mengganti tema opsional terpisah dengan opsi yang dapat dikonfigurasi melalui variabel SCSS (mis $enable-gradients: true.
  • Membangun sistem yang dirombak untuk menggunakan serangkaian skrip npm alih-alih Grunt. Lihat package.jsonsemua skrip, atau readme proyek kami untuk kebutuhan pengembangan lokal.
  • Penggunaan Bootstrap yang tidak responsif tidak lagi didukung.
  • Menjatuhkan Customizer online demi dokumentasi penyiapan yang lebih ekstensif dan build yang disesuaikan.
  • Menambahkan lusinan kelas utilitas baru untuk pasangan nilai properti CSS umum dan pintasan spasi margin/padding.

Sistem jaringan

  • Pindah ke flexbox.
    • Menambahkan dukungan untuk flexbox di mixin grid dan kelas yang telah ditentukan.
    • Sebagai bagian dari flexbox, termasuk dukungan untuk kelas penyelarasan vertikal dan horizontal.
  • Nama kelas kisi yang diperbarui dan tingkat kisi baru.
    • Menambahkan smtingkat kisi baru di bawah 768pxuntuk kontrol yang lebih terperinci. Kami sekarang memiliki xs, sm, md, lg, dan xl. Ini juga berarti setiap tingkatan telah naik satu tingkat (jadi .col-md-6di v3 sekarang .col-lg-6di v4).
    • xskelas grid telah dimodifikasi untuk tidak memerlukan infiks untuk lebih akurat menyatakan bahwa mereka mulai menerapkan gaya pada min-width: 0dan bukan nilai piksel yang ditetapkan. Alih-alih .col-xs-6, sekarang .col-6. Semua tingkatan grid lainnya memerlukan infiks (misalnya, sm).
  • Ukuran grid, mixin, dan variabel yang diperbarui.
    • Talang kisi sekarang memiliki peta Sass sehingga Anda dapat menentukan lebar selokan tertentu di setiap titik henti sementara.
    • Mixin grid yang diperbarui untuk menggunakan make-col-readymixin persiapan dan a make-coluntuk mengatur flexdan max-widthuntuk ukuran kolom individual.
    • Mengubah titik henti sementara kueri media sistem kisi dan lebar penampung untuk memperhitungkan tingkat kisi baru dan memastikan kolom dapat dibagi secara merata 12pada lebar maksimumnya.
    • Titik putus kisi dan lebar wadah sekarang ditangani melalui peta Sass ( $grid-breakpointsdan $container-max-widths) alih-alih beberapa variabel terpisah. Ini menggantikan @screen-*variabel sepenuhnya dan memungkinkan Anda untuk sepenuhnya menyesuaikan tingkatan grid.
    • Kueri media juga telah berubah. Alih-alih mengulangi deklarasi kueri media kami dengan nilai yang sama setiap kali, kami sekarang memiliki @include media-breakpoint-up/down/only. Sekarang, alih-alih menulis @media (min-width: @screen-sm-min) { ... }, Anda dapat menulis @include media-breakpoint-up(sm) { ... }.

Komponen

  • Panel, gambar mini, dan lubang yang dijatuhkan untuk komponen baru yang mencakup semua, kartu .
  • Menjatuhkan font ikon Glyphicons. Jika Anda membutuhkan ikon, beberapa opsi adalah:
  • Menjatuhkan plugin Affix jQuery.
  • Menjatuhkan komponen pager karena pada dasarnya adalah tombol yang sedikit disesuaikan.
  • Memfaktorkan ulang hampir semua komponen untuk menggunakan lebih banyak pemilih kelas yang tidak bersarang daripada pemilih anak yang terlalu spesifik.

Menurut komponen

Daftar ini menyoroti perubahan utama berdasarkan komponen antara v3.xx dan v4.0.0.

Menyalakan ulang

Baru di Bootstrap 4 adalah Reboot , stylesheet baru yang dibangun di atas Normalize dengan gaya reset kami sendiri yang agak berpendirian. Selektor yang muncul di file ini hanya menggunakan elemen—tidak ada kelas di sini. Ini mengisolasi gaya reset kami dari gaya komponen kami untuk pendekatan yang lebih modular. Beberapa pengaturan ulang paling penting yang termasuk di dalamnya adalah box-sizing: border-boxperubahan, perpindahan dari emke remunit pada banyak elemen, gaya tautan, dan banyak pengaturan ulang elemen formulir.

Tipografi

  • Memindahkan semua .text-utilitas ke _utilities.scssfile.
  • Dijatuhkan .page-headerkarena gayanya dapat diterapkan melalui utilitas.
  • .dl-horizontaltelah dijatuhkan. Sebagai gantinya, gunakan .rowdan <dl>gunakan kelas kolom kisi (atau mixin) pada <dt>dan turunannya <dd>.
  • Blockquotes yang didesain ulang, memindahkan gayanya dari <blockquote>elemen ke satu kelas, .blockquote. Menjatuhkan .blockquote-reversepengubah untuk utilitas teks.
  • .list-inlinesekarang mengharuskan item daftar turunannya memiliki .list-inline-itemkelas baru yang diterapkan padanya.

Gambar-gambar

  • Berganti nama .img-responsivemenjadi .img-fluid.
  • Berganti nama .img-roundedmenjadi.rounded
  • Berganti nama .img-circlemenjadi.rounded-circle

Tabel

  • Hampir semua contoh >pemilih telah dihapus, artinya tabel bersarang sekarang akan secara otomatis mewarisi gaya dari induknya. Ini sangat menyederhanakan penyeleksi dan penyesuaian potensial kami.
  • Berganti nama .table-condensedmenjadi .table-smuntuk konsistensi.
  • Menambahkan .table-inverseopsi baru.
  • Menambahkan pengubah header tabel: .thead-defaultdan .thead-inverse.
  • Mengganti nama kelas kontekstual menjadi .table--prefix. Oleh karena itu .active, .success, .warning, .dangerdan .infountuk .table-active, .table-success, .table-warning, .table-dangerdan .table-info.

Formulir

  • Elemen yang dipindahkan diatur ulang ke _reboot.scssfile.
  • Berganti nama .control-labelmenjadi .col-form-label.
  • Berganti nama .input-lgdan .input-smke .form-control-lgdan .form-control-sm, Masing-masing.
  • Menjatuhkan .form-group-*kelas demi kesederhanaan. Gunakan .form-control-*kelas sebagai gantinya sekarang.
  • Menjatuhkan .help-blockdan menggantinya dengan .form-textuntuk teks bantuan tingkat blok. Untuk teks bantuan sebaris dan opsi fleksibel lainnya, gunakan kelas utilitas seperti .text-muted.
  • Dijatuhkan .radio-inlinedan .checkbox-inline.
  • Konsolidasi .checkboxdan .radioke dalam .form-checkdan berbagai .form-check-*kelas.
  • Bentuk horisontal dirombak:
    • Menjatuhkan .form-horizontalpersyaratan kelas.
    • .form-grouptidak lagi menerapkan gaya dari .rowmixin via, jadi .rowsekarang diperlukan untuk tata letak kisi horizontal (mis., <div class="form-group row">).
    • Menambahkan .col-form-labelkelas baru ke label tengah secara vertikal dengan .form-controls.
    • Menambahkan baru .form-rowuntuk tata letak formulir ringkas dengan kelas kisi (tukar Anda .rowuntuk .form-rowdan pergi).
  • Menambahkan dukungan formulir kustom (untuk kotak centang, radio, pilihan, dan input file).
  • Mengganti .has-error, .has-warning, dan .has-successkelas dengan validasi formulir HTML5 melalui CSS :invaliddan :validkelas semu.
  • Berganti nama .form-control-staticmenjadi .form-control-plaintext.

Tombol

  • Berganti nama .btn-defaultmenjadi .btn-secondary.
  • Menjatuhkan .btn-xskelas sepenuhnya karena .btn-smsecara proporsional jauh lebih kecil daripada v3.
  • Fitur tombol stateful dari button.jsplugin jQuery telah dihapus. Ini termasuk metode $().button(string)dan $().button('reset'). Kami menyarankan untuk menggunakan sedikit JavaScript khusus sebagai gantinya, yang akan bermanfaat untuk berperilaku persis seperti yang Anda inginkan.
    • Perhatikan bahwa fitur plugin lainnya (kotak centang tombol, radio tombol, tombol sakelar tunggal) telah dipertahankan di v4.
  • Ubah tombol ' [disabled]menjadi :disabledsebagai IE9+ mendukung :disabled. Namun fieldset[disabled]tetap diperlukan karena fieldset asli yang dinonaktifkan masih bermasalah di IE11 .

Grup tombol

  • Tulis ulang komponen dengan flexbox.
  • Dihapus .btn-group-justified. Sebagai pengganti, Anda dapat menggunakan <div class="btn-group d-flex" role="group"></div>sebagai pembungkus elemen dengan .w-100.
  • Menjatuhkan .btn-group-xskelas sepenuhnya diberikan penghapusan .btn-xs.
  • Menghapus spasi eksplisit antara grup tombol di bilah alat tombol; gunakan utilitas margin sekarang.
  • Peningkatan dokumentasi untuk digunakan dengan komponen lain.
  • Beralih dari pemilih induk ke kelas tunggal untuk semua komponen, pengubah, dll.
  • Gaya tarik-turun yang disederhanakan untuk tidak lagi dikirimkan dengan panah menghadap ke atas atau ke bawah yang melekat pada menu tarik-turun.
  • Dropdown dapat dibangun dengan <div>s atau <ul>s sekarang.
  • Gaya tarik-turun dan markup yang dibangun kembali untuk memberikan dukungan bawaan yang mudah untuk <a>dan <button>berdasarkan item tarik-turun.
  • Berganti nama .dividermenjadi .dropdown-divider.
  • Item dropdown sekarang membutuhkan .dropdown-item.
  • Matikan dropdown tidak lagi memerlukan eksplisit <span class="caret"></span>; ini sekarang disediakan secara otomatis melalui CSS ::afterdi .dropdown-toggle.

Sistem jaringan

  • Menambahkan 576pxbreakpoint grid baru sebagai sm, artinya sekarang ada total lima tingkatan ( xs, sm, md, lgdan xl).
  • Mengganti nama kelas pengubah kisi responsif dari .col-{breakpoint}-{modifier}-{size}menjadi .{modifier}-{breakpoint}-{size}untuk kelas kisi yang lebih sederhana.
  • Menjatuhkan kelas pengubah push dan pull untuk kelas baru yang didukung flexbox order. Misalnya, alih-alih .col-8.push-4dan .col-4.pull-8, Anda akan menggunakan .col-8.order-2dan .col-4.order-1.
  • Menambahkan kelas utilitas flexbox untuk sistem dan komponen grid.

Daftar grup

  • Tulis ulang komponen dengan flexbox.
  • Diganti a.list-group-itemdengan kelas eksplisit, .list-group-item-action, untuk tautan gaya dan versi tombol dari item grup daftar.
  • Menambahkan .list-group-flushkelas untuk digunakan dengan kartu.
  • Tulis ulang komponen dengan flexbox.
  • Mengingat pindah ke flexbox, penyelarasan ikon abaikan di header kemungkinan rusak karena kami tidak lagi menggunakan float. Konten terapung adalah yang utama, tetapi dengan flexbox hal itu tidak lagi terjadi. Perbarui ikon pemberhentian Anda agar muncul setelah judul modal untuk diperbaiki.
  • Opsi remote(yang dapat digunakan untuk memuat dan menyuntikkan konten eksternal secara otomatis ke dalam modal) dan loaded.bs.modalperistiwa terkait telah dihapus. Sebaiknya gunakan templat sisi klien atau kerangka kerja pengikatan data, atau panggil jQuery.load sendiri.
  • Tulis ulang komponen dengan flexbox.
  • Menjatuhkan hampir semua >penyeleksi untuk penataan yang lebih sederhana melalui kelas yang tidak bersarang.
  • Alih-alih pemilih khusus HTML seperti .nav > li > a, kami menggunakan kelas terpisah untuk .navs, .nav-items, dan .nav-links. Ini membuat HTML Anda lebih fleksibel sambil membawa peningkatan ekstensibilitas.

Navbar telah sepenuhnya ditulis ulang di flexbox dengan dukungan yang ditingkatkan untuk penyelarasan, responsivitas, dan penyesuaian.

  • Perilaku navbar responsif sekarang diterapkan ke .navbarkelas melalui yang diperlukan .navbar-expand-{breakpoint} di mana Anda memilih tempat untuk menutup navbar. Sebelumnya ini adalah modifikasi yang kurang variabel dan memerlukan kompilasi ulang.
  • .navbar-defaultsekarang .navbar-light, meskipun .navbar-darktetap sama. Salah satunya diperlukan pada setiap navbar. Namun, kelas-kelas ini tidak lagi mengatur background-colors; sebaliknya mereka pada dasarnya hanya mempengaruhi color.
  • Navbar sekarang memerlukan semacam deklarasi latar belakang. Pilih dari utilitas latar belakang kami ( .bg-*) atau atur sendiri dengan kelas ringan/terbalik di atas untuk kustomisasi gila .
  • Dengan gaya flexbox, navbar sekarang dapat menggunakan utilitas flexbox untuk opsi penyelarasan yang mudah.
  • .navbar-togglesekarang .navbar-togglerdan memiliki gaya dan markup dalam yang berbeda (tidak lebih dari tiga <span>s).
  • Menjatuhkan .navbar-formkelas sepenuhnya. Itu tidak lagi diperlukan; sebagai gantinya, cukup gunakan .form-inlinedan terapkan utilitas margin seperlunya.
  • Navbars tidak lagi menyertakan margin-bottomatau border-radiussecara default. Gunakan utilitas seperlunya.
  • Semua contoh yang menampilkan bilah navigasi telah diperbarui untuk menyertakan markup baru.

paginasi

  • Tulis ulang komponen dengan flexbox.
  • Kelas eksplisit ( .page-item, .page-link) sekarang diperlukan pada keturunan .paginations
  • Menjatuhkan .pagerkomponen sepenuhnya karena itu sedikit lebih dari tombol garis besar yang disesuaikan.
  • Kelas eksplisit, .breadcrumb-item, sekarang diperlukan pada turunan .breadcrumbs

Label dan lencana

  • Konsolidasi .labeldan .badgeuntuk memisahkan dari <label>elemen dan menyederhanakan komponen terkait.
  • Ditambahkan .badge-pillsebagai pengubah untuk tampilan "pil" bulat.
  • Lencana tidak lagi melayang secara otomatis dalam grup daftar dan komponen lainnya. Kelas utilitas sekarang diperlukan untuk itu.
  • .badge-defaulttelah dijatuhkan dan .badge-secondaryditambahkan untuk mencocokkan kelas pengubah komponen yang digunakan di tempat lain.

Panel, gambar mini, dan sumur

Dijatuhkan sepenuhnya untuk komponen kartu baru.

Panel

  • .panelke .card, sekarang dibuat dengan flexbox.
  • .panel-defaultdihapus dan tidak ada penggantian.
  • .panel-groupdihapus dan tidak ada penggantian. .card-groupbukan pengganti, itu berbeda.
  • .panel-headingke.card-header
  • .panel-titleuntuk .card-title. Tergantung pada tampilan yang diinginkan, Anda mungkin juga ingin menggunakan elemen atau kelas heading (misalnya <h3>, .h3) atau elemen atau kelas tebal (misalnya <strong>, <b>, .font-weight-bold). Perhatikan bahwa .card-title, meskipun diberi nama yang sama, menghasilkan tampilan yang berbeda dari .panel-title.
  • .panel-bodyke.card-body
  • .panel-footerke.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, dan .panel-dangertelah dihapus untuk .bg-, .text-, dan .borderutilitas yang dihasilkan dari $theme-colorspeta Sass kami.

Kemajuan

  • Mengganti .progress-bar-*kelas kontekstual dengan .bg-*utilitas. Misalnya class="progress-bar progress-bar-danger"menjadi class="progress-bar bg-danger".
  • Digantikan .activeuntuk bilah kemajuan animasi dengan .progress-bar-animated.
  • Merombak seluruh komponen untuk menyederhanakan desain dan gaya. Kami memiliki lebih sedikit gaya untuk Anda timpa, indikator baru, dan ikon baru.
  • Semua CSS telah tidak bersarang dan diganti namanya, memastikan setiap kelas diawali dengan .carousel-.
    • Untuk item carousel, .next, .prev, .left, dan .rightsekarang .carousel-item-next, .carousel-item-prev, .carousel-item-left, dan .carousel-item-right.
    • .itemjuga sekarang .carousel-item.
    • Untuk kontrol sebelumnya/berikutnya, .carousel-control.rightdan .carousel-control.leftsekarang .carousel-control-nextdan .carousel-control-prev, artinya mereka tidak lagi memerlukan kelas dasar tertentu.
  • Menghapus semua gaya responsif, mengalihkan ke utilitas (misalnya, menampilkan teks pada area pandang tertentu) dan gaya khusus sesuai kebutuhan.
  • Penimpaan gambar yang dihapus untuk gambar dalam item carousel, mengacu pada utilitas.
  • Tweak contoh Carousel untuk menyertakan markup dan gaya baru.

Tabel

  • Menghapus dukungan untuk tabel bersarang bergaya. Semua gaya tabel sekarang diwarisi di v4 untuk penyeleksi yang lebih sederhana.
  • Menambahkan varian tabel terbalik.

Keperluan

  • Tampilan, tersembunyi, dan lainnya:
    • Membuat utilitas tampilan responsif (mis., .d-nonedan d-{sm,md,lg,xl}-none).
    • Menjatuhkan sebagian besar .hidden-*utilitas untuk utilitas tampilan baru . Misalnya, alih-alih .hidden-sm-up, gunakan .d-sm-none. Mengganti nama .hidden-printutilitas untuk menggunakan skema penamaan utilitas tampilan. Info lebih lanjut di bawah bagian Utilitas responsif halaman ini.
    • Menambahkan .float-{sm,md,lg,xl}-{left,right,none}kelas untuk pelampung responsif dan dihapus .pull-leftdan .pull-rightkarena mereka berlebihan .float-leftdan .float-right.
  • Jenis:
    • Menambahkan variasi responsif ke kelas perataan teks kami .text-{sm,md,lg,xl}-{left,center,right}.
  • Penjajaran dan jarak:
  • Clearfix diperbarui untuk menghentikan dukungan untuk versi browser yang lebih lama.

Mixin awalan vendor

Mixin awalan vendor Bootstrap 3 , yang tidak digunakan lagi di v3.2.0, telah dihapus di Bootstrap 4. Karena kami menggunakan Autoprefixer , mereka tidak lagi diperlukan.

Menghapus mixin berikut : 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 kami juga menerima peningkatan di seluruh papan. Inilah yang rendah:

  • Kami masih menggunakan Jekyll, tetapi kami memiliki beberapa plugin:
    • bugify.rbdigunakan untuk secara efisien mencantumkan entri di halaman bug browser kami .
    • example.rbadalah garpu kustom dari highlight.rbplugin default, memungkinkan penanganan kode contoh yang lebih mudah.
    • callout.rbadalah garpu khusus yang serupa, tetapi dirancang untuk info dokumen khusus kami.
    • jekyll-toc digunakan untuk membuat daftar isi kita.
  • Semua konten dokumen telah ditulis ulang dalam Markdown (bukan HTML) untuk pengeditan yang lebih mudah.
  • Halaman telah diatur ulang untuk konten yang lebih sederhana dan hierarki yang lebih mudah didekati.
  • Kami pindah dari CSS biasa ke SCSS untuk memanfaatkan sepenuhnya variabel Bootstrap, mixin, dan banyak lagi.

Utilitas responsif

Semua @screen-variabel telah dihapus di v4.0.0. Gunakan mixin media-breakpoint-up(), media-breakpoint-down(), atau Sass atau peta Sass sebagai gantinya.media-breakpoint-only()$grid-breakpoints

Kelas utilitas responsif kami sebagian besar telah dihapus demi displayutilitas eksplisit.

  • Kelas .hiddenand .showtelah dihapus karena bertentangan dengan metode $(...).hide()dan jQuery. $(...).show()Sebagai gantinya, coba alihkan [hidden]atributnya atau gunakan gaya sebaris seperti style="display: none;"dan style="display: block;".
  • Semua .hidden-kelas telah dihapus, simpan untuk utilitas cetak yang telah diganti namanya.
    • Dihapus dari 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
    • Dihapus dari alfa 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
  • Utilitas cetak tidak lagi dimulai dengan .hidden-atau .visible-, tetapi dengan .d-print-.
    • Nama lama : .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Kelas baru: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Daripada menggunakan .visible-*kelas eksplisit, Anda membuat elemen terlihat hanya dengan tidak menyembunyikannya pada ukuran layar tersebut. Anda dapat menggabungkan satu .d-*-nonekelas dengan satu .d-*-blockkelas untuk menampilkan elemen hanya pada interval ukuran layar tertentu (misalnya .d-none.d-md-block.d-xl-nonemenampilkan elemen hanya pada perangkat sedang dan besar).

Perhatikan bahwa perubahan pada titik henti sementara kisi di v4 berarti Anda harus memperbesar satu titik henti sementara untuk mencapai hasil yang sama. Kelas utilitas responsif baru tidak berupaya mengakomodasi kasus yang kurang umum di mana visibilitas elemen tidak dapat dinyatakan sebagai rentang ukuran area pandang yang berdekatan; Anda malah perlu menggunakan CSS khusus dalam kasus seperti itu.