MDB基础

2023-05-16

MDB基础学习

页面结构
页面导航条
页面主题布局
页面主体
页面底部
总结

页面结构

MDB 模板

在这里插入图片描述
在 code 中打开 index.html文件你可看到常见的 HTML 文档结构， MDB 需要的 CSS 和 JS 文件，我们不要变动它。我们只需要修改body里面的以下部分：

将上述内容替换为如下代码：

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

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

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

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

<!--Footer-->
<footer>

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

页面导航条

在header中添加以下代码

<!--Main Navigation-->
<header>
  <!--Navbar-->
  <nav class="navbar navbar-expand-lg navbar-dark primary-color">
    <!-- Navbar brand -->
    <a class="navbar-brand" href="#">Navbar</a>
    <!-- Collapse button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
      aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="basicExampleNav">
      <!-- Links -->
      <ul class="navbar-nav mr-auto">
        <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>
        <!-- Dropdown -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
      <!-- Links -->
      <form class="form-inline">
        <div class="md-form my-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        </div>
      </form>
    </div>
    <!-- Collapsible content -->
  </nav>
  <!--/.Navbar-->
</header>

一个基本的导航条外观就够建好了
在这里插入图片描述
一个nav标签, 其内部实际包含了三个部分:

a 超链接, 用于展示公司名称或logo
button 按钮, 当在小尺寸屏幕时会出现(你可能在浏览器中并没看到该按钮, 后面进一步解释)
div 区块, 用于放置各个导航超链接

其中css样式类
.navbar
这是导航条必须的样式，相当于固定格式
.navbar-expand-lg
表明当处于中等屏幕及以上尺寸时, 导航条扩展开, 否则导航超链接不显示, 而显示一个折叠按钮
MDB将屏幕尺寸分为5类即: xs/sm/md/lg/xl(extra small/small/medium/large/extra large)
navbar-dark
将让导航条的背景与文字颜色自动高对比
navbar-nav
表明是导航条中的导航链接, 使得

的列表项不会分布于多行
mr-auto
该样式将会把其后的项(即搜索框靠右对齐)
active
注意这个样式, 它表明哪个超链接当前是激活的, 一般用于表明当前处于哪个活动页面

页面主题布局

在main中输入以下代码

<!--Main container-->
<div class="container">
  <!--Grid row 1-->
  <div class="row">
    <!--Grid column 1-->
    <div class="col-md-7">
      第一行,第一列, 中等尺寸屏幕及以上则宽 7/12
    </div>
    <!--Grid column-->
    <!--Grid column 2-->
    <div class="col-md-5">
      第一行,第二列, 中等尺寸屏幕及以上则宽 5/12
    </div>
    <!--Grid column-->
  </div>
  <!--Grid row-->
  <!--Grid row 2-->
  <div class="row">
    <!--Grid column 1-->
    <div class="col-lg-4 col-md-12">
      第二行,第一列, 大尺寸屏幕及以上则宽 4/12, 中等屏幕独占一行
    </div>
    <!--Grid column-->
    <!--Grid column 2-->
    <div class="col-lg-4 col-md-6">
      第二行,第二列, 大尺寸屏幕及以上则宽 4/12, 中等屏幕占6/12
    </div>
    <!--Grid column-->
    <!--Grid column 3-->
    <div class="col-lg-4 col-md-6">
      第二行,第三列, 大尺寸屏幕及以上则宽 4/12, 中等屏幕占6/12
    </div>
    <!--Grid column-->
  </div>
  <!--Grid row-->
</div>
<!--Main container-->

在代码中我们需要将标签定义.container来启动栅格系统。它的基本表现形式为：
在这里插入图片描述
Bootstrap原生带三种container宽度规范：

.container, 居中，适配不同的断的 max-width 尺寸。
.container-fluid, 全屏，适配屏幕的 width: 100% 尺寸。
.container-{断点规格}（见下表，如.container-sm), 在指定规格断上width: 100% 尺寸。

通过下表选择合适的代码来使用栅格
在这里插入图片描述
如果没有定义一个屏幕的规格，默认为12个栅格

页面主体

<!--Grid column 1-->
<div class="col-md-7">
  <div class="view overlay z-depth-1-half">
    <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" class="card-img-top" alt="">
    <div class="mask rgba-white-light"></div>
  </div>
</div>
<!--Grid column-->
<!--Grid column 2-->
<div class="col-md-5">
  <h2>Some awesome heading</h2>
  <hr>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis pariatur quod ipsum atque quam dolorem
    voluptate officia sunt placeat consectetur alias fugit cum praesentium ratione sint mollitia, perferendis
    natus quaerat!</p>
  <a href="#" class="btn btn-primary">Get it now!</a>
</div>
<!--Grid column-->
<!--Grid row 2-->
<div class="row">

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

    <!--Card-->
    <div class="card">

      <!--Card image-->
      <div class="view overlay">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).jpg" class="card-img-top"
          alt="">
        <a href="#">
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>

      <!--Card content-->
      <div class="card-body">
        <!--Title-->
        <h4 class="card-title">Card title</h4>
        <!--Text-->
        <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">Button</a>
      </div>

    </div>
    <!--/.Card-->

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

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

    <!--Card-->
    <div class="card">

      <!--Card image-->
      <div class="view overlay">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).jpg" class="card-img-top"
          alt="">
        <a href="#">
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>

      <!--Card content-->
      <div class="card-body">
        <!--Title-->
        <h4 class="card-title">Card title</h4>
        <!--Text-->
        <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">Button</a>
      </div>

    </div>
    <!--/.Card-->

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

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

    <!--Card-->
    <div class="card">

      <!--Card image-->
      <div class="view overlay">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg" class="card-img-top"
          alt="">
        <a href="#">
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>

      <!--Card content-->
      <div class="card-body">
        <!--Title-->
        <h4 class="card-title">Card title</h4>
        <!--Text-->
        <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">Button</a>
      </div>

    </div>
    <!--/.Card-->

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

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

放置了一张带波纹特效( 鼠标移到图片上时呈现)的图片(.view .overlay), 并让图片有阴影效果(.z-depth-1-half)
在这里插入图片描述

页面底部

版权格式：

<div class="text-center p-3" style="background-color: rgba(207, 126, 126, 0.2);">
    © 2021 Copyright:
    <a class="text-dark" href="https://by1196.com/">by1196.com</a>
  </div>

在这里插入图片描述
链接格式：

  <div class="container p-4">
    <!--Grid row-->
    <div class="row">
      <!--Grid column-->
      <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
        <h5 class="text-uppercase">Links</h5>

        <ul class="list-unstyled mb-0">
          <li>
            <a href="#!" class="text-dark">Link 1</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 2</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 3</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 4</a>
          </li>
        </ul>
      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
        <h5 class="text-uppercase mb-0">Links</h5>

        <ul class="list-unstyled">
          <li>
            <a href="#!" class="text-dark">Link 1</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 2</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 3</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 4</a>
          </li>
        </ul>
      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
        <h5 class="text-uppercase">Links</h5>

        <ul class="list-unstyled mb-0">
          <li>
            <a href="#!" class="text-dark">Link 1</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 2</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 3</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 4</a>
          </li>
        </ul>
      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
        <h5 class="text-uppercase mb-0">Links</h5>

        <ul class="list-unstyled">
          <li>
            <a href="#!" class="text-dark">Link 1</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 2</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 3</a>
          </li>
          <li>
            <a href="#!" class="text-dark">Link 4</a>
          </li>
        </ul>
      </div>
      <!--Grid column-->
    </div>
    <!--Grid row-->
  </div>
  <!-- Grid container -->

文本格式

<div class="container p-4">
    <!--Grid row-->
    <div class="row">
      <!--Grid column-->
      <div class="col-md-12 mb-4 mb-md-0">
        <h5 class="text-uppercase">Footer text</h5>

        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
          molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae
          aliquam voluptatem veniam, est atque cumque eum delectus sint!
        </p>
      </div>
      <!--Grid column-->
    </div>
    <!--Grid row-->
  </div>

在这里插入图片描述

总结

Bootstrap 为我们提供了css前端框架，让我们可以迅速、简单的来对页面内容进行装饰。网站上提供了学习例题，可以方便我们简单快速的上手。在搭建静态网站方面有着明显的优势。但是对于需要频繁更新的网站，这种方式显得就有些笨重了。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

MDB

MDB基础的相关文章

yolov5 识别效果不好如何判断原因

yolov5 训练完模型以后发现对测试图片的识别效果不好那么这个时候该怎么办呢是过拟合还是欠拟合了呢怎么判断呢欠拟合机器学习中一个重要的话题便是模型的泛化能力 xff0c 泛化能力强的模型才是好模型 xff0c 对于训练好的模型
STM32F303RE 四个ADC同步规则采样

STM32F303RE 芯片有4个ADC 采样频率据说能达到5Mbsps 已经算是非常高的了比较适合做采样参考文章 STM32三个ADC同步规则采样参考上面的配置文章经过不断的失败和重复尝试最后终于搞通了其中遇到了好几个错误也
Python虚拟环境导出包安装到另一台电脑的方法

Python虚拟环境导出包安装到另一台电脑的方法环境 xff1a Windows 版 Python Python 3 6 8可以用自带的命令建立虚拟环境 xff0c 不用安装另外的如 virtualenv virtualenvwrappe
C# System.Numerics.Math.Sin 计算对边和临边

在 C 中 xff0c 使用 System Numerics 中的 Math Sin 计算 36 869898 度角的正弦值可以通过以下代码实现 xff1a span class token keyword using span span
HTTP 错误 401.0 - Unauthorized 的解决方案

我的项目突然间报这个错误 HTTP 错误 401 0 Unauthorized 您无权查看此目录或页面最可能的原因通过身份验证的用户无权访问处理请求所需的资源可尝试的操作查看失败请求跟踪日志以获取有关此错误的其他信息有关详细信息
卡尔曼滤波,最最容易理解的讲解.找遍网上就这篇看懂了.

学习卡尔曼滤波看了4天的文章硬是没看懂后来找到了下面的文章一下就看懂了我对卡尔曼滤波的理解我认为卡尔曼滤波就是把统计学应用到了滤波算法上算法的核心思想是根据当前的仪器 34 测量值 34 和上一刻的 34 预测量 34 和 3
HTTP status Code 412 未满足前提条件的解决方法之一

最近网站老是报告错误 ajax返回状态为 error 思来想去不知道为啥后来跟踪了下发现是在请求某个页面的时候会返回412错误而这个页面的请求是通过jquery 的 34 panel 34 load 34 http 34 方法去请求的
RabbitMQ入门用途说明和深入理解

RabbitMQ 在上一家公司已经接触过了但是懵懵懂懂的不是很清楚具体怎么个逻辑这次公司打算搭建新的系统领导要求研究一下MQ 经过研究得出的结论是 MSMQ的设计理念不适合做系统的底层框架他不适合做分布式系统最主要的是 MSM
KEIL软件的Error: Flash Download failed - Could not load file '..\OBJ\Template.axf'解决思路

第一个知识点 axf是编译后生成的文件这个文件是用来写入单片机的如果不存在这个文件首先要看一下是不是有编译错误编译错误肯定不会出这个文件的第二个知识点这个文件的路径是可以指定的在Options for Target Temp
数学分析反函数存在性定理，连续性定理与求导定理

反函数存在性定理若函数 y 61 f x x D f 是严格单调增加 xff08 减少 xff09 的 xff0c 则存在它的反函数 x 61 f 1 y R f X xff0c 并且 f 1 y 也是严格单调增加 xff08 减少 xf
css高度塌陷和外边距塌陷的原因及解决办法

1 高度塌陷 xff08 原因 xff0c 如何解决 xff09 概念介绍高度塌陷 xff1a 子元素设置浮动后就会脱标脱离标准流进入浮动流 xff0c 如果此时父元素没有设置高度 xff0c 那么父元素高度就会为0 xff0c 形成所
黎曼可积的充分必要条件 (3)

推论 1 闭区间上的连续函数必定可积证明 xff1a f x 在闭区间 a b 连续 xff0c 则有界且一致连续因此 xff0c gt 0 gt 0 x x a b 若 x x lt 则
定积分的基本性质4 绝对可积性

性质4 绝对可积性若 f x 在 a b 上可积 xff0c 则 f x 也在 a b 上可积 xff0c 且 b a f x d x b a f x d x 证明
trace (矩阵的迹) 的性质

trace 矩阵的迹的性质性质1 t r A m n B n m 61 t r B A t r A m
可逆线性变换

线性变换的逆变换对于线性空间 V V 上的任意一个线性变换 f f 若存在 V V 上的一个变换 g g 使得 f g 61 g f 61 I f
矩阵的秩的性质

定理 1 对于任意一个矩阵 A m n A m n 对于 A A 的任意一个 s s 行
向量范数的等价性

向量范数的等价对于任意两个有限维线性空间 V V 上的范数若存在常数 C 1 gt 0 C 2 gt 0 C 1 gt
矩阵范数的等价性（原创）

矩阵范数的等价设 F 61 R F 61 R 或 C C 对于任意两个 F n n
Pro Git Notes

This post include notes to Pro Git book Git Introduction Git is a Distributed Version Control Systems DVCSs Clients full

随机推荐

Deep Learning Notes: Chapter 1 Introduction

前言最近开始读 Deep Learning 一书这让我有了一个边读书边写笔记的动机 xff1a 能够让人很轻松流畅的把握住这本书的脉络 xff0c 从而读懂这本书的核心内容由于终究是英文表达更地道 xff0c 因此该笔记都是节选自书中
gRPC

Protocol buffer data is structured as messages where each message is a small logical record of information containing a
介绍 VSCode

vscode 是什么免费 xff0c 开源 xff0c 高性能 xff0c 跨平台 xff0c 轻量级的代码编辑器优点免费 xff0c 开源海量的扩展插件轻量 xff08 不会占用大量的内存和CPU xff09 本文摘要用户配置 x
关于maven项目打包缓存的问题

今天在修改了代码跟鞋项目打包的换成问题鼠标右击fnc package包 gt run as gt mavne install 然后把导入的图标2包fnc pessage 5 1 0 jar导入到服务器 xff0c 发现项目修改的代码不生效
Linux磁盘分区的详细步骤(图解linux分区命令使用方法)

前言磁盘是怎么分区的在文章后面会谈到 xff0c 先谈一下Linux文件系统的简单操作不过在阅读本文之前 xff0c 我假定读者们对Linux的磁盘与文件系统以及目录树已经有了初步的了解操作文件系统介绍操作文件系统的几个命令查看磁
命令行方式进行teamviewer安装与服务启动

1 Ubuntu KaLi 获取下载 xff1a wget c url 2 sudo dpkg i filename 安装下载的文件 3 sudo apt get f install 4 停止服务执行命令 sudo teamviewer
Windows通过VNC或SSH远程登录Mac

一 Windows通过VNC访问Mac共享屏幕 Mac上的屏幕共享使用的是VNC xff08 VirtualNetwork Computer xff0c 虚拟网络计算机 xff09 协议 xff0c 这种虚拟屏幕协议是支持跨平台的 xff0
Cooperative Holistic Scene Understanding： Unifying 3D Object, Layout, and Camera Pose Estimation2018

加利福尼亚大学洛杉矶分校 RGB xff0c 整体场景理解 xff08 目标检测布局检测相机位姿预测 xff09 总结 xff1a 以单个RGB图像为输入 xff0c 提出了一种实时 xff08 2 5fps xff09 恢复三维室内场
条件网络层介绍与脉络梳理：A Retrospective for “FiLM- Visual Reasoning with a General Conditioning Layer“

网址链接在很多多输入任务中 xff0c 例如 visual question answering image 43 language instruction following video 43 language class condit
镜头畸变现象及其校正方法

摄像机校准一般采用小孔成像模型 xff0c 理想的小孔模型是线性模型 xff0c 但是由于存在镜头畸变等原因 xff0c 线性模型通常要加上一些内部参数 xff0c 变成非线性模型现对产生这一现象的原理以及解决方法进行整理 xff0c 如
JS对象的使用（赋值+复制+克隆+销毁）

对象是引用型复合型数据 xff0c 因此对象的操作主要包括引用复制克隆和销毁等引用对象对象是引用型数据 xff0c 赋值操作实际上就是赋予地址示例下面示例定义一个对象 obj xff0c 然后赋值给 obj1 后 xff0c
【FreeRTOS学习计划】第五节临界段的保护

什么是临界段临界段就是一段在执行的时候不能被内部中断打断的代码 FreeRTOS 里面 xff0c 这个临界段最常出现的就是对全局变量的操作 xff0c 全局变量就好像是一个枪把子 xff0c 谁都可以对他开枪 xff0c 但是我开枪的时
Proteus的安装和介绍及51单片机电路仿真

Proteus入门教程及仿真 Proteus基本介绍Proteus功能Proteus特点Proteus界面Proteus元件库对应中文名称 Proteus 8的安装Proteus 51单片机的仿真生成 h文件Proteus模拟仿真 Prot
如何使用 Docker 进行编译和开发

简介 xff1a 本文主要为大家讲解不同环境下如何使用docker进行日常开发和编译镜像下载域名解析时间同步请点击阿里巴巴开源镜像站一 Linux环境开发适用于Linux环境开发者 xff0c 有专门代码服务器或虚拟机 1 安装
Altium Designer软件绘图

使用Altium Designer软件绘制一个stm32最小系统的电路原理图芯片的PCB和SCH封装自定义元器件PCB的封装自定义元器件SCH的封装绘制stm32最小系统原理图芯片的PCB和SCH封装新建一个工程 xff1a 新建PC
利用原理图绘制PCB板

利用原理图绘制PCB板 AHT封装PCB封装AHT SCH封装AHT 元件封装 AHT原理图添加PCB绘制BOM表网络表PCB板 AHT封装 PCB封装 1 打开之前设计好的stm32f103c8t6工程 xff0c 再打开PCB封装库 P
c语言结构体

结构体定义 xff1a 用于存储不同的数据类型 xff0c 存储在同一块内存空间里面 1 关键字 struct 2 标签结构体名称 3 成员例如 xff1a span class token keyword struct span s
css基础

CSS基础 CSS的作用CSS的语法CSS的引用内部样式表外部样式颜色 xff0c 尺寸 xff0c 对齐盒子模型边框与边距定位溢出浮动透明度 CSS学习总结 CSS的作用在我们写的html页面中 xff0c 所有的内容只能通过添加标记来
adaboost和朴素贝叶斯算法简述

adaboost和朴素贝叶斯算法简述 adaboost原理基本步骤基本应用朴素贝叶斯算法原理基本步骤基本应用 adaboost原理前一个基本分类器分错的样本会得到加强 xff0c 加权后的全体样本再次被用来训练下一个基本分类器同时 x
MDB基础

MDB基础学习页面结构页面导航条页面主题布局页面主体页面底部总结页面结构 MDB 模板在 code 中打开 index html文件你可看到常见的 HTML 文档结构 xff0c MDB 需要的 CSS 和 JS 文件 xff0c 我