📌  相关文章
📜  md bootstrap cdn - Html (1)

📅  最后修改于: 2023-12-03 15:32:52.172000             🧑  作者: Mango

使用 MD Bootstrap CDN 构建漂亮的 HTML 网站

MD Bootstrap 是一套由 Bootstrap 样式库和 Material Design 设计规范组成的工具，可以让开发者快速构建漂亮且高效的网站。在本文中，我们将介绍如何使用 MD Bootstrap CDN 来构建 HTML 网站。

引入 MD Bootstrap CDN

要使用 MD Bootstrap CDN 构建网站，我们需要在 HTML 文件中引用以下代码片段：

<!-- MD Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" integrity="sha512-s1ZJNPP5C2zYaSwIQkhPMCLaRWtSWAS/cVIa0g+gsNHzAj9TAYBToaTiFHu5b9oQ/DKvQxItiWAhb6XNVE0oBg==" crossorigin="anonymous" />

<!-- MD Bootstrap JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js" integrity="sha512-3slA/VpvFtKBHrQb+j8e0D8SgbkNgja3yM7l4iIB4YSsbZV5yTbXw+kOa8irI0p6hVfg4EL9Fvig8xdnwzSdIg==" crossorigin="anonymous"></script>

这两行代码将引用 MD Bootstrap 最新版本的 CSS 和 JS 文件。将这两行代码添加到你的 HTML 文件中的 <head> 标签中，你就可以开始使用 MD Bootstrap 对你的网站进行美化了。

更改文本和颜色

要使用 MD Bootstrap 快速美化你的网站，可以通过以下方法更改文本和颜色。

更改文本

MD Bootstrap 提供了多种方式来更改文本风格。你可以通过以下方法来更改文本：

  • 使用 h1 ~ h6 标签来设置标题。
  • 使用 p 标签来设置段落文本。
  • 使用 a 标签来创建链接。
  • 使用 span 标签来设置内联文本。

除了标准的 HTML 的标签之外，MD Bootstrap 还提供了一些方便的类来帮助定制文本，如下所示：

| 类名 | 作用 | |-----|-----| | text-primary | 将文本的颜色更改为主色 | | text-secondary | 将文本的颜色更改为次要颜色 | | text-success | 将文本的颜色更改为绿色，表示成功 | | text-danger | 将文本的颜色更改为红色，表示出错 | | text-info | 将文本的颜色更改为蓝色，表示信息 | | text-warning | 将文本的颜色更改为黄色，表示警告 | | text-muted | 将文本的颜色更改为灰色，表示禁用或未激活 | | font-weight-bold | 将文本加粗 | | font-weight-normal | 恢复文本正常字体 |

例如，以下代码将创建一个段落，该段落的文本颜色为蓝色：

<p class="text-primary">这是一段蓝色的文本。</p>
更改颜色

在 MD Bootstrap 中，你可以使用多种方式来自定义颜色。你可以通过以下方式来更改 MD Bootstrap 的颜色：

  • 更改 $primary-color 变量来更改主色调。
  • 更改 $secondary-color 变量来更改次要颜色。
  • 更改 $success-color 变量来更改成功状态的颜色。
  • 更改 $danger-color 变量来更改危险状态的颜色。
  • 更改 $warning-color 变量来更改警告状态的颜色。
  • 更改 $info-color 变量来更改信息状态的颜色。
  • 更改 $light-color 变量来更改轻颜色。
  • 更改 $dark-color 变量来更改暗颜色。

例如，以下代码将更改主色调为红色：

<style>
    :root {
        --primary-color: #ff0000;
    }
</style>
使用组件

MD Bootstrap 提供了多个预定义的组件，可帮助你快速构建漂亮且高效的网站。以下是一些常用的组件。

响应式导航栏

MD Bootstrap 提供了一个响应式导航栏，可以在浏览器窗口大小变化时自适应调整大小。要使用响应式导航栏，请按以下步骤进行操作。

创建导航栏

使用以下代码来创建导航栏：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

添加下拉菜单

要添加下拉菜单，请在列表项中添加包含下拉菜单的子列表。请按以下示例操作：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</li>

上面的代码将创建一个名为 Dropdown 的下拉菜单。

卡片

MD Bootstrap 提供了多种卡片变体，可以在网站上显示各种内容。要创建卡片，请按以下步骤进行操作。

创建卡片

使用以下代码片段来创建卡片：

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

上面的代码将创建一张带有标题，图像和按钮的卡片。

使用卡片变体

卡片还有多种变体。以下是一些常见的卡片变体：

| 类名 | 作用 | |-----|-----| | .card-header | 添加一个卡片头部 | | .card-footer | 添加一个卡片底部 | | .card-primary | 将卡片的主颜色更改为 $primary-color | | .card-secondary | 将卡片的次要颜色更改为 $secondary-color | | .card-success | 将卡片的颜色更改为绿色，表示成功 | | .card-danger | 将卡片的颜色更改为红色，表示出错 | | .card-warning | 将卡片的颜色更改为黄色，表示警告 | | .card-info | 将卡片的颜色更改为蓝色，表示信息 | | .card-muted | 将卡片的颜色更改为灰色，表示禁用或未激活 |

例如，以下代码将创建一个带有头部和底部的红色卡片：

<div class="card card-danger">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer">
    Footer
  </div>
</div>
结论

在本文中，我们介绍了如何使用 MD Bootstrap CDN 来构建漂亮的 HTML 网站。我们了解了如何更改文本和颜色，以及如何使用组件（如响应式导航栏和卡片）来快速构建网站。如果你正在寻找一种快速且易于使用的方法来构建漂亮的 HTML 网站，那么 MD Bootstrap 绝对是一个值得一试的东西。