自定义Bootstrap复选框 [英] Customize Bootstrap checkboxes
本文介绍了自定义Bootstrap复选框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在Angular应用程序中使用了Bootstrap，所有其他样式均按应有的方式工作，但复选框样式却没有.看起来就像是普通的旧复选框.
I'm using Bootstrap in my Angular application and all other styles are working like they should, but checkbox style doesn't. It just look like plain old checkbox.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<form class="form-signin">
<h2 class="form-signin-heading">Please log in</h2>
<label for="inputEmail" class="sr-only">User name</label>
<input [(ngModel)]="loginUser.Username" type="username" name="username" id="inputEmail" class="form-control" placeholder="User name" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input [(ngModel)]="loginUser.Password" type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
<a *ngIf="register == false" (click)="registerState()">Register</a>
<div class="checkbox">
<label>
<input type="checkbox" [(ngModel)]="rememberMe" name="rememberme"> Remember me
</label>
</div>
<button *ngIf="register == false" (click)="login()" class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
</form>
</div>
它是什么样的:
我希望它具有Bootstrap样式:
What I want it to look like with Bootstrap style:
推荐答案
由于Bootstrap 3没有与Bootstrap风格非常匹配的定制产品.
Since Bootstrap 3 doesn't have a style for checkboxes I found a custom made that goes really well with Bootstrap style.
.checkbox label:after {
content: '';
display: table;
clear: both;
}
.checkbox .cr {
position: relative;
display: inline-block;
border: 1px solid #a9a9a9;
border-radius: .25em;
width: 1.3em;
height: 1.3em;
float: left;
margin-right: .5em;
}
.checkbox .cr .cr-icon {
position: absolute;
font-size: .8em;
line-height: 0;
top: 50%;
left: 15%;
}
.checkbox label input[type="checkbox"] {
display: none;
}
.checkbox label input[type="checkbox"]+.cr>.cr-icon {
opacity: 0;
}
.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon {
opacity: 1;
}
.checkbox label input[type="checkbox"]:disabled+.cr {
opacity: .5;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Default checkbox -->
<div class="checkbox">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
Option one
</label>
</div>
<!-- Checked checkbox -->
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
Option two is checked by default
</label>
</div>
<!-- Disabled checkbox -->
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
Option three is disabled
</label>
</div>
.checkbox label:after,
.radio label:after {
content: '';
display: table;
clear: both;
}
.checkbox .cr,
.radio .cr {
position: relative;
display: inline-block;
border: 1px solid #a9a9a9;
border-radius: .25em;
width: 1.3em;
height: 1.3em;
float: left;
margin-right: .5em;
}
.radio .cr {
border-radius: 50%;
}
.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
position: absolute;
font-size: .8em;
line-height: 0;
top: 50%;
left: 13%;
}
.radio .cr .cr-icon {
margin-left: 0.04em;
}
.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
display: none;
}
.checkbox label input[type="checkbox"]+.cr>.cr-icon,
.radio label input[type="radio"]+.cr>.cr-icon {
opacity: 0;
}
.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon,
.radio label input[type="radio"]:checked+.cr>.cr-icon {
opacity: 1;
}
.checkbox label input[type="checkbox"]:disabled+.cr,
.radio label input[type="radio"]:disabled+.cr {
opacity: .5;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<!-- Default radio -->
<div class="radio">
<label>
<input type="radio" name="o3" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Option one
</label>
</div>
<!-- Checked radio -->
<div class="radio">
<label>
<input type="radio" name="o3" value="" checked>
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Option two is checked by default
</label>
</div>
<!-- Disabled radio -->
<div class="radio disabled">
<label>
<input type="radio" name="o3" value="" disabled>
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Option three is disabled
</label>
</div>
您可以从 Bootstrap 或<通过用图标更改[icon name]来实现href ="https://fontawesome.com/icons?d=gallery&m=free" rel ="noreferrer">字体很棒.
You can choose your own icon between the ones from Bootstrap or Font Awesome by changing [icon name] with your icon.
<span class="cr"><i class="cr-icon [icon name]"></i>
例如:
-
glyphicon glyphicon-remove(用于Bootstrap)，或 -
fa fa-bullseyefor Font Awesome
glyphicon glyphicon-removefor Bootstrap, orfa fa-bullseyefor Font Awesome
.checkbox label:after,
.radio label:after {
content: '';
display: table;
clear: both;
}
.checkbox .cr,
.radio .cr {
position: relative;
display: inline-block;
border: 1px solid #a9a9a9;
border-radius: .25em;
width: 1.3em;
height: 1.3em;
float: left;
margin-right: .5em;
}
.radio .cr {
border-radius: 50%;
}
.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
position: absolute;
font-size: .8em;
line-height: 0;
top: 50%;
left: 15%;
}
.radio .cr .cr-icon {
margin-left: 0.04em;
}
.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
display: none;
}
.checkbox label input[type="checkbox"]+.cr>.cr-icon,
.radio label input[type="radio"]+.cr>.cr-icon {
opacity: 0;
}
.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon,
.radio label input[type="radio"]:checked+.cr>.cr-icon {
opacity: 1;
}
.checkbox label input[type="checkbox"]:disabled+.cr,
.radio label input[type="radio"]:disabled+.cr {
opacity: .5;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon glyphicon glyphicon-remove"></i></span>
Bootstrap - Custom icon checkbox
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o3" value="" checked>
<span class="cr"><i class="cr-icon fa fa-bullseye"></i></span>
Font Awesome - Custom icon radio checked by default
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o3" value="">
<span class="cr"><i class="cr-icon fa fa-bullseye"></i></span>
Font Awesome - Custom icon radio
</label>
</div>
这篇关于自定义Bootstrap复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
