Source

მიგრაცია v4-ზე

Bootstrap 4 არის მთელი პროექტის მთავარი გადაწერა. ყველაზე შესამჩნევი ცვლილებები შეჯამებულია ქვემოთ, რასაც მოჰყვება უფრო კონკრეტული ცვლილებები შესაბამის კომპონენტებში.

სტაბილური ცვლილებები

Beta 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-მა დაინახა ჩვენი მნიშვნელოვანი ცვლილებები ბეტა ფაზაში, მაგრამ ჩვენ მაინც გვაქვს რამდენიმე, რომელთა მოგვარებაც საჭიროა Beta 3-ის გამოშვებაში. ეს ცვლილებები მოქმედებს, თუ თქვენ განაახლებთ Beta 3-ზე Beta 2-დან ან Bootstrap-ის რომელიმე ძველი ვერსიიდან.

სხვადასხვა

  • ამოღებულია გამოუყენებელი $thumbnail-transitionცვლადი. ჩვენ არ ვცვლიდით არაფერს, ამიტომ ეს უბრალოდ დამატებითი კოდი იყო.
  • npm პაკეტი აღარ შეიცავს სხვა ფაილებს ჩვენი წყაროს და დისტანციური ფაილების გარდა; თუ თქვენ ეყრდნობოდით მათ და მართავდით ჩვენს სკრიპტებს node_modulesსაქაღალდის მეშვეობით, უნდა მოერგოთ თქვენი სამუშაო მიმდინარეობას.

ფორმები

  • ხელახლა ჩაწერა როგორც მორგებული, ისე ნაგულისხმევი ყუთები და რადიოები. ახლა, ორივეს აქვს შესატყვისი HTML სტრუქტურა (გარე <div>და ძმასთან <input>და <label>) და განლაგების იგივე სტილები (დაწყობილი ნაგულისხმევი, მოდიფიკატორის კლასში ჩასმული). ეს გვაძლევს საშუალებას შევქმნათ ლეიბლის სტილი შეყვანის მდგომარეობიდან გამომდინარე, გაამარტივებს disabledატრიბუტის მხარდაჭერას (ადრე მოითხოვდა მშობლის კლასს) და უკეთ მხარს ვუჭერთ ჩვენი ფორმის ვალიდაციას.

    როგორც ნაწილი, ჩვენ შევცვალეთ CSS მრავალი background-images-ის სამართავად მორგებული ფორმის ველებსა და რადიოებზე. ადრე, ახლა ამოღებულ .custom-control-indicatorელემენტს ჰქონდა ფონის ფერი, გრადიენტი და SVG ხატულა. ფონის გრადიენტის მორგება გულისხმობდა ამ ყველაფრის შეცვლას ყოველ ჯერზე, როცა მხოლოდ ერთის შეცვლა გჭირდებათ. ახლა ჩვენ გვაქვს .custom-control-label::beforeშევსება და გრადიენტი და .custom-control-label::afterამუშავებს ხატულას.

    მორგებული შემოწმების გასაკეთებლად, დაამატეთ .custom-control-inline.

  • განახლებული ამომრჩეველი შეყვანის ღილაკების ჯგუფებისთვის. [data-toggle="buttons"] { }სტილისა და ქცევის ნაცვლად , ჩვენ ვიყენებთ dataატრიბუტს მხოლოდ JS ქცევისთვის და ვეყრდნობით ახალ .btn-group-toggleკლასს სტილისთვის.

  • ამოღებულია .col-form-legendოდნავ გაუმჯობესებული სასარგებლოდ .col-form-label. ამ გზით .col-form-label-smდა მარტივად შეიძლება გამოყენებულ იქნას ელემენტებზე .col-form-label-lg.<legend>

  • ფაილის მორგებულმა შეყვანამ მიიღო ცვლილება მათ $custom-file-textSass ცვლადში. ეს აღარ არის ჩადგმული Sass რუკა და ახლა მხოლოდ ერთ სტრიქონს ამუშავებს - Browseღილაკი, რადგან ეს არის ჩვენი Sass-დან გენერირებული ერთადერთი ფსევდოელემენტი. ტექსტი Choose fileახლა მოდის .custom-file-label.

შეყვანის ჯგუფები

  • შეყვანის ჯგუფის დანამატები ახლა სპეციფიკურია მათი განლაგებით შეყვანის მიმართ. ჩვენ დავტოვეთ .input-group-addonდა .input-group-btnორი ახალი კლასისთვის .input-group-prependდა .input-group-append. თქვენ აშკარად უნდა გამოიყენოთ დანართი ან პრეპენდი ახლა, რაც ამარტივებს ჩვენი CSS-ის დიდ ნაწილს. დანართში ან წინდებულში, მოათავსეთ თქვენი ღილაკები ისე, როგორც ისინი არსებობდნენ სადმე სხვაგან, მაგრამ გადაიტანეთ ტექსტი .input-group-text.

  • ვალიდაციის სტილები ახლა მხარდაჭერილია, ისევე როგორც მრავალი შეყვანა (თუმცა ჯგუფში მხოლოდ ერთი შეყვანის დადასტურება შეგიძლიათ).

  • ზომის კლასები უნდა იყოს მშობელი .input-groupდა არა ცალკეული ფორმის ელემენტები.

ბეტა 2 ცვლილებები

ბეტაში ყოფნისას, ჩვენ მიზნად ისახავს არ გვქონდეს მნიშვნელოვანი ცვლილებები. თუმცა, ყველაფერი ყოველთვის ისე არ მიდის, როგორც დაგეგმილი იყო. ქვემოთ მოცემულია მნიშვნელოვანი ცვლილებები, რომლებიც უნდა გაითვალისწინოთ ბეტა 1-დან ბეტა 2-ზე გადასვლისას.

არღვევს

  • ამოღებულია $badge-colorცვლადი და მისი გამოყენება .badge. ჩვენ ვიყენებთ ფერის კონტრასტის ფუნქციას, რომ ავირჩიოთ ზე colorდაფუძნებული background-color, ამიტომ ცვლადი არასაჭიროა.
  • grayscale()ფუნქცია გადაერქვა , gray()რათა თავიდან აიცილოს კონფლიქტი CSS-ის მშობლიურ grayscaleფილტრთან.
  • გადაერქვა .table-inverse, .thead-inverse, და .thead-defaultდა .*-dark, .*-lightემთხვევა ჩვენს ფერთა სქემებს, რომლებიც გამოიყენება სხვაგან.
  • საპასუხო ცხრილები ახლა ქმნიან კლასებს თითოეული ბადის გაწყვეტის წერტილისთვის. ეს შორდება ბეტა 1-ს იმით, რომ .table-responsiveთქვენ იყენებთ უფრო ჰგავს .table-responsive-md. ახლა შეგიძლიათ გამოიყენოთ .table-responsiveან .table-responsive-{sm,md,lg,xl}როგორც საჭიროა.
  • შეწყვეტილია Bower-ის მხარდაჭერა, როგორც პაკეტის მენეჯერი, მოძველებულია ალტერნატივებისთვის (მაგ., Yarn ან npm). იხილეთ bower/bower#2298 დეტალებისთვის.
  • Bootstrap კვლავ მოითხოვს jQuery 1.9.1 ან უფრო მაღალ ვერსიას, მაგრამ გირჩევთ გამოიყენოთ ვერსია 3.x, რადგან v3.x-ის მხარდაჭერილი ბრაუზერები არიან ისეთებიც, რომლებსაც Bootstrap მხარს უჭერს, პლუს v3.x აქვს უსაფრთხოების გარკვეული შესწორებები.
  • ამოღებულია გამოუყენებელი .form-control-labelკლასი. თუ თქვენ იყენებდით ამ კლასს, ის იყო .col-form-labelკლასის დუბლიკატი, რომელიც ვერტიკალურად მოათავსა a- <label>ს ასოცირებულ შეყვანასთან ჰორიზონტალური ფორმის განლაგებაში.
  • შეცვალა color-yiqmixin-დან, რომელიც მოიცავდა 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-ის ბრაუზერისა და WebView-ისთვის. Android ბრაუზერის და WebView-ის ადრინდელი ვერსიები რჩება მხოლოდ არაოფიციალურად მხარდაჭერილი.

გლობალური ცვლილებები

  • Flexbox ჩართულია ნაგულისხმევად. ზოგადად, ეს ნიშნავს მოძრავი და სხვა კომპონენტებისგან დაშორებას.
  • გადაერთო Less- დან Sass- ზე ჩვენი წყარო CSS ფაილებისთვის.
  • გადართულია pxჩვენს remძირითად CSS ერთეულზე, თუმცა პიქსელები კვლავ გამოიყენება მედია მოთხოვნებისა და ბადის ქცევისთვის, რადგან მოწყობილობის ხედებზე გავლენას არ ახდენს ტიპის ზომა.
  • გლობალური შრიფტის ზომა გაიზარდა 14pxდან 16px.
  • განახლდა ქსელის იარუსები მეხუთე ვარიანტის დასამატებლად (მიმართვა პატარა მოწყობილობებზე 576pxქვემოთ და ქვემოთ) და ამოიღო -xsინფიქსი ამ კლასებიდან. მაგალითი .col-6.col-sm-4.col-md-3:.
  • ჩაანაცვლა ცალკეული არასავალდებულო თემა კონფიგურირებადი ოფციებით SCSS ცვლადების საშუალებით (მაგ., $enable-gradients: true).
  • Build სისტემა კაპიტალურად გადაკეთდა, რათა გამოიყენოს npm სკრიპტების სერია Grunt-ის ნაცვლად. იხილეთ 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და არა დაყენებული პიქსელის მნიშვნელობით. ამის ნაცვლად .col-xs-6, ახლაა .col-6. ბადის ყველა სხვა დონე მოითხოვს ინფიქსს (მაგ., sm).
  • განახლებულია ბადის ზომები, მიქსები და ცვლადები.
    • ქსელის ღარები ახლა აქვთ Sass რუკა, ასე რომ თქვენ შეგიძლიათ მიუთითოთ ღრძილების კონკრეტული სიგანე თითოეულ წყვეტის წერტილში.
    • განახლებული ბადის მიქსები make-col-readyმოსამზადებელი მიქსინის გამოსაყენებლად და make-colცალკეული 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 ხატის შრიფტი. თუ ხატები გჭირდებათ, რამდენიმე ვარიანტია:
  • ჩამოაგდეს Affix jQuery მოდული.
    • ჩვენ გირჩევთ გამოიყენოთ position: stickyამის ნაცვლად. იხილეთ HTML5 გთხოვთ ჩანაწერი დეტალებისა და კონკრეტული პოლიფილის რეკომენდაციებისთვის. ერთი წინადადება არის გამოიყენოს @supportsწესი მის განსახორციელებლად (მაგ., @supports (position: sticky) { ... })
    • თუ იყენებდით Affix-ს დამატებითი, positionარასტილების გამოსაყენებლად, პოლიფილები შეიძლება არ იყოს მხარდაჭერილი თქვენი გამოყენების შემთხვევაში. ასეთი გამოყენების ერთ-ერთი ვარიანტია მესამე მხარის ScrollPos-Styler ბიბლიოთეკა.
  • ჩამოაგდეს პეიჯერის კომპონენტი , რადგან ის არსებითად ოდნავ მორგებული ღილაკები იყო.
  • რეფაქტორირებულია თითქმის ყველა კომპონენტი , რათა გამოიყენოს კლასების ზედმეტად სპეციფიური სელექტორების ნაცვლად უფრო მეტი არაბუდებული კლასების ამომრჩეველი.

კომპონენტის მიხედვით

ეს სია ხაზს უსვამს ძირითად ცვლილებებს კომპონენტის მიხედვით v3.xx-სა და v4.0.0-ს შორის.

გადატვირთვა

Bootstrap 4-ში ახალია Reboot , ახალი სტილის ფურცელი, რომელიც ეფუძნება ნორმალიზებას ჩვენი, გარკვეულწილად, შეხედულებისამებრ გადატვირთვის სტილებით. ამ ფაილში გამოჩენილი სელექტორები მხოლოდ ელემენტებს იყენებენ — აქ კლასები არ არის. ეს იზოლირებს ჩვენს გადატვირთვის სტილებს ჩვენი კომპონენტის სტილებისაგან უფრო მოდულური მიდგომისთვის. ზოგიერთი ყველაზე მნიშვნელოვანი გადატვირთვა, რომელიც მოიცავს, არის 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ბლოკის დონის დახმარების ტექსტით. დახმარების ტექსტისა და სხვა მოქნილი ვარიანტებისთვის გამოიყენეთ სასარგებლო კლასები, როგორიცაა .text-muted.
  • დაეცა .radio-inlineდა .checkbox-inline.
  • კონსოლიდირებული .checkboxდა სხვადასხვა .radioკლასებში ..form-check.form-check-*
  • ჰორიზონტალური ფორმები გადაკეთებულია:
    • ჩამოაგდეს .form-horizontalკლასის მოთხოვნა.
    • .form-groupაღარ გამოიყენება .rowvia mixin-ის სტილები, ამიტომ .rowახლა საჭიროა ჰორიზონტალური ბადის განლაგებისთვის (მაგ., <div class="form-group row">).
    • დაემატა ახალი .col-form-labelკლასი ლეიბლებს ვერტიკალურად ცენტრში .form-controls.
    • დამატებულია ახალი .form-rowკომპაქტური ფორმების განლაგებისთვის ბადის კლასებით (შეცვალეთ თქვენი .rowa .form-rowდა წადით).
  • დამატებულია საბაჟო ფორმების მხარდაჭერა (ჩამშვები ველებისთვის, რადიოსადგურებისთვის, არჩევისთვის და ფაილის შეყვანისთვის).
  • ჩანაცვლებულია .has-error, .has-warningდა .has-successკლასები HTML5 ფორმის ვალიდირებით CSS :invalidდა :validფსევდო კლასების საშუალებით.
  • გადაერქვა . .form-control-static_.form-control-plaintext

ღილაკები

  • გადაერქვა . .btn-default_.btn-secondary
  • .btn-xsკლასი მთლიანად ჩამოაგდეს, რადგან .btn-smპროპორციულად გაცილებით მცირეა ვიდრე v3.
  • jQuery მოდულის სახელმწიფო ღილაკის ფუნქცია გაუქმებულია. button.jsეს მოიცავს $().button(string)და $().button('reset')მეთოდებს. ამის ნაცვლად, ჩვენ გირჩევთ გამოიყენოთ მცირე ზომის JavaScript, რომელიც მოგიტანთ ზუსტად ისე მოქცევას, როგორც თქვენ გსურთ.
    • გაითვალისწინეთ, რომ მოდულის სხვა ფუნქციები (ღილაკების ჩამრთველი, ღილაკების რადიოები, ერთჯერადი გადართვის ღილაკები) შენარჩუნებულია v4-ში.
  • შეცვალეთ ღილაკები [disabled], :disabledროგორც IE9+ მხარს უჭერს :disabled. თუმცა fieldset[disabled]მაინც აუცილებელია, რადგან მშობლიური გამორთული ველების კომპლექტები ჯერ კიდევ გაფუჭებულია IE11-ში .

ღილაკების ჯგუფი

  • გადაწერილი კომპონენტი flexbox-ით.
  • ამოღებულია .btn-group-justified. შემცვლელად შეგიძლიათ გამოიყენოთ <div class="btn-group d-flex" role="group"></div>როგორც შეფუთვა ელემენტების გარშემო .w-100.
  • კლასს .btn-group-xsმთლიანად გაუქმდა .btn-xs.
  • ამოღებულია აშკარა ინტერვალი ღილაკების ჯგუფებს შორის ღილაკების ხელსაწყოთა ზოლში; გამოიყენეთ მარჟის უტილიტები ახლა.
  • გაუმჯობესებული დოკუმენტაცია სხვა კომპონენტებთან გამოსაყენებლად.
  • გადაერთო მშობლის სელექტორებიდან სინგულარულ კლასებზე ყველა კომპონენტისთვის, მოდიფიკატორებისთვის და ა.შ.
  • ჩამოსაშლელი ჩამოსაშლელი სტილის გამარტივება აღარ იქნება ჩამოსაშლელი მენიუზე მიმაგრებული ზემოთ ან ქვევით მიმართული ისრებით.
  • ჩამოსაშლელები შეიძლება აშენდეს <div>s ან <ul>s-ით ახლა.
  • ჩამოსაშლელი სტილის ხელახლა აშენება და მარკირება, რათა უზრუნველყოს მარტივი, ჩაშენებული მხარდაჭერა <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}მარტივი ბადის კლასებისთვის.
  • ჩამოაგდეს push and pull მოდიფიკატორის კლასები ახალი flexbox-ზე მომუშავე orderკლასებისთვის. მაგალითად, და-ის ნაცვლად .col-8.push-4, .col-4.pull-8თქვენ იყენებდით .col-8.order-2და .col-4.order-1.
  • დამატებულია flexbox უტილიტა კლასები ქსელის სისტემისა და კომპონენტებისთვის.

ჩამოთვალეთ ჯგუფები

  • გადაწერილი კომპონენტი flexbox-ით.
  • ჩანაცვლებულია a.list-group-itemექსპლიციტური კლასით, .list-group-item-action, სიის ჯგუფის ელემენტების სტილის ბმულისა და ღილაკების ვერსიებისთვის.
  • დამატებულია .list-group-flushკლასი ბარათებით გამოსაყენებლად.
  • გადაწერილი კომპონენტი flexbox-ით.
  • flexbox-ზე გადასვლის გათვალისწინებით, სათაურში გაუქმების ხატულების გასწორება სავარაუდოდ გატეხილია, რადგან ჩვენ აღარ ვიყენებთ float-ებს. Floated კონტენტი პირველ ადგილზეა, მაგრამ flexbox-ში ეს ასე აღარ არის. განაახლეთ თქვენი უარყოფის ხატები, რათა მოდალური სათაურები გამოსწორდეს.
  • ოფცია ( remoteრომელიც შეიძლებოდა გამოეყენებინათ გარე შინაარსის ავტომატურად ჩასატვირთად და მოდალში ჩასართავად) და შესაბამისი loaded.bs.modalმოვლენა წაიშალა. ამის ნაცვლად, გირჩევთ გამოიყენოთ კლიენტის მხარის შაბლონი ან მონაცემთა დამაკავშირებელი ჩარჩო, ან თავად დარეკოთ jQuery.load .
  • გადაწერილი კომპონენტი flexbox-ით.
  • ჩამოაგდეს თითქმის ყველა >ამომრჩევი უფრო მარტივი სტილისთვის, არა ჩადგმული კლასების მეშვეობით.
  • HTML-სპეციფიკური სელექტორების ნაცვლად, როგორიცაა .nav > li > a, ჩვენ ვიყენებთ ცალკეულ კლასებს .navs, .nav-items და .nav-links-სთვის. ეს თქვენს HTML-ს უფრო მოქნილს ხდის, ხოლო გაფართოების გაზრდას.

Navbar მთლიანად გადაწერილია flexbox-ში გასწორების, რეაგირების და პერსონალიზაციის გაუმჯობესებული მხარდაჭერით.

  • საპასუხო ნავიბარის ქცევები ახლა გამოიყენება .navbarკლასზე საჭიროების .navbar-expand-{breakpoint} მეშვეობით, სადაც ირჩევთ, სად უნდა ჩაკეცოთ ნავიბარი. ადრე ეს იყო Less ცვლადის მოდიფიკაცია და საჭიროებდა ხელახლა კომპილაციას.
  • .navbar-defaultარის ახლა .navbar-light, თუმცა .navbar-darkიგივე რჩება. ერთი მათგანი საჭიროა თითოეულ ნავიგბარზე. თუმცა, ეს კლასები აღარ ადგენენ background-colorს; სამაგიეროდ ისინი არსებითად მხოლოდ გავლენას ახდენენ color.
  • Navbars ახლა მოითხოვს რაიმე სახის ფონის დეკლარაციას. აირჩიეთ ჩვენი ფონური პროგრამებიდან ( .bg-*) ან დააყენეთ საკუთარი ზემოაღნიშნული მსუბუქი/შებრუნებული კლასებით შეშლილი პერსონალიზაციისთვის .
  • flexbox-ის სტილის გათვალისწინებით, navbar-ებს ახლა შეუძლიათ გამოიყენონ flexbox-ის კომუნალური პროგრამები მარტივი გასწორების ვარიანტებისთვის.
  • .navbar-toggleარის ახლა .navbar-togglerდა აქვს სხვადასხვა სტილი და შიდა მარკირება (არაუმეტეს სამი <span>წმ).
  • .navbar-formკლასი მთლიანად დატოვა . აღარ არის საჭირო; ამის ნაცვლად, უბრალოდ გამოიყენეთ .form-inlineდა გამოიყენეთ მარჟის უტილიტები საჭიროებისამებრ.
  • Navbars აღარ შეიცავს margin-bottomან border-radiusნაგულისხმევად. საჭიროების შემთხვევაში გამოიყენეთ კომუნალური საშუალებები.
  • ყველა მაგალითი, რომელშიც წარმოდგენილია ნავი ზოლები, განახლდა, ​​რათა შეიცავდეს ახალ მარკირებას.

პაგირება

  • გადაწერილი კომპონენტი flexbox-ით.
  • ექსპლიციტური კლასები ( .page-item, .page-link) ახლა საჭიროა .paginations- ის შთამომავლებზე
  • კომპონენტი მთლიანად ჩამოაგდეს, .pagerრადგან ეს იყო ოდნავ მეტი, ვიდრე მორგებული კონტურის ღილაკები.
  • ექსპლიციტური კლასი, .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იქნა .bg-, .text-, და .borderკომუნალური პროგრამებისთვის, რომლებიც გენერირებულია ჩვენი $theme-colorsSass რუქიდან.

პროგრესი

  • ჩაანაცვლა კონტექსტური .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.leftare now .carousel-control-nextand .carousel-control-prev, რაც იმას ნიშნავს, რომ მათ აღარ სჭირდებათ კონკრეტული საბაზისო კლასი.
  • წაშლილია ყველა საპასუხო სტილი, გადაიდო უტილიტებზე (მაგ., წარწერების ჩვენება გარკვეულ ხედებზე) და მორგებული სტილის საჭიროებისამებრ.
  • წაშლილი გამოსახულების უგულებელყოფა სურათებისთვის კარუსელის ერთეულებში, გადაიდება კომუნალური პროგრამებისთვის.
  • შეცვალა კარუსელის მაგალითი, რათა შეიცავდეს ახალ მარკირებას და სტილებს.

მაგიდები

  • ამოღებულია სტილში ჩადგმული ცხრილების მხარდაჭერა. ცხრილის ყველა სტილი ახლა მემკვიდრეობით მიიღება v4-ში უფრო მარტივი სელექტორებისთვის.
  • დამატებულია ინვერსიული ცხრილის ვარიანტი.

კომუნალური მომსახურება

  • ჩვენება, დამალული და სხვა:
    • ჩვენების უტილიტები რეაგირებენ (მაგ. .d-noneდა d-{sm,md,lg,xl}-none).
    • ჩამოაგდეს კომუნალური პროგრამების დიდი ნაწილი .hidden-*ახალი ეკრანის კომუნალური პროგრამებისთვის . მაგალითად, ნაცვლად .hidden-sm-up, გამოიყენეთ .d-sm-none. გადაერქვა .hidden-printკომუნალური პროგრამები, რათა გამოიყენოს ჩვენების კომუნალური დასახელების სქემა. დამატებითი ინფორმაცია ამ გვერდის საპასუხო კომუნალური სერვისების განყოფილებაში.
    • დამატებულია .float-{sm,md,lg,xl}-{left,right,none}კლასები პასუხისმგებელი float-ებისთვის და წაშლილია .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-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-transformtranslatetranslate3duser-select

დოკუმენტაცია

ჩვენმა დოკუმენტაციამ ასევე მიიღო განახლება მთელს დაფაზე. აი დაბალი ქვემოთ:

  • ჩვენ ჯერ კიდევ ვიყენებთ Jekyll-ს, მაგრამ ჩვენ გვაქვს დანამატები:
    • bugify.rbგამოიყენება ჩვენი ბრაუზერის შეცდომების გვერდზე ჩანაწერების ეფექტურად ჩამოსათვლელად.
    • example.rbარის ნაგულისხმევი highlight.rbდანამატის მორგებული ჩანგალი, რომელიც საშუალებას იძლევა უფრო მარტივი მაგალითის კოდის დამუშავება.
    • callout.rbარის ამის მსგავსი საბაჟო ჩანგალი, მაგრამ შექმნილია ჩვენი სპეციალური დოკუმენტებისთვის.
    • jekyll-toc გამოიყენება ჩვენი სარჩევის შესაქმნელად.
  • ყველა დოკუმენტის შინაარსი გადაწერილია Markdown-ში (HTML-ის ნაცვლად) უფრო ადვილი რედაქტირებისთვის.
  • გვერდების რეორგანიზაცია მოხდა უფრო მარტივი შინაარსისა და უფრო ხელმისაწვდომი იერარქიისთვის.
  • ჩვენ გადავედით ჩვეულებრივი CSS-დან SCSS-ზე, რათა სრულად გამოგვეყენებინა Bootstrap-ის ცვლადები, მიქსინები და სხვა.

საპასუხო კომუნალური საშუალებები

ყველა @screen-ცვლადი წაშლილია v4.0.0-ში. გამოიყენეთ media-breakpoint-up(), media-breakpoint-down(), ან media-breakpoint-only()Sass მიქსები ან $grid-breakpointsSass რუკა.

ჩვენი საპასუხო კომუნალური კლასები ძირითადად ამოღებულია აშკარა displayკომუნალური პროგრამების სასარგებლოდ.

  • და კლასები წაიშალა, რადგან ისინი ეწინააღმდეგებოდა jQuery-ს და .hiddenმეთოდებს . ამის ნაცვლად, სცადეთ ატრიბუტის გადართვა ან გამოიყენეთ შიდა სტილები, როგორიცაა და ..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-ის გამოყენება ასეთ შემთხვევებში.