Angular MDBootstrap数字内容

MDBootstrap是一个基于Material Design和bootstrap的Angular UI库，以其无缝和易于使用的组件来制作好看的网页。它对个人和商业使用都是免费的。

在这篇文章中，我们将了解如何在Angular MDBootstap中使用数字内容。数字内容用于在一个元素中添加数字。

MDBootstrap数字是用来显示带有标题的图片的。一个标题可以是左对齐或右对齐，默认是左对齐。请确保你已经在你的标签中添加了’img-fluid’类，以使你的图片有反应。

语法:

<figure class="figure">
    <img src="link">
        <figcaption class="figure-caption">
            GeeksforGeeks
        </figcaption>
</figure>

步骤:

下载 Angular MDBootstrap from: https://mdbootstrap.com/docs/angular/getting-started/installation/
提取文件并切换到工作目录。
使用以下命令在当前项目中安装npm。

npm install
or 
npm install -y

在创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

使用以下命令启动服务器。

ng serve

项目结构：完成安装后，它将看起来像下面这样。

Angular MDBootstrap数字内容

例子1：这是一个基本的例子，说明了如何使用数字内容。

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Figures Content</h4>
    <br />
    <figure class="figure">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
            class="figure-img img-fluid z-depth-1" 
            style="width: 400px">
        <figcaption class="figure-caption">
            GeeksforGeeks
        </figcaption>
    </figure>
</div>

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
  
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';
  
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MDBBootstrapModule.forRoot(),
        FormsModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出:

Angular MDBootstrap数字内容