19/03/2017, 01:24
]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
]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