in English

Berhijrah ke v4

Bootstrap 4 ialah penulisan semula utama bagi keseluruhan projek. Perubahan yang paling ketara diringkaskan di bawah, diikuti dengan perubahan yang lebih khusus kepada komponen yang berkaitan.

Perubahan yang stabil

Beralih daripada Beta 3 kepada keluaran v4.x stabil kami, tiada perubahan pecah, tetapi terdapat beberapa perubahan ketara.

Mencetak

  • Membaiki utiliti cetakan yang rosak. Sebelum ini, menggunakan .d-print-*kelas secara tidak dijangka akan mengatasi mana-mana .d-*kelas lain. Kini, ia sepadan dengan utiliti paparan kami yang lain dan hanya digunakan pada media tersebut ( @media print).

  • Utiliti paparan cetakan yang tersedia diperluaskan untuk dipadankan dengan utiliti lain. Beta 3 dan lebih lama hanya mempunyai block, inline-block, inline, dan none. v4 stabil ditambah flex, inline-flex, table, table-row, dan table-cell.

  • Membetulkan pemaparan pratonton cetakan merentas penyemak imbas dengan gaya cetakan baharu yang menentukan @page size.

Perubahan Beta 3

Walaupun Beta 2 melihat sebahagian besar perubahan pecah kami semasa fasa beta, tetapi kami masih mempunyai beberapa yang perlu ditangani dalam keluaran Beta 3. Perubahan ini digunakan jika anda mengemas kini kepada Beta 3 daripada Beta 2 atau mana-mana versi Bootstrap yang lebih lama.

Macam-macam

  • $thumbnail-transitionMengalih keluar pembolehubah yang tidak digunakan . Kami tidak mengalihkan apa-apa, jadi ia hanyalah kod tambahan.
  • Pakej npm tidak lagi menyertakan sebarang fail selain daripada fail sumber dan dist kami; jika anda bergantung padanya dan menjalankan skrip kami melalui node_modulesfolder, anda harus menyesuaikan aliran kerja anda.

Borang

  • Tulis semula kedua-dua kotak semak tersuai dan lalai serta radio. Kini, kedua-duanya mempunyai struktur HTML yang sepadan (luar <div>dengan adik beradik <input>dan <label>) dan gaya susun atur yang sama (lalai bertindan, sebaris dengan kelas pengubah suai). Ini membolehkan kami menggayakan label berdasarkan keadaan input, memudahkan sokongan untuk disabledatribut (sebelum ini memerlukan kelas induk) dan menyokong pengesahan borang kami dengan lebih baik.

    Sebagai sebahagian daripada ini, kami telah menukar CSS untuk mengurus berbilang background-images pada kotak semak dan radio bentuk tersuai. Sebelum ini, elemen yang kini dialih keluar .custom-control-indicatormempunyai warna latar belakang, kecerunan dan ikon SVG. Menyesuaikan kecerunan latar belakang bermakna menggantikan semua itu setiap kali anda perlu menukar hanya satu. Sekarang, kita mempunyai .custom-control-label::beforeuntuk mengisi dan kecerunan dan .custom-control-label::aftermengendalikan ikon.

    Untuk membuat semakan sebaris tersuai, tambahkan .custom-control-inline.

  • Pemilih dikemas kini untuk kumpulan butang berasaskan input. Daripada [data-toggle="buttons"] { }untuk gaya dan tingkah laku, kami menggunakan dataatribut hanya untuk tingkah laku JS dan bergantung pada .btn-group-togglekelas baharu untuk penggayaan.

  • Dialih keluar .col-form-legendmemihak kepada yang bertambah baik sedikit .col-form-label. Dengan cara ini .col-form-label-smdan .col-form-label-lgboleh digunakan pada <legend>elemen dengan mudah.

  • Input fail tersuai menerima perubahan pada $custom-file-textpembolehubah Sass mereka. Ia bukan lagi peta Sass bersarang dan kini hanya menguasakan satu rentetan— Browsebutang kerana itu kini satu-satunya elemen pseudo yang dijana daripada Sass kami. Teks Choose fileitu kini datang daripada .custom-file-label.

Kumpulan input

  • Tambahan kumpulan input kini khusus untuk penempatannya berbanding dengan input. Kami telah berhenti .input-group-addondan .input-group-btnuntuk dua kelas baharu, .input-group-prependdan .input-group-append. Anda mesti menggunakan lampiran atau prapend secara eksplisit sekarang, memudahkan kebanyakan CSS kami. Dalam lampiran atau tambah, letakkan butang anda kerana ia akan wujud di tempat lain, tetapi bungkus teks dalam .input-group-text.

  • Gaya pengesahan kini disokong, begitu juga berbilang input (walaupun anda hanya boleh mengesahkan satu input bagi setiap kumpulan).

  • Kelas saiz mestilah pada induk .input-groupdan bukan elemen bentuk individu.

Beta 2 perubahan

Semasa dalam beta, kami menyasarkan untuk tidak mempunyai perubahan yang melanggar. Walau bagaimanapun, perkara tidak selalu berjalan seperti yang dirancang. Di bawah ialah perubahan penting yang perlu diingat apabila beralih daripada Beta 1 kepada Beta 2.

Berbuka

  • Pembolehubah dialih keluar $badge-colordan penggunaannya pada .badge. Kami menggunakan fungsi kontras warna untuk memilih colorberdasarkan background-color, jadi pembolehubah tidak diperlukan.
  • Menamakan semula grayscale()fungsi kepada untuk mengelakkan konflik pecah dengan penapis gray()asli CSS .grayscale
  • Dinamakan semula .table-inverse, .thead-inverse, dan .thead-defaultkepada .*-darkdan .*-light, sepadan dengan skema warna kami yang digunakan di tempat lain.
  • Jadual responsif kini menjana kelas untuk setiap titik putus grid. Ini berbeza daripada Beta 1 kerana yang .table-responsiveanda gunakan lebih seperti .table-responsive-md. Anda kini boleh menggunakan .table-responsiveatau .table-responsive-{sm,md,lg,xl}mengikut keperluan.
  • Sokongan Bower digugurkan kerana pengurus pakej telah ditamatkan untuk alternatif (cth, Benang atau npm). Lihat bower/bower#2298 untuk butiran.
  • Bootstrap masih memerlukan jQuery 1.9.1 atau lebih tinggi, tetapi anda dinasihatkan untuk menggunakan versi 3.x memandangkan penyemak imbas yang disokong v3.x ialah pelayar yang disokong Bootstrap ditambah v3.x mempunyai beberapa pembetulan keselamatan.
  • Mengalih keluar kelas yang tidak digunakan .form-control-label. Jika anda benar-benar menggunakan kelas ini, ia adalah pendua .col-form-labelkelas yang secara menegak memusatkan a <label>dengan input yang berkaitan dalam reka letak bentuk mendatar.
  • Menukar color-yiqdaripada mixin yang menyertakan colorharta kepada fungsi yang mengembalikan nilai, membolehkan anda menggunakannya untuk mana-mana harta CSS. Sebagai contoh, bukannya color-yiq(#000), anda akan menulis color: color-yiq(#000);.

Sorotan

  • Memperkenalkan pointer-eventspenggunaan baharu pada modals. Bahagian luar .modal-dialogmelalui acara dengan pointer-events: noneuntuk pengendalian klik tersuai (membolehkan anda hanya mendengar pada .modal-backdropsebarang klik), dan kemudian menentangnya untuk yang sebenar .modal-contentdengan pointer-events: auto.

Ringkasan

Berikut ialah item tiket besar yang anda ingin ketahui apabila beralih dari v3 ke v4.

Sokongan penyemak imbas

  • Menggugurkan sokongan IE8, IE9 dan iOS 6. v4 kini hanya IE10+ dan iOS 7+. Untuk tapak yang memerlukan salah satu daripada itu, gunakan v3.
  • Menambahkan sokongan rasmi untuk Pelayar dan WebView Android v5.0 Lollipop. Versi terdahulu Pelayar Android dan WebView kekal hanya disokong secara tidak rasmi.

Perubahan global

  • Flexbox didayakan secara lalai. Secara umum ini bermakna perpindahan daripada terapung dan lebih banyak lagi merentasi komponen kami.
  • Bertukar daripada Less kepada Sass untuk fail CSS sumber kami.
  • Bertukar daripada pxkepada remsebagai unit CSS utama kami, walaupun piksel masih digunakan untuk pertanyaan media dan gelagat grid kerana port pandangan peranti tidak dipengaruhi oleh saiz jenis.
  • Saiz fon global meningkat daripada 14pxkepada 16px.
  • Tiang grid diubah suai untuk menambah pilihan kelima (mengalamatkan peranti yang lebih kecil pada 576pxdan di bawah) dan mengalih keluar -xsinfiks daripada kelas tersebut. Contoh: .col-6.col-sm-4.col-md-3.
  • Menggantikan tema pilihan yang berasingan dengan pilihan boleh dikonfigurasikan melalui pembolehubah SCSS (cth, $enable-gradients: true).
  • Sistem binaan dirombak untuk menggunakan satu siri skrip npm dan bukannya Grunt. Lihat package.jsonuntuk semua skrip, atau readme projek kami untuk keperluan pembangunan tempatan.
  • Penggunaan Bootstrap yang tidak responsif tidak lagi disokong.
  • Menggugurkan Penyesuai dalam talian memihak kepada dokumentasi persediaan yang lebih luas dan binaan tersuai.
  • Menambah berdozen kelas utiliti baharu untuk pasangan nilai harta CSS biasa dan pintasan jarak margin/padding.

Sistem grid

  • Dialihkan ke flexbox.
    • Menambah sokongan untuk flexbox dalam campuran grid dan kelas yang dipratentukan.
    • Sebagai sebahagian daripada flexbox, disertakan sokongan untuk kelas penjajaran menegak dan mendatar.
  • Nama kelas grid dikemas kini dan peringkat grid baharu.
    • Menambah smperingkat grid baharu di bawah 768pxuntuk kawalan yang lebih terperinci. Kami kini mempunyai xs, sm, md, lgdan xl. Ini juga bermakna setiap peringkat telah meningkat satu tahap (jadi .col-md-6dalam v3 kini .col-lg-6dalam v4).
    • xskelas grid telah diubah suai untuk tidak memerlukan infix untuk mewakili dengan lebih tepat bahawa mereka mula menggunakan gaya pada min-width: 0dan bukan nilai piksel yang ditetapkan. Daripada .col-xs-6, ia sekarang .col-6. Semua peringkat grid lain memerlukan infix (cth, sm).
  • Saiz grid, campuran dan pembolehubah yang dikemas kini.
    • Longkang grid kini mempunyai peta Sass supaya anda boleh menentukan lebar longkang tertentu pada setiap titik putus.
    • Campuran grid dikemas kini untuk menggunakan make-col-readycampuran persediaan dan make-coluntuk menetapkan flexdan max-widthuntuk saiz lajur individu.
    • Titik putus pertanyaan media sistem grid dan lebar bekas telah ditukar untuk mengambil kira peringkat grid baharu dan memastikan lajur boleh dibahagikan sama rata 12pada lebar maksimumnya.
    • Titik putus grid dan lebar bekas kini dikendalikan melalui peta Sass ( $grid-breakpointsdan $container-max-widths) dan bukannya segelintir pembolehubah berasingan. Ini menggantikan @screen-*pembolehubah sepenuhnya dan membolehkan anda menyesuaikan sepenuhnya peringkat grid.
    • Pertanyaan media juga telah berubah. Daripada mengulangi pengisytiharan pertanyaan media kami dengan nilai yang sama setiap kali, kami kini mempunyai @include media-breakpoint-up/down/only. Sekarang, daripada menulis @media (min-width: @screen-sm-min) { ... }, anda boleh menulis @include media-breakpoint-up(sm) { ... }.

Komponen

  • Panel, lakaran kenit dan perigi terjatuh untuk komponen baharu yang merangkumi semua, kad .
  • Menggugurkan fon ikon Glyphicons. Jika anda memerlukan ikon, beberapa pilihan ialah:
  • Menggugurkan pemalam Affix jQuery.
  • Menggugurkan komponen kelui kerana ia pada dasarnya adalah butang yang disesuaikan sedikit.
  • Memfaktorkan semula hampir semua komponen untuk menggunakan lebih banyak pemilih kelas yang tidak bersarang dan bukannya pemilih kanak-kanak yang terlalu spesifik.

Mengikut komponen

Senarai ini menyerlahkan perubahan utama mengikut komponen antara v3.xx dan v4.0.0.

But semula

Baharu kepada Bootstrap 4 ialah Reboot , helaian gaya baharu yang dibina pada Normalize dengan gaya tetapan semula kami yang agak berpandangan. Pemilih yang muncul dalam fail ini hanya menggunakan elemen—tiada kelas di sini. Ini mengasingkan gaya tetapan semula kami daripada gaya komponen kami untuk pendekatan yang lebih modular. Beberapa penetapan semula paling penting yang disertakan ialah box-sizing: border-boxperubahan, beralih dari emkepada remunit pada banyak elemen, gaya pautan dan banyak penetapan semula elemen bentuk.

Tipografi

  • Mengalihkan semua .text-utiliti ke _utilities.scssfail.
  • Digugurkan .page-headerkerana gayanya boleh digunakan melalui utiliti.
  • .dl-horizontaltelah digugurkan. Sebaliknya, gunakan .rowpada <dl>dan gunakan kelas lajur grid (atau campuran) padanya <dt>dan kanak- <dd>kanak.
  • Petikan blok direka semula, mengalihkan gaya mereka daripada <blockquote>elemen kepada satu kelas, .blockquote. Menggugurkan .blockquote-reversepengubah suai untuk utiliti teks.
  • .list-inlinekini memerlukan item senarai anak-anaknya mempunyai .list-inline-itemkelas baharu yang digunakan pada item tersebut.

Imej

  • Dinamakan semula .img-responsivekepada .img-fluid.
  • Dinamakan semula .img-roundedkepada.rounded
  • Dinamakan semula .img-circlekepada.rounded-circle

Meja

  • Hampir semua tika >pemilih telah dialih keluar, bermakna jadual bersarang kini akan mewarisi gaya secara automatik daripada ibu bapa mereka. Ini sangat memudahkan pemilih kami dan potensi penyesuaian.
  • Dinamakan semula .table-condensedkepada .table-smuntuk konsisten.
  • Menambah pilihan baharu .table-inverse.
  • Menambahkan pengubah suai pengepala jadual: .thead-defaultdan .thead-inverse.
  • Menamakan semula kelas kontekstual untuk mempunyai .table--prefix. Oleh itu .active, .success, dan kepada .warning, , , dan ..danger.info.table-active.table-success.table-warning.table-danger.table-info

Borang

  • Elemen yang dialihkan ditetapkan semula ke _reboot.scssfail.
  • Dinamakan semula .control-labelkepada .col-form-label.
  • Dinamakan semula .input-lgdan .input-smkepada .form-control-lgdan .form-control-sm, masing-masing.
  • Menggugurkan .form-group-*kelas demi kesederhanaan. Gunakan .form-control-*kelas sekarang.
  • Digugurkan .help-blockdan digantikan dengan .form-textteks bantuan peringkat blok. Untuk teks bantuan sebaris dan pilihan fleksibel lain, gunakan kelas utiliti seperti .text-muted.
  • Dijatuhkan .radio-inlinedan .checkbox-inline.
  • Disatukan .checkboxdan .radioke dalam .form-checkdan pelbagai .form-check-*kelas.
  • Bentuk mendatar dirombak:
    • Menggugurkan .form-horizontalkeperluan kelas.
    • .form-grouptidak lagi menggunakan gaya daripada .rowmelalui mixin, jadi .rowkini diperlukan untuk susun atur grid mendatar (cth, <div class="form-group row">).
    • Menambahkan .col-form-labelkelas baharu pada label tengah menegak dengan .form-controls.
    • Ditambahkan baharu .form-rowuntuk reka letak bentuk padat dengan kelas grid (tukar anda .rowuntuk .form-rowdan pergi).
  • Menambahkan sokongan borang tersuai (untuk kotak pilihan, radio, pilihan dan input fail).
  • Menggantikan .has-error, .has-warning, dan .has-successkelas dengan pengesahan borang HTML5 melalui kelas CSS :invaliddan :validpseudo.
  • Dinamakan semula .form-control-statickepada .form-control-plaintext.

Butang

  • Dinamakan semula .btn-defaultkepada .btn-secondary.
  • Menggugurkan .btn-xskelas sepenuhnya kerana .btn-smberkadar jauh lebih kecil daripada v3.
  • Ciri butang statefulbutton.js plugin jQuery telah digugurkan. Ini termasuk kaedah $().button(string)dan $().button('reset'). Kami menasihatkan untuk menggunakan sedikit JavaScript tersuai sebaliknya, yang akan mendapat manfaat untuk berkelakuan tepat seperti yang anda mahukan.
    • Ambil perhatian bahawa ciri lain pemalam (kotak semak butang, radio butang, butang togol tunggal) telah dikekalkan dalam v4.
  • Tukar butang' [disabled]kepada :disabledkerana IE9+ menyokong :disabled. Walau bagaimanapun fieldset[disabled]masih perlu kerana set medan asli yang dilumpuhkan masih buggy dalam IE11 .

Kumpulan butang

  • Tulis semula komponen dengan flexbox.
  • Dialih keluar .btn-group-justified. Sebagai pengganti anda boleh gunakan <div class="btn-group d-flex" role="group"></div>sebagai pembalut di sekeliling elemen dengan .w-100.
  • Menggugurkan .btn-group-xskelas sepenuhnya diberi penyingkiran .btn-xs.
  • Mengalih keluar jarak eksplisit antara kumpulan butang dalam bar alat butang; gunakan utiliti margin sekarang.
  • Dokumentasi yang lebih baik untuk digunakan dengan komponen lain.
  • Beralih daripada pemilih induk kepada kelas tunggal untuk semua komponen, pengubah suai, dsb.
  • Gaya lungsur turun dipermudahkan untuk tidak lagi dihantar dengan anak panah menghadap ke atas atau ke bawah dilampirkan pada menu lungsur.
  • Dropdown boleh dibina dengan <div>s atau <ul>s sekarang.
  • Gaya lungsur turun terbina semula dan penanda untuk menyediakan sokongan terbina dalam yang mudah <a>dan <button>item lungsur berasaskan.
  • Dinamakan semula .dividerkepada .dropdown-divider.
  • Item jatuh turun kini memerlukan .dropdown-item.
  • Togol lungsur turun tidak lagi memerlukan <span class="caret"></span>; ini kini disediakan secara automatik melalui CSS ::afterpada .dropdown-toggle.

Sistem grid

  • Menambah 576pxtitik putus grid baharu sebagai sm, bermakna kini terdapat lima jumlah peringkat ( xs, sm, md, lg, dan xl).
  • Menamakan semula kelas pengubah suai grid responsif daripada .col-{breakpoint}-{modifier}-{size}kepada .{modifier}-{breakpoint}-{size}untuk kelas grid yang lebih mudah.
  • Kelas pengubah tolak dan tarik digugurkan untuk kelas berkuasa flexbox baharu order. Sebagai contoh, bukannya .col-8.push-4dan .col-4.pull-8, anda akan menggunakan .col-8.order-2dan .col-4.order-1.
  • Menambahkan kelas utiliti flexbox untuk sistem grid dan komponen.

Senaraikan kumpulan

  • Tulis semula komponen dengan flexbox.
  • Digantikan a.list-group-itemdengan kelas eksplisit, .list-group-item-action, untuk pautan penggayaan dan versi butang item kumpulan senarai.
  • Kelas tambahan .list-group-flushuntuk digunakan dengan kad.
  • Tulis semula komponen dengan flexbox.
  • Memandangkan peralihan ke flexbox, penjajaran ikon tolak dalam pengepala berkemungkinan rosak kerana kami tidak lagi menggunakan apungan. Kandungan terapung diutamakan, tetapi dengan flexbox itu tidak lagi berlaku. Kemas kini ikon tolak anda untuk dibetulkan selepas tajuk modal.
  • Pilihan remote(yang boleh digunakan untuk memuatkan dan menyuntik kandungan luaran secara automatik ke dalam modal) dan loaded.bs.modalperistiwa yang sepadan telah dialih keluar. Sebaliknya kami mengesyorkan menggunakan templat sisi klien atau rangka kerja mengikat data, atau memanggil sendiri jQuery.load .
  • Tulis semula komponen dengan flexbox.
  • Menggugurkan hampir semua >pemilih untuk penggayaan yang lebih ringkas melalui kelas yang tidak bersarang.
  • Daripada pemilih khusus HTML seperti .nav > li > a, kami menggunakan kelas berasingan untuk .navs, .nav-items dan .nav-links. Ini menjadikan HTML anda lebih fleksibel sambil membawa bersama peningkatan kebolehlanjutan.

Navbar telah ditulis semula sepenuhnya dalam flexbox dengan sokongan yang lebih baik untuk penjajaran, responsif dan penyesuaian.

  • Tingkah laku navbar responsif kini digunakan pada .navbarkelas melalui yang diperlukan .navbar-expand-{breakpoint} di mana anda memilih tempat untuk meruntuhkan navbar. Sebelum ini ini ialah pengubahsuaian Kurang pembolehubah dan memerlukan penyusunan semula.
  • .navbar-defaultsekarang .navbar-light, walaupun .navbar-darktetap sama. Salah satu daripada ini diperlukan pada setiap navbar. Walau bagaimanapun, kelas ini tidak lagi menetapkan background-colors; sebaliknya mereka pada asasnya hanya menjejaskan color.
  • Navbars kini memerlukan beberapa jenis pengisytiharan latar belakang. Pilih daripada utiliti latar belakang kami ( .bg-*) atau tetapkan sendiri dengan kelas ringan/ songsang di atas untuk penyesuaian gila .
  • Memandangkan gaya flexbox, navbar kini boleh menggunakan utiliti flexbox untuk pilihan penjajaran yang mudah.
  • .navbar-togglekini .navbar-togglerdan mempunyai gaya dan penanda dalaman yang berbeza (tidak lebih tiga <span>s).
  • Menggugurkan .navbar-formkelas sepenuhnya. Ia tidak perlu lagi; sebaliknya, hanya gunakan .form-inlinedan gunakan utiliti margin jika perlu.
  • Navbar tidak lagi termasuk margin-bottomatau border-radiussecara lalai. Gunakan utiliti jika perlu.
  • Semua contoh yang menampilkan bar nav telah dikemas kini untuk memasukkan penanda baharu.

penomboran

  • Tulis semula komponen dengan flexbox.
  • Kelas eksplisit ( .page-item, .page-link) kini diperlukan pada keturunan .paginations
  • Menggugurkan .pagerkomponen sepenuhnya kerana ia lebih sedikit daripada butang garis besar yang disesuaikan.
  • Kelas eksplisit, .breadcrumb-item, kini diperlukan pada keturunan .breadcrumbs

Label dan lencana

  • Disatukan .labeldan .badgeuntuk menyahkekaburan daripada <label>elemen dan memudahkan komponen yang berkaitan.
  • Ditambah .badge-pillsebagai pengubah suai untuk rupa "pil" bulat.
  • Lencana tidak lagi diapungkan secara automatik dalam kumpulan senarai dan komponen lain. Kelas utiliti kini diperlukan untuk itu.
  • .badge-defaulttelah digugurkan dan .badge-secondaryditambah untuk memadankan kelas pengubah suai komponen yang digunakan di tempat lain.

Panel, lakaran kecil dan telaga

Digugurkan sepenuhnya untuk komponen kad baharu.

Panel

  • .panelkepada .card, kini dibina dengan flexbox.
  • .panel-defaultdikeluarkan dan tiada penggantian.
  • .panel-groupdikeluarkan dan tiada penggantian. .card-groupbukan pengganti, ia berbeza.
  • .panel-headingkepada.card-header
  • .panel-titlekepada .card-title. Bergantung pada rupa yang diingini, anda juga mungkin mahu menggunakan elemen tajuk atau kelas (cth <h3>, .h3) atau elemen atau kelas yang tebal (cth <strong>, <b>, .font-weight-bold). Ambil perhatian bahawa .card-title, walaupun dinamakan serupa, menghasilkan rupa yang berbeza daripada .panel-title.
  • .panel-bodykepada.card-body
  • .panel-footerkepada.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, dan .panel-dangertelah digugurkan untuk .bg-, .text-, dan .borderutiliti yang dijana daripada $theme-colorspeta Sass kami.

Kemajuan

  • Menggantikan .progress-bar-*kelas kontekstual dengan .bg-*utiliti. Contohnya, class="progress-bar progress-bar-danger"menjadi class="progress-bar bg-danger".
  • Digantikan .activeuntuk bar kemajuan animasi dengan .progress-bar-animated.
  • Membaik pulih keseluruhan komponen untuk memudahkan reka bentuk dan penggayaan. Kami mempunyai lebih sedikit gaya untuk anda ganti, penunjuk baharu dan ikon baharu.
  • Semua CSS telah dinyahsarang dan dinamakan semula, memastikan setiap kelas diawali dengan .carousel-.
    • Untuk item karusel, .next, .prev, .left, dan .rightkini .carousel-item-next, .carousel-item-prev, .carousel-item-left, dan .carousel-item-right.
    • .itemjuga kini .carousel-item.
    • Untuk kawalan sebelum/seterusnya, .carousel-control.rightdan .carousel-control.leftkini .carousel-control-nextdan .carousel-control-prev, bermakna mereka tidak lagi memerlukan kelas asas tertentu.
  • Mengalih keluar semua penggayaan responsif, menunda kepada utiliti (cth, menunjukkan kapsyen pada viewport tertentu) dan gaya tersuai mengikut keperluan.
  • Gantian imej yang dialih keluar untuk imej dalam item karusel, menunda kepada utiliti.
  • Tweak contoh Carousel untuk memasukkan penanda dan gaya baharu.

Meja

  • Dialih keluar sokongan untuk jadual bersarang gaya. Semua gaya jadual kini diwarisi dalam v4 untuk pemilih yang lebih mudah.
  • Menambahkan varian jadual songsang.

Utiliti

  • Paparan, tersembunyi dan banyak lagi:
    • Menjadikan utiliti paparan responsif (cth, .d-nonedan d-{sm,md,lg,xl}-none).
    • Menggugurkan sebahagian besar .hidden-*utiliti untuk utiliti paparan baharu . Sebagai contoh, bukannya .hidden-sm-up, gunakan .d-sm-none. Menamakan semula .hidden-printutiliti untuk menggunakan skema penamaan utiliti paparan. Maklumat lanjut di bawah bahagian Utiliti responsif halaman ini.
    • Menambahkan .float-{sm,md,lg,xl}-{left,right,none}kelas untuk terapung responsif dan dialih keluar .pull-leftdan .pull-rightkerana ia berlebihan kepada .float-leftdan .float-right.
  • Jenis:
    • Menambahkan variasi responsif pada kelas penjajaran teks kami .text-{sm,md,lg,xl}-{left,center,right}.
  • Penjajaran dan jarak:
  • Clearfix dikemas kini untuk menggugurkan sokongan untuk versi penyemak imbas yang lebih lama.

Campuran awalan vendor

Campuran awalan vendor Bootstrap 3 , yang telah ditamatkan dalam v3.2.0, telah dialih keluar dalam Bootstrap 4. Memandangkan kami menggunakan Autoprefixer , ia tidak lagi diperlukan.

Mengalih keluar campuran 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, translate3d,user-select

Dokumentasi

Dokumentasi kami juga menerima peningkatan secara menyeluruh. Inilah yang rendah:

  • Kami masih menggunakan Jekyll, tetapi kami mempunyai pemalam dalam campuran:
    • bugify.rbdigunakan untuk menyenaraikan entri dengan cekap pada halaman pepijat penyemak imbas kami.
    • example.rbialah garpu tersuai bagi highlight.rbpemalam lalai, membolehkan pengendalian kod contoh yang lebih mudah.
    • callout.rbialah garpu tersuai yang serupa, tetapi direka untuk serlahan ciri dokumen khas kami.
    • jekyll-toc digunakan untuk menjana jadual kandungan kami.
  • Semua kandungan dokumen telah ditulis semula dalam Markdown (bukan HTML) untuk pengeditan yang lebih mudah.
  • Halaman telah disusun semula untuk kandungan yang lebih ringkas dan hierarki yang lebih mudah didekati.
  • Kami beralih daripada CSS biasa ke SCSS untuk memanfaatkan sepenuhnya pembolehubah Bootstrap, campuran dan banyak lagi.

Utiliti responsif

Semua @screen-pembolehubah telah dialih keluar dalam v4.0.0. Sebaliknya, gunakan campuran media-breakpoint-up(), media-breakpoint-down(), atau media-breakpoint-only()Sass atau $grid-breakpointspeta Sass.

Kelas utiliti responsif kami sebahagian besarnya telah dialih keluar memihak kepada displayutiliti eksplisit.

  • Kelas .hiddendan .showtelah dialih keluar kerana ia bercanggah dengan jQuery $(...).hide()dan $(...).show()kaedah. Sebaliknya, cuba togol [hidden]atribut atau gunakan gaya sebaris seperti style="display: none;"dan style="display: block;".
  • Semua .hidden-kelas telah dialih keluar, kecuali untuk utiliti cetakan yang telah dinamakan semula.
    • Dialih keluar daripada 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
    • Dialih keluar daripada 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
  • Utiliti cetakan tidak lagi bermula dengan .hidden-atau .visible-, tetapi dengan .d-print-.
    • Nama lama: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Kelas baharu: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Daripada menggunakan .visible-*kelas eksplisit, anda membuat elemen kelihatan dengan hanya tidak menyembunyikannya pada saiz skrin tersebut. Anda boleh menggabungkan satu .d-*-nonekelas dengan satu .d-*-blockkelas untuk menunjukkan elemen hanya pada selang saiz skrin tertentu (cth .d-none.d-md-block.d-xl-nonemenunjukkan elemen hanya pada peranti sederhana dan besar).

Ambil perhatian bahawa perubahan pada titik putus grid dalam v4 bermakna anda perlu menggunakan satu titik putus yang lebih besar untuk mencapai hasil yang sama. Kelas utiliti responsif baharu tidak cuba untuk menampung kes yang kurang biasa di mana keterlihatan elemen tidak boleh dinyatakan sebagai julat tunggal saiz port pandang yang bersebelahan; sebaliknya anda perlu menggunakan CSS tersuai dalam kes sedemikian.