Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

README.md 4.9KB

il y a 4 ans
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. # icheck-bootstrap
  2. <a href="#" target="_blank"><img src="https://img.shields.io/badge/bower-v3.0.1-blue.svg" alt="bower version"></a>
  3. <a href="https://www.npmjs.com/package/icheck-bootstrap" target="_blank"><img src="https://img.shields.io/badge/npm-v3.0.1-blue.svg" alt="npm version"></a>
  4. <a href="https://www.nuget.org/packages/icheck-bootstrap" target="_blank"><img src="https://img.shields.io/badge/nuget-v3.0.1-blue.svg" alt="nuget version"></a>
  5. [![](https://data.jsdelivr.com/v1/package/npm/icheck-bootstrap/badge)](https://www.jsdelivr.com/package/npm/icheck-bootstrap)
  6. Did you had a problem customizing html checkboxes and radio buttons? icheck-bootstrap is pure css solution for displaying twitter bootstrap style checkboxes and radio buttons. Try [Demo](https://bantikyan.github.io/icheck-bootstrap/).
  7. You may also like to try [icheck-material](https://github.com/bantikyan/icheck-material).
  8. ## Table of contents
  9. * <a href="#user-content-getting-started">Getting started</a>
  10. * <a href="#user-content-html-syntax">HTML syntax</a>
  11. * <a href="#user-content-aspnet-mvc-syntax">ASP.NET MVC syntax</a>
  12. * <a href="#user-content-color-schemes">Color schemes</a>
  13. * <a href="#user-content-license">License</a>
  14. ## Getting started
  15. Several quick start options are available:
  16. * [Download the latest release](https://github.com//bantikyan/icheck-bootstrap/archive/3.0.1.zip)
  17. * Install with [Bower](https://bower.io): <code>bower install icheck-bootstrap</code>
  18. * Install with [npm](https://www.npmjs.com/package/icheck-bootstrap): <code>npm install icheck-bootstrap</code>
  19. * Install with [Nuget](https://www.nuget.org/packages/icheck-bootstrap/): <code>Install-Package icheck-bootstrap</code>
  20. * Use CDN [jsDelivr](https://www.jsdelivr.com/package/npm/icheck-bootstrap)
  21. ## HTML syntax
  22. #### checkbox example
  23. ```
  24. <div class="icheck-primary">
  25. <input type="checkbox" id="someCheckboxId" />
  26. <label for="someCheckboxId">Click to check</label>
  27. </div>
  28. ```
  29. #### radio buttons example
  30. ```
  31. <div class="icheck-primary">
  32. <input type="radio" id="someRadioId1" name="someGroupName" />
  33. <label for="someRadioId1">Option 1</label>
  34. </div>
  35. <div class="icheck-primary">
  36. <input type="radio" id="someRadioId2" name="someGroupName" />
  37. <label for="someRadioId2">Option 2</label>
  38. </div>
  39. ```
  40. #### inline styling
  41. To have checkboxes or radio buttons inline use .icheck-inline class
  42. ```
  43. <div class="icheck-primary icheck-inline">
  44. <input type="checkbox" id="chb1" />
  45. <label for="chb1">Label 1</label>
  46. </div>
  47. <div class="icheck-primary icheck-inline">
  48. <input type="checkbox" id="chb2" />
  49. <label for="chb2">Label 2</label>
  50. </div>
  51. ```
  52. #### disabled
  53. Use disabled attribute on your input (checkbox or radio) to have disabled style.
  54. #### no label
  55. To have components without label, you still have to have label control with empty text.
  56. ```
  57. <div class="icheck-primary">
  58. <input type="checkbox" id="someCheckboxId" />
  59. <label for="someCheckboxId"></label>
  60. </div>
  61. ```
  62. ## ASP.NET MVC syntax
  63. #### checkbox example
  64. ```
  65. <div class="icheck-primary">
  66. @Html.CheckBoxFor(m => m.SomeProperty, new { id = "someCheckboxId" })
  67. <label for="someCheckboxId">Click to check</label>
  68. </div>
  69. ```
  70. #### radio buttons example
  71. ```
  72. <div class="icheck-primary">
  73. @Html.RadioButtonFor(m => m.SomeProperty, SomeValue1, new { id = "someRadioId1" })
  74. <label for="someRadioId1">Option 1</label>
  75. </div>
  76. <div class="icheck-primary">
  77. @Html.RadioButtonFor(m => m.SomeProperty, SomeValue2, new { id = "someRadioId2" })
  78. <label for="someRadioId2">Option 2</label>
  79. </div>
  80. ```
  81. ## Color schemes
  82. Try [Demo](https://bantikyan.github.io/icheck-bootstrap/)
  83. <b>Twitter Bootstrap:</b> As you can see in previous examples, icheck-primary class used for styling.
  84. You can use following classes for Twitter Bootstrap color scheme:
  85. <code>.icheck-default</code><br/>
  86. <code>.icheck-primary</code><br/>
  87. <code>.icheck-success</code><br/>
  88. <code>.icheck-info</code><br/>
  89. <code>.icheck-warning</code><br/>
  90. <code>.icheck-danger</code>
  91. <b>Flat UI Colors:</b> Also you can use one of the really nice colors from [flatuicolors.com](https://flatuicolors.com/)
  92. <code>.icheck-turquoise</code><br/>
  93. <code>.icheck-emerland</code><br/>
  94. <code>.icheck-peterriver</code><br/>
  95. <code>.icheck-amethyst</code><br/>
  96. <code>.icheck-wetasphalt</code><br/>
  97. <code>.icheck-greensea</code><br/>
  98. <code>.icheck-nephritis</code><br/>
  99. <code>.icheck-belizehole</code><br/>
  100. <code>.icheck-wisteria</code><br/>
  101. <code>.icheck-midnightblue</code><br/>
  102. <code>.icheck-sunflower</code><br/>
  103. <code>.icheck-carrot</code><br/>
  104. <code>.icheck-alizarin</code><br/>
  105. <code>.icheck-clouds</code><br/>
  106. <code>.icheck-concrete</code><br/>
  107. <code>.icheck-orange</code><br/>
  108. <code>.icheck-pumpkin</code><br/>
  109. <code>.icheck-pomegranate</code><br/>
  110. <code>.icheck-silver</code><br/>
  111. <code>.icheck-asbestos</code><br/>
  112. ## License
  113. icheck-bootstrap released under the [MIT license](https://github.com/bantikyan/icheck-bootstrap/blob/master/LICENSE). Feel free to use it in personal and commercial projects.