使用Bootstrap创建Material Design Web应用程序

最新推荐文章于 2024-04-27 09:39:39 发布

cunjie3951

最新推荐文章于 2024-04-27 09:39:39 发布

阅读量1k

点赞数

文章标签：定位 css html java js ViewUI

本文介绍如何利用MDBootstrap（Bootstrap 4的Material Design版本）为Web项目添加Material Design风格。通过简单的步骤，包括设定、创建标题、使用网格系统和创建表格，您可以创建响应式的Material Design网页。MDBootstrap提供了500多个组件，支持多种JavaScript框架，并依赖于Bootstrap、jQuery和Font Awesome。通过添加特定的CSS和JS文件，您可以快速开始构建具有导航栏、卡片和表单的网页。

摘要由CSDN通过智能技术生成

Google的Material Design在现代移动应用程序中无处不在。也许是因为当今大多数人都喜欢它的大胆颜色，微妙的阴影和简约的布局。如果您可以轻松地将相同的设计语言应用于您的网站，并为访问者提供他们习惯的用户体验，那不是很好吗？好吧，有了MDBootstrap ，您可以。

MDBootstrap，也称为Bootstrap 4的Material Design，是一个开源UI套件，它使您可以使用Bootstrap 4（您可能已经熟悉CSS框架）来创建具有Material Design外观的完全响应式网站。它带有500多个组件，数十种动画，并支持多个JavaScript框架，包括jQuery，Vue和React。

在本循序渐进的教程中，我将向您展示如何将MDBootstrap UI套件添加到您的Web项目中并使用其某些组件。

1.设定

MDBootstrap在cdnjs和其他几个CDN上可用。因此，您无需将其下载到计算机即可使用。但是，将其及其所有依赖项添加到网页中仅需几分钟。

首先创建一个新HTML文档，然后使用您喜欢的文本编辑器将其打开。然后向其中添加以下HTML5样板代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Page</title>
  </head>
  <body>
  
  </body>
</html>

MDBootstrap UI套件仅包含两个缩小的文件： mdb.min.css和mdb.min.js。 但是，它确实依赖Bootstrap，jQuery和Font Awesome来提供一些功能。

因此，在HTML5文档的head标签内，添加以下link标签：

<link rel="stylesheet"
   href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link rel="stylesheet"
   href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet"
   href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.10/css/mdb.min.css">

接下来，在文档body的末尾添加以下script标签：

<script type="text/javascript" 
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">    
</script>
<script type="text/javascript" 
    src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js">    
</script>
<script type="text/javascript" 
    src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.10/js/mdb.min.js">    
</script>

此时，网页已准备好显示Material Design组件。

2.创建标题

材料设计网页的第一部分通常是标题。它充当导航栏的容器，您不仅可以在其中显示公司的徽标和名称，还可以添加指向网站其他重要页面的链接。在Material Design规范中，导航栏通常称为顶部应用栏。

要创建标题，您所需要做的就是使用header标记。但是，创建导航栏会涉及更多的工作。

首先，您必须创建一个nav标签并将navbar类分配给它。这将创建一个带有白色背景的基本导航栏。如果要从“材质”调板为其提供颜色，则可以使用许多可用的颜色类别之一。它们具有直观的名称，例如， purple ， red和blue-grey 。

然后，在标签内，您可以使用navbar-brand类，同时指定公司的名称或徽标。

<header>
    <nav class="navbar purple navbar-dark navbar-expand-md">
       <a class="navbar-brand" href="https://example.com">
        Bob's Store
       </a>
       <!-- More code here-->
    </nav>
</header>

请注意，在导航栏上使用深色时，应向其添加navbar-dark类，以确保其中的文本可读。

包括创建指向网站其他页面的链接，就像创建一个具有navbar-nav类的无序列表（其项具有nav-item类）一样容易。

<ul class="navbar-nav ml-auto">
    <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Products</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Offers</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">About Us</a>
    </li>
</ul>

在上面的代码中， ml-auto类将链接推到导航栏的另一端。

如果现在尝试在浏览器中查看网页，应该会看到一个标题，如下所示：

3.使用网格

要将实际内容添加到网页，您将要使用Bootstrap提供的响应式网格系统。举一个现实的例子，让我们在页面上添加两张卡片，将它们放在两行的单行中。

首先使用container类创建一个div元素。它将用作我们添加到此文档的所有行和列的容器。在其中，您可以使用row和col-md类创建行和列。因为所有这些将成为页面的主要内容，所以最好将其包装在main标签中。

<main>
    <div class="container">
        <div class="row">
            <div class="col-md">
                
            </div>
            <div class="col-md">
            
            </div>
        </div>
    </div>
</main>

col-md类确保两列的宽度相同，并适合宽度至少为768像素的屏幕上的行。要针对较小或较大的屏幕，请随时尝试使用col-sm和col-lg类。

现在，您可以使用card类在两列中创建卡。使用MDBootstrap，您的卡片可以包含图像，标题，按钮和文本。这是包含所有示例卡的代码：

<div class="card">

  <img class="card-img-top" src="tomatoes.jpg">
  
  <div class="card-body">
    <h4 class="card-title"><a>Cherry tomatoes to get costlier</a></h4>
    <p class="card-text">With a no-deal Brexit, you're likely to 
    pay 10% more for cherry tomatoes next month.</p>
    <a href="#" class="btn btn-primary">More</a>
  </div>

</div>

同样，继续，然后在页面的第二栏中添加另一张卡片。为了获得最佳效果，建议您使用具有相同尺寸的图像。

<div class="card">

  <img class="card-img-top" src="raw.jpg">
  
  <div class="card-body">
    <h4 class="card-title"><a>Raw fruits and vegetables for breakfast?</a></h4>
    <p class="card-text">Raw fruits and vegetables that have been thinly sliced are great way to start your day.</p>
    <a href="#" class="btn btn-primary">More</a>
  </div>

</div>

您可能已经注意到，该工具包具有直观命名的类，例如card-title和card-text ，可以帮助您快速设置卡片内容的样式。同样， btn和btn-primary类可以帮助您将Material样式赋予按钮。

经过上述所有更改，您的网页应如下所示：

4.创建表格

材料设计表单具有非常独特的外观和感觉。设计语言详尽地介绍了每个表单元素的外观，何时使用以及放置的位置。

MDBootstrap具有多个HTML5表单元素的样式。通过使用它们，可以确保您的表单符合材料设计的大多数准则。

现在，让我们创建一个简单的表单，您的访客可以用来注册新闻稿。它将具有两个文本字段，一个用于名称，一个用于电子邮件地址。此外，它将具有一个提交按钮。

表单将需要其自己的行和列，因此必须首先创建它们。由于它是单独存在的，因此默认情况下该列将拉伸以填充整个行。通过使用数字限定col-md类，并使用offset-md类，您可以控制行中列的大小和位置。

<div class="row mt-4 mb-4">
    <div class="col-md-8 offset-md-2">
        <!-- more code here -->                                    
    </div>
</div>

在上面的代码中， mt-4和mb-4类为行提供了适当的顶部和底部边距。

在列内，创建另一个卡。它将用作表单以及与之关联的所有文本的容器。（可选）您可以使用card-header类为card-header提供标题，从而为表格提供标题。

<div class="card">
    <h4 class="card-header white-text purple">Subscribe to us</h4>                        
    <div class="card-body">
        <!-- more code here -->
    </div>
</div>

要创建表单，您只需要form标记。但是您必须记住将form-control类添加到添加到form-control每个文本字段中。如果您有与其关联的标签，则还必须将它们都包装在md-form类的div元素中。以下代码向您展示了如何：

<form>
    <p class="h6 grey-text">Stay updated and get the latest 
        information about all our offers and discounts right
        into your inbox.</p>
        
    <div class="md-form">
        <input type="text" id="fname" class="form-control"/>
        <label for="fname">Your full name</label>
    </div>
    
    <div class="md-form">
        <input type="email" id="email" class="form-control"/>
        <label for="email">Your email address</label>
    </div>
    
    <div class="d-flex justify-content-around">
        <input type="submit" 
            class="btn purple white-text" value="Submit"/>
    </div>
</form>

表单现在应该是这样的：