bootstrap CSS表单、按钮和字体图标
2024-10-20 11:38:47
基础表单
<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>
最新文章
- STM32时钟数
- PHP实现发红包程序
- Camel运行原理分析
- When using SqlDependency without providing an options value, SqlDependency.Start() must be called prior to execution of a command added to the SqlDependency instance.
- Atom 和 markdown 基本使用
- 看大众点评V9新版如何为O2O止血 带领行业下半场回归理性
- Hibernate中的一对一关联和组件的映射
- Thread.CurrentPrincipal & HttpContext.Current.User
- 强大的Resharp插件
- Codeforces Round #335 (Div. 2) C. Sorting Railway Cars 连续LIS
- HDU 4752 Polygon（抛物线长度积分）
- 【LR】关于宽带与比特之间的关系
- HDU2544最短路（dijkstra）
- LeetCode_Simplify Path
- 下拉菜单中的Option对象
- RTNETLINK answers: Operation not permitted
- asp.net mvc重写RequestValidator
- python-cmp()的使用
- WebDriver(Selenium2) 判断页面是否刷新的方法
- gitlab+jenkins持续集成(一)