这次学的CSS样式如标题所述,我们会一个个进行学习,首先我们先看看大纲。
第一种是基本表单,效果如下
基本表单样式就是一个内容占一行。代码如下,
<h3 class="mark">1.1 基本表单</h3>
<form>
<div class="form-group">
<label>name:</label>
<input type="text" class="form-control" />
</div>
</form>
第二个内联表单就是所有内容占一行,效果如下
代码如下(不懂的可以看最上面的解析图)
<h3 class="mark">1.2 内联表单</h3>
<form>
<div class="form-inline">
<label>姓名:</label>
<input type="text" />
</div>
</form>
接下来就是表单结合
代码如下
<h3 class="mark">1.3 表单组合</h3>
<form>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text">
<div class="input-group-addon">.00</div>
</div>
</form>
然后是多选框
代码如下
<h3 class="mark">1.5 表单之多选框</h3>
<h4 class="mark">1.5.1 多行</h4>
<form>
<div class="checkbox disabled">
<label>
<input type="checkbox" />恰飯
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" />睡覺
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" />打豆豆
</label>
</div>
</form>
<h4 class="mark">1.5.2 单行</h4>
<form>
<div class="checkbox disabled">
<label>
<input type="checkbox" />恰飯
</label>
<label>
<input type="checkbox" />睡覺
</label>
<label>
<input type="checkbox" />打豆豆
</label>
</div>
</form>
多行是另外添加2个盒子装内容,单行则是一个盒子(也就是DIV属性)
剩下的内容敬请期待!