大家好，又见面了，我是你们的朋友全栈君。
c# web app美化工作
美化工作
默认大家已经掌握了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下来就可以了
更多的资料
可以查看
https://getbootstrap.com/docs/5.0/getting-started/introduction/
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/149270.html原文链接：https://javaforall.net
