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-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
. $enable-gradients: true
Тусдаа нэмэлт сэдвийг SCSS хувьсагчаар (жишээ нь, ) тохируулах боломжтой сонголтоор сольсон .- Grunt-ийн оронд хэд хэдэн npm скриптийг ашиглахын тулд системийг шинэчлэн байгуул. Бүх скриптийг харна уу
package.json
, эсвэл орон нутгийн хөгжлийн хэрэгцээг манай төслийн Readme-ээс үзнэ үү. - Bootstrap-ийн хариу үйлдэл үзүүлэхгүй хэрэглээг дэмжихээ больсон.
- Илүү өргөн хүрээтэй тохиргооны баримт бичиг, өөрчилсөн бүтээцийг ашиглахын тулд онлайн Customizer-ийг орхисон.
- Нийтлэг CSS шинж чанар-утга хосууд болон захын зай/зайрын товчлолуудад зориулсан олон арван шинэ хэрэглээний анги нэмсэн.
Сүлжээний систем
- Flexbox руу шилжсэн.
- Сүлжээний холимгууд болон урьдчилан тодорхойлсон ангиудад flexbox-ийн дэмжлэгийг нэмсэн.
- Flexbox-ийн нэг хэсэг болгон босоо болон хэвтээ зэрэглэлийн ангиудын дэмжлэгийг багтаасан болно.
- Сүлжээний ангийн нэр болон шинэ сүлжээний шатлалыг шинэчилсэн.
- Илүү нарийн хянахын тулд доор шинэ
sm
сүлжээний шатыг нэмсэн.768px
Бид одооxs
,sm
,md
,lg
, баxl
. Энэ нь бас шат бүрийг нэг шатаар ахиулсан гэсэн үг юм (тиймээс.col-md-6
v3-д одоо.col-lg-6
v4-т байгаа). xs
min-width: 0
grid ангиуд нь тохируулсан пикселийн утгыг биш харин хэв маягийг хэрэглэж эхлэхийг илүү нарийвчлалтай илэрхийлэхийн тулд infix-ыг шаарддаггүйн тулд өөрчилсөн . Үүний оронд.col-xs-6
одоо.col-6
байна. Бусад бүх сүлжээний давхарга нь infix шаарддаг (жишээ нь,sm
).
- Илүү нарийн хянахын тулд доор шинэ
- Сүлжээний хэмжээ, холимог болон хувьсагчдыг шинэчилсэн.
- Сүлжээний суваг нь одоо Sass газрын зурагтай болсон тул та таслах цэг бүрт сувгийн тодорхой өргөнийг зааж өгөх боломжтой.
- Бэлтгэх холигчийг ашиглахын тулд шинэчлэгдсэн сүлжээний
make-col-ready
холимгууд болон баганын хэмжээг тус тусадmake-col
нь тохируулахад a.flex
max-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 дүрсний фонтыг буулгасан. Хэрэв танд дүрс хэрэгтэй бол зарим сонголтууд:
- Glyphicons -ийн дээд хувилбар
- Октиконууд
- Фонт Гайхалтай
- Хувилбаруудын жагсаалтыг Өргөтгөх хуудаснаас харна уу . Нэмэлт санал байна уу? Асуудал эсвэл PR нээнэ үү.
- 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-text
Inline тусламжийн текст болон бусад уян хатан сонголтуудын хувьд.text-muted
. - Унасан
.radio-inline
ба.checkbox-inline
. - Төрөл бүрийн
.checkbox
ангиудыг нэгтгэсэн.radio
..form-check
.form-check-*
- Хэвтээ хэлбэрийг засварласан:
.form-horizontal
Ангийн шалгуурыг хассан ..form-group
цаашид.row
via 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
:disabled
fieldset[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
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-bottom
Navbar- д өгөгдмөл тохиргоог оруулахаа больсонborder-radius
. Шаардлагатай бол хэрэгслүүдийг ашиглана уу.- Navbar бүхий бүх жишээг шинэ тэмдэглэгээ оруулахаар шинэчилсэн.
Хуудсууд
- Флексбокс ашиглан бүрэлдэхүүн хэсгийг дахин бичсэн.
- s -ийн үр удам дээр тодорхой ангиуд (
.page-item
,.page-link
) шаардлагатай болсон.pagination
.pager
Бүрэлдэхүүн хэсэг нь тохируулсан тойм товчлууруудаас арай илүү байсан тул бүрэн хассан .
Талхны үйрмэг
- s -ийн үр удам дээр тодорхой анги,
.breadcrumb-item
, шаардлагатай болсон.breadcrumb
Шошго, тэмдэг
- Элементээс ялгах
.label
, холбогдох бүрэлдэхүүн хэсгүүдийг хялбаршуулахын тулд нэгтгэсэн ..badge
<label>
.badge-pill
Бөөрөнхий хэлбэртэй "үрэл" хэлбэрийг өөрчлөхөд нэмсэн .- Жагсаалтын бүлгүүд болон бусад бүрэлдэхүүн хэсгүүдэд тэмдэг автоматаар хөвөхөө больсон. Үүний тулд одоо хэрэглээний ангиуд шаардлагатай байна.
.badge-default
хасагдсан бөгөөд.badge-secondary
өөр газар ашигласан бүрэлдэхүүн хувиргагч ангиудтай тааруулахын тулд нэмсэн.
Самбар, өнгөц зураг, худаг
Шинэ картын бүрэлдэхүүн хэсгийн хувьд бүрэн хасагдсан.
Самбарууд
.panel
to.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-*
шинэ хэрэгслүүдийн ихэнх хэсгийг хассан . Жишээлбэл, оронд нь -ийг ашиглана . Дэлгэцийн хэрэгслийн нэрлэх схемийг ашиглахын тулд хэрэгслүүдийн нэрийг өөрчилсөн . Дэлгэрэнгүй мэдээллийг доороос авна уу.hidden-sm-up
.d-sm-none
.hidden-print
энэ хуудасны Responsive utilities хэсгээс авна уу. - Мэдрэмжтэй хөвөгчдийн
.float-{sm,md,lg,xl}-{left,right,none}
ангиллыг нэмсэн бөгөөд хасагдсан.pull-left
бөгөөд.pull-right
тэдгээр нь.float-left
болон.float-right
.
- Дэлгэцийн хэрэгслүүдийг хариу үйлдэл үзүүлэх боломжтой болгосон (жишээ нь,
- Төрөл:
- Манай текстийг зэрэгцүүлэх ангиудад хариу үйлдэл үзүүлэх хувилбаруудыг нэмсэн
.text-{sm,md,lg,xl}-{left,center,right}
.
- Манай текстийг зэрэгцүүлэх ангиудад хариу үйлдэл үзүүлэх хувилбаруудыг нэмсэн
- Тохируулга ба зай:
- Шинэ мэдрэмжтэй маржин болон дүүргэх хэрэгслүүдийг нэмсэнБүх талдаа хариу үйлдэл үзүүлэх
- Flexbox хэрэгслүүдийн ачаалал нэмэгдсэн .
.center-block
Шинэ.mx-auto
ангид орохоор хасагдсан .
- Clearfix хөтчийн хуучин хувилбаруудыг дэмжихгүй байхаар шинэчлэгдсэн.
Борлуулагчийн угтвар хольц
Bootstrap 3-ын v3.2.0-д хуучирсан үйлдвэрлэгчийн угтвар хольцыг Bootstrap 4-д устгасан. Бид Autoprefixer ашигладаг тул тэдгээр нь шаардлагагүй болсон.
Дараах холиноолтыг авалгана : ,,,,,,,,,,,,, animation
, K 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
Баримт бичиг
Манай бичиг баримтууд ч мөн адил шинэчлэгдсэн. Энд доод тал нь:
- Бид 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-breakpoints
Sass газрын зургийг ашиглана уу.
Манай 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
- v3-аас хассан:
.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 ашиглах хэрэгтэй болно.