单选按钮和复选框在材料设计中不起作用

Question

Bootstrap材料设计复选框，单选按钮和切换按钮未根据以下代码中的材料设计进行样式设置，请帮帮我。

<link href="css/bootstrap-material-design.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

<link href="css/jquery-ui.min.css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/material-fullpalette.min.css" rel="stylesheet" />

<link href="css/ripples.min.css" rel="stylesheet" />
<link href="css/material-design-iconic-font.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<div class="form-group" style="margin-top: 0;">
  <!-- inline style is just to demo custom css to put checkbox below input above -->
  <div class="col-md-offset-2 col-md-10">
    <div class="checkbox">
      <label>
        <input type="checkbox">Checkbox
      </label>
      <label>
        <input type="checkbox" disabled="">Disabled Checkbox
      </label>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-md-offset-2 col-md-10">
    <div class="togglebutton">
      <label>
        <input type="checkbox" checked="">Toggle button
      </label>
    </div>
  </div>
</div>
<div class="col-md-10">
  <div class="radio radio-primary">
    <label>
      <input type="radio" name="optionsRadios" id="Radio1" value="option1" checked="">Option one is this
    </label>
  </div>
  <div class="radio radio-primary">
    <label>
      <input type="radio" name="optionsRadios" id="Radio2" value="option2">Option two can be something else
    </label>
  </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/material.min.js"></script>
<script src="js/ripples.min.js"></script>

Answer 1

您需要初始化材质设计插件，如：

$.material.init();

这将注入样式化复选框，收音机等所需的元素。在加载所有库文件后包含它。