Bootstrap中的表单（1）

class="form-inline" 　　水平排列
class="form-group"　　　组键

form-control　　 　　　　圆角方框发光input-lg　　 　　　　　　 输入框变大
input-sm　　　　 　　　　 输入框变小

小练习：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 7         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 8         <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 9     </head>
10     <body>
11         <from class="form-inline">
12             <div class="form-group">
13                 <label class="form-group has-success">这是一个输入框：</label>
14                 <input type="text" class="form-control input-lg" placeholder="这是一个输入框"/>
15             </div>
16
17             <div class="form-group">
18                 <label class="form-group has-success">这是一个输入框：</label>
19                 <select class="form-control" name="" id="">
20                     <option value="">北京</option>
21                     <option value="">北京</option>
22                     <option value="">北京</option>
23                     <option value="">北京</option>
24                 </select>
25             </div>
26
27             <div class="form-group">
28                 <label class="form-group has-success">这是一个输入框：</label>
29                 <textarea class="form-control" name="" id="" cols="30" rows="10">
30                 </textarea>
31             </div>
32         </from>
33     </body>
34 </html>

示例代码

时间： 2024-12-15 07:20:35

Bootstrap中的表单（1）的相关文章

bootstrap中的表单信息验证

前端对表单输入信息的格式进行验证有很多方法,下面两种方式效果比较不错也很简单.其中第一种仅在点击提交按钮后显示,而第二种很灵活. 对于使用Bootstrap开发的前端,感觉第二种风格比较统一. 第一种:利用html5的新特性在<input>标签中加入新的属性 required:要求不能为空 patten="正则表达式":设置内容的格式 title="提示信息":弹出框的显示内容这一种比较简单,没有利用Bootstrap的特性.效果如下: 第二种:配合

jquery配合Bootstrap中的表单验证插件bootstrapValidator使用方法

使用bootstrap遇到表单校验,最常用的一款表单校验插件 github地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用: 将文件下载或者用 git clone下来 1.引入css到head中,引入js到body结束标签的前面即可提示: 默认是英语的,需要变成中文: 将github中dist中的\js\language\zh_CN.js 引入文件中即可官方完整实例版: <!DOCTYPE html> <html>

Bootstrap中默认表单的创建

<form action=""> <div class="form-group"> <label class="control-label" for="uname">用户名:</label> <input class="form-control" id="uname" type="text"> <spa

Bootstrap历练实例：导航中的表单

Bootstrap历练实例:导航中的表单,它是使用class.navbar-form类,这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为,使用这个对齐方式选项来决定导航栏中的内容放置在哪里. 实例: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>

BootStrap 之 CSS全局样式中的表单

不使用BootStrap 之 CSS全局样式中的表单,自己也不定义CSS样式 <form> <div> <label>Email address</label> <input type="email" placeholder="Email"> </div> <div> <label>Password</label> <input type="p

Bootstrap<基础六> 表单

Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单水平表单垂直或基本表单基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列出了创建基本表单的步骤: 向父 <form> 元素添加 role="form". 把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间

angularjs中的表单验证

angular对html原生的form做了封装,增加了很多验证功能 1.代码结构 <form name="signup_form" novalidate ng-submit="signupForm()"> <div> <label>用户名</label> <input type="text" placeholder="Name" name="name"

html5中form表单新增属性以及改良的input标签元素的种类

在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!DOCTYPE html><html> <head> <title>表单测试</title> <meta charset="utf-8" />  &

Html中的表单

在讲解今天Html表单之前,还是先看张图片来刺激一下. 源码 <span style="font-size:18px;"><html> <head> <title>超链接演示</title>  <body> <h1 align="center">仿百度搜索框</h1> <form action="01.php&quo