Source

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

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

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

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

Хэвлэх

  • Эвдэрсэн хэвлэх хэрэгслүүдийг зассан. Өмнө нь .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 хувилбарт шийдвэрлэх шаардлагатай цөөн хэдэн зүйл байсаар байна. Хэрэв та Beta 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-textЗахиалгат файлын оролтууд нь Sass хувьсагчийнхаа өөрчлөлтийг хүлээн авсан . Энэ нь үүрлэсэн Сасс газрын зураг байхаа больсон бөгөөд одоо зөвхөн нэг мөрийг ажиллуулдаг - 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.
  • Тусдаа нэмэлт сэдвийг SCSS хувьсагчаар (жишээ нь, $enable-gradients: true) тохируулж болох сонголтоор сольсон.
  • 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-responsiveбаруун талд нь тавь <table>.
  • .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 хэсэгт дамжуулан ангид хэрэглэгдэж байна. Өмнө нь энэ нь бага хувьсагчтай өөрчлөлт байсан бөгөөд дахин эмхэтгэх шаардлагатай байв. .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хэсэг нь шошготой бараг ижил байсан тул хассан. .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нь үүнтэй төстэй захиалгат сэрээ боловч манай тусгай баримт бичгийн тайлбарт зориулагдсан.
    • markdown-block.rbХүснэгт гэх мэт HTML элементүүдийн доторх Markdown хэсгүүдийг гаргахад ашигладаг.
    • 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 ашиглах хэрэгтэй болно.