网络公司建网站,购物网站功能介绍,江阴网站网站建设,怎样优化自己的网站Blazor默认集成了bootstrap#xff0c;对于我这种后端出身#xff0c;对CSS一知半解的.NET开发人员来说#xff0c;使用起来还是有一定难度的。好不容易才学到点皮毛#xff0c;结果前端人员居然告诉我#xff0c;bootstrap已经过时了#xff0c;现在主流都用Tailwind CS… Blazor默认集成了bootstrap对于我这种后端出身对CSS一知半解的.NET开发人员来说使用起来还是有一定难度的。好不容易才学到点皮毛结果前端人员居然告诉我bootstrap已经过时了现在主流都用Tailwind CSS。WTF!好吧要学就学主流的Lets GO!什么是 Tailwind CSS按照官方(https://tailwindcss.com/)的解释Tailwind是一个功能类优先的 CSS 框架它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类它们能直接在脚本标记语言中组合起来构建出任何设计。用过bootstrap的都知道bootstrap有很多定义好的组件样式如果只是开发一些后台管理项目对样式没有特定要求用bootstrap就很方便但是如果和UI设计规范要求不一致我们的就是使用起来就很不方便因为你需要覆盖大量已有的样式。而Tailwind不提供默认主题或任何预定义的UI组件它带有预设计的css类可以在HTML自由组合这些类达到设计要求。例如按钮可以这样实现button classpx-3 py-2 rounded-md bg-blue-600 text-whitePrimary/button
通过组合这些小的样式类我们可以生成复杂的自定义样式而不用写一行css代码。在这我就不介绍Tailwind的详细功能了相关资料你可以到官方网站查看。Blazor集成TailwindTailwind官方文档没有Blazor如何集成的说明虽然可以用CDN方式引入link hrefhttps://unpkg.com/tailwindcss^2/dist/tailwind.min.css relstylesheet
但是连官方都不推荐因为CDN文件尺寸很大(73.2kB compressed, 3020.7kB raw)会影响加载性能。所以只能参照官方文档通过npm方式安装Tailwind。初始化在命令行窗口下进入Blazor项目的根目录执行下面命令当然你首先需要安装Node.js和npmnpm init
一路回车最后会生成package.json文件。安装Tailwind及其依赖项执行下面的命令进行安装npm install tailwindcss postcss postcss-cli autoprefixer
tailwindcss: Tailwind CSSpostcss和postcss-clicli: 一个用于压缩CSS并删除CSS中不被使用的部分的工具有助于大幅减少CSS文件尺寸autoprefixer: 一个PostCSS 插件配置PostCSS在项目的根目录下创建postcss.config.js文件module.exports {plugins: {tailwindcss: {},autoprefixer: {},}
}
配置Tailwind执行下面的命令创建Tailwind的配置文件npx tailwindcss init
接着修改wwwroot文件夹中的app.css文件内容指定导入哪些Tailwind库tailwind base;
tailwind components;
tailwind utilities;#blazor-error-ui {background: lightyellow;bottom: 0;box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);display: none;left: 0;padding: 0.6rem 1.25rem 0.7rem 1.25rem;position: fixed;width: 100%;z-index: 1000;
}#blazor-error-ui .dismiss {cursor: pointer;position: absolute;right: 0.75rem;top: 0.5rem;
}
顶部的三行是我们需要添加的全部内容后面部分是保留默认项目模板中Blazor错误消息的样式。生成CSS修改package.json文件将“scripts”节修改成如下内容scripts: {buildcss: postcss wwwroot/css/app.css -o wwwroot/css/app.min.css
},
执行下面的命令生成CSS文件npm run buildcss
添加样式表引用最后去掉项目原有的CSS引用并将生成的CSS文件添加到Blazor应用程序中link hrefcss/app.min.css relstylesheet /
由于我们是WebAssembly项目需要修改Index.html如果你是Server项目则需要修改_Host.cshml。Blazor使用示例现在我们修改razor页面的代码如下button classpx-3 py-2 rounded-md bg-blue-600 hover:bg-red-600 text-whitePrimary/button使用就是这么简单我们不仅创建了按钮还轻松实现了hover动画。结论使用过后感觉Tailwind和Blazor组件化开发配合起来真是相得益彰当然这是后面的故事了。如果你觉得这篇文章对你有所启发请关注我的个人公众号”My IO“记住我
