Bootstrap 学习笔记

1.水平表单

向父<form>元素添加role=”form”以及class.form-horizontal。

把标签和控件放在一个带有class.form-group的<div>中。

向标签添加class.control-label。

向所有的文本元素<input>、<textarea>和<select>添加class.form-control。

为了让<label>和<input>的内容显示在同一行,还需分别添加class=”col-md-*”。
<form role="form" class="form-horizontal">
    <div class="form-group">
        <label for="name" class="control-label col-md-2">username</label>
        <div class="col-md-10">
            <input type="text" >
        </div>
    </div>
</form>

示例结果如下:

Bootstrap 学习笔记

若想要名字username的字体变细,可以在<label>中添加,或者在<head>的<style>标签中添加label{font-weight:lighter},或者创建一个新的class。