cshtml的美化

全栈程序员站长

发布于 2022-07-05 10:46:13

3.2K0

发布于 2022-07-05 10:46:13

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

c# web app美化工作

美化工作
- 更改css框架

美化工作

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

更改css框架

css在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文件

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中定义好的

所以之后如果你要加button之类的东西，就可以在网站上查看相应的源码，然后copy下来就可以了