vue+bootstrap自定义选择框vue-toggle单选效果代码
代码语言:html
所属分类:表单美化
代码描述:vue+bootstrap自定义选择框vue-toggle单选效果代码
代码标签: 框 vue-toggle 单选 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <style> body{ padding-top: 50px; } @media (min-width: 992px) { .options { padding-top: 80px; } } .btn { outline: none !important; } .btn.btn-primary { background-color: #5c4084; border-color: #5c4084; outline: none; } .btn.btn-primary:hover { background-color: #442f62; border-color: #442f62; } .btn.btn-primary:active, .btn.btn-primary:focus { background-color: #684895; border-color: #684895; } .btn.btn-default:hover { background-color: #442f62; border-color: #442f62; color: #fff; } .btn.btn-default:active, .btn.btn-default:focus { background-color: #684895; border-color: #684895; color: #fff; } </style> </head> <body translate="no"> <div class="container" id="app"> <div class="row"> <div class="col-xs-3 col-sm-4 col-md-5 col-lg-6"> <img src="//repo.bfw.wiki/bfwrepo/image/5e0e941197338.png" alt="" class="img-responsive" /> </div> <div class="col-xs-9 col-sm-8 col-md-7 col-lg-6 options"> <fieldset class="form-group"> <legend class="sr-only">Colors</legend> <div class="form-group"> <vue-toggle :values="colors" :selected.sync="color" default="green"></vue-toggle> </div> </fieldset> <fieldset class="form-group"> <legend class="sr-only">Sizes</legend> <div class="form-group"> <vue-toggle :values="sizes" :selected.sync="size" default="medium"></vue-toggle> </div> </fieldset> <fieldset class="form-group"> <legend class="sr-only">Style</legend> <div class="form-group"> <vue-toggle :values="styles" :selected.sync="style" default="crew"></vue-toggle> </div> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0