📌  相关文章
📜  Bootstrap v3 和 v4 有什么区别？

📅  最后修改于: 2022-05-13 01:56:51.513000             🧑  作者: Mango

Bootstrap v3 和 v4 有什么区别？

在本文中，我们将看到 Bootstrap v3 和 v4 的区别及其实现。 Bootstrap 是一个免费的开源前端框架，用于创建响应式网站和 Web 应用程序。它是最流行的 HTML、CSS 和 JavaScript 框架，用于开发响应式、移动优先的网站。它提供了预定义的 CSS类 和 ID 给用户，这有助于他们在开发过程中节省时间，使代码干净并增强可读性。 Bootstrap 版本 3 于 2013 年推出，而 Bootstrap 版本 4 于 2017 年 8 月首次投入使用。您可以通过将 CDN 链接从官网复制到您的 HTML 文档中来获取 Bootstrap CDN 链接。我们还可以从站点下载引导程序，然后将其放在工作目录中。有关详细信息，请参阅 Bootstrap 教程文章。

不同版本的 Bootstrap：

  • 2.x 版：支持响应式设计。
  • 版本 3.x：支持移动优先设计。
  • 4.x 版：引入 SASS 和 Flexbox 支持。
  • 版本 5.x：最新更新。

我们将通过示例了解 bootstrap v3 和 v4。

Bootstrap v3：它介绍了 移动优先设计 为开发人员引入 Bootstrap 网格系统的概念，该系统可扩展到 12 列以增加设备视口。它允许我们通过使用 4 层网格类（手机、平板电脑、台式机和大型台式机）轻松创建复杂且自适应的布局。在 Bootstrap v3 中，引入了排版概念以添加现有的基于 HTML 文本的控件功能，同时添加了新的文本控件以增强呈现文本的方式。 bootstrap v3 的 CSS 源文件是LESS 。

Bootstrap的 CSS 和 JavaScript 的Bootstrap v3 CDN 链接：

示例 1：在此示例中，我们使用了 Bootstrap v3 CDN 链接

HTML


  

    
    
  
    
    

  

    

        
Welcome To GFG

        

            
Data Structure

            
Web Development

            
Placement course

        

    

    

  

HTML


  

    

  

    

        

            
Bootstrap Card

            

                
GeekforGeeks

                

                    A Computer Science portal for geeks. 
                    It contains well written, well
                    thought and well explained computer 
                    science and programming articles
                

  
                
                    Know More
                
            

        

    

  
    
      
    
      
    

  

输出：

Bootstrap 4.0 版：它包含 Bootstrap 3 的功能，并添加了一些新功能，如 SASS 文件和 Flexbox。 SASS是 bootstrap v4 的 CSS 源文件。主要浏览器支持 Bootstrap v4，并改进了网格布局和表单支持。它还引入了卡片组件的概念，该组件提供了具有多种选项的灵活和可扩展的内容容器。

Bootstrap的 CSS 和 JavaScript 的Bootstrap v4 CDN 链接：

示例 2：在此示例中，我们使用 Bootstrap v4 CDN 链接来制作 Bootstrap 卡。

HTML 



  

    

  

    

        

            
Bootstrap Card

            

                
GeekforGeeks

                

                    A Computer Science portal for geeks. 
                    It contains well written, well
                    thought and well explained computer 
                    science and programming articles
                

  
                
                    Know More
                
            

        

    

  
    
      
    
      
    

  

输出：

Bootstrap v3 和 Bootstrap v4 的区别：

Component

Bootstrap v3

Bootstrap v4

CSS source file

LESS

SASS

CSS  Unit

px

rem

Font Size

14px

16px

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)

Dropdown Structure  

Created using

    and

Created with

    or

Images class 

.img-responsive 

.img-fluid

Tables

use .table-responsive class in

tag

use .table-responsive class in

tag

Offsetting Columns  

col-md-offset-4

offset-md-4

Form Control Size

.input-lg increases size while .input-sm decreases size

.form-control-lg increases size while .form-control-sm decreases size

Button Sizes

.btn-xs class is available

.btn-sm and .btn-lg classes are there and the .btn-xs class is not

Jumbotron Full Width

.jumbotron-fluid class is not used on full-width jumbotrons 

.jumbotron-fluid class for full-width jumbotrons is used in this

Carousel Item

carousel items are arranged using .item class

It uses .carousel-item class for arranging carousel items.

Inline Navs

Do not have .nav-inline class 

Inline navs are displayed by using the .nav-inline class

Styles

It has .btn-default and .btn-info available classes for buttons 

Have different classes for buttons like: .btn-secondary, .btn-light and .btn-dark.

Checkboxes and Radio Buttons

.radio, .radio-inline, .checkbox, or .checkbox-inline classes are available for radio and checkbox.

.form-check, .form-check-label, .form-check-input, or .form-check-inline are the classes used to display radio and checkbox.