一个简单的表单样式:

	<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>

效果图:

bootstrap小例子等的更多相关文章

  1. bootstrap 模态 modal 小例子

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

  2. bootstrap 模态 modal 小例子【转】

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

  3. 【zTree】 zTree使用的 小例子

    使用zTree树不是第一次了  但是 还是翻阅着之前做的 对照着 使用起来比较方便  这里就把小例子列出来   总结一下使用步骤 这样方便下次使用起来方便一点 使用zTree树的步骤: 1.首先  在 ...

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

    (转自百度经验)http://jingyan.baidu.com/article/48a42057c44fdba9242504dd.html Pure是一个简单.实用的CSS框架,鉴于目前网上对pur ...

  5. 三石推荐!把 Bootstrap 小清新带回家!

    无敌传送门:http://fineui.com/demo_pro/default.aspx?theme=bootstrap1&menu=accordion   喜欢就来赞一个! 把麻烦留给三石 ...

  6. springmvc入门的第一个小例子

    今天我们探讨一下springmvc,由于是初学,所以简单的了解一下 springmvc的流程,后续会持续更新... 由一个小例子来简单的了解一下 springmvc springmvc是spring框 ...

  7. java即时通信小例子

    学习java一段时间了,今天写来一个即时通信的小例子练手在其过程中也学到了一些知识拿出来和大家分享,请路过的各位大神多多赐教... 好了下面讲一下基本的思路: 首先,编写服务器端的程序,简单点说吧就是 ...

  8. Runtime的几个小例子(含Demo)

    一.什么是runtime(也就是所谓的“运行时”,因为是在运行时实现的.)           1.runtime是一套底层的c语言API(包括很多强大实用的c语言类型,c语言函数);  [runti ...

  9. INI配置文件分析小例子

    随手写个解析INI配置字符串的小例子 带测试 #include <iostream> #include <map> #include <string> #inclu ...

随机推荐

  1. mount挂载错误

    错误信息: usa@usa-desktop:~/svn/aispeech/speechplatform/trunk/proxy/src$ sudo mount -t tmpfs -o size=200 ...

  2. PHP-网页跳转的几种方式

    本文总结了跳转到指定网页的几种方式. 1.利用PHP的header函数Location响应头, header是用来向浏览器返回HTTP响应头(详细请看HTTP协议详解) <?php header ...

  3. 套接字I/O模型-WSAEventSelect(转载)

    和WSAAsyncSelect类似,它也允许应用程序在一个或多个套接字上,接收以事件为基础的网络事件通知. 该模型最主要的区别是在于网络事件是由对象句柄完成的,而不是通过窗口例程完成. 事件通知 事件 ...

  4. 用audacity制作循环背景音乐

    用audacity制作循环音乐: 1,将音乐前面一段剪切,粘贴到结尾. 2,选择包含接缝的一个区间,然后 菜单->效果->crossfade clips.

  5. unity, LoadLevelAdditive到帧末才完成

    Application.LoadLevelAdditive文档中说: LoadLevel and LoadLevelAdditive don't happen immediately - a new  ...

  6. Consul

    1. 什么是consul? 是一个服务管理软件. 支持多数据中心下,分布式高可用的,服务发现和配置共享. consul支持健康检查,允许存储键值对. 一致性协议采用 Raft 算法,用来保证服务的高可 ...

  7. CentOS6.4系统启动失败故障排查

    转:http://www.centoscn.com/CentosBug/osbug/2014/1028/4011.html 操作系统启动失败如下图报错: 故障现象: 从图中可以看到,操作系统启动的过程 ...

  8. ExtJs学习笔记之TextField

    输入框TextField 一个基本文本框表单项.可以直接代替传统文本输入框, 或者作为许多复杂基本控件的基类({如@link Ext.form.field.TextArea}) 和Ext.form.f ...

  9. Android Studio 单元测试

    测试的种类 按岗位划分 黑盒测试:测试逻辑业务 白盒测试:测试逻辑方法 按测试粒度分 方法测试:function test 单元测试:unit test 集成测试:integration test 系 ...

  10. 斐波那契(Fibonacci)数列的几种计算机解法

    题目:斐波那契数列,又称黄金分割数列(F(n+1)/F(n)的极限是1:1.618,即黄金分割率),指的是这样一个数列:0.1.1.2.3.5.8.13.21.34.…….在数学上,斐波纳契数列以如下 ...