bootstrap.css和bootstrap-theme.css的区别

Bootstrap是一个HTML、CSS和JS前端框架，用于在网络上开发响应式和移动优先的项目。它是带有预定义术语的框架，从而使你有能力使用这些代码，而不是从头开始创建代码。它是一个HTML、CSS和JS代码的集合，旨在帮助建立用户界面组件。它有几个版本，最新的版本是2019年11月28日发布的4.4.1。

Bootstrap很容易使用，我们可以使用这个链接从官方网站下载，或者，我们可以直接从官方网站提供的免费的书面代码复制。
Bootstrap CDN是公共内容交付网络，使用户能够从其服务器远程加载CSS或js和图像。Bootstrap CDN包含以下功能。

只要有基本的HTML知识，我们就可以开始使用Bootstrap，很容易使用。
简单的整合。Bootstrap可以简单地与其他不同的平台和框架集成，在现有的网站和新的网站上都可以，还有一点，你也可以利用Bootstrap的特定元素与你目前的CSS一起使用。
伟大的网格系统。Bootstrap是建立在响应式的12列网格、布局和组件上。无论你需要的是固定的网格还是响应式的，只需做一些改变就可以了。

示例：将一个网页分成三列的示例代码，其中直接使用了bootstrap，而没有创建新的方法，这些方法在官方网站上都有。(来源：https://getbootstrap.com/docs/4.4/getting-started/introduction/ )

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous">
</head>
  
<body>
    <div class="container">
        <div class="row">
            <div class="col-md">
                n One of three columns
            </div>
              
            <!-- Dividing the website into
                three columns -->
            <div class="col-md">
                One of three columns
            </div>
  
            <div class="col-md">
                One of three columns
            </div>
        </div>
    </div>
</body>
  
</html>

输出:
bootstrap.css和bootstrap-theme.css的区别

bootstrap的问题：会有大量的文件被覆盖，在这里会花更多的时间来设计一个网站。我们需要花更多的时间来创造一个设计，否则大多数的网页看起来都是一样的。JS与jquery捆绑在一起，是常见的库之一，因此使大多数插件无法使用。

Bootstrap-Theme简介：Bootstrap主题是由HTML、CSS和js组成的软件包，提供造型、UI组件和页面布局，可用于网络项目中。这些模板已经由开发人员写好，用于改编脚本，便于个人学习，以建立一个新的网站。

特点： Bootstrap-theme包括按钮、下拉菜单、导航栏、进度条、面板。类的术语允许我们通过类选择器访问CSS和JS的特定元素。按钮中的类是预定义的，可以节省大量的时间，可以自定义。这些主题用来设置网格的高度和背景颜色，使网页具有不同风格的文本格式，并且通过文本的内容和高度，我们可以设置网格的填充。Container-fluid用于创建流体布局，在所有设备上利用100%的视口宽度。

示例:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
  </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  </script>
    <style>
        /* Remove the navbar's default margin-bottom
           and rounded borders */
          
        .navbar {
            margin-bottom: 0;
            border-radius: 0;
        }
        /* Add a gray background color and some
           padding to the footer */
          
        footer {
            background-color: #f2f2f2;
            padding: 25px;
        }
          
        .carousel-inner img {
            width: 100%;
            /* Set width to 100% */
            margin: auto;
            min-height: 200px;
        }
        /* Hide the carousel text when the screen
           is less than 600 pixels wide */
          
        @media (max-width: 600px) {
            .carousel-caption {
                display: none;
            }
        }
    </style>
</head>
  
<body>
  
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" 
                        class="navbar-toggle" 
                        data-toggle="collapse" 
                        data-target="#myNavbar">
                    <span class="icon-bar">
                  </span>
                    <span class="icon-bar">
                  </span>
                    <span class="icon-bar">
                  </span>
                </button>
                <a class="navbar-brand" 
                   href="#">Logo</a>
            </div>
            <div class="collapse navbar-collapse" 
                 id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">
                      <span class="glyphicon glyphicon-log-in">
                      </span> Login</a></li>
                </ul>
            </div>
        </div>
    </nav>
  
    <div id="myCarousel" 
         class="carousel slide" 
         data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" 
                data-slide-to="0" 
                class="active"></li>
            
            <li data-target="#myCarousel" 
                data-slide-to="1"></li>
        </ol>
  
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img alt="Image">
                <div class="carousel-caption">
                    <h3>SomeText</h3>
                    <p>content.</p>
                </div>
            </div>
  
            <div class="item">
                <img alt="Image">
                <div class="carousel-caption">
                    <h3>Mo</h3>
                    <p>Lorem ipsum...</p>
                </div>
            </div>
        </div>
  
        <!-- Left and right controls -->
        <a class="left carousel-control"
           href="#myCarousel" 
           role="button"
           data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" 
                  aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" 
           href="#myCarousel" 
           role="button" 
           data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" 
                  aria-hidden="true">
          </span>
            <span class="sr-only">Next</span>
        </a>
    </div>
  
    <div class="container text-center">
        <h3>What We Do</h3>
        <br>
        <div class="row">
            <div class="col-sm-4">
                <img class="img-responsive" 
                     style="width:100%"
                     alt="Image">
                <p>Current Project</p>
            </div>
            <div class="col-sm-4">
                <img class="img-responsive"
                     style="width:100%"
                     alt="Image">
                <p>Project 2</p>
            </div>
            <div class="col-sm-4">
                <div class="well">
                    <p>Some text..</p>
                </div>
                <div class="well">
                    <p>Some text..</p>
                </div>
            </div>
        </div>
    </div>
    <br>
  
    <footer class="container-fluid text-center">
        <p>Footer Text</p>
    </footer>
  
</body>
  
</html>

输出:
bootstrap.css和bootstrap-theme.css的区别

Bootstrap-theme的问题：在编写代码时应记住这些术语，不会显示错误，我们应重新检查代码以获得正确的输出。每一个术语都应该被指定用于网站的造型。

不同之处：Bootstrap.css框架用于设计一个基本的网页，有一些背景和预定义的设计。网站的造型是通过导入官方网站中的CSS链接完成的。如在bootstrap-theme.css中用于下拉菜单、导航条、进度条、按钮的不同样式，我们可以在代码中调用类属性来添加它们。用不同的样式对文本进行格式化，在网站上对文本进行滑动。

我们可以为网站上的图片添加动画，并通过图标添加社交媒体按钮来分享网站上的内容。我们在包上有预定义的类，我们需要为按钮的造型调用属性。