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

我们都知道,在使用默认的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.mzph.cn/pingmian/59713.shtml

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

相关文章

流类库与输入输出

来源&#xff1a;《C语言程序设计》 像C语言一样&#xff0c;C语言也没有输入输出语句。 但C标准库中有一个面向对象的输入输出软件包&#xff0c;即I/O流类库。 流是I/O流类的中心概念。 ------ I/O流类库是C语言中I/O函数在面向对象的程序设计方法中的一个替换产品。 -…

cocos creator 3.8.3物理组件分组的坑

坑&#xff0c;坑的不行的大坑 group用的二进制的左移获取十进制的数值 目前是这样判断的&#xff0c;也不知道对不对&#xff0c;什么get、set Group没找到

基于MFC实现的赛车游戏

一、问题描述 游戏背景为一环形车道图&#xff0c;选择菜单选项“开始游戏”则可开始游戏。游戏的任务是使用键盘上的方向键操纵赛道上的蓝色赛车追赶红色赛车&#xff0c;红色赛车沿车道顺时针行驶&#xff0c;出发点和终点均位于车道左上方。任一赛车先达到终点则比赛结束。…

RHCE的学习(12)

第九章 Ubuntu 什么是Ubuntu 概述 Ubuntu&#xff08;乌班图&#xff09;属于Debian系列&#xff0c;Debian是社区类Linux的典范&#xff0c;是迄今为止最遵循GNU规范的Linux系统。 Debian最早由Ian Murdock于1993年创建&#xff0c;分为三个版本分支&#xff08;branch&…

【案例】故障雪花屏

开发平台&#xff1a;Unity 6.0 开发工具&#xff1a;Shader Graph 参考视频&#xff1a;【U2D Shader Graph】❄️雪❄️花❄️屏❄️   一、效果图 二、Shader Graph 路线图 三、案例分析 核心思路&#xff1a;雪花屏幕效果 &#xff08;混合&#xff09; 原图像 最终图像…

有什么办法换网络ip动态

在数字化时代&#xff0c;网络已成为我们生活、工作不可或缺的一部分。然而&#xff0c;随着网络应用的日益广泛&#xff0c;IP地址作为设备在网络中的唯一标识&#xff0c;其重要性不言而喻。动态换IP&#xff0c;作为一种灵活且高效的网络技术&#xff0c;正逐渐受到越来越多…

Spring Boot中集成MyBatis操作数据库详细教程

目录 前言1. 项目依赖配置1.1 引入MyBatis和数据库驱动依赖1.2 数据源配置 2. 创建数据库映射实体类3. 创建Mapper层接口4. 创建Service层4.1 定义Service接口4.2 实现Service接口 5. 创建Controller层6. 运行和测试项目6.1 启动项目6.2 测试接口 7. 总结 前言 在Java开发中&a…

【大语言模型】ACL2024论文-07 BitDistiller: 释放亚4比特大型语言模型的潜力通过自蒸馏

【大语言模型】ACL2024论文-07 BitDistiller: 释放亚4比特大型语言模型的潜力通过自蒸馏 目录 文章目录 【大语言模型】ACL2024论文-07 BitDistiller: 释放亚4比特大型语言模型的潜力通过自蒸馏目录摘要研究背景问题与挑战如何解决创新点算法模型实验效果代码推荐阅读指数&…

鸿蒙next打包流程

目录 下载团结引擎 添加开源鸿蒙打包支持 打包报错 路径问题 安装DevEcoStudio 可以在DevEcoStudio进行打包hap和app 包结构 没法直接用previewer运行 真机运行和测试需要配置签名,DevEcoStudio可以自动配置, 模拟器安装hap提示报错 安装成功,但无法打开 团结1.3版本新增工具…

基于Jeecgboot3.6.3vue3的flowable流程online表单的审批使用介绍

更多技术支持与服务请加入我的知识星球或加我微信&#xff0c;名称:亿事达nbcio技术交流社区https://t.zsxq.com/iPi8F 今天介绍一下基于jeecgboot3.6.3的flowable流程使用online表单进行审批的情况 1、首先建立一个online应用类型的流程&#xff0c;如下&#xff1a; 2、进行…

【LeetCode】【算法】238. 除自身以外数组的乘积

LeetCode 238. 除自身以外数组的乘积 题目描述 给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据保证数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位整数范围内。 请不…

如何构建一个可扩展的测试自动化框架?

以下为作者观点&#xff1a; 假设你是测试自动化方面的新手&#xff0c;想参与构建一个框架。在这种情况下&#xff0c;重要的是要了解框架所需的组件&#xff0c;以及它们是如何组合的。思考项目的具体需求和目标&#xff0c;以及可能遇到的困难和挑战。 假如你是一个测试架…

实战:索引的命中机制

在 SQL Server 中,查询是否能命中索引(即是否能使用 Index Seek)取决于多个因素,包括索引的结构、查询条件的排列、和数据库优化器的策略。以下是一些常见的命中索引和不能命中索引的情况,及其详细解释: 一、命中索引的情况 1. 前导列匹配(典型的命中索引场景) 索引结…

使用Docker快速部署FastAPI Web应用

Docker是基于 Linux 内核的cgroup、namespace以及 AUFS 类的Union FS 等技术&#xff0c;对进程进行封装隔离&#xff0c;一种操作系统层面的虚拟化技术。Docker中每个容器都基于镜像Image运行&#xff0c;镜像是容器的只读模板&#xff0c;容器是模板的一个实例。镜像是分层结…

C++【string类,模拟实现string类】

&#x1f31f;个人主页&#xff1a;落叶 &#x1f31f;当前专栏: C专栏 目录 为什么学习string类 C语言中的字符串 标准库中的string类 auto和范围for auto关键字 迭代器 范围for string类的常用接口说明和使用 1. string类对象的常见构造 2.string类对象的容量操作 3…

A019基于SpringBoot的校园闲置物品交易系统

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600…

【赵渝强老师】Redis的RDB数据持久化

Redis 是内存数据库&#xff0c;如果不将内存中的数据库状态保存到磁盘&#xff0c;那么一旦服务器进程退出会造成服务器中的数据库状态也会消失。所以 Redis 提供了数据持久化功能。Redis支持两种方式的持久化&#xff0c;一种是RDB方式&#xff1b;另一种是AOF&#xff08;ap…

Excel:vba实现批量插入图片批注

实现的效果&#xff1a;实现的代码如下&#xff1a; Sub InsertImageNamesAndPictures()Dim PicPath As StringDim PicName As StringDim PicFullPath As StringDim RowNum As IntegerDim Name As StringDim Comment As CommentDim folder As FileDialog 定义文件选择对话框 清…

tomcat启动失败和缓存清理办法

tomcat只在学校接触过并且是在window xp和win7的电脑上配置过&#xff08;中途升级过电脑系统&#xff09;&#xff0c;只记得在windows系统上可以将其设置成服务管理。但我已毕业10多年了&#xff0c;学的知识早就不知道丢哪里了。这次为了修改一个07&#xff0c;08年的项目&a…

ReactPress:深入解析技术方案设计与源码

ReactPress Github项目地址&#xff1a;https://github.com/fecommunity/reactpress 欢迎提出宝贵的建议&#xff0c;欢迎一起共建&#xff0c;感谢Star。 ReactPress是一个基于React框架开发的开源发布平台&#xff0c;它不仅仅是一个简单的博客系统&#xff0c;更是一个功能全…