我尝试使用bootstrap 4
:根色属性,但出现错误invalid property value
我还检查了引导程序文档,却一无所获。
有人可以帮助我如何使用bootstrap 4 :root property
检查以下我尝试实现的代码段,但失败了。
预先感谢
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
}
.frm-input:focus {
border-color: --yellow;
}
<div class="frm-row">
<input class="frm-input" type="text" name="email" placeholder="Email address">
</div>
答案 0 :(得分:1)
您的语法有误。试试这个:
.frm-input:focus {
边框颜色:var(-yellow);
}
此外,:root选择器(或伪类)不随引导程序4一起提供,它是CSS内置功能。您可以在本文档中了解更多信息。简而言之,它是指文档的根元素。总之,您要为文档的根元素定义 CSS变量与引导程序有关。
此外,Netbeans尚未实现对CSS变量的支持,此处。
答案 1 :(得分:1)
这些是CSS variables。用var(--..)
引用它们。在您的情况下,将是:
.frm-input:focus {
border-color: var(--yellow);
}
演示:https://www.codeply.com/go/I2WpYQe8oG
还请注意:Netbeans当前不支持CSS变量。 Netbeans show css variables as error