cshtml的美化

最新推荐文章于 2022-08-04 16:25:13 发布

DannyXSC

最新推荐文章于 2022-08-04 16:25:13 发布

阅读量1.1k

点赞数 1

分类专栏： c#与oracle交互文章标签： c# web app oracle

本文链接：https://blog.youkuaiyun.com/DannyXSC/article/details/115467130

版权

c#与oracle交互专栏收录该内容

3 篇文章

订阅专栏

本文指导你在ASP.NET MVC中更换Bootstrap模板，学习CSS位置及如何利用在线资源下载和应用定制样式。通过实例演示如何下载Bootswatch模板，替换默认样式，并利用预设参数简化开发过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

美化工作

默认大家已经掌握了MVC框架的概念和使用方式，本文章只将如何在MVC基础上进行简单的美化工作

更改css框架

css在cshtml中的位置

_Layout.cshtml
对html语言有所了解的各位应该知道，css一般写在头中，也就是<head></head>所在的位置中，在cshtml中也是这样。

注意看MVC框架的_Layout.cshtml中的第7、8行，这两行实际上指定了这个web app将会使用什么样的css模板。

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />

href后面跟着的就是css模板的位置，～这里可能表示的应该是wwwroot目录，所以按照这个路径，我们可以找到对应的css文件
css文件位置
bootstrap.min.css的上级bootstrap.css是bootstrap.min.css的类似于可视化的文件。
你可以这么理解：

bootstrap.min.css是给机器看的（没有排版，看起来比较困难）
bootstrap.css是编译器把bootstrap.min.css的内容翻译过来给人看的，如果bootstrap.min.css中的内容改变，bootstrap.css的内容也会对应改变。

我们可以看看bootstrap.css的内容
在这里插入图片描述
实际上它就为我们定义了很多预置参数，比如最前面的这些颜色。
如果我们想在普通的html中使用颜色，我们必须在网上查找这个颜色对应的代码（也就是图中以#开头的那些数字）。
但是现在我们只需要使用颜色对应的英文就行了，大大方便我们编写html代码。

如果我们想要更改这个模板，我们只需要更改这里的内容。但是作为初学者，我们可以直接用网上的模板。

网上的bootstrap模板资源

以下是我找到的资源

https://get.foundation/

https://bootswatch.com/

https://materializecss.com/

https://purecss.io/

https://getbootstrap.com/

接下来我们以 https://bootswatch.com/ 中的资源为例来讲解如何更换模板

1.从网站上下载模板

进入 https://bootswatch.com/ 并点击导航栏上的themes
在这里插入图片描述
任意选择一个主题，点击（我选择的是journal），就会出现以下画面

实际上点击后出现的这个界面就是使用了journal模板后会出现的效果的展示

下载这个模板，点击如下图所示的位置
在这里插入图片描述
下载获得bootstrap.min.css，把原来的bootstrap.min.css更名为bootstrap-orign.min.css，并把下载得到的bootstrap.min.css拖入wwwroot/lib/bootstrap/dist/css的文件夹下。

此时bootstrap.min.css会自动进入bootstrap.css，此时，下载模板到本地成功。

2.使用模板

在https://bootswatch.com/ 中的对应网页中有很多展示的网页容器，比如下图的导航页
在这里插入图片描述
选择一个你想要的导航页，把鼠标移到对应图标右边，会出现"<>“图标，点击图标，会得到下图所示

这个就是本模板下的导航栏源码，实际上在cshtml中控制网页显示颜色，位置的方式是每个东西的class名。
比如你要更改导航栏的颜色，就可以在<nav class=” 后面加入bg-dark或者bg-white之类的属性。
而这些属性是定义在你之前下载的bootstrap.min.css中定义好的