单选按钮和复选框在材料设计中不起作用 [英] Radio buttons and checkbox is not working in material design

问题描述

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

Bootstrap material design checkbox, radio buttons and toggle buttons are not getting styled according to material design in the below code, Please help me.

<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>

推荐答案

您需要初始化材料设计插件，例如:

You need to initialize the material design plugin like:

$.material.init();

这将注入样式化复选框，单选框等所需的元素.在加载所有库文件之后将其包括在内.

This will inject the elements which are necessary for styling the checkbox, radio etc. Include it after all the library files are loaded.

这篇关于单选按钮和复选框在材料设计中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！