Bootstrap 3 ile Bootstrap 4 arasındaki farklar

  2016/07/07 15:13 • Ana Sayfa > HTML

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.

Bileşen Bootstrap 3 Bootstrap 4
Genel
CSS Kaynağı

LESS

SCSS

CSS Birimi

px

rem

Medya CSS Birimi

px

em

Body Font Boyutu

14px

16px

Izgaralar
Izgara katmanları

4 katman ızgara (xs, sm, md, lg)

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

Tablolar
Ters Tablolar

Not supported.

Added inverse tables with the .table-inverse class.

Tablo Header Stil

Not supported.

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

Yoğunlaştırılmış Tablolar

.table-condensed

.table-sm

Bağlamsal sınıflar

Bootstrap 3 doesn't use the .table- prefix for its contextual classes.

For example, Bootstrap 3 uses .active whereas 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.

Responsive Tablolar

The .responsive-table class must be added to a parent

 

element.

Can add .responsive-table to the actual element.

Reflow Tables

Not supported.

Added reflow tables with the .table-reflow class.

Forms
Horizontal Forms

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.

Form Control Size

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.

Help Text

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.

Validation and Feedback Icons

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.

Custom Forms

Not supported.

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

Buttons
Semantic Styles

Includes the .btn-default and .btn-info classes.

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.

Outline Buttons

Not supported.

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

Button Sizes

The .btn-xs class is available.

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

Images
Responsive Images

Use .img-responsive class.

Use .img-fluid class.

Image Alignment

Use .pull-right, .pull-left, and .center-block helper classes.

Can also use the various .pull-*-right and .pull-*-left responsive helper classes, as well as the .text-*-left, .text-*-center, and .text-*-right helper classes on the image's parent.

Can use the various .pull-*-none classes to disable floating.

Dropdowns
Structure

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.

Menu Headers

Apply .dropdown-header to the

tag.

Apply .dropdown-header to

 

-

 

tags (as Bootstrap no longer uses

tags to build dropdowns).

Dividers

Apply the .divider class to the

element (because it used lists to build dropdowns).

Apply the .dropdown-divider to the

 

element.

Disabled Menu Items

Apply the .disabled class to the

element.

Apply the .disabled class to the element.

Button Groups
Justified?

Supports justified button groups (via the .btn-group-justified class).

Not supported.

Navs
Inline Navs

There is no .nav-inline class.

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

Navbars
Colors

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-light and .navbar-dark classes.

Navbar Alignment

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-*-none classes to disable floating.

Pagination
Default Pagination

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.

Pagers

Uses .previous and .next for aligning pagers.

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

Labels
Pill Labels

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.

Jumbotron
Full-Width

The .jumbotron-fluid class is not required on full-width jumbotrons.

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

Progress Bars
Uses ?

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

 

elements.

Uses the HTML5 element when working with progress bars.

Glyphicons
Supported?

Supported.

Not supported.

Typography
Blockquotes

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).

Page Headers

The .page-header class is supported.

The .page-header class is not supported.

Description Lists

The .dl-horizontal class does not require grid classes.

The .dl-horizontal class requires grid classes.

Non-Responsive Usage
Supported?

Supported. You can specify a layout to be non-responsive.

Not supported.

Cards
Supported?

Not supported.

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

Panels
Supported?

Supported.

Not supported. Use cards instead.

Wells
Supported?

Supported.

Not supported. Use cards instead.

Thumbnails
Supported?

Supported.

Not supported. Use cards instead.

Carousels
Carousel Item

Use .item class.

Use .carousel-item class.

Yazar: Ercüment Çözer (@Felina)

2009 yılında gelen "internet için bir şeyler üretme isteği" doğrultusunda yazılım öğrenmeye başladım. Aradan geçen süre zarfında başta PHP ve Python olmak üzere, ticareti yapılabilir birçok şey öğrendim. Şu sıralar web ve mobil ortamda kodlama, tasarlama ve pazarlama konularındaki bilgilerimi pekiştirmek ve ihtiyaç halinde diğer insanlara da yardımcı olabilmek için KodLab.org'u kurdum. Freelance olarak kendi projelerimle ilgileniyorum.