Bootstrap入门(五)表单
 
先引入本地的CSS文件 

  <link href="css/bootstrap.min.css" rel="stylesheet">
一.内联表单
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input><textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;
而内联表单,要为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
 
需要手动设置宽度:
在 Bootstrap 中,输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单,我们将这些元素的宽度设置为 width: auto;,因此,多个控件可以排列在同一行。根据你的布局需求,可能需要一些额外的定制化组件。
 
一定要添加 label 标签:
如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为label 设置 .sr-only 类将其隐藏。
 
代码操作(在chrome中运行,不同浏览器效果可能不同):
先创建一个表单 

        <form role="form" class="form-inline">
...
</form> 
在表单中,可以有文本,输入框,选择文件,button按钮等,
 
1.日期。
先创建一个div,class为"form-group",尝试日期的选择:

            <div class="form-group">
<label>日期</label>
<input type="date" class="form-control">
</div>
点击右侧按钮,效果:

2.输入框
(placeholder =X,X为提示内容;type= Y,Y为输入框应遵守的约束):
设置两个输入框,一个是输入邮箱,一个输入密码,一个提示“email ”,另一个提示“password ”

            <div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="email">
<label>Password</label>
<input type="password" class="form-control" placeholder="password">
</div>
 
提示效果:

输入时遵守约束/违反约束时的效果(type="email" 的输入框提示需要@符号,type="password" 的输入框输入内容变成点号):
 

3.选择文件 

            <div class="form-group">
<label>选择</label>
<input type="file">
<p class="help-block">选择文件</p>
</div> 
效果:
点击“选择文件”,选择任意文件后,效果:
4.单选/多选框:
(不同的是,他的class是radio/checkbox) 

            <div class="radio">
<label>
<input type="radio"> Check me out 1
</label>
<label>
<input type="radio"> Check me out2
</label>
<label>
<input type="radio"> Check me out3
</label>
</div>
<br>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out 1
</label>
<label>
<input type="checkbox"> Check me out2
</label>
<label>
<input type="checkbox"> Check me out3
</label>
</div> 
 
效果:

选择后效果:

 
二.水平表单
 
通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。
 
代码操作:
先创建一个class为“form-horizontal”的表单

        <form class="form-horizontal">
...
</form>

添加第一个内容

            <div class="form-group">
<label>email</label>
<input type='email' placeholder="email">
</div> <div class="form-group">
<label>password</label>
<input type='password' placeholder="password">
</div>
但是发现效果有点不对,部分内容被覆盖掉了,如图:
 
我们可以使用栅格来解决这个问题(Bootstrap入门(二)栅格 ),修改代码为

           <div class="form-group">
<label class="col-sm-2 control-label">email</label>
<div class="col-sm-10">
<input type='email' placeholder="email">
</div>
</div> <div class="form-group">
<label class="col-sm-2 control-label">password</label>
<div class="col-sm-10">
<input type='password' placeholder="password">
</div>
</div>
得到的效果是:
 

同样,可以对单/多选框,按钮等都可以这样进行处理,添加代码:

            <div class="form-group">
<div class='col-sm-offset-2 col-sm-10'>
<div class='checkbox'>
<label>
<input type='checkbox'>test
</label>
</div>
</div>
</div> <div class='form-group'>
<div class='col-sm-offset-2 col-sm-10'>
<button type='submit' class="btn btn-default">test</button>
</div>
</div> 
得到

三.表单中的一些处理
有时候,我们希望禁止使用一些输入框,可以添加“disabled ”
            
            <input type="text" class='form-control' placeholder="asd">
<input type="text" class='form-control' placeholder="asd" disabled>
<textarea class="form-control" rows='5'>ASD</textarea>
对比看到第二行变蓝,无法再里面进行编辑,还有一个5行的文本框:
 
 
四.表单输入框颜色
新建一个表单 

        <form role="form">
...
</form> 
先新建几个输入框
         
         <form role="form">
<div class="form-group">
<label>test</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label>test</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label>test</label>
<input class="form-control" type="text">
</div>
</form>
效果:
 

修改/添加输入框的class(添加has-warning /has-success/has-error 等)
         
         <form role="form">
<div class="form-group has-warning">
<label>test</label>
<input class="form-control" type="text">
</div>
<div class="form-group has-success">
<label>test</label>
<input class="form-control" type="text">
</div>
<div class="form-group has-error">
<label>test</label>
<input class="form-control" type="text">
</div>
</form>
根据不同情况,输入框有了不同的颜色效果:
 

如果想使用一些图标,比如:

就要先把本地的css文件改为网络地址
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
新添加一个<span>来承载这个图标,把class改为图标的名字就行,比如: 

            <div class="form-group has-warning has-feedback">
<label>test</label>
<input class="form-control" type="text">
<span class="glyphicon glyphicon-ok form-control-feedback" ></span>
</div>
 
效果
 
组合其他 

           <div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>
效果
 

 
 

Bootstrap入门(五)表单的更多相关文章

  1. Bootstrap<基础六> 表单

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...

  2. bootstrap上传表单的时候上传的数据默认是0 一定要小心

    bootstrap上传表单的时候上传的数据默认是0 一定要小心

  3. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  4. BootStrap 智能表单系列 五 表单依赖插件处理

    这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...

  5. bootstrap 列表 表格 表单 复选 单选 多选 输入框组

    一.列表 ul li 二.表格 table  (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...

  6. Bootstrap学习(2)--表单

    Bootstrap里的role属性,增强标签的语义化,提高识别力,  如:<form role="form"> input.select.textarea等元素,在Bo ...

  7. 黄聪: Bootstrap之Form表单验证神器: BootstrapValidator(转)

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  8. Bootstrap系列 -- 21. 表单提示信息

    平常在制作表单验证时,要提供不同的提示信息.在Bootstrap框架中也提供了这样的效果.使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部. < ...

  9. Bootstrap系列 -- 18. 表单控件大小

    前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了两个不同的类名, ...

  10. Bootstrap系列 -- 14. 表单控件输入框input

    每一个表单都是由表单控件组成.离开了控件,表单就失去了意义.接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识. 单行输入框,常见的文本输入框,也就是input的type属性值为tex ...

随机推荐

  1. STM32开发指南-按键输入实验

    I/O口做为输入的例子.通过配置寄存器设置为输入口,检测对应寄存器的值,判读输入状态,按键是否被按下.

  2. javascript 回调, 单线程执行

    原文: http://www.cnblogs.com/aaronjs/p/3322466.html 这里的"回调"并不是"阻塞",而会空出执行线程,直至操作完成 ...

  3. 强制修改mysql 中root的密码

    /etc/init.d/mysqld stop   (service mysqld stop )/usr/bin/mysqld_safe --skip-grant-tables另外开个SSH连接[ro ...

  4. 64位系统访问注册表SOFTWARE\Microsoft\Windows\CurrentVersion\Uninstall

    public int ChecNonkWoW64() { try { ; string subKey = @"SOFTWARE\Microsoft\Windows\CurrentVersio ...

  5. 我的git常用命令

    git add . # 将所有修改过的工作文件提交暂存区 git commit -m ""

  6. Android开发学习资源

    https://developer.android.google.cn/training/index.html

  7. Cocos2dx 3.1.1 学习笔记整理(3):逐帧动画

    以下代码是在cocos中使用,plist+png 还有SpriteBatchNode播放动画的代码,备份一下,以防git被墙: bool GameMain::init() { if( !Layer:: ...

  8. Content Provider 小结

    Android中的四大组件之一ContentProvider,它支持多个应用间进行存储和读取数据等操作,实现不同应用间的数据共享. ContentProvider,解释为内容提供商.顾名思义,就是对外 ...

  9. Linux建立信任主机

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1.先在本机上面装一个sshpass 的安装包 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 2.ssh-ke ...

  10. [Android]SDK安装

    安装Android环境时,出现的问题 //在国内安装Android环境时,经常会因为Google服务器的原因,出现链接失败的问题. Failed to fetch URL http://dl-ssl. ...