Bootstrap页面布局11 - BS表单
表单之 文本框 text
<input type='text' value='' placeholder='输入您的用户名' class='input-mini' />
①几个类控制文本框长度
input-mini:最小
如图:
input-small:次小
如图:
input-medium:中等
如图:
input-max:最长
如图:
spanN:N代表数字,最大12,N表示1个网格的宽度
例如:span4表示对应的input框占用4个网格的宽度
②属性:placeholder="输入您的用户名",当用户开始输入时,提示文字自动消失。
看图如下:
代码如下:
<label for='username'>用户名</label>
<input id='username' type='text' title='输入您的用户名' class='span-medium' placeholder="输入您的用户名" /><span class='help-block'>以字母开头,16位的字母、数字、下划线的组合</span>
.help-block | .help-inline
提示文字【这里的提示文字是 “以字母开头,16位的字母、数字、下划线的组合”】另起一行显示/在输入框后显示
-----------------------------------------------------------------------------------------------------------------------------------------------------
文本框的前缀和后缀
<div class='input-prepend input-append'><span class='add-on'>¥</span><input type='text' placeholder='输入金额' class='input-medium' /><span class='add-on'>.00</span></div>
说明:
类
.input-prepend:添加前缀
.input-append: 添加后缀
.add-on:修饰要添加的字符,一般使用它的元素为span标签
这时候如图:
在给文本框添加前缀或者是后缀的时候需要添加以下css样式
<style>
.input-prepend input, .input-append input {
margin-top:10px;
}
</style>
这时候再看:
将按钮作为后缀
<div class='input-append'><input type='text' placeholder='请输入搜索内容' class='input-medium' /><button class='btn'>搜索</button></div>
说明:
button:按钮标签
.btn:定义的一个按钮的样式
.input-append:将按钮作为后缀
如果文本框和按钮错位,同样需要设置文本框的margin-top:10px;
-----------------------------------------------------------------------------------------------------------------------------------------------------
表单之单选按钮 radio
简单用法:
<label>性别</label>
<label class='radio'><input type='radio' name='sex' value='1' />男</label>
<label class='radio'><input type='radio' name='sex' value='2' />女</label>
<label class='radio'><input type='radio' name='sex' value='0' />保密</label>
如果要排在同一行上,那么设置label属性的 class='radio inline'
如图效果:
-----------------------------------------------------------------------------------------------------------------------------------------------------
表单之复选按钮 checkbox
<label>请选择下面的书籍类别</label>
<label class='checkbox inline'><input type='checkbox' name='type[]' value='1' />人物传记</label>
<label class='checkbox inline'><input type='checkbox' name='type[]' value='2' />财经</label>
<label class='checkbox inline'><input type='checkbox' name='type[]' value='3' />法律</label>
如果设置label元素的class='checkbox',那么每个checkbox各占一行。
以上代码块中如图效果:
-----------------------------------------------------------------------------------------------------------------------------------------------------
表单之下拉列表 select
<label for='go-where'>到哪去?</label>
<select id='go-where' multiple='multiple'>
<option value='1'>荷兰</option>
<option value='2'>新西兰</option>
<option value='3'>法国</option>
<option value='4'>德国</option>
</select>
注意这里的 multiple="multiple" 表示多选,去掉则是单选下拉列表
以上代码块中的效果如图:
-----------------------------------------------------------------------------------------------------------------------------------------------------
Bootstrap页面布局11 - BS表单的更多相关文章
- Bootstrap页面布局12 - BS表单元素的排版
首先看看这行代码: <label for='account'>帐 号</label> <input id='account' name='account' type='t ...
- 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页面布局20 - BS缩略图
<div class='container-fluid'> <h2 class='page-header'>Bootstrap 缩略图</h2> <ul cl ...
- Bootstrap页面布局18 - BS导航路径以及分页器
导航路径:又叫“面包屑”,功能是让用户知道所处的位置. <!--面包屑--> <ul class='breadcrumb'> <li><a href='#'& ...
- Bootstrap页面布局17 - BS选项卡
代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> < ...
- Bootstrap页面布局6 - BS把已有的固定宽度布局转换成响应式布局
首先引入文件bootstrap-responsive.css <link href="bootstrap/css/bootstrap-responsive.css" rel= ...
- Bootstrap页面布局24 - BS旋转木马功能
代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> < ...
随机推荐
- js选中当前菜单后高亮显示的导航条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 对于JavaScript的函数.NET开发人员应该知道的11件事
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 昨天小感冒今天重感冒,也不能长篇大论.如果你是.NET开发人员,在进入前端开发领域的时候,对 ...
- 人生维艰,何不利用开源.NET函数库让工作更轻松
今天推荐的文章会谈到一些让你工作更轻松的开源.NET函数库. 即使业界有时候认为.NET开源社区不太健康,很多开发团队都更多依赖于微软提供的东西来开发.不过最近在.NET世界中还是诞生了一些优秀和有意 ...
- js执行顺序
我们知道有个全局的 window对象,js的一切皆window上的属性和方法.window上有个window.document属性,记录了整个html的dom树,document是顶层. body 和 ...
- Oracle生成千万测试数据
oracle 生成千万测试数据 做数据库开发或管理的人经常要创建大量的测试数据,动不动就需要上万条,如果一条一条的录入,那会浪费大量的时间,本文介绍了Oracle中如何通过一条SQL快速生成大量的测试 ...
- reqSUB错误
---- ERROR ---- Error in dispatcher subroutine reqSUB: Invalid PAR(1): 0502 上面是用adams/ca加载一个汽车模型时 ...
- ural 1247. Check a Sequence
1247. Check a Sequence Time limit: 0.5 secondMemory limit: 64 MB There is a sequence of integer numb ...
- 一只小蜜蜂...[HDU2044]
一只小蜜蜂... Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- sql 关联查询
SELECT mms_sample_datas.* from mms_sample_datas where mms_sample_datas.mms_id in ( SELECT mms_sample ...
- 【BZOJ】1069: [SCOI2007]最大土地面积(凸包+旋转卡壳)
http://www.lydsy.com/JudgeOnline/problem.php?id=1069 显然这四个点在凸包上,然后枚举两个点找上下最大的三角形即可. 找三角形表示只想到三分QAQ.. ...