bootstrap小例子等

一个简单的表单样式:

	<div class="row">
		<form action="#" class="form-horizontal">
			<div class="form-group has-success">
				<label for="username" class="col-lg-1 control-label">用户名</label>
				<div class="col-lg-11">
					<input type="text" id="username" class="form-control"/>
				</div>
			</div>

			<div class="form-group form-group-lg has-error">
				<label for="passowrd" class="col-lg-1 control-label">密码</label>
				<div class="col-lg-11">
					<input type="text" id="passowrd" class="form-control"/>
				</div>
			</div>

			<div class="form-group">
				<div class="col-lg-5 col-lg-offset-1">
					<div class="checkbox">
						<label class="checkbox-inline"><input type="checkbox" />记住我</label>
						<label class="checkbox-inline"><input type="checkbox" />记住我</label>
					</div>
				</div>
			</div>

			<!-- radio在一行中显示-->
			<div class="form-group">
				<div class="col-lg-5 col-lg-offset-1">
					<div class="radio">
						<label class="radio-inline"><input type="radio" />忘记我</label>
						<label class="radio-inline"><input type="radio" />忘记我</label>
					</div>
				</div>
			</div>

			<!-- select-->
			<div class="form-group">
				<div class="col-lg-5 col-lg-offset-1">
					<select multiple class="form-control">
						<option>1</option>
						<option>2</option>
						<option>3</option>
					</select>
				</div>
			</div>

			<!-- 文本输入框-->
			<div class="form-group">
				<div class="col-lg-5 col-lg-offset-1">
					<textarea class="form-control"></textarea>
				</div>
			</div>

			<div class="form-group">
				<div class="col-lg-1 col-lg-offset-1">
					<input type="button" value="登陆" class="btn btn-primary"/>
				</div>
			</div>
		</form>
	</div>

效果图:

时间: 2024-10-12 18:01:41

bootstrap小例子等的相关文章

37 bootstrap——小例子:下拉框

效果先看 知识点 bootstrap下拉框由div>button ul>li>a 构成 div的类为:dropdown a标签必须写 button的类为: dropdown-toggle 必带属性:data-toggle="dropdown" ul的类为:dropdown-menu 获取事件触发的对象为:event.target 完整代码 <!DOCTYPE html> <html> <head> <meta charset=

bootstrap 模态 modal 小例子

bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title>Bootstrap 实例 - 模态框(Modal)插件</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet&qu

Pure CSS 的网格布局(比bootstrap小很多且易扩展的css UI)

(转自百度经验)http://jingyan.baidu.com/article/48a42057c44fdba9242504dd.html Pure是一个简单.实用的CSS框架,鉴于目前网上对pure的资料比较少,所以我想把使用pure的一些经验介绍给大家,相信你看完本文后也会爱上pure. Pure包含多个模块:Base(基本样式).Grids(网格系统).Forms(表单).Buttons(按钮).Tables(表格).Menus(菜单),本文主要介绍如何使用Grids(网格系统). 1.

laravel 数据库操作小例子

public function demo() { $res = null; //insert数据插入 //$user=array('username'=>'joy','password'=>'123456','age'=>23); //$res = DB::table('users')->insert($user); /* 数据查询 $res = DB::table('users')->where('username','joy')->get(); $res = DB:

spring小例子-springMVC+mybits整合的小例子

这段时间没更博,找房去了...   吐槽一下,自如太坑了...承诺的三年不涨房租,结果今年一看北京房租都在涨也跟着涨了... 而且自如太贵了,租不起了.. 突然有点理解女生找对象要房了..   搬家太受罪了... 今天更一下springMVC整合mybits形成最简单的网站demo. 大概效果就是这样的:左边是数据库查询结果,右边是页面访问结果: 首先,一个简单的springMVC小例子可以看这个http://www.cnblogs.com/xuejupo/p/5236448.html 这是在这

cmake 之一个小例子

cmake,比手写makefile更好的选择 安装cmake,此部分略过 一.新建一个工程 这里我是在windows下使用eclipse新建了一个c工程(PS:我一般新建一个Makefile类型的工程,这样比较干净) 二.建立必要的文件夹 我的工程目录: D:\code\cpp\cmakestudy\test>tree /f 卷 软件 的文件夹 PATH 列表 卷序列号为 0006-17B7 D:. │ .cproject │ .project │ CMakeLists.txt │ ├─bin

简述人脸特异性识别&amp;&amp;一个基于LBP和SVM的人脸识别小例子

原谅我用图片,MAC在Safari里给文章进行图文排版太麻烦啦~ 本文适合初入计算机视觉和模式识别方向的同学们观看~ 文章写得匆忙,加上博主所知甚少,有不妥和勘误请指出并多多包涵. 本文Demo的代码由HZK编写,特征点由月神和YK选择和训练. 转载请注明 copyleft by sciencefans, 2014 为了方便大家学习,附上高维LBP的核心代码 1 ################################################### 2 # 3 # 4 # NO

COM2 --- 小例子

在COM1 的小例子中,,我们大概知道什么是组件类 ,什么是接口了.这小节呢,我们来实现一下由一个组件类去实现两个接口的过程. 新建项目: 我们的 解决方案的 名字是 ComDemoCode ,项目名字是 MathToolKit  这表示 我们的 项目 自动 生成的 DLL  的名字就是 MathToolKit(数学工具包). 我们的继承关系 有必要 给大家 先 列出来,让大家 看看 在这里面,IPrimerMath接口 提供 + - * / % 五个基本运算方法,IAdvanceMath接口提

python try小例子

#!/usr/bin/python import telnetlib import socket try: tn=telnetlib.Telnet('10.67.21.29',60000) except socket.error, e: print e exit(1) tn.set_debuglevel(1) tn.write('quit'+'\n') print 'ok' socket.error为错误类型 e为对象 python try小例子,布布扣,bubuko.com