style設計(草稿)(bootstrap相關)

radio button/checkbox

by cactus77kiki

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://flatlogic.github.io/awesome-bootstrap-checkbox/demo/build.css">

<h3 class="stitle">
  awesome-bootstrap-checkbox
</h3>
<div style="margin:5px;">
    <div class="checkbox checkbox-primary">
      <input id="checkbox2" class="styled" type="checkbox" checked>
      <label for="checkbox2">Style 3</label>
    </div>    
    <div class="checkbox checkbox-warning">
      <input id="checkbox3" class="styled" type="checkbox" checked>
      <label for="checkbox3">Style 3</label>
    </div>  
    <div class="checkbox checkbox-danger">
      <input id="checkbox4" class="styled" type="checkbox" checked>
      <label for="checkbox4">Style 3</label>
    </div>  
    <div class="checkbox checkbox-info">
      <input id="checkbox5" class="styled" type="checkbox" checked>
      <label for="checkbox5">Style 3</label>
    </div> 
    <div class="checkbox checkbox-success">
      <input id="checkbox6" class="styled" type="checkbox">
      <label for="checkbox6">Style 3</label>
    </div>
    <hr/>
    <div class="radio radio-danger radio-inline">
      <input type="radio" name="radio2" id="radio3" value="option1">
      <label for="radio3">
          One
      </label>
    </div>
    <div class="radio radio-info radio-inline">
      <input type="radio" name="radio2" id="radio4" value="option2" checked>
      <label for="radio4">
          Two
      </label>
    </div>
  </div>

CSS

/*h3 style*/
h3.stitle{
  background-color:#3333ff;
  color:#d1d1e0;
  text-align:center;
}

JavaScript

/*
(checkbox/radio) ref: https://www.jquery-az.com/bootstrap-checkbox-5-styles-with-demos-online/  (awesome-bootstrap-checkbox)
(github) ref: https://github.com/flatlogic/awesome-bootstrap-checkbox
*/