正文
bootstrap CSS表单、按钮和字体图标
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
基础表单
<form role="form">
<div class="form-group">
<label>email</label>
<input type="email" class="form-control" placeholder="user">
</div>
</form>
内联表单
<form role="form" class="form-inline">
<div class="form-group">
<label>email</label>
<input type="email" class="form-control" placeholder="user">
</div>
<div class="form-group">
<lable>密码</lable>
<input type="password" class="form-control" placeholder="password">
</div>
<div class="form-group">
<lable class="sr-only">选择文件</lable>
<input type="file">
<p class="help-block">选择你需要上传的文件</p>
</div>
</form>
水平排列的表单
<form role="form" class="form-horizontal">
<div class="form-group">
<lable class="col-sm-2 control-label">Email</lable>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="form-group">
<lable class="col-sm-2 control-label">password</lable>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="password">
</div>
</div>
表单所支持的控件
<input type="text" class="form-control">
<textarea class="form-control" rows="5">hello</textarea>
复选框
<div class="checkbox">
<label>
<input type="checkbox" value="水果">
水果
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="蔬菜">
蔬菜
</label>
</div>
不可使用标签
<fieldset disabled>
</fieldset>
只读的
<input class="form-control" type="text" readonly>
不同的状态
<form role="form">
<div class="form-group has-warning">
<label>用户名</label>
<input class="form-control" type="text">
</div>
<div class="form-group has-success">
<label>用户名</label>
<input class="form-control" type="text">
</div>
<div class="form-group has-error">
<label>用户名</label>
<input class="form-control" type="text">
</div>
</form>
通过删格系统进行控制大小，位置
bootstrop按钮
<div class="container">
<button type="button" class="btn btn-default">default</button>
<button type="button" class="btn btn-primary">primary</button>
<button type="button" class="btn btn-success">success</button>
<button type="button" class="btn btn-info">info</button>
<button type="button" class="btn btn-warning">warning</button>
<button type="button" class="btn btn-link">link</button>
<button type="button" class="btn btn-danger">dangers</button>
</div>
调整大小
btn-lg btn-sm btn-xs
充满父级容器
btn-block
激活状态
active
禁用状态
disabled="disabled"
建议使用button
bootstrop图片
把图片宽度设为最大化，100% 高度为自适应，图片可能会失真
<img src="" alt="" class="img-circle">
<img src="" alt="" class="img-rounded">
<img src="" alt="" class="img-thumbnail">
字体图标
基类和字体图标子类
基于一个span标签
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
