如何在metro ui中更改输入控件的大小?

时间:2016-09-07 15:41:50

标签: css input microsoft-metro metro-ui-css

如何控制Metro UI Framework中的输入大小?我觉得Bootstrap有class form-group-sm,但MetroUI有类似的东西吗?

1 个答案:

答案 0 :(得分:1)

MetroUI不像Bootstrap那样功能齐全,但有一些简单的options for inputs

<!-- Checkbox -->
<label class="input-control checkbox">
    <input type="checkbox" checked>
    <span class="check"></span>
    <span class="caption">Checkbox</span>
</label>
<!-- Small Checkbox -->
<label class="input-control checkbox small-check">
    <input type="checkbox" checked>
    <span class="check"></span>
    <span class="caption">Checkbox</span>
</label>
<!-- Radio button -->
<label class="input-control radio">
    <input type="radio">
    <span class="check"></span>
    <span class="caption">Radio</span>
</label>
<!-- Small radio button -->
<label class="input-control radio small-check">
    <input type="radio">
    <span class="check"></span>
    <span class="caption">Small radio</span>
</label>

文本框可以是默认或大:

<div class="input-control text big-input">
    <input type="text">
</div>

它还为buttons提供了几个简单的选项:

<button class="button">Caption</button>
<button class="button mini-button">Caption</button>
<button class="button small-button">Caption</button>
<button class="button large-button">Caption</button>