2018年6月8日 星期五

[研究][CSS] icheck-bootstrap v3.0.1 套件安裝與試用 (NuGet安裝)

[研究][CSS] icheck-bootstrap v3.0.1 安裝與試用 (NuGet安裝)

2018-06-08

客製化 CheckBox 和 Radio Button,以純 CSS 顯示 Twitter Bootstrap 型態風格的 CheckBox 和 Radio Button。

icheck-bootstrap v3.0.1  官方網站
https://github.com/bantikyan/icheck-bootstrap
Licensed under MIT
https://github.com/bantikyan/icheck-bootstrap/blob/master/LICENSE
Demo
https://bantikyan.github.io/icheck-bootstrap/
Code範例
https://github.com/bantikyan/icheck-bootstrap

這和下面網站的 iCheck 是不同的
http://fronteed.com/iCheck
http://icheck.fronteed.com/
http://www.bootcss.com/p/icheck/
















Default.aspx 內容

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Content/icheck-bootstrap.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div>
            checkbox example
            <div class="icheck-primary">
                <input type="checkbox" id="someCheckboxId" />
                <label for="someCheckboxId">Click to check</label>
            </div>
            radio buttons example
            <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>
            inline styling 
            <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>
            <br /></bt>no label<br />
            <div class="icheck-primary">
                <input type="checkbox" id="someCheckboxId" />
                <label for="someCheckboxId"></label>
            </div>
        </div>
    </form>
</body>
</html>


(完)

相關

[研究][CSS] icheck-bootstrap v3.0.1 套件安裝與試用 (NuGet安裝)
http://shaurong.blogspot.com/2018/06/css-icheck-bootstrap-v301-nuget.html

[研究][CSS] iCheck v1.0.2 (在不同流覽器和設備上都有相同的表現) 官方下載、安裝與試用
http://shaurong.blogspot.com/2017/11/css-icheck-v102.html

[研究][CSS] iCheck v1.0.2 (在不同流覽器和設備上都有相同的表現) 安裝與試用 (NuGet安裝)
http://shaurong.blogspot.com/2017/11/css-icheck-v102-nuget.html

[研究][C#][ASP.NET] jQuery 3.2.1 官方下載、安裝、試用
http://shaurong.blogspot.com/2017/11/caspnet-jquery-321.html

jquery插件icheck api使用(美化checkbox和radio样式)
http://www.51xuediannao.com/js/jquery/icheck.html

iCheck表单美化插件使用方法详解(含参数、事件等)
http://www.exp99.com/f2e/iCheck.html

沒有留言:

張貼留言