表单之 文本框 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'>&yen;</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表单的更多相关文章

  1. Bootstrap页面布局12 - BS表单元素的排版

    首先看看这行代码: <label for='account'>帐 号</label> <input id='account' name='account' type='t ...

  2. Bootstrap页面布局3 - BS布局以及流动布局

    1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...

  3. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  4. Bootstrap页面布局9 - BS列表

    列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编 ...

  5. Bootstrap页面布局20 - BS缩略图

    <div class='container-fluid'> <h2 class='page-header'>Bootstrap 缩略图</h2> <ul cl ...

  6. Bootstrap页面布局18 - BS导航路径以及分页器

    导航路径:又叫“面包屑”,功能是让用户知道所处的位置. <!--面包屑--> <ul class='breadcrumb'> <li><a href='#'& ...

  7. Bootstrap页面布局17 - BS选项卡

    代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> < ...

  8. Bootstrap页面布局6 - BS把已有的固定宽度布局转换成响应式布局

    首先引入文件bootstrap-responsive.css <link href="bootstrap/css/bootstrap-responsive.css" rel= ...

  9. Bootstrap页面布局24 - BS旋转木马功能

    代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> < ...

随机推荐

  1. js选中当前菜单后高亮显示的导航条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 对于JavaScript的函数.NET开发人员应该知道的11件事

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 昨天小感冒今天重感冒,也不能长篇大论.如果你是.NET开发人员,在进入前端开发领域的时候,对 ...

  3. 人生维艰,何不利用开源.NET函数库让工作更轻松

    今天推荐的文章会谈到一些让你工作更轻松的开源.NET函数库. 即使业界有时候认为.NET开源社区不太健康,很多开发团队都更多依赖于微软提供的东西来开发.不过最近在.NET世界中还是诞生了一些优秀和有意 ...

  4. js执行顺序

    我们知道有个全局的 window对象,js的一切皆window上的属性和方法.window上有个window.document属性,记录了整个html的dom树,document是顶层. body 和 ...

  5. Oracle生成千万测试数据

    oracle 生成千万测试数据 做数据库开发或管理的人经常要创建大量的测试数据,动不动就需要上万条,如果一条一条的录入,那会浪费大量的时间,本文介绍了Oracle中如何通过一条SQL快速生成大量的测试 ...

  6. reqSUB错误

    ---- ERROR ----    Error in dispatcher subroutine reqSUB: Invalid PAR(1): 0502 上面是用adams/ca加载一个汽车模型时 ...

  7. ural 1247. Check a Sequence

    1247. Check a Sequence Time limit: 0.5 secondMemory limit: 64 MB There is a sequence of integer numb ...

  8. 一只小蜜蜂...[HDU2044]

    一只小蜜蜂... Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  9. sql 关联查询

    SELECT mms_sample_datas.* from mms_sample_datas where mms_sample_datas.mms_id in ( SELECT mms_sample ...

  10. 【BZOJ】1069: [SCOI2007]最大土地面积(凸包+旋转卡壳)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1069 显然这四个点在凸包上,然后枚举两个点找上下最大的三角形即可. 找三角形表示只想到三分QAQ.. ...