Source

v4 рүү шилжиж байна

Bootstrap 4 нь бүхэл бүтэн төслийг дахин бичсэн томоохон хувилбар юм. Хамгийн анхаарал татахуйц өөрчлөлтүүдийг доор нэгтгэж, дараа нь холбогдох бүрэлдэхүүн хэсгүүдэд илүү тодорхой өөрчлөлтүүдийг оруулав.

Тогтвортой өөрчлөлтүүд

Бета 3-аас тогтвортой v4.x хувилбар руу шилжсэнээр ямар ч өөрчлөлт гараагүй ч зарим нэг мэдэгдэхүйц өөрчлөлт гарсан байна.

Хэвлэх

  • Эвдэрсэн хэвлэх хэрэгслүүдийг зассан. Өмнө нь .d-print-*анги ашиглах нь бусад .d-*ангиудыг санамсаргүйгээр хүчингүй болгодог байсан. Одоо тэдгээр нь манай бусад дэлгэцийн хэрэгслүүдтэй таарч байгаа бөгөөд зөвхөн тухайн зөөвөрлөгчид хэрэгжинэ ( @media print).

  • Бусад хэрэгслүүдтэй тааруулахын тулд боломжтой хэвлэх дэлгэцийн хэрэгслүүдийг өргөтгөсөн. Бета 3 ба түүнээс дээш хувилбаруудад зөвхөн block, inline-block, inline, болон none. Тогтвортой v4 нэмэгдсэн flex, inline-flex, table, table-row, болон table-cell.

  • -г зааж өгсөн шинэ хэвлэх хэв маяг бүхий хөтчүүдэд хэвлэх урьдчилан харахыг зассан @page size.

Бета 3 өөрчлөлт

Бета 2 нь бета үе шатанд гарсан өөрчлөлтүүдийн дийлэнх хэсгийг харсан ч Бета 3 хувилбарт шийдвэрлэх шаардлагатай цөөн хэдэн зүйл байсаар байна. Хэрэв та Бета 2 эсвэл Bootstrap-ийн хуучин хувилбараас Бета 3 руу шинэчилж байгаа бол эдгээр өөрчлөлтүүд хэрэгжинэ.

Төрөл бүрийн

  • Ашиглагдаагүй $thumbnail-transitionхувьсагчийг устгасан. Бид юу ч шилжүүлээгүй тул энэ нь зүгээр л нэмэлт код байсан.
  • npm багцад манай эх болон дист файлуудаас өөр ямар ч файл байхгүй болсон; Хэрэв та тэдгээрт найдаж, манай скриптүүдийг node_modulesхавтасаар ажиллуулж байсан бол ажлын урсгалаа өөрчлөх хэрэгтэй.

Маягтууд

  • Захиалгат болон өгөгдмөл хайрцгууд болон радионуудыг дахин бичнэ үү. Одоо хоёулаа тохирох HTML бүтэцтэй (гадна <div>нь ах дүү <input>болон <label>) болон ижил байршлын хэв маягтай (овоолсон өгөгдмөл, өөрчлөгч ангитай доторлогоотой). Энэ нь оролтын төлөвт тулгуурлан шошгыг загварчлах, disabledатрибутын дэмжлэгийг хялбарчлах (өмнө нь эцэг эхийн анги шаарддаг) болон маягтын баталгаажуулалтыг илүү сайн дэмждэг.

    Үүний нэг хэсэг болгон бид background-imageзахиалгат маягтын шалгах хайрцаг болон радио дээр олон s-г удирдахад зориулсан CSS-г өөрчилсөн. Өмнө нь устгасан .custom-control-indicatorэлемент нь дэвсгэр өнгө, градиент, SVG дүрстэй байсан. Арын дэвсгэр градиентийг өөрчлөх нь зөвхөн нэгийг нь өөрчлөх шаардлагатай болгонд бүгдийг нь солих гэсэн үг юм. Одоо бид .custom-control-label::beforeдүүргэлт, градиент болон .custom-control-label::afterдүрсийг зохицуулдаг.

    Захиалгат чек оруулахын тулд -г нэмнэ үү .custom-control-inline.

  • Оролтод суурилсан товчлуурын бүлгүүдэд зориулсан шинэчлэгдсэн сонгогч. Загвар, зан төлөвийн оронд [data-toggle="buttons"] { }бид атрибутыг зөвхөн JS-ийн зан төлөвт зориулж ашигладаг бөгөөд загварчлалын шинэ ангид dataтулгуурладаг ..btn-group-toggle

  • .col-form-legendБага зэрэг сайжруулах тал дээр хасагдсан .col-form-label. Ингэснээр .col-form-label-smэлементүүдэд хялбархан .col-form-label-lgашиглаж болно .<legend>

  • Захиалгат файлын оролтууд өөрсдийн $custom-file-textSass хувьсагчдаа өөрчлөлт орсон. Энэ нь үүрлэсэн Сасс газрын зураг байхаа больсон бөгөөд одоо зөвхөн нэг мөрийг ажиллуулдаг - Browseэнэ нь одоо манай Сассаас үүссэн цорын ганц псевдо элемент юм. Текст Choose fileодоо .custom-file-label.

Оролтын бүлгүүд

  • Оролтын бүлгийн нэмэлтүүд нь одоо оролттой харьцуулахад байршлаараа онцлог болсон. Бид хоёр шинэ ангиа хаялаа .input-group-addon, мөн . Та манай CSS-ийн ихэнх хэсгийг хялбарчлахын тулд одоо хавсарга эсвэл угтварыг тодорхой ашиглах ёстой. Хавсралт эсвэл угтвар бичих хэсэгт товчлууруудаа хаана ч байсан шиг байрлуулж, текстийг дотор нь оруулаарай ..input-group-btn.input-group-prepend.input-group-append.input-group-text

  • Баталгаажуулалтын хэв маягийг олон оролттой адил дэмждэг болсон (хэдийгээр та нэг бүлэгт зөвхөн нэг оролтыг баталгаажуулах боломжтой).

  • .input-groupХэмжээний ангиуд нь бие даасан хэлбэрийн элементүүд биш харин эцэг эх дээр байх ёстой .

Бета 2 өөрчлөлт

Бета хувилбарт байх хугацаандаа бид ямар ч өөрчлөлт оруулахгүй байхыг зорьж байна. Гэсэн хэдий ч бүх зүйл үргэлж төлөвлөсний дагуу байдаггүй. Бета 1-ээс Бета 2 руу шилжих үед анхаарах ёстой томоохон өөрчлөлтүүдийг доор харуулав.

Хагарах

  • Устгасан $badge-colorхувьсагч болон түүний хэрэглээ .badge. Бид өнгөний тодосгогч функцийг ашиглан -д colorтулгуурлан сонголт хийх background-colorтул хувьсагч шаардлагагүй болно.
  • CSS эх шүүлтүүртэй зөрчилдөхгүйн тулд grayscale()функцийн нэрийг өөрчилсөн .gray()grayscale
  • Бусад газар ашигласан манай өнгөний схемд тохируулан .table-inverse, , .thead-inverseболон .thead-defaultгэж нэрлэсэн ..*-dark.*-light
  • Хариуцлагатай хүснэгтүүд одоо сүлжээний таслах цэг бүрт анги үүсгэдэг. Энэ нь Бета 1-ээс тасарсан, учир нь .table-responsiveтаны ашиглаж байсан хувилбар нь .table-responsive-md. Та одоо .table-responsiveэсвэл .table-responsive-{sm,md,lg,xl}шаардлагатай бол ашиглаж болно.
  • Багц менежер өөр хувилбаруудад (жишээ нь, Yarn эсвэл npm) хуучирсан тул Bower-ийн дэмжлэгийг хассан. Дэлгэрэнгүйг bower/bower#2298 -аас үзнэ үү.
  • Bootstrap нь jQuery 1.9.1 буюу түүнээс дээш хувилбарыг шаарддаг хэвээр байгаа ч v3.x-ийн дэмждэг хөтчүүд нь Bootstrap дэмждэг хөтчүүд бөгөөд v3.x нь аюулгүй байдлын зарим засвар үйлчилгээтэй тул та 3.x хувилбарыг ашиглахыг зөвлөж байна.
  • Ашиглагдаагүй .form-control-labelангийг хассан. Хэрэв та энэ ангиллыг ашигласан бол энэ нь хэвтээ хэлбэрийн байрлал дахь холбогдох оролттой, .col-form-labelбосоо төвлөрсөн классын хуулбар байсан.<label>
  • Өмчийг color-yiqагуулсан холимогоос colorутгыг буцаадаг функц болгон өөрчилснөөр та үүнийг дурын CSS шинж чанарт ашиглах боломжтой болсон. Жишээлбэл, оронд нь color-yiq(#000)та бичих color: color-yiq(#000);болно.

Онцлох үйл явдал

  • Модал дээр шинэ pointer-eventsхэрэглээг нэвтрүүлсэн. Гаднах .modal-dialogнь үйл явдлуудыг захиалгаар товшилтоор дамжуулдаг pointer-events: none(ямар ч товшилтыг зүгээр л сонсох боломжтой болгодог .modal-backdrop), дараа нь бодитоор үүнийг .modal-contentэсэргүүцдэг pointer-events: auto.

Дүгнэлт

V3-ээс v4 рүү шилжихдээ анхаарах ёстой томоохон тасалбаруудыг энд оруулав.

Хөтөчийн дэмжлэг

  • IE8, IE9, iOS 6-н дэмжлэгийг хассан. v4 нь одоо зөвхөн IE10+ болон iOS 7+ байна. Эдгээрийн аль нэгийг нь ашиглах шаардлагатай сайтуудын хувьд v3-г ашиглана уу.
  • Android v5.0 Lollipop-ийн Browser болон WebView-ийн албан ёсны дэмжлэгийг нэмсэн. Android Browser болон WebView-ийн өмнөх хувилбарууд нь зөвхөн албан бусаар дэмжигдсэн хэвээр байна.

Дэлхийн өөрчлөлтүүд

  • Flexbox нь анхдагчаар идэвхжсэн байна. Ерөнхийдөө энэ нь хөвөгчөөс холдож, бусад бүрэлдэхүүн хэсгүүдэд шилжих гэсэн үг юм.
  • Манай эх CSS файлуудын хувьд Less -аас Sass руу шилжсэн .
  • pxМанай үндсэн CSS нэгж рүү шилжсэн хэдий ч пикселийг медиа асуулга болон сүлжээний горимд remашигласан хэвээр байгаа тул төхөөрөмжийн харагдац нь төрлийн хэмжээнээс хамаарахгүй.
  • Глобал үсгийн хэмжээ 14px.16px
  • Тав дахь сонголтыг нэмэхийн тулд сүлжээний шатуудыг шинэчилсэн (ба доод талд байгаа жижиг төхөөрөмжүүдийг хаяглах ) ба тэдгээр ангиудын infix-ийг 576pxустгасан . -xsЖишээ нь: .col-6.col-sm-4.col-md-3.
  • $enable-gradients: trueТусдаа нэмэлт сэдвийг SCSS хувьсагчаар (жишээ нь, ) тохируулах боломжтой сонголтоор сольсон .
  • Grunt-ийн оронд хэд хэдэн npm скриптийг ашиглахын тулд системийг шинэчлэн байгуул. Бүх скриптийг харна уу package.json, эсвэл орон нутгийн хөгжлийн хэрэгцээг манай төслийн Readme-ээс үзнэ үү.
  • Bootstrap-ийн хариу үйлдэл үзүүлэхгүй хэрэглээг дэмжихээ больсон.
  • Илүү өргөн хүрээтэй тохиргооны баримт бичиг, өөрчилсөн бүтээцийг ашиглахын тулд онлайн Customizer-ийг орхисон.
  • Нийтлэг CSS шинж чанар-утга хосууд болон захын зай/зайлтын зайны товчлолуудад зориулсан олон арван шинэ хэрэглээний анги нэмсэн.

Сүлжээний систем

  • Flexbox руу шилжсэн.
    • Сүлжээний холимгууд болон урьдчилан тодорхойлсон ангиудад flexbox-ын дэмжлэгийг нэмсэн.
    • Flexbox-ийн нэг хэсэг болгон босоо болон хэвтээ зэрэглэлийн ангиудын дэмжлэгийг багтаасан болно.
  • Сүлжээний ангийн нэр болон шинэ сүлжээний шатлалыг шинэчилсэн.
    • Илүү нарийн хянахын тулд доор шинэ smсүлжээний шатыг нэмсэн. 768pxБид одоо xs, sm, md, lg, ба xl. Энэ нь бас шат бүрийг нэг шатаар ахиулсан гэсэн үг юм (тиймээс .col-md-6v3-д одоо .col-lg-6v4-т байгаа).
    • xsmin-width: 0grid ангиуд нь тогтоосон пикселийн утгаар биш харин хэв маягийг хэрэглэж эхлэхийг илүү нарийвчлалтай илэрхийлэхийн тулд infix-ыг шаардахгүй байхаар өөрчлөгдсөн . Үүний оронд .col-xs-6одоо .col-6байна. Бусад бүх сүлжээний давхарга нь infix шаарддаг (жишээ нь, sm).
  • Сүлжээний хэмжээ, холимог болон хувьсагчдыг шинэчилсэн.
    • Сүлжээний суваг нь одоо Sass газрын зурагтай болсон тул та таслах цэг бүр дээр сувгийн тодорхой өргөнийг зааж өгөх боломжтой.
    • make-col-readyБэлтгэл холигчийг ашиглахын тулд шинэчлэгдсэн сүлжээний холимгууд болон баганын хэмжээг тус тусад make-colнь тохируулахад a.flexmax-width
    • Сүлжээний системийн медиа асуулгын таслах цэг болон савны өргөнийг шинэ сүлжээний түвшнийг тооцож, баганыг 12хамгийн их өргөнөөрөө жигд хуваахыг баталгаажуулсан.
    • Сүлжээний таслах цэгүүд болон савны өргөнийг хэд хэдэн тусдаа хувьсагчийн оронд Sass газрын зураг ( $grid-breakpointsба ) ашиглан зохицуулдаг болсон. $container-max-widthsЭдгээр нь @screen-*хувьсагчдыг бүхэлд нь орлуулж, сүлжээний шатлалыг бүрэн өөрчлөх боломжийг танд олгоно.
    • Хэвлэл мэдээллийн асуулга бас өөрчлөгдсөн. Бид хэвлэл мэдээллийн асуулгын мэдэгдлийг нэг удаад ижил утгатай давтахын оронд одоо @include media-breakpoint-up/down/only. Одоо бичихийн оронд @media (min-width: @screen-sm-min) { ... }бичиж болно @include media-breakpoint-up(sm) { ... }.

Бүрэлдэхүүн хэсгүүд

  • Бүх зүйлийг хамарсан шинэ бүрэлдэхүүн хэсэг болох картуудад зориулсан самбар, өнгөц зураг, худаг унасан .
  • Glyphicons дүрс фонтыг буулгасан. Хэрэв танд дүрс хэрэгтэй бол зарим сонголтууд:
  • Affix jQuery залгаасыг устгасан.
    • Бид position: stickyоронд нь ашиглахыг зөвлөж байна. Дэлгэрэнгүй мэдээлэл болон тусгай полифилл зөвлөмжийн талаар HTML5 оруулна уу. Нэг санал бол үүнийг @supportsхэрэгжүүлэх дүрэм ашиглах явдал юм (жишээ нь, @supports (position: sticky) { ... })
    • Хэрэв та нэмэлт, хэв маягийн бус positionхэв маягийг хэрэглэхийн тулд Affix-г ашиглаж байсан бол олон дүүргэлт нь таны хэрэглээг дэмжихгүй байж магадгүй юм. Ийм хэрэглээний нэг сонголт бол гуравдагч талын ScrollPos-Styler номын сан юм.
  • Энэ нь үндсэндээ бага зэрэг өөрчлөн тохируулсан товчлуурууд байсан тул пейжерийн бүрэлдэхүүн хэсгийг хассан .
  • Хэт тусгай хүүхэд сонгогчийн оронд илүү олон үүргүй анги сонгогч ашиглахын тулд бараг бүх бүрэлдэхүүн хэсгүүдийг дахин зассан.

Бүрэлдэхүүн хэсгүүдээр

Энэ жагсаалт нь v3.xx болон v4.0.0-ын хоорондох үндсэн өөрчлөлтүүдийг бүрэлдэхүүн хэсгүүдээр нь онцолж өгдөг.

Дахин ачаална уу

Bootstrap 4-ийн шинэ зүйл бол Reboot юм. Энэ нь бидний өөрийн гэсэн үзэл бодолтой дахин тохируулах загвартай Normalize дээр суурилсан шинэ загварын хуудас юм. Энэ файлд гарч ирэх сонгогчид зөвхөн элементүүдийг ашигладаг - энд анги байхгүй. Энэ нь илүү модульчлагдсан хандлагыг бий болгохын тулд бидний дахин тохируулах хэв маягийг бүрэлдэхүүн хэсгийн хэв маягаас тусгаарладаг. Үүнд багтсан хамгийн чухал шинэчлэлтүүдийн зарим нь box-sizing: border-boxөөрчлөлт, нэгжээс олон элементийн нэгж рүү шилжих em, remхолбоосын хэв маяг, олон хэлбэрийн элементийн дахин тохируулга юм.

Типографи

  • Бүх .text-хэрэгслийг _utilities.scssфайл руу зөөв.
  • Загваруудыг хэрэглүүрээр .page-headerашиглах боломжтой тул хассан.
  • .dl-horizontalхасагдсан байна. Харин үүний оронд .rowдээр болон түүний болон хүүхдүүд <dl>дээр сүлжээ баганын ангиллыг (эсвэл холимог) ашиглана уу .<dt><dd>
  • Блок ишлэлүүдийг дахин боловсруулж, тэдгээрийн хэв маягийг <blockquote>элементээс нэг анги руу шилжүүлсэн, .blockquote. .blockquote-reverseТекст хэрэгслийн хувиргагчийг хассан .
  • .list-inlineодоо хүүхдүүдийн жагсаалтын зүйлд шинэ .list-inline-itemанги хэрэглэхийг шаарддаг.

Зураг

  • .img-responsiveгэж өөрчилсөн .img-fluid.
  • .img-roundedгэж өөрчилсөн.rounded
  • .img-circleгэж өөрчилсөн.rounded-circle

Хүснэгтүүд

  • Сонгогчийн бараг бүх тохиолдлыг >устгасан тул үүрлэсэн хүснэгтүүд эцэг эхээсээ загваруудыг автоматаар өвлөн авах болно. Энэ нь манай сонгогчид болон боломжит тохируулгуудыг ихээхэн хялбаршуулдаг.
  • .table-condensedТогтвортой байдлын үүднээс нэрийг нь өөрчилсөн .table-sm.
  • Шинэ .table-inverseсонголт нэмсэн.
  • Хүснэгтийн толгойн өөрчлөлтийг нэмсэн: .thead-defaultболон .thead-inverse.
  • Контекст ангиудын нэрийг - .table-угтвартай болгож өөрчилсөн. Эндээс .active, .success, .warning, .dangerболон .info-д .table-active, .table-success, .table-warning, .table-dangerба .table-info.

Маягтууд

  • Зөөгдсөн элементийг _reboot.scssфайл руу дахин тохируулна.
  • .control-labelгэж өөрчилсөн .col-form-label.
  • .input-lgболон .input-smгэж өөрчилсөн . .form-control-lg_.form-control-sm
  • .form-group-*Энгийн байх үүднээс хичээлээ хаялаа . .form-control-*Одоо оронд нь анги ашигла .
  • Блок түвшний тусламжийн текстийг буулгаж .help-block, сольсон . .form-textInline тусламжийн текст болон бусад уян хатан сонголтуудын хувьд .text-muted.
  • Унасан .radio-inlineба .checkbox-inline.
  • Төрөл бүрийн .checkboxангиудыг нэгтгэсэн .radio..form-check.form-check-*
  • Хэвтээ хэлбэрийг засварласан:
    • .form-horizontalАнгийн шалгуурыг хассан .
    • .form-groupцаашид .rowvia mixin-ийн хэв маягийг хэрэглэхээ больсон тул .rowхэвтээ сүлжээний байршилд (жишээ нь, <div class="form-group row">) шаардлагатай болсон.
    • Шошгуудыг s .col-form-label-тэй босоо байдлаар голлуулах шинэ анги нэмсэн..form-control
    • .form-rowСүлжээний ангиудтай авсаархан хэлбэрийн байршлуудад зориулж шинээр нэмсэн ( .rowөөрийгөө нэгээр сольж .form-row, яв).
  • Захиалгат маягтын дэмжлэгийг нэмсэн (шалгах хайрцаг, радио, сонгох, файлын оролтод зориулсан).
  • .has-error, .has-warning, болон ангиудыг CSS болон псевдо ангиудаар .has-successдамжуулан HTML5 маягтын баталгаажуулалтаар сольсон .:invalid:valid
  • .form-control-staticгэж өөрчилсөн .form-control-plaintext.

Товчлуурууд

  • .btn-defaultгэж өөрчилсөн .btn-secondary.
  • v3-ээс хамаагүй бага учраас .btn-xsангиа бүрэн орхисон..btn-sm
  • jQuery залгаасын төлөвийн товчлуурын функцийг button.jsхассан. Үүнд $().button(string)болон $().button('reset')аргууд орно. Оронд нь бага зэрэг захиалгат JavaScript ашиглахыг зөвлөж байна, энэ нь таны хүссэнээр ажиллахад тустай.
    • Plugin-ийн бусад функцууд (товчлуурын шалгах хайрцаг, товчлуурын радио, нэг сэлгэх товчлуур) v4-д хадгалагдсан болохыг анхаарна уу.
  • Товчлууруудыг IE9+ дэмждэг болгон [disabled]өөрчил . Гэсэн хэдий ч IE11 дээр үндсэн идэвхгүй талбарууд алдаатай хэвээр байгаа тул шаардлагатай хэвээр байна.:disabled:disabledfieldset[disabled]

Товчлуурын бүлэг

  • Флексбокс ашиглан бүрэлдэхүүн хэсгийг дахин бичсэн.
  • Устгасан .btn-group-justified. Орлуулахын тулд та <div class="btn-group d-flex" role="group"></div>элементүүдийн эргэн тойронд боодол болгон ашиглаж болно .w-100.
  • -ийг хассан тул .btn-group-xsангиа бүрэн хаяв .btn-xs.
  • Товчлуурын самбар дээрх товчлуурын бүлгүүдийн хоорондох тодорхой зайг арилгасан; маржин хэрэгслүүдийг одоо ашигла.
  • Бусад бүрэлдэхүүн хэсгүүдтэй ашиглахад зориулсан сайжруулсан баримт бичиг.
  • Бүх бүрэлдэхүүн хэсэг, хувиргагч гэх мэтийн эцэг эх сонгогчоос ганц анги руу шилжсэн.
  • Унтраах цэсэнд хавсаргасан дээш эсвэл доош харсан сумтай байхаа болихын тулд унадаг хэв маягийг хялбаршуулсан.
  • Унтраах цэсүүдийг одоо <div>s эсвэл s -ээр үүсгэж болно .<ul>
  • Унждаг зүйлсийн хэв маяг, тэмдэглэгээг дахин сэргээсэн, унадаг зүйлсэд хялбар <a>, суурилуулсан дэмжлэг үзүүлэх .<button>
  • .dividerгэж өөрчилсөн .dropdown-divider.
  • Унждаг зүйлс одоо шаардлагатай .dropdown-item.
  • Унтраах унтраалга нь тодорхой кодыг шаарддаггүй <span class="caret"></span>; Энэ нь одоо CSS-ээр автоматаар ::afterөгөгддөг .dropdown-toggle.

Сүлжээний систем

  • Шинэ 576pxсүлжээ таслах цэгийг нэмсэн smнь одоо нийт таван шатлал ( xs, sm, md, lg, болон xl) байна гэсэн үг.
  • Хялбар сүлжээний ангиудад мэдрэгчтэй сүлжээ өөрчлөгч ангиудын нэрийг өөрчилсөн .col-{breakpoint}-{modifier}-{size}..{modifier}-{breakpoint}-{size}
  • Флексбоксоор ажилладаг шинэ ангиудад түлхэх болон татах өөрчлөх ангиудыг хассан order. Жишээ нь, болон -ын оронд .col-8.push-4та болон .col-4.pull-8-г .col-8.order-2хэрэглэнэ .col-4.order-1.
  • Сүлжээний систем болон бүрэлдэхүүн хэсгүүдийн flexbox хэрэгслийн ангиллыг нэмсэн.

Бүлгүүдийг жагсаах

  • Флексбокс ашиглан бүрэлдэхүүн хэсгийг дахин бичсэн.
  • Жагсаалтын бүлгийн зүйлсийн холбоос болон товчлуурын хувилбаруудыг загварчлахад зориулсан a.list-group-itemтодорхой ангиар сольсон ..list-group-item-action
  • .list-group-flushКарттай ашиглах анги нэмсэн .
  • Флексбокс ашиглан бүрэлдэхүүн хэсгийг дахин бичсэн.
  • Флексбокс руу шилжсэнээр бид хөвөгчийг ашиглахаа больсон тул толгой хэсэгт хаах дүрсүүдийн зэрэглэл эвдэрсэн байх магадлалтай. Хөвөгч контент хамгийн түрүүнд ирдэг, гэхдээ flexbox-т тийм биш болсон. Засахын тулд модаль гарчгийн дараа гарч ирэхийн тулд халах дүрсүүдийг шинэчил.
  • Сонголт ( remoteгадаад контентыг автоматаар ачаалж, модаль руу оруулахад ашиглаж болно) болон холбогдох loaded.bs.modalүйл явдлыг устгасан. Бид үйлчлүүлэгч талын загварчлал эсвэл өгөгдөл холбох хүрээ ашиглах эсвэл jQuery.load руу өөрөө залгахыг зөвлөж байна.
  • Флексбокс ашиглан бүрэлдэхүүн хэсгийг дахин бичсэн.
  • >Үүрлэгдээгүй ангиудыг ашиглан илүү хялбар загвар гаргахын тулд бараг бүх сонгогчийг хассан.
  • Бид s, s, s - .nav > li > aд зориулсан тусгай ангиудыг ашигладаг . Энэ нь таны HTML-г илүү уян хатан болгож, өргөтгөх чадварыг нэмэгдүүлнэ..nav.nav-item.nav-link

Navbar-ыг flexbox-т бүхэлд нь дахин бичсэн бөгөөд тохируулга, хариу үйлдэл, тохируулга зэргийг сайжруулсан.

  • Навббарыг хаана буулгахыг сонгоход шаардлагатай.navbar хэсэгт дамжуулан мэдрэгчтэй navbar үйлдлийн системүүд одоо ангид хэрэглэгдэж байна . Өмнө нь энэ нь бага хувьсагчтай өөрчлөлт байсан бөгөөд дахин эмхэтгэх шаардлагатай байсан. .navbar-expand-{breakpoint}
  • .navbar-defaultодоо .navbar-lightбайгаа хэдий ч .navbar-darkхэвээрээ байна. Эдгээрийн аль нэг нь navbar бүр дээр шаардлагатай. Гэсэн хэдий ч, эдгээр ангиуд s-г тохируулахаа больсон background-color; оронд нь тэд үндсэндээ зөвхөн нөлөөлдөг color.
  • Navbar-ууд одоо ямар нэгэн төрлийн дэвсгэр мэдэгдэл шаарддаг. Манай арын хэрэгслүүдээс ( ) сонгох эсвэл галзуу.bg-* өөрчлөхийн тулд дээрх гэрэл/урвуу ангиудыг ашиглан өөрөө тохируулаарай .
  • Flexbox-ийн хэв маягийг харгалзан үзэхийн тулд navbar-ууд одоо хялбар зэрэгцүүлэхийн тулд flexbox хэрэгслийг ашиглах боломжтой болсон.
  • .navbar-toggleодоо байгаа .navbar-togglerбөгөөд өөр өөр хэв маяг, дотоод тэмдэглэгээтэй (гурваас илүүгүй <span>).
  • Ангиа .navbar-formбүрмөсөн орхисон. Энэ нь шаардлагагүй болсон; оронд .form-inlineнь шаардлагатай бол маржин хэрэгслүүдийг ашиглаж, хэрэглээрэй.
  • margin-bottomNavbar- д өгөгдмөл тохиргоог оруулахаа больсон border-radius. Шаардлагатай бол хэрэгслүүдийг ашиглана уу.
  • Navbar бүхий бүх жишээг шинэ тэмдэглэгээ оруулахаар шинэчилсэн.

Хуудсууд

  • Флексбокс ашиглан бүрэлдэхүүн хэсгийг дахин бичсэн.
  • s -ийн үр удам дээр тодорхой ангиуд ( .page-item, .page-link) шаардлагатай болсон.pagination
  • .pagerБүрэлдэхүүн хэсэг нь тохируулсан тойм товчлууруудаас арай илүү байсан тул бүрэн хассан .
  • s -ийн үр удам дээр тодорхой анги, .breadcrumb-item, шаардлагатай болсон.breadcrumb

Шошго, тэмдэг

  • Элементээс ялгах .label, холбогдох бүрэлдэхүүн хэсгүүдийг хялбаршуулахын тулд нэгтгэсэн ..badge<label>
  • .badge-pillБөөрөнхий хэлбэртэй "үрэл" хэлбэрийг өөрчлөхөд нэмсэн .
  • Жагсаалтын бүлгүүд болон бусад бүрэлдэхүүн хэсгүүдэд тэмдэг автоматаар хөвөхөө больсон. Үүний тулд одоо хэрэглээний ангиуд шаардлагатай байна.
  • .badge-defaultхасагдсан бөгөөд .badge-secondaryөөр газар ашигласан бүрэлдэхүүн хувиргагч ангиудтай тааруулахын тулд нэмсэн.

Самбар, өнгөц зураг, худаг

Шинэ картын бүрэлдэхүүн хэсгийн хувьд бүрэн хасагдсан.

Самбарууд

  • .panelto .card, одоо flexbox-оор бүтээгдсэн.
  • .panel-defaultустгасан бөгөөд солих шаардлагагүй.
  • .panel-groupустгасан бөгөөд солих шаардлагагүй. .card-groupорлуулах биш, өөр.
  • .panel-headingруу.card-header
  • .panel-titleруу .card-title. Хүссэн харагдах байдлаас хамааран та гарчгийн элемент эсвэл анги (жишээ <h3>нь , .h3) эсвэл тод элемент эсвэл анги (жишээ <strong>нь , <b>, .font-weight-bold) ашиглахыг хүсэж болно. .card-titleИжил нэртэй боловч -ээс өөр харагдах байдлыг бий болгодог гэдгийг анхаарна уу .panel-title.
  • .panel-bodyруу.card-body
  • .panel-footerруу.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, болон , , болон хэрэгслүүдийг .panel-dangerхассан бөгөөд манай Sass газрын зургаас үүсгэсэн ..bg-.text-.border$theme-colors

Ахиц дэвшил

  • .progress-bar-*Контекст ангиудыг .bg-*хэрэгслүүдээр сольсон . Жишээлбэл, class="progress-bar progress-bar-danger"болдог class="progress-bar bg-danger".
  • .activeХөдөлгөөнт явцын талбаруудаар сольсон .progress-bar-animated.
  • Загвар, хэв маягийг хялбарчлахын тулд бүхэл бүтэн бүрэлдэхүүн хэсгийг шинэчилсэн. Бид танд дарж бичих цөөн загвар, шинэ үзүүлэлт, шинэ дүрс тэмдэгтэй байна.
  • Бүх CSS-ийг салгаж, нэрийг нь өөрчилсөн тул анги тус бүрээр угтвар залгасан байна .carousel-.
    • Карусель зүйлийн хувьд .next, .prev, .left, болон .rightодоо .carousel-item-next, .carousel-item-prev, .carousel-item-left, болон .carousel-item-rightбайна.
    • .itemодоо бас байна .carousel-item.
    • Өмнөх/дараагийн хяналтуудын хувьд одоо .carousel-control.rightболон байгаа нь тодорхой үндсэн анги шаарддаггүй гэсэн үг ..carousel-control.left.carousel-control-next.carousel-control-prev
  • Хэрэгцээ (жишээ нь, тодорхой харах хэсэгт тайлбар харуулах) болон шаардлагатай бол өөрчлөн тохируулсан хэв маягийг хойшлуулж, бүх мэдрэмжтэй хэв маягийг устгасан.
  • Тойрог хэсэг дэх зургуудын зургийг хүчингүй болгож, хэрэгслүүдийг хойшлуулсан.
  • Шинэ тэмдэглэгээ болон хэв маягийг оруулахын тулд Carousel жишээг өөрчилсөн.

Хүснэгтүүд

  • Загварласан хүснэгтүүдийн дэмжлэгийг хассан. Бүх хүснэгтийн хэв маягийг илүү хялбар сонгогчдод зориулж v4-д өвлөн авсан.
  • Хүснэгтийн урвуу хувилбарыг нэмсэн.

Хэрэглээ

  • Дэлгэц, далд болон бусад:
    • Дэлгэцийн хэрэгслүүдийг хариу үйлдэл үзүүлэх боломжтой болгосон (жишээ нь, .d-noneболон d-{sm,md,lg,xl}-none).
    • Дэлгэцийн.hidden-* шинэ хэрэгслүүдийн ихэнх хэсгийг хассан . Жишээлбэл, оронд нь -ийг ашиглана . Дэлгэцийн хэрэгслийн нэрлэх схемийг ашиглахын тулд хэрэгслүүдийн нэрийг өөрчилсөн . Дэлгэрэнгүй мэдээллийг энэ хуудасны Responsive utilities хэсгээс авна уу..hidden-sm-up.d-sm-none.hidden-print
    • .float-{sm,md,lg,xl}-{left,right,none}Мэдрэмжтэй хөвөх ангиудыг нэмсэн бөгөөд хасагдсан .pull-leftбөгөөд .pull-rightтэдгээр нь .float-leftболон -д илүүц болсон .float-right.
  • Төрөл:
    • Манай текстийг зэрэгцүүлэх ангиудад хариу үйлдэл үзүүлэх хувилбаруудыг нэмсэн .text-{sm,md,lg,xl}-{left,center,right}.
  • Тохируулга ба зай:
  • Clearfix хөтчийн хуучин хувилбаруудыг дэмжихгүй байхаар шинэчлэгдсэн.

Борлуулагчийн угтвар хольц

Bootstrap 3-ын v3.2.0-д хуучирсан үйлдвэрлэгчийн угтвар хольцыг Bootstrap 4-д устгасан. Бид Autoprefixer ашигладаг тул тэдгээр нь шаардлагагүй болсон.

Дараах хольцыг animationустгасан : animation-delay_ animation-direction_ animation-duration_ animation-fill-mode_ animation-iteration-count_ animation-name_ animation-timing-function_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _backface-visibilitybox-sizingcontent-columnshyphensopacityperspectiveperspective-originrotaterotateXrotateYscalescaleXscaleYskewtransform-origintransition-delaytransition-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Баримт бичиг

Манай бичиг баримтууд ч мөн адил шинэчлэгдсэн. Энд доод тал нь:

  • Бид Jekyll-ийг ашигласаар байгаа ч бидэнд нэмэлт өргөтгөлүүд байгаа:
    • bugify.rbнь манай хөтчийн алдааны хуудсан дээрх оруулгуудыг үр дүнтэй жагсаахад ашиглагддаг .
    • example.rbнь өгөгдмөл highlight.rbзалгаасын тусгай сэрээ бөгөөд жишээ кодтой ажиллахад хялбар болгодог.
    • callout.rbнь үүнтэй төстэй захиалгат сэрээ боловч манай тусгай баримт бичгийн тайлбарт зориулагдсан.
    • jekyll-toc нь бидний агуулгын хүснэгтийг үүсгэхэд ашиглагддаг.
  • Засварлахад хялбар болгох үүднээс бүх баримт бичгийн агуулгыг Markdown дээр (HTML-ийн оронд) дахин бичсэн.
  • Хуудсуудыг илүү хялбар агуулгатай, илүү хялбар шатлалтай болгох үүднээс дахин зохион байгуулсан.
  • Бид Bootstrap-ийн хувьсагч, микс болон бусад зүйлийг бүрэн ашиглахын тулд ердийн CSS-ээс SCSS руу шилжсэн.

Хариуцлагатай хэрэгслүүд

v4.0.0-д бүх @screen-хувьсагчийг устгасан. Оронд нь media-breakpoint-up(), media-breakpoint-down(), эсвэл media-breakpoint-only()Sass холимог эсвэл $grid-breakpointsSass газрын зургийг ашиглана уу.

Манай responsive utility ангиуд үндсэндээ хасагдсан бөгөөд тодорхой displayхэрэгслүүдийг ашиглахын тулд.

  • .hiddenболон ангиуд нь jQuery болон аргуудтай .showзөрчилдсөн тул хасагдсан . Оронд нь атрибутыг сэлгэж үзнэ үү эсвэл болон гэх мэт мөрийн хэв маягийг ашиглана уу .$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
  • Нэр нь өөрчлөгдсөн хэвлэх хэрэгслүүдээс бусад бүх .hidden-ангиудыг устгасан.
    • 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
    • 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
  • .hidden-Хэвлэх хэрэгслүүд эсвэл .visible--ээр эхлэхээ больсон .d-print-.
    • Хуучин нэр: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Шинэ ангиуд: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Тодорхой ангиудыг ашиглахын оронд .visible-*тухайн дэлгэцийн хэмжээгээр нуухгүй байж элементийг харагдуулна. Та нэг .d-*-noneангийг нэг ангитай нэгтгэж .d-*-blockэлементийг зөвхөн дэлгэцийн хэмжээтэй өгөгдсөн интервал дээр харуулах боломжтой (жишээ .d-none.d-md-block.d-xl-noneнь элементийг зөвхөн дунд болон том төхөөрөмж дээр харуулдаг).

v4-ийн сүлжээний таслах цэгийн өөрчлөлт нь ижил үр дүнд хүрэхийн тулд та нэг таслах цэгийг томруулах шаардлагатай болно гэдгийг анхаарна уу. Шинэ хариу үйлдэл үзүүлэх хэрэгслийн ангиуд нь элементийн харагдацыг харах талбайн хэмжээнүүдийн нэг зэргэлдээ муж хэлбэрээр илэрхийлэх боломжгүй бага түгээмэл тохиолдлуудад нийцүүлэхийг оролддоггүй; Та ийм тохиолдолд тусгай CSS ашиглах хэрэгтэй болно.