• [推荐]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许可证。可以在个人和商业项目中使用它。

  • 相关阅读:
    ps_基于2020的官方教程
    杂记_好玩的
    linux _文件目录与权限
    levelDb笔记
    《好学的C++ 第2版》 第9章 一些高级编程技术
    《好学的C++ 第2版》 第8章 文件-电子存储
    《好学的C++ 第2版》 第7章 字符串--分析文本
    《好学的C++ 第2版》 第6章 指针--我知道数据在哪里
    《好学的C++ 第2版》 第5章 数组--都给我排好队
    《好学的C++ 第2版》 第4章 函数--分工与合作
  • 原文地址:https://www.cnblogs.com/sesametech-netcore/p/12170006.html
Copyright © 2020-2023  润新知