bootstrap的文本框的前缀和后缀,单选框和复选框
2015-06-15 22:59
501 查看
文本框的前后缀
这里可能是浏览器的解析问题,没有很好的使前缀和后缀很好的组合在一起
class=”input-append”后缀
class=”input-prepend”前缀
单选按钮
class=”radio”可以更加好的显示单选按钮
复选框
class=”checkbox”可以更好的显示复选框
class=”inline”可以使复选框都在同一行
4000
<div class="container"> <h1 class="page-header">文本框的前缀和后缀</h1> <div class="input-prepend input-append"> <span class="add-on">¥</span><input type="text"><span class="add-on">.00</span> </div> <div class="input-append"> <input type="text"><input type="button" name="aa" value="提交" class="btn"> </div> </div>
这里可能是浏览器的解析问题,没有很好的使前缀和后缀很好的组合在一起
class=”input-append”后缀
class=”input-prepend”前缀
单选按钮
<div class="container"> <h1 class="page-header">单选按钮</h1> <label>选择你的按钮</label> <label class="radio"> <input type="radio" name="gender" value="male">男 </label> <label class="radio"> <input type="radio" name="gender" value="female">女 </label> <label class="radio"> <input type="radio" name="gender" value="other">其他 </label> </div>
class=”radio”可以更加好的显示单选按钮
复选框
<div class="container"> <h1 class="page-header">复选框</h1> <label>选择你喜欢的专业</label> <label class="checkbox inline"> <input type="checkbox" name="cms" value="Java">Java </label> <label class="checkbox inline"> <input type="checkbox" name="cms" value=".Net">.Net </label> <label class="checkbox inline"> <input type="checkbox" name="cms" value="PHP">PHP </label> </div>
class=”checkbox”可以更好的显示复选框
class=”inline”可以使复选框都在同一行
4000
相关文章推荐
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- 基于Bootstrap的网页设计实例
- 精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
- BootStrap实现带有增删改查功能的表格(DEMO详解)
- 通过Tabs方法基于easyUI+bootstrap制作工作站
- BootStrap栅格系统、表单样式与按钮样式源码解析
- bootstrap data与jquery .data
- 解决bootstrap中modal遇到Esc键无法关闭页面
- 基于Bootstrap+jQuery.validate实现Form表单验证
- 页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理
- BOOTSTRAP时间控件显示在模态框下面的bug修复
- el表达式 写入bootstrap表格数据页面的实例代码
- BootStrap便签页的简单应用
- 使用jQuery和Bootstrap实现多层、自适应模态窗口
- 使用java基于pushlet和bootstrap实现的简单聊天室
- 网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
- requirejs 学习笔记 0 3ff8
- 关于Bootstrap之JS插件模态框的重要注意事项
- 【OSChina-MoPaaS应用开发大赛】JeeSite(JES)