• این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید
  • نداریم

تفاوت های میان بوت استرپ 3 و 4

Bootstrap 3 vs Bootstrap 4 Should you move What are the Differences Blog

 

آخرین نسخه بوت استرپ 4 بتا در تاریخ 10 آگوست 2017 منتشر شد. در ادامه مطالب برخی از تفاوت های بین بوت استرپ 3 و بوت استرپ 4 نیز ذکر شده است.

 
Component Bootstrap 3Bootstrap 4
ویژگی های عمومی
Source CSS Files

LESS

SCSS سرعت لود صفحات نسبت به قبل بیشتر می باشد.

Primary CSS Unit

px

rem

Media Queries Unit

px

px

Global Font Size

14px

16px

Default Fonts

Helvetica Neue, Helvetica, Arial, sans-serif

فونت های سیستمی کاربر را جایگزینی فونت های قبلی کرده است.

Grids - شبکه بندی صفحات

Grid Tiers

سطوح شبکه بندی صفحات

4 سطح برای شبکه بندی به صورت (xs, sm, md, lg) وجود دارد.

5 سطح برای شبکه بندی به صورت (xs, sm, md, lg, xl) وجود دارد.

Offsetting Columns

از کلاس col-*-offset-* برای آفست ستون ها استفاده می شود.

به عنوان مثال :col-md-offset-4

 

از کلاس offset-*-* برای آفست ستون ها استفاده می شود.

به عنوان مثال : offset-md-4.

Tables- جداول

Inverse Tables

جداول معکوس

پشتیبانی نمی کند

کلاس .table-inverse class برای انجام این کار اضافه شده است.

Table Head Styles

پشتیبانی نمی کند.

کلاس های thead-default و .thead-inverse classes برای انجام این کار اضافه شده است.

Condensed Tables

جداول فشرده

با استفاده از کلاس زیر پیاده سازی می شود:

.table-condensed

با استفاده از کلاس زیر پیاده سازی می شود:

.table-sm

Contextual Classes

کلاس های متنی

در بوت استرپ 3 برای کلاس هایی که در یک جدول استفاده می شود پیشوندی نداریم ولی در بوت استرپ 4 پیشوند table به آن اضافه شده است به عنوان مثال در بوت استرپ 3 بصورت .active استفاده می شود ولی در بوت استرپ4 بصورت .table-active استفاده می کنیم. سایر کلاس هایی که در بوت استرپ 4 به آنها پیشوند table اضافه می کنیم عبارت اند از (active, success, info, warning, danger).     

به کلاس های محتوایی پیشوند table اضافه شده است.

Responsive Tables

باید کلاس .table-responsive به عنصر div اضافه شود.

Can add .table-responsive to the actual table element.

این امکان که کلاس .table-responsive به جدول جاری اضافه شود وجود دارد.

Reflow Tables پشتیبانی نمی کند.

Added reflow tables with the .table-reflow class.

Reflow tables در حال حاضر حذف شده است.

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

 

Bootstrap 4 dropped the .form-horizontal class — it is no longer needed to display horizontal forms.

Forms require the .row class when using grids.

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

Bootstrap 4 uses .col-form-label * when using grids for form layout.

* Note that Bootstrap 4 initially used .form-control-label but subesquently changed this to .col-form-label.

Checkboxes and Radio Buttons

Uses .radio, .radio-inline, .checkbox, or .checkbox-inline to display checkboxes and radio buttons.

Uses .form-check, .form-check-label, .form-check-input, and .form-check-inline.

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 uses the .form-text 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

Includes validation styles for error, warning, and success states on form controls (for example, .has-warning). To present icons on the input fields using Bootstrap 3, use glyphicons.

Validation styles are not available for Bootstrap 4 forms. Use custom Bootstrap form validation messages instead.

Legends

No classes for styling the form legends.

Provides the option of using .col-form-legend on legend elements to style it more like a label.

Custom Forms

Not supported.

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

Buttons
Styles

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

The .btn-secondary class isn't available in Bootstrap 3.

Introduced the .btn-secondary, .btn-light, and .btn-dark classes.

Dropped the .btn-default class.

Note that the .btn-info class was initially dropped in Bootstrap 4 but then reappeared again.

Outline Buttons

Not supported.

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

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

(The .btn-*-outline classes became .btn-outline-* in Alpha 3).

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.

Uses .m-x-auto instead of .center-block to align block-level images.

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.

Media Objects
Classes

Includes many different classes for media objects, including .media, .media-body .media-object, .media-heading, .media-right, .media-left, and .media-list and .media-body.

Uses just .media class. Margins can be applied using spacer utilities. Media objects are flexbox enabled in Bootstrap 4, so the various flexbox classes can also be applied (such as reordering, etc).

Dropdowns
Structure

Apply dropdowns to lists (i.e. using ul and li).

Dropdowns can be built with ul or divs.

Apply the .dropdown-item to a a or button element and wrap them all in a div (or ul) with a .dropdown-menu class applied.

Menu Headers

Apply .dropdown-header to the li tag.

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

Dividers

Apply the .divider class to the li element (because it used lists to build dropdowns).

Apply the .dropdown-divider to the div element.

Disabled Menu Items

Apply the .disabled class to the li element.

Apply the .disabled class to the a element.

Button Groups
Justified?

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

Not supported.

Extra Small?

Supports extra small button groups (via the .btn-group-xs class).

Not supported (dropped the .btn-group-xs class).

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 .navbar-light and the .navbar-dark classes, and allows the .bg-* classes to be used on navbars.

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.

Can either use spacing utilities such as .mr-auto, or any of the flexbox alignment utilities.

Navbar Forms

Add the .navbar-form class to forms within navbars.

Bootstrap 4 dropped the .navbar-form class. It's no longer necessary.

Fixed Navbars

Uses .navbar-fixed-top and .navbar-fixed-bottom to fix navbars to the top or bottom.

Uses .fixed-top and .fixed-bottom.

Pagination
Default Pagination

Only requires .pagination to be added (to the ul element that represents the list of pages).

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

Pagers

Uses .previous and .next for aligning pagers.

Pagers have been dropped in Bootstrap 4 (Alpha 3).

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

Labels have been replaced by badges in Bootstrap 4.

Badges can use the .badge-pill for rounded corners.

Tags
Supported?

No.

"Tags" are called "Labels" in Bootstrap 3 (i.e. they use the .label class).

Yes.

The .tag class was introduced in Bootstrap 4 (Alpha 3) to replace the .label class.

This was done to disambiguate from the label element.

Tags have now been renamed to "badges". These replace labels from Bootstrap 3.

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 progress?

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

Uses the HTML5 progress element when working with progress bars.

Using the progress element was abandoned in Alpha 6. Bootstrap 4 now uses the div element again.

Glyphicons
Supported?

Supported.

Not supported.

Typography
Blockquotes

Bootstrap styles are applied to the blockquote element by default.

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

Blockquote Alignment

Use .blockquote-reverse to align a blockquote to the right.

Use the text utilities to align blockquotes (.text-center and .text-right).

Page Headers

The .page-header class is supported.

The .page-header class is not supported.

Description Lists

The .dl-horizontal class was used to declare a horizontal list.

Horizontal lists are now declared with the .row class on the dl tag, then any of the grid system's predefined classes to the dt and dd tags.

Non-Responsive Usage
Supported?

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

Not supported.

List Groups
Linked List Items / Button List Items

Apply .list-group-item to the a element.

Apply .list-group-item-action to the a element.

Collapse
Show content

Uses .in to have content expanded upon page load.

Uses .show to have content expanded upon page load.

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.

Breadcrumbs
Classes

Uses the .breadcrumb class against the ul tag.

Also requires .breadcrumb-item to be applied against all li elements that make up the breadcrumb.

Breadcrumbs can also be used outside of lists. For example, the .breadcrumb-item could be applied to a bunch of a elements that are wrapped in a .breadcrumb element.

Carousels
Carousel Item

Use .item class.

Use .carousel-item class.

Affix
آیا پشتیبانی می کند؟

بله.

خیر.