MDB基础知识三

最新推荐文章于 2024-04-09 09:40:54 发布

简·拉基

最新推荐文章于 2024-04-09 09:40:54 发布

阅读量718

点赞数

文章标签： web

原文链接：qige.io

版权

MDB基础知识三

1.概述
2. 页面结构及全屏视频背景
3. 页面主体-章节/Features/Projects
4. 页面主体-LightBox gallery
5. 页面主体-Testimonials
6. 页面主体-Articles
7. 页面主体-Contact/Footer
结语

1.概述

本教程将构建一个全屏的, 现代的, 用于展示作品的网站, 几乎所有的组件都需要 MDB Pro的支持。
原文出处棋哥教学网

我们将涉及以下内容:

What You’ll Learn
全屏视频背景
Features和Projects
灯箱图片集
字体
Sogou/Google/高德地图
图标/表单
轮播/幻灯片
使用自定义样式

2. 页面结构及全屏视频背景

页面基本结构

解压你下载的 MDB Pro 模板文件到某文件夹， code 中打开该文件夹（这是我们的工作目录）.
跟上一个教程一样, 打开index.html文件, 在中写入如下页面结构代码:

<!-- start your project here -->
<!--Main Navigation-->
<header>

</header>
<!--Main Navigation-->

<!--Main layout-->
<main>

</main>
<!--Main layout-->

<!--Footer-->
<footer>

</footer>
<!--Footer-->
<!-- end your project here -->

全屏页面展示我们已经在教程二中较详细的介绍过, 此处不再累述.
MDB还提供了更精致漂亮的全屏页面让我们直接使用. 前往MDB Intros文档查看, 选择某种你中意的模板即可

现在刷新页面, 你会发现有些问题, 如不是全屏等. 我们需要添加些样式在style.css 文件中:

/* Required for full background image */
html,
body,
header,
.view {
  height: 100%;
}

@media (max-width: 740px) {
  html,
  body,
  header,
  .view {
    height: 100vh;
  }
}

.top-nav-collapse {
  background-color: #563e91 !important;
}

.navbar:not(.top-nav-collapse) {
  background: transparent !important;
}

@media (max-width: 991px) {
  .navbar:not(.top-nav-collapse) {
    background: #563e91 !important;
  }
}

.rgba-gradient {
  background: -moz-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
  background: -webkit-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
  background: linear-gradient(to 45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
}

现在再试试. 现在页面背景上有动感的线条变换.
在这里插入图片描述

video元素

注意一下元素, 它会指定视频的源文件, 另外注意其有个属性poster即海报, 用于当某种原因视频不能呈现时显示该图片.

✍ 请留意: 无论哪种格式的视频, 都是属于页面中的重量级元素, 即获取它们是很耗时间的, 不能影响用户的体验.
🌏 推荐一个免费的高质量图片和视频网站Pexel Videos, 绝对值得你关注!

RGBA与渐变

留意样式表中的.rgba-gradient{}样式, 我们采用了45度的方向的两种 RGBA 颜色的渐变作为对背景的遮罩.

RGBA颜色即带透明通道的 RGB颜色搭配, 如下图展示了带透明度的红色:
在这里插入图片描述
CSS的渐变(gradient)展示了在两种颜色间的平滑过渡, 有两种方式:

线性渐变(Linear): 上下, 左右, 对角线渐变
中心渐变(Radial): 以中心径向渐变

🌏 一个非常方便的, 颜色搭配和谐的在线渐变生成器uiGradients值得你前往!
更改页面的渐变
将我们样式表的.rgba-gradient{}样式改为如下:

.rgba-gradient {
    /* fallback for old browsers */
    background: rgba(35, 7, 77, 0.6);
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, rgba(204, 83, 51, 0.6), rgba(35, 7, 77, 0.6));
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, rgba(204, 83, 51, 0.6), rgba(35, 7, 77, 0.6));
}

在这里插入图片描述

更改导航条
下面我们把导航条中的

的超链接改为跟我们页面相符的内容

<ul class="navbar-nav mr-auto smooth-scroll">
  <li class="nav-item">
    <a class="nav-link" href="#intro">Home
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#about" data-offset="90">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#projects" data-offset="90">Projects</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#gallery" data-offset="90">Gallery</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#testimonials" data-offset="30">Testimonials</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#articles" data-offset="90">Articles</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#contact" data-offset="90">Contact</a>
  </li>
</ul>

3. 页面主体-章节/Features/Projects

主体结构

我们先来构建页面主体的章节结构. 将元素替换为如下代码:

<!--Main layout-->
<main>

  <!--Section: about-->
  <section id="about" class="py-5">

    <!-- Container -->
    <div class="container">
      <!-- Section heading -->
      <h2 class="h1-responsive font-weight-bold text-center mb-5">Why is it so great?</h2>
      <!-- Section description -->
      <p class="lead grey-text text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet,
        consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam.
      </p>
    </div>
    <!-- Container -->

  </section>
  <!--Section: about-->

  <!--Section: projects-->
  <section id="projects" class="text-center py-5" style="background-color: #eee;">

    <!-- Container -->
    <div class="container">

      <!-- Section heading -->
      <h2 class="h1-responsive font-weight-bold mb-5">Our best projects</h2>
      <!-- Section description -->
      <p class="grey-text w-responsive mx-auto mb-5">Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p>

    </div>
    <!-- Container -->

  </section>
  <!--Section: projects-->

  <!--Section: gallery-->
  <section id="gallery" class="text-center py-5">

    <!-- Container -->
    <div class="container">

      <!-- Section heading -->
      <h2 class="h1-responsive font-weight-bold mb-5">Gallery</h2>
      <!-- Section description -->
      <p class="grey-text w-responsive mx-auto mb-5">Duis aute irure dolor in reprehenderit in
        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p>

    </div>
    <!-- Container -->

  </section>
  <!--Section: gallery-->

  <!--Section: testimonials-->
  <section id="testimonials" class="text-center py-5" style="background-color: #eee;">

    <!-- Container -->
    <div class="container">

      <!-- Section heading -->
      <h2 class="h1-responsive font-weight-bold mb-5">Testimonials</h2>

    </div>
    <!-- Container -->

  </section>
  <!--Section: testimonials-->

  <!--Section: call to action-->
  <section id="">



  </section>
  <!--Section: call to action-->

  <!--Section: articles-->
  <section id="articles" class="text-center py-5">

    <!-- Container -->
    <div class="container">

      <!-- Section heading -->
      <h2 class="h1-responsive font-weight-bold mb-5">Articles</h2>

    </div>
    <!-- Container -->

  </section>
  <!--Section: articles-->

  <!--Section: contact-->
  <section id="contact" class="py-5" style="background-color: #eee;">

    <div class="container">

    </div>

  </section>
  <!--Section: contact-->

</main>
<!--Main layout-->

在这里插入图片描述
刷新页面看看.

说明如下:

我们使用<section>将页面主题总共分为About/Projects/Gallery/Testimonials/Articles/Contact六个部分, 与导航条对应.
为每个<section>都设置了 ID, 以能够进行页内导航
在

之间我们设置了py-5上下内边距
我们通过style="background-color: #eee;"内联样式为偶数的section设置了灰色背景以区分
每个section中我们都使用了container, 拟使用Bootstrap的网格系统来进行布局
Negative:✎ 试一试: 上面的代码中我们总共为3个section设置了内联样式, 你有没有简便一点的方法能减少这种重复代码?

Features章节

MDB Pro版提供了很多的Features Sections文档. 将about章节替换为如下代码:

<!--Section: about-->
<section id="about" class="py-5">

  <!-- Container -->
  <div class="container">
    <!-- Section heading -->
    <h2 class="h1-responsive font-weight-bold text-center mb-5">Why is it so great?</h2>
    <!-- Section description -->
    <p class="lead grey-text text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet,
      consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
      adminim veniam.
    </p>
    <!-- Grid row -->
    <div class="row">

      <!-- Grid column -->
      <div class="col-lg-5 text-center text-lg-left">
        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/screens-section.jpg"
          alt="Sample image">
      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-lg-7">

        <!-- Grid row -->
        <div class="row mb-3">

          <!-- Grid column -->
          <div class="col-1">
            <i class="fas fa-share fa-lg indigo-text"></i>
          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="col-xl-10 col-md-11 col-10">
            <h5 class="font-weight-bold mb-3">Safety</h5>
            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,
              quis
              nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>
          </div>
          <!-- Grid column -->

        </div>
        <!-- Grid row -->

        <!-- Grid row -->
        <div class="row mb-3">

          <!-- Grid column -->
          <div class="col-1">
            <i class="fas fa-share fa-lg indigo-text"></i>
          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="col-xl-10 col-md-11 col-10">
            <h5 class="font-weight-bold mb-3">Technology</h5>
            <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,
              quis
              nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>
          </div>
          <!-- Grid column -->

        </div>
        <!-- Grid row -->

        <!--Grid row-->
        <div class="row">

          <!-- Grid column -->
          <div class="col-1">
            <i class="fas fa-share fa-lg indigo-text"></i>
          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class="col-xl-10 col-md-11 col-10">
            <h5 class="font-weight-bold mb-3">Finance</h5>
            <p class="grey-text mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima
              veniam,
              quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>
          </div>
          <!-- Grid column -->

        </div>
        <!--Grid row-->

      </div>
      <!--Grid column-->

    </div>
    <!-- Grid row -->

  </div>
  <!-- Container -->

</section>
<!--Section: about-->

为保证颜色的一致性, 将三个图标的颜色更改为紫色的

<i class="fas fa-share fa-lg purple-text"></i>

在这里插入图片描述

Projects章节

下面我们来构建下一个章节. MDB Pro版提供了不少的Projects Sections文档. 替换页面的Projects章节为如下代码:

<!--Section: projects-->
<section id="projects" class="text-center py-5" style="background-color: #eee;">

  <!-- Container -->
  <div class="container">

    <!-- Section heading -->
    <h2 class="h1-responsive font-weight-bold mb-5">Our best projects</h2>
    <!-- Section description -->
    <p class="grey-text w-responsive mx-auto mb-5">Duis aute irure dolor in reprehenderit in
      voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p>

    <!-- Grid row -->
    <div class="row text-center">

      <!-- Grid column -->
      <div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
        <!--Featured image-->
        <div class="view overlay rounded z-depth-1">
          <img src="https://mdbootstrap.com/img/Photos/Others/images/58.jpg" class="img-fluid"
            alt="Sample project image">
          <a>
            <div class="mask rgba-white-slight"></div>
          </a>
          <!--Excerpt-->
          <div class="card-body pb-2">
            <h4 class="font-weight-bold my-3">Title of the news</h4>
            <p class="grey-text">Temporibus autem quibusdam et aut officiis debitis aut rerum
              necessitatibus saepe eveniet ut et voluptates repudiandae.
            </p>
            <a class="btn btn-purple btn-sm"><i class="fas fa-clone left"></i> View project</a>
          </div>
        </div>
      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-lg-4 col-md-6 mb-md-0 mb-4">
        <!--Featured image-->
        <div class="view overlay rounded z-depth-1">
          <img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid"
            alt="Sample project image">
          <a>
            <div class="mask rgba-white-slight"></div>
          </a>
          <!--Excerpt-->
          <div class="card-body pb-2">
            <h4 class="font-weight-bold my-3">Title of the news</h4>
            <p class="grey-text">Temporibus autem quibusdam et aut officiis debitis aut rerum
              necessitatibus saepe eveniet ut et voluptates repudiandae.
            </p>
            <a class="btn btn-purple btn-sm"><i class="fas fa-clone left"></i> View project</a>
          </div>
        </div>
      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-lg-4 col-md-6">
        <!--Featured image-->
        <div class="view overlay rounded z-depth-1">
          <img src="https://mdbootstrap.com/img/Photos/Others/images/88.jpg" class="img-fluid"
            alt="Sample project image">
          <a>
            <div class="mask rgba-white-slight"></div>
          </a>
          <!--Excerpt-->
          <div class="card-body pb-2">
            <h4 class="font-weight-bold my-3">Title of the news</h4>
            <p class="grey-text">Temporibus autem quibusdam et aut officiis debitis aut rerum
              necessitatibus saepe eveniet ut et voluptates repudiandae.
            </p>
            <a class="btn btn-purple btn-sm"><i class="fas fa-clone left"></i> View project</a>
          </div>
        </div>
      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row -->

  </div>
  <!-- Container -->

</section>
<!--Section: projects-->

在这里插入图片描述

4. 页面主体-LightBox gallery

MDB Pro版给我们提供了多种灯箱效果的图片展示方式. 所谓灯箱效果(LightBox), 即首先展示的是缩略图, 点击后才显示大图.
替换页面Gallery章节代码如下:

<!--Section: gallery-->
<section id="gallery" class="text-center py-5">

  <!-- Container -->
  <div class="container">

    <!-- Section heading -->
    <h2 class="h1-responsive font-weight-bold mb-5">LightBox Gallery</h2>
    <!-- Section description -->
    <p class="grey-text w-responsive mx-auto mb-5">Duis aute irure dolor in reprehenderit in
      voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p>

    <div class="row">
      <div class="col-md-12">

        <div id="mdb-lightbox-ui"></div>

        <div class="mdb-lightbox">

          <figure class="col-md-4">
            <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg" data-size="1600x1067">
              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(145).jpg" class="img-fluid z-depth-1-half">
            </a>
          </figure>

          <figure class="col-md-4">
            <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).jpg" data-size="1600x1067">
              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(150).jpg" class="img-fluid z-depth-1-half" />
            </a>
          </figure>

          <figure class="col-md-4">
            <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).jpg" data-size="1600x1067">
              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(152).jpg" class="img-fluid z-depth-1-half" />
            </a>
          </figure>

          <figure class="col-md-4">
            <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).jpg" data-size="1600x1067">
              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).jpg" class="img-fluid z-depth-1-half" />
            </a>
          </figure>

          <figure class="col-md-4">
            <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).jpg" data-size="1600x1067">
              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(151).jpg" class="img-fluid z-depth-1-half" />
            </a>
          </figure>

          <figure class="col-md-4">
            <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).jpg" data-size="1600x1067">
              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(40).jpg" class="img-fluid z-depth-1-half" />
            </a>
          </figure>

          <figure class="col-md-4">
            <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148).jpg" data-size="1600x1067">
              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(148).jpg" class="img-fluid z-depth-1-half" />
            </a>
          </figure>

          <figure class="col-md-4">
            <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147).jpg" data-size="1600x1067">
              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" class="img-fluid z-depth-1-half" />
            </a>
          </figure>

          <figure class="col-md-4">
            <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149).jpg" data-size="1600x1067">
              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(149).jpg" class="img-fluid z-depth-1-half" />
            </a>
          </figure>

        </div>

      </div>
    </div>

  </div>
  <!-- Container -->

</section>
<!--Section: gallery-->

在这里插入图片描述
上面代码中的图片部分：

<figure class="col-md-4">
    <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg"
        data-size="1600x1067">
        <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(145).jpg"
            class="img-fluid">
    </a>
</figure>

你1会发现我们提供了两种尺寸的图片:

大的, 高质量的图片(原始图)
小的, 低分辨率的缩略图(thumbnail)
这种方式现在非常常见, 主要是为了页面性能考虑. 用户需要查看时才获取该图片, 而不是全部都下载, 提高了页面加载速度.

然而, 刷新页面, 点击某缩略图, 你发现了问题: 大图不能显示?
这是因为这种操作一定需要跟JavaScript代码结合才能生效. 将下面代码添加到页面底部自定义JS区域:

<!-- Your custom scripts (optional) -->
  <script type="text/javascript">
    // MDB Lightbox Init
    $(function () {
      $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
    });
  </script>

刷新, 你仍然没看到大图! Ctrl+Shift+C打开浏览器控制台, 在Console面板, 你一定会看到如下错误信息:

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

什么意思呢? 简单的说, 当前我们的页面是以文件的形式打开的, 为安全考虑, 浏览器禁止了这种跨源请求行为.
我们需要部署网站到Web服务器中!

超强的Web服务器-Nginx
在Nginx官网下载最新的版本Nginx1.17. 这是一个压缩文件, 解压到非C盘即可如D:\nginx, 打开该目录, 你看看到有一个文件夹html, 这就是你网站文件所在.

假设你的项目文件夹名为myMDB, 复制该文件夹到html即可.
当前的路径结构应该是D:\nginx\html\myMDB, 双击Nginx的安装目录下的nginx.exe文件, 那么你就在本地运行了一个Web服务器.

现在浏览器地址栏中输入localhost/myMDB/, 你应该看到我们开发的页面. 试试大图是否可以打开了.

✘ 如果你理解以上内容有些困难, 暂时忽略它吧.

5. 页面主体-Testimonials

MDB Pro版给我们提供了不同种类的感言Testimonials. 将页面中Testimonials章节替换为如下代码:

<!-- Section: Testimonials v.4 -->
<section id="testimonials" class="text-center py-5" style="background-color: #eee;">

  <!-- Section heading -->
  <h2 class="h1-responsive font-weight-bold my-5">Testimonials v.4</h2>

  <!-- Grid row -->
  <div class="row">

    <!--Carousel Wrapper-->
    <div id="multi-item-example" class="carousel testimonial-carousel slide carousel-multi-item mb-5"
      data-ride="carousel">

      <!--Controls-->
      <div class="controls-top">
        <a class="btn-floating light-blue darken-4" href="#multi-item-example" data-slide="prev"><i
            class="fas fa-chevron-left"></i></a>
        <a class="btn-floating light-blue darken-4" href="#multi-item-example" data-slide="next"><i
            class="fas fa-chevron-right"></i></a>
      </div>
      <!--Controls-->

      <!--Indicators-->
      <ol class="carousel-indicators">
        <li data-target="#multi-item-example" data-slide-to="0" class="active light-blue darken-4"></li>
        <li data-target="#multi-item-example" data-slide-to="1" class="light-blue darken-4"></li>
        <li data-target="#multi-item-example" data-slide-to="2" class="light-blue darken-4"></li>
      </ol>
      <!--Indicators-->

      <!--Slides-->
      <div class="carousel-inner" role="listbox">

        <!--First slide-->
        <div class="carousel-item active">

          <!--Grid column-->
          <div class="col-md-4">
            <div class="testimonial">
              <!--Avatar-->
              <div class="avatar mx-auto">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).jpg"
                  class="rounded-circle img-fluid">
              </div>
              <!--Content-->
              <h4 class="font-weight-bold mt-4">Anna Deynah</h4>
              <h6 class="blue-text font-weight-bold my-3">Web Designer</h6>
              <p class="font-weight-normal"><i class="fas fa-quote-left pr-2"></i>Lorem ipsum dolor sit amet,
                consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
              <!--Review-->
              <div class="grey-text">
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star-half-alt"> </i>
              </div>
            </div>
          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-md-4 clearfix d-none d-md-block">
            <div class="testimonial">
              <!--Avatar-->
              <div class="avatar mx-auto">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg"
                  class="rounded-circle img-fluid">
              </div>
              <!--Content-->
              <h4 class="font-weight-bold mt-4">John Doe</h4>
              <h6 class="blue-text font-weight-bold my-3">Web Developer</h6>
              <p class="font-weight-normal"><i class="fas fa-quote-left pr-2"></i>Ut enim ad minima veniam,
                quis
                nostrum exercitationem ullam corporis laboriosam.</p>
              <!--Review-->
              <div class="grey-text">
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
              </div>
            </div>
          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-md-4 clearfix d-none d-md-block">
            <div class="testimonial">
              <!--Avatar-->
              <div class="avatar mx-auto">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg"
                  class="rounded-circle img-fluid">
              </div>
              <!--Content-->
              <h4 class="font-weight-bold mt-4">Abbey Clark</h4>
              <h6 class="blue-text font-weight-bold my-3">Photographer</h6>
              <p class="font-weight-normal"><i class="fas fa-quote-left pr-2"></i>Quis autem vel eum iure
                reprehenderit qui in ea voluptate velit esse quam nihil molestiae.</p>
              <!--Review-->
              <div class="grey-text">
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="far fa-star"> </i>
              </div>
            </div>
          </div>
          <!--Grid column-->

        </div>
        <!--First slide-->

        <!--Second slide-->
        <div class="carousel-item">

          <!--Grid column-->
          <div class="col-md-4">
            <div class="testimonial">
              <!--Avatar-->
              <div class="avatar mx-auto">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(4).jpg"
                  class="rounded-circle img-fluid">
              </div>
              <!--Content-->
              <h4 class="font-weight-bold mt-4">Blake Dabney</h4>
              <h6 class="blue-text font-weight-bold my-3">Web Designer</h6>
              <p class="font-weight-normal"><i class="fas fa-quote-left pr-2"></i>Ut enim ad minima veniam,
                quis
                nostrum exercitationem ullam corporis laboriosam.</p>
              <!--Review-->
              <div class="grey-text">
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star-half-alt"> </i>
              </div>
            </div>
          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-md-4 clearfix d-none d-md-block">
            <div class="testimonial">
              <!--Avatar-->
              <div class="avatar mx-auto">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(6).jpg"
                  class="rounded-circle img-fluid">
              </div>
              <!--Content-->
              <h4 class="font-weight-bold mt-4">Andrea Clay</h4>
              <h6 class="blue-text font-weight-bold my-3">Front-end developer</h6>
              <p class="font-weight-normal"><i class="fas fa-quote-left pr-2"></i>Lorem ipsum dolor sit amet,
                consectetur adipisicing elit. Quod eos id officiis hic tenetur quae.</p>
              <!--Review-->
              <div class="grey-text">
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
              </div>
            </div>
          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-md-4 clearfix d-none d-md-block">
            <div class="testimonial">
              <!--Avatar-->
              <div class="avatar mx-auto">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(7).jpg"
                  class="rounded-circle img-fluid">
              </div>
              <!--Content-->
              <h4 class="font-weight-bold mt-4">Cami Gosse</h4>
              <h6 class="blue-text font-weight-bold my-3">Phtographer</h6>
              <p class="font-weight-normal"><i class="fas fa-quote-left pr-2"></i>At vero eos et accusamus et
                iusto odio dignissimos ducimus qui blanditiis praesentium.</p>
              <!--Review-->
              <div class="grey-text">
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="far fa-star"> </i>
              </div>
            </div>
          </div>
          <!--Grid column-->

        </div>
        <!--Second slide-->

        <!--Third slide-->
        <div class="carousel-item">

          <!--Grid column-->
          <div class="col-md-4">
            <div class="testimonial">
              <!--Avatar-->
              <div class="avatar mx-auto">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(8).jpg"
                  class="rounded-circle img-fluid">
              </div>
              <!--Content-->
              <h4 class="font-weight-bold mt-4">Bobby Haley</h4>
              <h6 class="blue-text font-weight-bold my-3">Web Developer</h6>
              <p class="font-weight-normal"><i class="fas fa-quote-left pr-2"></i>Lorem ipsum dolor sit amet,
                consectetur adipisicing elit. Quod eos id officiis hic tenetur quae.</p>
              <!--Review-->
              <div class="grey-text">
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
              </div>
            </div>
          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-md-4 clearfix d-none d-md-block">
            <div class="testimonial">
              <!--Avatar-->
              <div class="avatar mx-auto">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg"
                  class="rounded-circle img-fluid">
              </div>
              <!--Content-->
              <h4 class="font-weight-bold mt-4">Elisa Janson</h4>
              <h6 class="blue-text font-weight-bold my-3">Marketer</h6>
              <p class="font-weight-normal"><i class="fas fa-quote-left pr-2"></i>At vero eos et accusamus et
                iusto odio dignissimos ducimus qui blanditiis praesentium.</p>
              <!--Review-->
              <div class="grey-text">
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star-half-alt"> </i>
              </div>
            </div>
          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-md-4 clearfix d-none d-md-block">
            <div class="testimonial">
              <!--Avatar-->
              <div class="avatar mx-auto">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg"
                  class="rounded-circle img-fluid">
              </div>
              <!--Content-->
              <h4 class="font-weight-bold mt-4">Rob Jacobs</h4>
              <h6 class="blue-text font-weight-bold my-3">Front-end developer</h6>
              <p class="font-weight-normal"><i class="fas fa-quote-left pr-2"></i>Ut enim ad minima veniam,
                quis
                nostrum exercitationem ullam corporis laboriosam.</p>
              <!--Review-->
              <div class="grey-text">
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="fas fa-star"> </i>
                <i class="far fa-star"> </i>
              </div>
            </div>
          </div>
          <!--Grid column-->

        </div>
        <!--Third slide-->

      </div>
      <!--Slides-->

    </div>
    <!--Carousel Wrapper-->

  </div>
  <!-- Grid row -->

</section>
<!-- Section: Testimonials v.4 -->

除此外, 你可能注意到在感言章节和文章章节之间有一个章节, 这是我们额外放置的一个, 让Jobs激励一下我们吧.
将代码替换如下:

<!--Section: call to action-->
<div class="streak streak-md streak-photo"
  style="background-image:url('https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img(115).jpg')">
  <div class="flex-center white-text rgba-black-light pattern-1">
    <ul class="mb-0 list-unstyled">
      <li>
        <h2 class="h2-responsive"><i class="fas fa-quote-left" aria-hidden="true"></i> The people who
          are
          crazy enough to think they can change the world are the ones who do. <i class="fas fa-quote-right"
            aria-hidden="true"></i></h2>
      </li>
      <li class="mb-0">
        <h5 class="text-center font-italic mb-0">~ Steve Jobs</h5>
      </li>
    </ul>
  </div>
</div>
<!--Section: call to action-->

注意到.pattern-1样式类了吗? 它提供了一种特殊的点状遮罩效果. 看参考MDB Mask文档

然后在自定义样式表文件style.css中添加如下代码, 让背景图片固定:

.streak.streak-photo {
  background-attachment: fixed;
}

6. 页面主体-Articles

在Articles章节我们将使用MDB Pro版提供的卡片.
将Articles章节的代码替换如下:

<!--Section: articles-->
<section id="articles" class="text-center py-5">

  <!-- Container -->
  <div class="container">

    <!-- Section heading -->
    <h2 class="h1-responsive font-weight-bold mb-5">Articles</h2>

    <!--Grid row-->
    <div class="row">

      <!--Grid column-->
      <div class="col-lg-4 col-md-12 mb-4">

        <!-- Card Narrower -->
        <div class="card card-cascade narrower">

          <!-- Card image -->
          <div class="view view-cascade overlay">
            <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg"
              alt="Card image cap">
            <a>
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!-- Card content -->
          <div class="card-body card-body-cascade">

            <!-- Label -->
            <h5 class="pink-text pb-2 pt-1"><i class="fas fa-utensils"></i> Culinary</h5>
            <!-- Title -->
            <h4 class="font-weight-bold card-title">Cheat day inspirations</h4>
            <!-- Text -->
            <p class="card-text">Ut enim ad minima veniam, quis nostrum exercitationem ullam
              corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>
            <!-- Button -->
            <a class="btn btn-unique">Button</a>

          </div>

        </div>
        <!-- Card Narrower -->

      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-lg-4 col-md-6 mb-4">

        <!-- Card Narrower -->
        <div class="card card-cascade narrower">

          <!-- Card image -->
          <div class="view view-cascade overlay">
            <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg"
              alt="Card image cap">
            <a>
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!-- Card content -->
          <div class="card-body card-body-cascade">

            <!-- Label -->
            <h5 class="pink-text pb-2 pt-1"><i class="fas fa-utensils"></i> Culinary</h5>
            <!-- Title -->
            <h4 class="font-weight-bold card-title">Cheat day inspirations</h4>
            <!-- Text -->
            <p class="card-text">Ut enim ad minima veniam, quis nostrum exercitationem ullam
              corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>
            <!-- Button -->
            <a class="btn btn-unique">Button</a>

          </div>

        </div>
        <!-- Card Narrower -->

      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-lg-4 col-md-6 mb-4">

        <!-- Card Narrower -->
        <div class="card card-cascade narrower">

          <!-- Card image -->
          <div class="view view-cascade overlay">
            <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg"
              alt="Card image cap">
            <a>
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!-- Card content -->
          <div class="card-body card-body-cascade">

            <!-- Label -->
            <h5 class="pink-text pb-2 pt-1"><i class="fas fa-utensils"></i> Culinary</h5>
            <!-- Title -->
            <h4 class="font-weight-bold card-title">Cheat day inspirations</h4>
            <!-- Text -->
            <p class="card-text">Ut enim ad minima veniam, quis nostrum exercitationem ullam
              corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>
            <!-- Button -->
            <a class="btn btn-unique">Button</a>

          </div>

        </div>
        <!-- Card Narrower -->

      </div>
      <!--Grid column-->

    </div>
    <!--Grid row-->

  </div>
  <!-- Container -->

</section>
<!--Section: articles-->

7. 页面主体-Contact/Footer

Contact

查看MDB Pro版提供的Contatcts文档. 替换页面的Contacts章节如下:

<!--Section: contact-->
<section id="contact" class="py-5" style="background-color: #eee;">

  <div class="container">

    <!-- Section heading -->
    <h2 class="h1-responsive font-weight-bold text-center mb-5">Contact us</h2>
    <!-- Section description -->
    <p class="text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum
      porro a pariatur veniam.</p>

    <!-- Grid row -->
    <div class="row">

      <!-- Grid column -->
      <div class="col-md-9 mb-md-0 mb-5">

        <form>

          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-md-6">
              <div class="md-form mb-0">
                <input type="text" id="contact-name" class="form-control">
                <label for="contact-name" class="">Your name</label>
              </div>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-6">
              <div class="md-form mb-0">
                <input type="text" id="contact-email" class="form-control">
                <label for="contact-email" class="">Your email</label>
              </div>
            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-md-12">
              <div class="md-form mb-0">
                <input type="text" id="contact-Subject" class="form-control">
                <label for="contact-Subject" class="">Subject</label>
              </div>
            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-md-12">
              <div class="md-form">
                <textarea type="text" id="contact-message" class="form-control md-textarea" rows="3"></textarea>
                <label for="contact-message">Your message</label>
              </div>
            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

        </form>

        <div class="text-center text-md-left">
          <a class="btn btn-purple btn-md">Send</a>
        </div>

      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-3 text-center">
        <ul class="list-unstyled mb-0">
          <li>
            <i class="fas fa-map-marker-alt fa-2x purple-text"></i>
            <p>San Francisco, CA 94126, USA</p>
          </li>
          <li>
            <i class="fas fa-phone fa-2x mt-4 purple-text"></i>
            <p>+ 01 234 567 89</p>
          </li>
          <li>
            <i class="fas fa-envelope fa-2x mt-4 purple-text"></i>
            <p class="mb-0">contact@example.com</p>
          </li>
        </ul>
      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row -->

  </div>

</section>
<!--Section: contact-->

Footer

下面我们替换Footer代码如下:


<!-- Footer -->
<footer class="page-footer font-small pt-4">

  <!-- Footer Elements -->
  <div class="container">

    <!-- Social buttons -->
    <ul class="list-unstyled list-inline text-center">
      <li class="list-inline-item">
        <a class="btn-floating btn-fb mx-1">
          <i class="fab fa-facebook-f"> </i>
        </a>
      </li>
      <li class="list-inline-item">
        <a class="btn-floating btn-tw mx-1">
          <i class="fab fa-twitter"> </i>
        </a>
      </li>
      <li class="list-inline-item">
        <a class="btn-floating btn-gplus mx-1">
          <i class="fab fa-google-plus-g"> </i>
        </a>
      </li>
      <li class="list-inline-item">
        <a class="btn-floating btn-li mx-1">
          <i class="fab fa-linkedin-in"> </i>
        </a>
      </li>
      <li class="list-inline-item">
        <a class="btn-floating btn-dribbble mx-1">
          <i class="fab fa-dribbble"> </i>
        </a>
      </li>
    </ul>
    <!-- Social buttons -->

  </div>
  <!-- Footer Elements -->

  <!-- Copyright -->
  <div class="footer-copyright text-center py-3">© 2018 Copyright:
    <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
  </div>
  <!-- Copyright -->

</footer>
<!-- Footer -->

为了让低顶的颜色一致, 打开style.css文件, 找到.top-nav-collapse类, 修改如下:

.top-nav-collapse, .page-footer {
    background-color: #563e91 !important;
}

动画

最后, 让我们为页面的每个章节添加点动画效果吧.

在MDB中, 为元素添加点动画(共70+种)非常简单, 请参见 MDB Animations文档.
我们采用一种不同的方法来自动给页面上的每个

添加动画效果, 从而减轻工作量.
将页面底部的自定义JavaScript脚本区修改为如下代码:

<!-- Your custom scripts (optional) -->
<script type="text/javascript">
  // MDB Lightbox Init
  $(function () {
    $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");
  });
  // 以下为动画效果新添加的两条语句
  // Adding animations to the sections, 使用的是淡入, 你也可以试试zoomIn等动画
  $("section").addClass("wow fadeIn");
  // Animations Init, 注意必须放在ready方法中以防WOW对象没能加载成功
  $(document).ready(function () {
    new WOW().init();
  });
</script>

结语

MDB的学习之旅就到这里，有很多内容需要花时间自己去吸收和挖掘，现在的我们应该能自己设计一个漂亮的静态网站了，接下来我们将进入JS的学习。

简·拉基

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
MDB基础知识三

web学习之旅——MDB三概述2. 页面结构及全屏视频背景页面基本结构video元素RGBA与渐变3. 页面主体-章节/Features/Projects主体结构Features章节Projects章节4. 页面主体-LightBox gallery概述本教程将构建一个全屏的, 现代的, 用于展示作品的网站, 几乎所有的组件都需要 MDB Pro的支持。原文出处棋哥教学网我们将涉及以下内容:What You’ll Learn全屏视频背景Features和Projects灯箱图片集字体So
复制链接

扫一扫