[英]how to apply btn btn-primary bootstrap class from my custom.css file?
I tried,我试过了,
<input type="button" class="btn btn-primary">
I want this style in custom.css我想要这种风格的 custom.css
If u want to copy content of bootstrap css class to your file and fire it from your file, download bootstrap files (find inside class u want, here is btn and btn-primary) and copy these classes to you file, and u can use it without linking to bootstrap files.如果您想将引导程序 css class 的内容复制到您的文件中并从您的文件中启动它,请下载引导程序文件(在 class 中找到您想要的,并使用这些类)它没有链接到引导文件。 U may also override bootstrap classes, it is up in what order u will link css files in your你也可以覆盖引导类,它是按照你将 css 文件链接到你的
better way and I think more moral;) is to write own btn btn-primary class using bootstrap modifier tool https://getbootstrap.com/docs/3.4/customize/更好的方法,我认为更道德;)是使用引导修改工具https://getbootstrap.com/docs/3.4/customize/ 编写自己的 btn btn-primary class
this style is for .btn
class in bootstrap:此样式适用于引导程序中的.btn
class:
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out,
background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
}
.btn:hover {
color: #212529;
text-decoration: none;
}
and this is for .btn-primary
:这是针对.btn-primary
:
.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
}
.btn-primary:focus {
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
.btn-primary:not(:disabled):not(.disabled):active {
color: #fff;
background-color: #0062cc;
border-color: #005cbf;
}
.btn-primary:not(:disabled):not(.disabled):active:focuss {
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
and this is for input type="button"
and input element:
这是用于input type="button"
和input element:
[type="button"]:not(:disabled),
button:not(:disabled) {
cursor: pointer;
}
[type="button"] button {
-webkit-appearance: button;
}
input {
margin: 0;
font-family: inherit;
}
this button is exactly like bootstrap button even if you don't use Bootstrap.即使您不使用 Bootstrap,此按钮也与引导按钮完全相同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.