Bootstrap v3和v4之间有什么区别

在这篇文章中，我们将看到Bootstrap v3 & v4的不同之处以及它们的实现。Bootstrap是一个免费的开源前端框架，用于创建响应式网站和网络应用。它是最流行的HTML、CSS和JavaScript框架，用于开发响应式、移动优先的网站。它为用户提供了预定义的CSS classes和id ，这有助于他们在开发过程中节省时间，并使代码干净，增强可读性。Bootstrap第3版于2013年推出，而在2017年8月Bootstrap第4版首次投入使用。你可以通过从官方网站&复制CDN链接到你的HTML文档来获得Bootstrap CDN链接。我们也可以从网站上下载Bootstrap，然后把它放到工作目录中。更多细节请参考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 v3 CDN链接 对于Bootstrap的CSS和JavaScript：

<!– CSS only –>
<!– Latest compiled and minified CSS –>

<link rel=”stylesheet”
href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”
integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”>

<!– Optional theme –>
<link rel=”stylesheet”
href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css”
integrity=”sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp” crossorigin=”anonymous”>

<!– Latest compiled and minified JavaScript –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”
integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”></script>

例子1：在这个例子中，我们使用了Bootstrap v3 CDN链接。

<!DOCTYPE html>
<html>
  
<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous" />
  
    <!-- Optional theme -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
        integrity=
"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
        crossorigin="anonymous">
</head>
  
<body>
    <div class="container">
        <h2>Welcome To GFG</h2>
        <div class="row">
            <div class="col-sm">Data Structure</div>
            <div class="col-sm">Web Development</div>
            <div class="col-sm">Placement course</div>
        </div>
    </div>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity=
"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous">
    </script>
</body>
  
</html>

输出:

Bootstrap v3和v4之间有什么区别？

Bootstrap 4.0版：它包括Bootstrap 3的功能，并增加了一些新功能，如SASS文件和Flexbox。Bootstrap v4得到了主要浏览器的支持，同时改进了网格布局和表单支持。它还引入了卡片组件的概念，提供了一个灵活和可扩展的内容容器，有多种选择。

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

<!– Latest compiled and minified CSS –>

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”   
 integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=”anonymous”>

<!– Latest compiled and minified JavaScript –>

<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js”   
 integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anonymous”>   
 </script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js”   
 integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”>   
 </script>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js”   
 integrity=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anonymous”>   
 </script>

例子2：在这个例子中，我们使用了Bootstrap v4 CDN链接来制作Bootstrap卡。

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous" />
</head>
  
<body>
    <div class="container">
        <div class="card">
            <div class="card-header">Bootstrap Card</div>
            <div class="card-body">
                <h5 class="card-title">GeekforGeeks</h5>
                <p class="card-text">
                    A Computer Science portal for geeks. 
                    It contains well written, well
                    thought and well explained computer 
                    science and programming articles
                </p>
  
                <a href="#" class="btn btn-primary">
                    Know More
                </a>
            </div>
        </div>
    </div>
  
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous">
    </script>
      
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous">
    </script>
      
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous">
    </script>
</body>
 
</html>