📌  相关文章
📜  CSS和Bootstrap之间的区别(1)

📅  最后修改于: 2023-12-03 14:40:23.023000             🧑  作者: Mango

CSS 和 Bootstrap 之间的区别

CSS（层叠样式表）是一种用于定义网页样式的语言。Bootstrap 是一个前端框架，提供了一系列预定义的 CSS 样式，用于快速搭建响应式的网站。虽然它们都是用于控制网页样式的工具，但在实际使用中有很大不同。

CSS

CSS 是一种用于控制网页样式的语言。它可以通过定义样式规则来设置网页上所有元素的颜色、字体、大小、位置等属性。CSS 使用选择器来选取元素并应用相应的样式。

示例 CSS 样式代码片段：

/* 将文本颜色设置为红色 */
body {
  color: red;
}

/* 设置 h1 元素内部文本大小为 40 像素 */
h1 {
  font-size: 40px;
}

/* 设置 a 元素鼠标悬停时的背景颜色为蓝色 */
a:hover {
  background-color: blue;
}
Bootstrap

Bootstrap 是一个流行的开源前端框架，可以大大简化响应式网站的开发。它包含了一系列预定义的 UI 组件、JavaScript 插件和 CSS 样式，用于快速搭建现代化的网站。

Bootstrap 中的 CSS 样式是基于全局的、统一的样式设计。相比较于直接使用原生的 CSS，Bootstrap 的样式代码更加简洁，易于维护和修改。它还包含了许多响应式设计的特性，可以使网站适配不同的设备和屏幕大小。

示例 Bootstrap 样式代码片段：

<!-- 创建一个带有导航栏和轮播图的页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Example</title>
  <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.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

<div class="container">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
</div>

<div class="container">
  <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>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="img_chania.jpg" alt="Los Angeles" style="width:100%;">
        <div class="carousel-caption">
          <h3>Los Angeles</h3>
          <p>LA is always so much fun!</p>
        </div>
      </div>

      <div class="item">
        <img src="img_chania2.jpg" alt="Chicago" style="width:100%;">
        <div class="carousel-caption">
          <h3>Chicago</h3>
          <p>Thank you, Chicago!</p>
        </div>
      </div>

      <div class="item">
        <img src="img_flower.jpg" alt="New York" style="width:100%;">
        <div class="carousel-caption">
          <h3>New York</h3>
          <p>We love the Big Apple!</p>
        </div>
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>
总结

CSS 和 Bootstrap 都是前端样式设计中不可或缺的工具。CSS 可以用于控制元素的样式，是网页设计的基础。Bootstrap 提供了一系列预定义的 UI 组件和样式，可以显著提高网站开发的效率。在实际使用中，开发者可以根据具体需求选择合适的工具。