如何使用 SASS 和 Bootstrap 制作响应式网站？

前言

随着移动设备的普及，响应式设计已经成为网站设计的重要趋势。但是如何实现具有响应式的网站呢？在本篇文章中，我们将介绍如何使用 SASS 和 Bootstrap 制作响应式网站。

SASS

SASS 是一种 CSS 预处理器，它可以让我们使用类似编程语言的语法来编写 CSS，比原生 CSS 更加简洁、易读和易维护。SASS 的主要功能包括变量、嵌套规则、混合模式、函数和继承。

下面是一个简单的 SASS 示例代码：

$primary-color: #007bff;

.btn {
  color: $primary-color;
  background-color: white;
  border: 1px solid $primary-color;
  
  &:hover {
    background-color: $primary-color;
    color: white;
  }
}

在上面的代码中，我们定义了一个名为 $primary-color 的变量，它的值是蓝色。然后我们定义了一个 .btn 类，规定了按钮的颜色、背景色和边框样式，并在按钮被鼠标悬停时改变了背景色和字体颜色。

使用 SASS 可以让我们在写样式时更加方便和灵活，同时也能减少代码的冗余，提高代码的可维护性和重用性。

Bootstrap

Bootstrap 是一个流行的前端框架，由 Twitter 开发。它提供了一系列的样式和组件，包括网格系统、表格、表单、导航栏、标签页、警告框等，可以帮助我们快速构建响应式的网站。

下面是一个使用 Bootstrap 布局的示例代码：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">左侧栏</div>
    <div class="col-md-9">内容区</div>
  </div>
</div>

在上面的代码中，我们使用了 .container-fluid 类来创建一个全宽度的容器，然后使用 .row 类创建一行，并在这一行中使用 .col-md-3 类和 .col-md-9 类分别定义了两列，其中前者占据了 3/12 的宽度，后者则占据了 9/12 的宽度。

使用 Bootstrap 可以让我们快速构建响应式网站，而且还可以减少代码的编写量和提高网站的兼容性和可维护性。

实战演练

下面我们将介绍如何使用 SASS 和 Bootstrap 制作一个响应式的网站，包括页面头部、导航栏、内容区和底部。

页面头部

首先我们创建一个名为 header.html 的文件，并在文件中添加如下代码：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>响应式网站</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.scss">
</head>
<body>
  <header>
    <div class="container-fluid bg-primary">
      <div class="row">
        <div class="col-md-2">
          <a href="#" class="navbar-brand">LOGO</a>
        </div>
        <div class="col-md-10">
          <h1 class="text-center text-white py-3">响应式网站</h1>
        </div>
      </div>
    </div>
  </header>

在上面的代码中，我们首先引入了 Bootstrap 的 CSS 文件和 style.scss 文件。然后我们在页面中添加了一个页面头部，使用了 .container-fluid 类创建一个全宽度的容器，并在容器中分别添加了两列，左侧列中包含了一个 LOGO，右侧列中显示了网站的标题。

导航栏

接下来我们需要添加一个导航栏，在 header 中添加如下代码：

    <nav class="navbar navbar-expand-md navbar-light bg-light">
      <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">首页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">关于我们</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">联系我们</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

在上面的代码中，我们使用了 .navbar-expand-md 类来将导航栏扩展到中型设备，使用了 .navbar-light 类来设置导航栏背景色为浅色，并使用了 .navbar-toggler 类创建了一个响应式的折叠按钮。然后我们在导航栏中添加了三个菜单项，分别指向首页、关于我们和联系我们。

内容区

接下来我们需要在页面中添加一个内容区，以显示网站的主要内容。在 index.html 文件中添加如下代码：

  <main class="container my-5">
    <div class="row">
      <div class="col-md-3">
        <div class="card mb-3">
          <img src="https://via.placeholder.com/300x200.png?text=Card+Image" class="card-img-top" alt="Card Image">
          <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">Card Text</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card mb-3">
          <img src="https://via.placeholder.com/300x200.png?text=Card+Image" class="card-img-top" alt="Card Image">
          <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">Card Text</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card mb-3">
          <img src="https://via.placeholder.com/300x200.png?text=Card+Image" class="card-img-top" alt="Card Image">
          <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">Card Text</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card mb-3">
          <img src="https://via.placeholder.com/300x200.png?text=Card+Image" class="card-img-top" alt="Card Image">
          <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">Card Text</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
    </div>
  </main>

在上面的代码中，我们使用了 .container 类来创建一个固定宽度的容器，并在容器中创建了一个包含 4 个列的行，每列中显示了一张图片、一个标题、一段文本和一个"阅读更多"按钮。我们使用了 Bootstrap 的卡片组件来美化图片和文本的排版，同时也让网站看起来更加现代化和美观。

底部

最后我们需要添加一个页面底部，在 index.html 文件中添加如下代码：

  <footer class="bg-secondary text-center py-3 mt-auto">
    <p class="text-white">版权所有 © 2021 响应式网站</p>
  </footer>
</body>
</html>

在上面的代码中，我们创建了一个带有灰色背景的底部，并在底部中添加了一个版权声明。使用 .text-center 类可以让文本在页面中居中显示，使用 .py-3 类可以设置内边距的大小，使用 .mt-auto 类可以让底部在页面内容不足时自动定位在页面底部。

总结

在本文中，我们介绍了如何使用 SASS 和 Bootstrap 制作响应式网站。SASS 可以让我们使用类似编程语言的语法来编写 CSS，提高代码的可维护性和重用性，而 Bootstrap 可以帮助我们快速构建响应式的网站，同时也可以减少代码的编写量和提高网站的兼容性和可维护性。通过实战演练，我们学习了如何使用 SASS 和 Bootstrap 分别创建页面头部、导航栏、内容区和底部，以及如何使用 Bootstrap 的卡片组件创建图片和文本的排版。希望本文可以帮助读者更加深入地理解响应式网站的设计和实现，让学习和开发更加高效和愉悦。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65af8203add4f0e0ff8f3a04

阅读全文

精选内容

相关推荐

    暂无