zoukankan      html  css  js  c++  java
  • [推荐]icheck-bootstrap(漂亮的ckeckbox/radiobox)

    适用于Twitter Bootstrap框架的纯CSS样式的复选框/单选框按钮的插件。
    GitHub:https://github.com/bantikyan/icheck-bootstrap
    如果你在自定义HTML复选框/单选框按钮时遇到问题,选择icheck-bootstrap是一个明智的选择,它可以加快你对复选框/单选框样式的设置和选择。

    开始使用

    下面几个选项可以让你快速使用到icheck-bootstap:

    HTML语法

    checkbox例子:
    <div class="icheck-primary">
        <input type="checkbox" id="someCheckboxId" />
        <label for="someCheckboxId">Click to check</label>
    </div>
    
    radio按钮例子:
    <div class="icheck-primary">
        <input type="radio" id="someRadioId1" name="someGroupName" />
        <label for="someRadioId1">Option 1</label>
    </div>
    <div class="icheck-primary">
        <input type="radio" id="someRadioId2" name="someGroupName" />
        <label for="someRadioId2">Option 2</label>
    </div>
    
    行排列样式

    要内嵌复选框/单选框按钮,需要使用.icheck-inline样式

    <div class="icheck-primary icheck-inline">
        <input type="checkbox" id="chb1" />
        <label for="chb1">Label 1</label>
    </div>
    <div class="icheck-primary icheck-inline">
        <input type="checkbox" id="chb2" />
        <label for="chb2">Label 2</label>
    </div>
    
    禁用(disabled)

    在复选框/单选框按钮上使用禁用属性可以禁用样式

    无标签样式

    要使的组件没有文字标签,但是您仍然必须具有带空白文本的标签组件。

    <div class="icheck-primary">
        <input type="checkbox" id="someCheckboxId" />
        <label for="someCheckboxId"></label>
    </div>
    

    配色方案

    可查看后面图片的例子
    Twitter Bootstrap:如你将要看到示例样式的一样,icheck-primary类用于组件的样式,你可以将一下类用于Bootstrap的配色方案:

    .icheck-default
    .icheck-primary
    .icheck-success
    .icheck-info
    .icheck-warning
    .icheck-danger
    

    扁平样式颜色:你也可以从flatuicolors.com中选择你喜欢的非常漂亮的颜色使用。

    .icheck-turquoise
    .icheck-emerland
    .icheck-peterriver
    .icheck-amethyst
    .icheck-wetasphalt
    .icheck-greensea
    .icheck-nephritis
    .icheck-belizehole
    .icheck-wisteria
    .icheck-midnightblue
    .icheck-sunflower
    .icheck-carrot
    .icheck-alizarin
    .icheck-clouds
    .icheck-concrete
    .icheck-orange
    .icheck-pumpkin
    .icheck-pomegranate
    .icheck-silver
    .icheck-asbestos
    

    许可证

    icheck-bootstrap使用的是MIT许可证。可以在个人和商业项目中使用它。

  • 相关阅读:
    【前端】常用总结(二)
    【Golang】爬虫笔记
    ubuntu16.04安装SSH服务
    windows下配置pytorch环境
    使用VNC连接ubuntu16.4错误Authentication Failure问题
    window使用VNC远程ubuntu16.04
    ubuntu16.04安装nvidia显卡驱动
    python批量读取并显示图片,处理异常。
    将nii文件CT图像更改窗宽窗位之后保存成nii文件
    yaml.load与yaml.dump的用法
  • 原文地址:https://www.cnblogs.com/sesametech-netcore/p/12170006.html
Copyright © 2011-2022 走看看