]Bootstrap 4.0 ile gelen daha ergonomik, performans dolu ve iç açıcı bootstrap kütüphanesine nelerin dahil olduğunu ve varsa nelerin eksildiğini bugün beraber inceleyelim.


]Genel anlamda, bootstrap 4.0'ın yenilikçi teknolojiyle hazırlandığını görmek ve özellik artışını fark etmek mümkün. Uzun ve gereksiz bir makale yerine quackit.com'un hazırladığı tabloyu sizlerle paylaşıyoruz.
[TABLE="class: table table-bordered, width: 750"]

[TH="align: left"]Bileşen [/TH]
[TH="align: left"]Bootstrap 3 [/TH]
[TH="align: left"]Bootstrap 4 [/TH]


[TH="colspan: 3, align: left"]Genel [/TH]


[TH="align: left"]CSS Kaynağı [/TH]
LESS

SCSS



[TH="align: left"]CSS Birimi [/TH]
px

rem



[TH="align: left"]Medya CSS Birimi [/TH]
px

em



[TH="align: left"]Body Font Boyutu [/TH]
14px

16px



[TH="colspan: 3, align: left"]Izgaralar [/TH]


[TH="align: left"]Izgara katmanları [/TH]
4 katman ızgara (xs, sm, md, lg)

5 katman ızgara (xs, sm, md, lg, xl).



[TH="colspan: 3, align: left"]Tablolar [/TH]


[TH="align: left"]Ters Tablolar [/TH]
Not supported.

Added inverse tables with the .table-inverse class.



[TH="align: left"]Tablo Header Stil [/TH]
Not supported.

Added table head styles with the .thead-default and .thead-inverse classes.



[TH="align: left"]Yoğunlaştırılmış Tablolar [/TH]
.table-condensed

.table-sm



[TH="align: left"]Bağlamsal sınıflar [/TH]
Bootstrap 3 doesn't use the .table- prefix for its contextual classes.
For example, Bootstrap 3 uses .activewhereas Bootstrap 4 uses .table-active. Other than that, both versions use the same 5 contextual keywords (active, success, info, warning, danger).

Added the .table- prefix for its contextual classes.



[TH="align: left"]Responsive Tablolar [/TH]
The .responsive-table class must be added to a parent

element.

Can add .responsive-table to the actual element.



[TH="align: left"]Reflow Tables [/TH]
Not supported.

Added reflow tables with the .table-reflow class.



[TH="colspan: 3, align: left"]Forms [/TH]


[TH="align: left"]Horizontal Forms [/TH]
Horizontal forms require the .form-horizontal class.
Forms don't require .row when using grids (although this class is still a requirement on Bootstrap 3 grids in general).

Forms require the .row class when using grids.



Use .control-label when using grids for form layout.

Use .form-control-label when using grids for form layout.



[TH="align: left"]Form Control Size [/TH]
Use .input-lg and .input-sm to increase or decrease the size of an input control.

Use .form-control-lg and .form-control-sm to increase or decrease the size of an input control.



[TH="align: left"]Help Text [/TH]
Use the .help-block class to display help text.

Bootstrap 4 forms don't have an official class for help text. Instead, the .text-muted class was introduced for more flexibility.



[TH="align: left"]Validation and Feedback Icons [/TH]
The .form-control-* classes are not available in Bootstrap 3. To present icons on the input fields using Bootstrap 3, you need to use glyphicons.

Dropped the .has-feedback class. It is no longer required with the introduction of the .form-control-* classes.



[TH="align: left"]Custom Forms [/TH]
Not supported.

Bootstrap 4 introduced custom forms — completely custom form elements that replace the browser defaults.



[TH="colspan: 3, align: left"]Buttons [/TH]


[TH="align: left"]Semantic Styles [/TH]
Includes the .btn-default and .btn-infoclasses.
The .btn-secondary class isn't available in Bootstrap 3.

Introduced the .btn-secondary class.
Dropped the .btn-default class.
Note that the .btn-info class was initially dropped in Bootstrap 4 but it has reappeared again.



[TH="align: left"]Outline Buttons [/TH]
Not supported.

Introduced the .btn-*-outline classes for styling buttons with an outline color.



[TH="align: left"]Button Sizes [/TH]
The .btn-xs class is available.

Dropped the .btn-xs class (only .btn-smand .btn-lg are available now).



[TH="colspan: 3, align: left"]Images [/TH]


[TH="align: left"]Responsive Images [/TH]
Use .img-responsive class.

Use .img-fluid class.



[TH="align: left"]Image Alignment [/TH]
Use .pull-right, .pull-left, and .center-block helper classes.

Can also use the various .pull-*-rightand .pull-*-left responsive helper classes, as well as the .text-*-left, .text-*-center, and .text-*-righthelper classes on the image's parent.
Can use the various .pull-*-none classes to disable floating.



[TH="colspan: 3, align: left"]Dropdowns [/TH]


[TH="align: left"]Structure [/TH]
Apply dropdowns to lists (i.e. using and
).

Apply the .dropdown-item to a or element and wrap them all in a

with a .dropdown-menu class applied.



[TH="align: left"]Menu Headers [/TH]
Apply .dropdown-header to the
tag.

Apply .dropdown-header to
-
tags (as Bootstrap no longer uses
tags to build dropdowns).



[TH="align: left"]Dividers [/TH]
Apply the .divider class to the
element (because it used lists to build dropdowns).

Apply the .dropdown-divider to the

element.



[TH="align: left"]Disabled Menu Items [/TH]
Apply the .disabled class to the
element.

Apply the .disabled class to the element.



[TH="colspan: 3, align: left"]Button Groups [/TH]


[TH="align: left"]Justified? [/TH]
Supports justified button groups (via the .btn-group-justified class).

Not supported.



[TH="colspan: 3, align: left"]Navs [/TH]


[TH="align: left"]Inline Navs [/TH]
There is no .nav-inline class.

Can use the .nav-inline class to explicitly specify navs to be displayed inline.



[TH="colspan: 3, align: left"]Navbars [/TH]


[TH="align: left"]Colors [/TH]
Limited (preset) color options. Supports inverse navbars but not the other classes.

New (preset) color options. Introduced the .bg-* class, as well as the .navbar-lightand .navbar-dark classes.



[TH="align: left"]Navbar Alignment [/TH]
Use .navbar-right, .navbar-left to align components within the navbar.

Use the various .pull-*-right and .pull-*-left responsive helper classes.
Can also use the various .pull-*-noneclasses to disable floating.



[TH="colspan: 3, align: left"]Pagination [/TH]


[TH="align: left"]Default Pagination [/TH]
Only requires .pagination to be added (to the element that represents the list of pages).

Must also add .page-item to each
element and .page-link to each element.



[TH="align: left"]Pagers [/TH]
Uses .previous and .next for aligning pagers.

Uses .pager-prev and .pager-next for aligning pagers.



[TH="colspan: 3, align: left"]Labels [/TH]


[TH="align: left"]Pill Labels [/TH]
The .label-pill class is not available. However, Bootstrap 3 does have badges (which achieves a similar visual effect). Badges were dropped in Bootstrap 4.

Introduced the .label-pill class for making the corners more rounded.



[TH="colspan: 3, align: left"]Jumbotron [/TH]


[TH="align: left"]Full-Width [/TH]
The .jumbotron-fluid class is not required on full-width jumbotrons.

Introduced the .jumbotron-fluid class for full-width jumbotrons.



[TH="colspan: 3, align: left"]Progress Bars [/TH]


[TH="align: left"]Uses
? [/TH]

Doesn't use the
for progress bars. Instead, applies progress bar classes to nested
elements.


Uses the HTML5
element when working with progress bars.


[TH="colspan: 3, align: left"]Glyphicons [/TH]


[TH="align: left"]Supported? [/TH]
Supported.

Not supported.



[TH="colspan: 3, align: left"]Typography [/TH]


[TH="align: left"]Blockquotes [/TH]
Bootstrap styles are applied to the element by default.

Introduced the .blockquote class for styling the element (i.e. styling this element is now opt-in).



[TH="align: left"]Page Headers [/TH]
The .page-header class is supported.

The .page-header class is not supported.



[TH="align: left"]Description Lists [/TH]
The .dl-horizontal class does not require grid classes.

The .dl-horizontal class requires grid classes.



[TH="colspan: 3, align: left"]Non-Responsive Usage [/TH]


[TH="align: left"]Supported? [/TH]
Supported. You can specify a layout to be non-responsive.

Not supported.



[TH="colspan: 3, align: left"]Cards [/TH]


[TH="align: left"]Supported? [/TH]
Not supported.

Introduced in Bootstrap 4. Cards replace functionality that was previously provided by panels, wells, and thumbnails.



[TH="colspan: 3, align: left"]Panels [/TH]


[TH="align: left"]Supported? [/TH]
Supported.

Not supported. Use cards instead.



[TH="colspan: 3, align: left"]Wells [/TH]


[TH="align: left"]Supported? [/TH]
Supported.

Not supported. Use cards instead.



[TH="colspan: 3, align: left"]Thumbnails [/TH]


[TH="align: left"]Supported? [/TH]
Supported.

Not supported. Use cards instead.



[TH="colspan: 3, align: left"]Carousels [/TH]


[TH="align: left"]Carousel Item [/TH]
Use .item class.

Use .carousel-item class.




https://www.kodlab.org/bootstrap-3-ile-b...ki-farklar