了解bootstrap改造asp.net core MVC的样式模板

news2024/11/26 0:45:24

我们都知道,在使用默认的asp.net core MVC模板建立项目的时候,里面的样式是已经事先被写好了的。一般来说都在css目录下的site.css和bootstrap.css及下面的bootstrap.min.css中。我们打开bootstrap这些样式文件,里面有大量的样式类的定义,如果我们没有搞懂这些定义,显然是不能完成我们接下来的网站样式的改造的,所以我们必须找时间研究一下bootstrap。

文章目录

  • 一、初步了解bootstrap
  • 二、改造导航栏
    • 1、修改主导航
    • 2、另起炉灶自己来布局
      • (1)、建立导航栏
      • (2)、增加二级导航
    • 3、增加登录按钮和登录对话框
      • (1)、登录按钮
      • (2)、登录对话框
      • (3)、漂亮登录对话框
  • 三、改造表格显示
  • 四、改造表单显示

在这里插入图片描述
我们这里不打算开始一种新的布局,所以只能说我们是对默认网站进行改造。原始的默认网站如下图:
在这里插入图片描述

一、初步了解bootstrap

如果大家都想我一样比较懒,不想一开始就做一个很复杂的网站,那么我们就用不着一开始就把精力放在改造布局文件上。那么我们进入到布局文件_layout.cshtml来看看它的样式引入都有哪些。如下图,这里有两个css文件的引入。我们在注销掉第二个引入链接后发现网页显示的效果并没有发生任何变化,所以,我们笃定,默认模版的样式都来自于bootstrap。
在这里插入图片描述
Bootstrap流行已经很多年了,横jquery一样被默认嵌入到asp.net core mvc的项目模板中了,所以如果你想高效的利用asp.net core mvc的模板开发你的网站项目,那么了解bootstrap,实在必行。其实学习了解Bootstrap也并没有想象中的那么繁杂,尤其是对于有css基础的同学。这里我贴出两个参考学习Bootstrap的URL:

菜鸟教程:https://www.runoob.com/bootstrap/bootstrap-tutorial.html
Bootstrap中文网:https://www.bootstrap.cn/

Bootstrap 框架,据说是全球使用人数最多的前端框架,使用Bootstrap框架是世界上迅速进行web前端开发的主流做法,它是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 前端开发更加快捷。
对于Bootstrap我也不想过多的介绍它的功能,反正你需要用到的各种组件各种情形都几乎完全包含了,不用你操心如何实现他们了。除非你有特殊的要求。

二、改造导航栏

首先我们来看看导航栏默认的模样,我感觉是惨不忍睹,把brand和导航内容柔道一起,我是不太能够接受。至少说要对brand进行一些改造或者将导航栏的内容移动右边一些才好一些。
在这里插入图片描述

1、修改主导航

我们现在的目标是让导航部分与网站名称分居左右两边,不要挤在一起,否则分不清是导航栏还是标题。如下图的效果:
在这里插入图片描述
我们来看看代码如何修改:

 <header>
     <nav class="navbar navbar-expand-sm navbar-toggleable-sm bg-dark bg-opacity-75  border-bottom box-shadow mb-3">
         <div class="container-fluid ">
             <div class="row  w-100">
                 <div class="col">
                     <a class="navbar-brand text-light" asp-area="" asp-controller="Home" asp-action="Index">WEBCSS</a>
                     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                             aria-expanded="false" aria-label="Toggle navigation">
                         <span class="navbar-toggler-icon"></span>
                     </button>
                 </div>

                 <div class="col-1  collapse d-sm-inline-flex justify-content-end   ">

                     <ul class="navbar-nav flex-grow-1">
                         <li class="nav-item">
                             <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link text-light" asp-area="">Bussiness</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link text-light" asp-area="">Projects</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link text-light" asp-area="">About</a>
                         </li>
                     </ul>

                 </div>

             </div>
         </div>
     </nav>
 </header>

改造的代码说明:
1、为网站名称单独增加了div容器,将网站名称和导航部分的div一起装入到一个div容器中作为container的子容器,并设置样式为row
2、我们主要在nav标签中增加了黑色背景的bg-dark
3、在container的子元素中设置了宽度w-100,否则它就收到了nav样式的约束不能充满全屏宽度。
4、增加了几个控制的导航标签如:Bussiness,projects,about

2、另起炉灶自己来布局

实际上在别人的代码上修改,又不完全理解别人的用意,修改起来总是 很被动的,那么我们索性自己来建一个自己的layout文件。这里比我忘记在_ViewStart.cshtml文件中,Layout修改为自己的布局文件即可。

@{
   // Layout = "_Layout";
    Layout = "myLayout";
}

接下来,新建一个满足Bootstrap基本结构的cshtml文件即可,基本结构如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> WebDemo</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
</body>
</html>

这就算是骨架搭建完毕,接下来,我们就自己建立自己的布局了。当然首先是建立自己的导航栏。

(1)、建立导航栏

注意,我这里使用的是bootstrap的5.3来调试的,请注意你的bootstrap版本,否则有可能会出现不兼容的奇怪现象。

 <nav class="navbar navbar-expand-md bg-dark" >
     <div class="container ">
          <a class="navbar-brand text-light" href="#">WebDemo</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navContent">
              <span class="navbar-toggler-icon"/>
          </button>

         <div class="collapse navbar-collapse " id="navContent">
             <ul class="nav navbar-nav ">
                 <li class="nav-item">
                     <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link text-light" asp-area="">Bussiness</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link text-light" asp-area="">Projects</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link text-light" href="#">Coperation</a>
                 </li>
                 <li class="nav-item ">
                     <a class="nav-link text-light" href="#">Services</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link text-light" asp-area="">About</a>
                 </li>
             </ul>
         </div>
     </div>
 </nav>

注意:
如何让导航栏铺满全屏,导航栏的母容器div中使用container-fluid。如何让导航栏居右,brand居左,在ul>的class中使用ms-auto
运行效果如下:
在这里插入图片描述
当屏幕小到不能容下导航栏是就开始折叠,点击toggler就能弹出导航栏,效果如下:
在这里插入图片描述

(2)、增加二级导航

二级导航估计也是很多网站的必备,所以这里在改造之外还增加了这个二级导航的内容。也是特别的简单,只要在当前的导航nav-item下增加一个dropdown-menu的ul标签即可。如下代码:

 <li class="nav-item dropdown">
     <a class="nav-link dropdown-toggle text-light" href="#" id="navbarDropdown" role="button"
        data-bs-toggle="dropdown" aria-expanded="false">
         Services
     </a>
     <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
         <li><a class="dropdown-item" href="#">Service 1</a></li>
         <li><a class="dropdown-item" href="#">Service 2</a></li>
         <li><a class="dropdown-item" href="#">Service 3</a></li>
     </ul>
 </li>

在这里插入图片描述

3、增加登录按钮和登录对话框

对话框对于数据的增删改查,或者在互动操作中的提示也是使用频率非常高的,所以,这里也一并写出来。

(1)、登录按钮

在导航栏的最末增加一个nav-item

 <li class="nav-item">
     <button type="button" class="btn  p-0 userlogin" data-bs-toggle="modal" data-bs-target="#loginModal">
         <i class="fas fa-user"></i>
         <span id="userName">Login</span>
     </button>
 </li>

同时,增加一个登录对话框的容器,以模态方式modal-dialog

(2)、登录对话框

登录对话框,实际是增加了一个设置class为modal fade的div构成,最好有三级,分别是modal fade/modal-dialog/modal-content,代码如下:

 <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="loginModalLabel">Login</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
                 <form>
                     <div class="form-group">
                         <label for="username">Username</label>
                         <input type="text" class="form-control" id="username">
                     </div>
                     <div class="form-group">
                         <label for="password">Password</label>
                         <input type="password" class="form-control" id="password">
                     </div>
                     <div class="form-group form-check">
                         <input type="checkbox" class="form-check-input" id="rememberMe">
                         <label class="form-check-label" for="rememberMe">Remember me</label>
                     </div>
                 </form>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Login</button>
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
             </div>
         </div>
     </div>
 </div>

效果如下:
在这里插入图片描述

(3)、漂亮登录对话框

可以说工作是完成了,但看起来不是很漂亮。如果想漂亮点,可以修改一下,代码如下:

  <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="loginModalLabel">
                      <i class="fas fa-user-circle"></i> 登录
                  </h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                  <div class="d-flex">
                      <img src="~/images/login2.jpg" alt="宣传图片" class="img-fluid" style="max-width: 30%;">
                      <form>
                          <div class="input-group mb-3">
                              <span class="input-group-text"><i class="fas fa-user"></i></span>
                              <input type="text" id="username" class="form-control" placeholder="请输入用户名">
                          </div>
                          <div class="input-group mb-3">
                              <span class="input-group-text"><i class="fas fa-lock"></i></span>
                              <input type="password" class="form-control" placeholder="请输入密码">
                              
                          </div>
                          <div class="form-group form-check">
                              <input type="checkbox" class="form-check-input" id="rememberMe">
                              <label class="form-check-label" for="rememberMe">记住密码</label>
                              <a class="register" href="#">注册账号</a>
                          </div>
                      </form>
                  </div>
              </div>
              <div class="modal-footer justify-content-right">

                  <button type="button" class="btn btn-primary " data-bs-dismiss="modal">登录</button>
                  
                  <button type="button" class="btn btn-secondary loginfooterbtn "  data-bs-dismiss="modal">退出</button>
                 
              </div>
          </div>
      </div>
  </div>

经过进一步改造,看起来更符合我们常规的登录对话框的模样了,如下图:
在这里插入图片描述

三、改造表格显示

表格的改造相对来说比较容易,无非就是将table的class设置为table即可,当然,这里的改造也包含对按钮进行了“操作部分的链接”更改为按钮样式了,效果如下:
在这里插入图片描述

表格的改造,也可以直接使用bootstrap的样式来改造,无须其他的css和js,代码如下(假定你已经有了数据库的控制类,可以得到一个表格)

<table class="table table-striped ">
        <thead>
        <tr class="table-primary">
            <th scope="col">姓名</th>
            <th scope="col">年龄</th>
            <th scope="col">性别</th>
            <th scope="col">邮件</th>
            <th scope="col">电话</th>
            <th scope="col">生日</th>
            <th scope="col">地址</th>
            <th scope="col">职业</th>
            <th scope="col">国籍</th>
            <th colspan="3">操作</th>
            </tr>
        </thead>
    <tbody >
            @foreach (var info in Model)
            {
            <tr class="table-small-text">
                    <td >@info.Name</td>
                    <td>@info.Age</td>
                    <td>@info.Gender</td>
                    <td>@info.Email</td>
                    <td>@info.PhoneNumber</td>
                    <td>@info.BirthDate.ToString("yyyy-MM-dd")</td>
                    <td>@info.Address</td>
                    <td>@info.Occupation</td>
                    <td>@info.Nationality</td>
                <td><a class="btn btn-secondary btn-sm" asp-action="Details" asp-route-id="@info.Index">详情</a></td>
                <td><a class="btn btn-secondary btn-sm" asp-action="Edit" asp-route-id="@info.Index">编辑</a></td>
                <td><a class="btn btn-secondary btn-sm" asp-action="DeleteByID" asp-route-id="@info.Index" onclick="return confirm('你确定要删除当前记录?')">删除</a></td>
          </tr>
            }
        </tbody>
    </table>

这里要注意的就是表格的颜色间隔显示效果,我们只要在table的class中加入table-striped样式即可达到。

四、改造表单显示

网站中,表单是不可少的,除非你只做静态页面,既然选择了asp.net core就决定了你不可能只做静态页面。其实在前面的登录页中我们就已经涉及到了表单的改造,这里我们以修改记录页面来举例:
没有改造之前,如下图:
在这里插入图片描述
我们进行改造后,效果如下:
在这里插入图片描述

当然,你也可以为其添加一些背景或者图标等来丰富它,这里我们仅仅演示的是form表单的控件如何使用。代码如下:

<form class="input-group ">
    <div class="row  g-3">
        <div class="col-2 text-end">
            <label for="Id" class="col-form-label-sm">ID:</label>
        </div>
        <div class="col-3 ">
            <input type="text" name="Index" class="form-control form-control-sm" value="@Model.Index" readonly />
        </div>
    </div>
    <div class="row  g-3">
        <div class="col-2 text-end">
            <label for="Name" class="col-form-label-sm ">姓名:</label>
        </div>
        <div class="col-3">
            <input type="text" name="Name" class="form-control form-control-sm" value="@Model.Name" />
        </div>
    </div>
    <div class="row  g-3">
        <div class="col-2 text-end">
            <label for="Age" class="col-form-label-sm">年龄:</label>
        </div>
        <div class="col-2">
            <input type="number" name="Age" class="form-control form-control-sm" value="@Model.Age" />
        </div>
    </div>
    <div class="row">
        <div class="col-2 text-end">
            <label for="Gender" class="col-form-label-sm " for="autoSizingSelect">性别:</label>
        </div>
        <div class="col-auto">
            <select name="Gender" class="form-select form-control-sm" id="autoSizingSelect">
                <!option value="男" @(Model.Gender == "男" ? "selected" : "")>男</!option>
                <!option value="女" @(Model.Gender == "女" ? "selected" : "")>女</!option>
            </select>
        </div>
    </div>
    <div class="row">
        <div class="col-2 text-end">
            <label for="Email" class="col-form-label-sm">邮件:</label>
        </div>
        <div class="col-3">
            <input type="email" name="Email" class="form-control form-control-sm" value="@Model.Email" />
        </div>
    </div>
    <div class="row">
        <div class="col-2 text-end">
            <label for="PhoneNumber" class="col-form-label-sm">电话:</label>
        </div>
        <div class="col-3">
            <input type="text" name="PhoneNumber" class="form-control form-control-sm" value="@Model.PhoneNumber" pattern="^(137|180|153|138|136|159|166|189|130|133)\d{8}$"
                   title="Phone number must start with one of the specified prefixes and be 11 digits in total." />
        </div>
    </div>
    <div class="row">
        <div class="col-2 text-end">
            <label for="BirthDate" class="col-form-label-sm">生日:</label>
        </div>
        <div class="col-4">
            <input type="date" name="BirthDate" class="form-control form-control-sm" value="@Model.BirthDate.ToString("yyyy-MM-dd")" />
        </div>
    </div>
    <div class="row">
        <div class="col-2 text-end">
            <label for="Address" class="col-form-label-sm">地址:</label>
        </div>
        <div class="col-8">
            <input type="text" name="Address" class="form-control form-control-sm" value="@Model.Address" />
        </div>
    </div>
    <div class="row">
        <div class="col-2 text-end">
            <label for="Occupation" class="col-form-label-sm">职业:</label>
        </div>
        <div class="col-2">
            <input type="text" name="Occupation" class="form-control form-control-sm" value="@Model.Occupation" />
        </div>
    </div>
    <div class="row">
        <div class="col-2 text-end">
            <label for="Nationality" class="col-form-label-sm">国籍:</label>
        </div>
        <div class="col-2">
            <input type="text" name="Nationality" class="form-control form-control-sm" value="@Model.Nationality" />
        </div>
    </div>
    <div class="row">
        <div class="col-6 text-center">
            <input class="btn btn-success" type="submit" value="保存" />
        </div>
        <div class="col-6 text-start">
            <a class="btn btn-primary" asp-action="Index">返回列表</a>
        </div>
    </div>
</form>

好了,基本上,对于动态页面所涉及的到数据显示部分我们都已经涉及到了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2236472.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

HTMLCSS:旋转的动态卡片

效果演示 这段代码创建了一个具有动态背景和渐变效果的卡片。卡片背景有一个无限循环的旋转动画&#xff0c;增加了视觉吸引力。这种效果可以用于展示个人信息、项目介绍或其他需要吸引用户注意的内容。 HTML <div class"card"><h3>前端Hardy</h3&…

深入Pillow:处理图像下载中的意外挑战

在当今数字化时代&#xff0c;获取和处理图像数据已经成为了许多应用程序的核心功能。从社交媒体到电子商务&#xff0c;图像的获取和处理对于用户体验至关重要。下载图片不仅能够丰富我们的内容&#xff0c;还能够通过分析图像数据为我们的应用提供更多价值。然而&#xff0c;…

管理 Elasticsearch 变得更容易了,非常容易!

作者&#xff1a;来自 Elastic Ken Exner Elasticsearch 用户&#xff0c;我们听到了你的心声。管理 Elasticsearch 有时会变得很复杂&#xff0c;面临的挑战包括性能调整、问题检测和资源优化。我们一直致力于简化你的体验。今天&#xff0c;我们宣布了自收购 Opster 以来的一…

Linux挖矿病毒(kswapd0进程使cpu爆满)

一、摘要 事情起因:有台测试服务器很久没用了&#xff0c;突然监控到CPU飙到了95以上&#xff0c;并且阿里云服务器厂商还发送了通知消息&#xff0c;【阿里云】尊敬的xxh: 经检测您的阿里云服务&#xff08;ECS实例&#xff09;i-xxx存在挖矿活动。因此很明确服务器中挖矿病毒…

【go从零单排】迭代器(Iterators)

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 在 Go 语言中&#xff0c;迭代器的实现通常不是通过语言内置的迭代器类型&#x…

(混乱版)数据冒险-ld,sub和and

第一张图没有数据转发 从这张图来看&#xff0c;如果没有数据转发机制&#xff0c;流水线的执行会出现更多的停顿。这种情况下&#xff0c;数据依赖只能通过**插入停顿周期&#xff08;stalls&#xff09;**来解决。具体分析如下&#xff1a; 指令序列 ld r1, 0(r2)&#xf…

成都睿明智科技有限公司抖音电商服务效果如何?

在这个短视频风起云涌的时代&#xff0c;抖音电商以其独特的魅力&#xff0c;成为了众多商家竞相追逐的新蓝海。而在这片波澜壮阔的商海中&#xff0c;成都睿明智科技有限公司犹如一艘稳健的航船&#xff0c;引领着无数企业驶向成功的彼岸。今天&#xff0c;就让我们一起揭开成…

ssm071北京集联软件科技有限公司信息管理系统+jsp(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;北京集联软件科技有限公司信息管理系统 \ 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本信息…

shodan[3](泷羽sec)

声明 学习视频来自B站UP主 泷羽sec,如涉及侵泷羽sec权马上删除文章。 笔记只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 这节课旨在扩大自己在网络安全方面的知识面&#xff0c;了解网络安全领域的见闻&#xff0c;了…

【OD-支持在线评测】数字涂色(100分)

📎 在线评测链接 https://app5938.acapp.acwing.com.cn/contest/11/problem/OD1081 🍓 OJ题目截图 🍿 最新机试E卷,全、新、准,题目覆盖率达 95% 以上,支持题目在线评测,专栏文章质量平均 94 分 🌍 评测功能需要 ⇒ 订阅专栏 ⇐ 后私信联系解锁~ 文章目录 📎…

k8s 上如何跑 Dolphins 模型

接着上一篇的介绍&#xff0c;这一篇就来跑跑 Dolphins 模型&#xff0c;本篇会记录&#xff0c;跑模型常见的阬点。 1 在 k8s 上创建 pod 将外部数据挂载在 pod 里&#xff0c;并申请 gpu 资源。同时修改代码里对应的引入数据的路径 # dolphins.yaml apiVersion: v1 kind: …

如何避免数据倾斜

1、数据倾斜的表现 数据倾斜是由于数据分布不均匀&#xff0c;造成数据大量的集中到一点&#xff0c;造成数据热点的现象。 主要表现&#xff1a;任务进度长时间维持在 99%或者 100%的附近&#xff0c;查看任务监控页面&#xff0c;发现只有少量 reduce 子任务未完成&#xff0…

计算机网络综合题

IP数据报的划分 CRC差错检测 冗余码的计算 因此&#xff0c;余数是1110&#xff0c;传输的数为11010110111110。在传输过程中最后两位变成o&#xff0c;接收端能够发现&#xff0c;因为11010110111110除以10011余数不为0。 子网划分 暴力求解法 &#xff08;定长子网划分大量…

O-RAN前传Spilt Option 7-2x

Spilt Option 7-2x 下行比特处理上行比特处理相关文章&#xff1a; Open Fronthaul wrt ORAN 联盟被称为下层拆分(LLS)&#xff0c;其目标是提高电信市场的灵活性和竞争力。下层拆分是指无线电单元(RU) 和分布式单元(DU) 之间的拆分。 O-RAN前传接口可以在 eCPRI 上传输。eCPR…

淘酒屋殷卓荣窖主高端客户私享答谢晚宴暨意大利摩罗斯酒庄之夜

一边是热爱&#xff0c;一边是事业&#xff0c;鱼与熊掌兼得淘酒屋殷卓荣窖主答谢晚宴圆满结束 淘酒屋殷卓荣窖主高端 VIP 客户私享答谢晚宴暨意大利摩罗斯酒庄品鉴之夜在广州四季酒店 99 楼圆满举办 2024 年 11 月 8 日晚&#xff0c;一场别开生面的淘酒屋殷卓荣窖主高端 VI…

SQL EXISTS谓词

谓词时返回值为真值&#xff08;true、false或unknown&#xff09;的函数。EXISTS与其他谓词不同&#xff0c;它接受的参数是行的集合。 输入值为一行的谓词叫做“一阶谓词”&#xff08;例如>、<、 及 LIKE等&#xff09;&#xff1b;输入值为行的集合的谓词叫做“二阶…

鸿蒙进阶-属性动画

hello大家好啊&#xff0c;这里是鸿蒙开天组&#xff0c;今天我们来学习鸿蒙中的动画属性。 先来说说动画~ 属性值的变化&#xff0c;通常会引发 UI 的变化,结合动画可以让这个变化过程【更为流畅】&#xff0c;反之这个过程将在一瞬间完成&#xff0c;用户体验不好&#xff…

算法每日练 -- 双指针篇(持续更新中)

介绍&#xff1a; 常见的双指针有两种形式&#xff0c;一种是对撞指针&#xff08;左右指针&#xff09;&#xff0c;一种是快慢指针&#xff08;前后指针&#xff09;。需要注意这里的双指针不是 int* 之类的类型指针&#xff0c;而是使用数组下标模拟地址来进行遍历的方式。 …

RHCE的学习(11)

第八章 防火墙 什么是防火墙 防火墙是位于内部网和外部网之间的屏障&#xff0c;它按照系统管理员预先定义好的规则来控制数据包的进出。 分类&#xff1a; 硬件防火墙&#xff1a;由厂商设计好的主机硬件&#xff0c;其操作系统主要以提供数据包数据的过滤机制为主&#xff…

Java开发配置文件的详情教程配置文件类型

学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……&#xff09; 2、学会Oracle数据库入门到入土用法(创作中……&#xff09; 3、手把手教你开发炫酷的vbs脚本制作(完善中……&#xff09; 4、牛逼哄哄的 IDEA编程利器技巧(编写中……&#xff09; 5、面经吐血整理的 面试技…