Bootstrap页面布局12 - BS表单元素的排版
2014-08-02 23:26
417 查看
首先看看这行代码:
如图效果:
为了使之在同一行上,我们需要改进一下代码
说明:
legend标签:定义表单描述,且下方会有灰色的线
.form-actions: 灰色背景和适当的边距
.controls:包围住表单元素
.control-label:如果要使“密码”文字和文本框在同一线上,需要给“密码”外围的lable添加.control-label类,同时需要给文本框和提示文字外围包围一个类为.cnotrols的div
效果如图:
<label for='account'>帐 号</label> <input id='account' name='account' type='text' value='' placeholder='请输入手机号/邮箱' /> <p class='help-block'>请输入您注册时的手机/邮箱</p> <label for='password'>密 码</label> <input id='password' name='account' type='password' value='' placeholder='请输入账号密码' /> <p class='help-block'>请输入帐号密码</p> <button type='button' class='btn btn-primary'>登 录</button>
如图效果:
为了使之在同一行上,我们需要改进一下代码
<form class='form-horizontal'> <fieldset> <legend>用户登录</legend> <div class='control-group'> <label class='control-label' for='account'>帐 号</label> <div class='controls'> <input id='account' name='account' type='text' value='' placeholder='请输入手机号/邮箱' /> <p class='help-block'>请输入您注册时的手机/邮箱</p> </div> </div> <div class='control-group'> <label class='control-label' for='password'>密 码</label> <div class='controls'> <input id='password' name='account' type='password' value='' placeholder='请输入账号密码' /> <p class='help-block'>请输入帐号密码</p> </div> </div> </fieldset> <div class='form-actions'> <button type='submit' class='btn btn-primary'>登 录</button> </div> </form>
说明:
legend标签:定义表单描述,且下方会有灰色的线
.form-actions: 灰色背景和适当的边距
.controls:包围住表单元素
.control-label:如果要使“密码”文字和文本框在同一线上,需要给“密码”外围的lable添加.control-label类,同时需要给文本框和提示文字外围包围一个类为.cnotrols的div
效果如图:
相关文章推荐
- Bootstrap页面布局3 - BS布局以及流动布局
- Bootstrap页面布局13 - BS按钮
- Bootstrap页面布局6 - BS把已有的固定宽度布局转换成响应式布局
- 【Bootstrap3.0建站笔记一】表单元素排版
- Bootstrap(1)__Bootstrap基础<页面排版,图片,按钮,表格,表单>
- Bootstrap页面布局9 - BS列表
- Bootstrap页面布局24 - BS旋转木马功能
- Bootstrap页面布局19 - BS提示信息
- Bootstrap页面布局1 - 下载BS(bootstrap简称)
- Bootstrap页面布局10 - BS代码
- Bootstrap页面布局18 - BS导航路径以及分页器
- Bootstrap页面布局15 - BS带下拉菜单的按钮
- Bootstrap3.0建站教程(一)之bootstrap表单元素排版
- Bootstrap页面布局20 - BS缩略图
- Bootstrap页面布局22 - BS工具提示
- Bootstrap页面布局8 - BS常用标签与样式
- Bootstrap页面布局2 - 包含BS文件
- Bootstrap页面布局21 - BS对话框设计
- 【Bootstrap3.0建站笔记一】表单元素排版
- CHtmlView浏览器开发遍历页面表单DOM元素