📌  相关文章
📜  Bootstrap 3和Bootstrap 4之间的区别

📅  最后修改于: 2021-05-25 11:36:52             🧑  作者: Mango

Bootstrap： Bootstrap由Mark Otto和Jacob Thorton在Twitter上于2011年8月开发。它是一个开放源代码框架，用于更快，更轻松地设计响应式网站。它是最流行的开源框架，包括HTML，CSS和JavaScript。它可以使用任何服务器端技术(例如Java， PHP等)创建Web应用程序，其响应式设计允许使用任何平台，例如平板电脑和移动设备。

我们使用Bootstrap的原因有很多：

  • 响应式设计
  • 浏览器支持
  • 移动优先风格
  • 简单易学

不同版本的Bootstrap：

  • 2.0版支持自适应网页设计
  • 3.0版支持移动优先设计
  • 4.0版引入了SASS和Flexbox支持

Bootstrap 3和Bootstrap 4之间的区别：

Basis off Bootstrap 3 Bootstrap 4
Grid System It is based on 4 tier grid system (xs, sm, md, lg). It is based on 5 tier grid system (xs, sm, md, lg, xl).
CSS File LESS SASS
Button Size .btn-xs class is supported. In which their is only .btn-sm and .btn-lg is avaliable.
Horizontal Form .row class is not required using grid in forms. .row class is required when using grid in form.
Inverse Table Not supported. In which we can add inverse table with the help of .table-inverse class.
Primary Unit px rem
Font Size 14px 16px
Responsive Table In Bootstrap 3, .responsive-table class added to
element.
 In bootstrap 4, .responsive-table class added using element.
Condensed Table It support .table-condensed. It support .table-sm.
Responsive Image Use .img-responsive class. Use .img-fluid class.
Image Alignment Use .pull-right and .pull-left class. You can use .pull-right, .pull-left and various other classes like .text-left and .text-center.
Structure For applying dropdown list, we use
    ,
For applying .dropdown-item we use ,
Color Limited colors are avaiable it support inverse navbars but not other classes. There are many colors option .bg-dass or .navbar-light, .navbar-dark classes.
Jumbotron .jumbotron-fluid class is not required on full-width. .jumbotron-fluid class for full-width jumbotron.
Lable Pill .lable-pill is not avaiable. .label-pill class for making the corner round.
Pager It uses .next or .previous. In which we use .pager-next or .pager-previous.
Class Use .breadcrumb class against the
    tag.
 Use .breadcrumb class against the
  • tag.
    		•
    Afflix Yes No
    Flexbox No Yes
    Carousel Item It uses .item class. It uses .carousel-item class.
    Dividers Apply .divider class to
  • element.
    		•  Apply .dropdown-divider class to
    element.