极客教程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的问题：会有大量的文件被覆盖，在这里会花更多的时间来设计一个网站。我们需要花更多的时间来创造一个设计，否则大多数的网页看起来都是一样的。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-theme的问题：在编写代码时应记住这些术语，不会显示错误，我们应重新检查代码以获得正确的输出。每一个术语都应该被指定用于网站的造型。
不同之处：Bootstrap.css框架用于设计一个基本的网页，有一些背景和预定义的设计。网站的造型是通过导入官方网站中的CSS链接完成的。如在bootstrap-theme.css中用于下拉菜单、导航条、进度条、按钮的不同样式，我们可以在代码中调用类属性来添加它们。用不同的样式对文本进行格式化，在网站上对文本进行滑动。
我们可以为网站上的图片添加动画，并通过图标添加社交媒体按钮来分享网站上的内容。我们在包上有预定义的类，我们需要为按钮的造型调用属性。