Bootstrap页面布局12 - BS表单元素的排版
首先看看这行代码:
<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页面布局12 - BS表单元素的排版的更多相关文章
- Bootstrap页面布局11 - BS表单
表单之 文本框 text <input type='text' value='' placeholder='输入您的用户名' class='input-mini' /> ①几个类控制文本框 ...
- 2017年12月17日 ASP.NET 12个表单元素&&简单控件/复合控件
12个表单元素可以分为三大类 第一类:文本类 <input type = "text" /> //普通文本框 <input type = "passwo ...
- HTML——超文本标记语言(表单及12个表单元素)
表单 格式: <form action=" " method="get/post" placehoder=" "></f ...
- Bootstrap页面布局3 - BS布局以及流动布局
1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...
- Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单
代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...
- Bootstrap页面布局9 - BS列表
列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编 ...
- Bootstrap页面布局6 - BS把已有的固定宽度布局转换成响应式布局
首先引入文件bootstrap-responsive.css <link href="bootstrap/css/bootstrap-responsive.css" rel= ...
- Bootstrap页面布局23 - BS折叠内容
<div class='container-fluid'> <h3 class='page-header'>Bootstrap 折叠内容</h3> <!--如 ...
- Bootstrap页面布局20 - BS缩略图
<div class='container-fluid'> <h2 class='page-header'>Bootstrap 缩略图</h2> <ul cl ...
随机推荐
- Java Hour 30 Weather ( 3 )
有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. Hour 30 上回终点 Model 这里有一些java bean 的 风格约 ...
- 以app形式启动chrome——关于chrome命令行
转自:http://wiselyman.iteye.com/blog/2179043 转自:http://bbs.ithome.com/thread-589651-1-1.html 转自:http:/ ...
- ./configure会报错:pr command not found
1.2 安装coreutils 请检查${MinGWDir}/msys/1.0/bin(默认为C:/MinGW/msys/1.0/bin)下有没有pr.exe,如果没有,那么在编译libav过程 ...
- android 检测sqlite数据表中字段(列)是否存在 (转)
原文摘自 http://www.tuicool.com/articles/jmmMnu 一般数据库升级时,需要检测表中是否已存在相应字段(列),因为列名重复会报错.方法有很多,下面列举2种常见的方式: ...
- Android UI组件学习
android.view.View类是全部UI组件的父类. 如果一些属性的内容本类找不到的时候一定要到父类之中进行查找. 所谓的学习组件的过程就是一个文档的查找过程. ※ Android之中所有的组件 ...
- BZOJ 1192: [HNOI2006]鬼谷子的钱袋 数学结论
1192: [HNOI2006]鬼谷子的钱袋 Description 鬼谷子非常聪明,正因为这样,他非常繁忙,经常有各诸侯车的特派员前来向他咨询时政.有一天,他在咸阳游历的时候,朋友告诉他在咸阳最大的 ...
- 回文串+回溯法 URAL 1635 Mnemonics and Palindromes
题目传送门 /* 题意:给出一个长为n的仅由小写英文字母组成的字符串,求它的回文串划分的元素的最小个数,并按顺序输出此划分方案 回文串+回溯:dp[i] 表示前i+1个字符(从0开始)最少需要划分的数 ...
- POJ2115 C Looooops(线性同余方程)
无符号k位数溢出就相当于mod 2k,然后设循环x次A等于B,就可以列出方程: $$ Cx+A \equiv B \pmod {2^k} $$ $$ Cx \equiv B-A \pmod {2^k} ...
- .net如何把导数据入到Excel
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI ...
- BZOJ 1067 & Interval_Tree
1067: [SCOI2007]降雨量 Time Limit: 1 Sec Memory Limit: 162 MB Submit: 3099 Solved: 800 Description 我们常常 ...