一个简单的表单样式:

	<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. 在easyui datagrid中formatter数据后使用linkbutton

    http://ntzrj513.blog.163.com/blog/static/2794561220139245411997/ formatter:function(value,rowData,ro ...

  2. 删除除了Src属性以后的全部属性

      public static string RemoveAllAttributesWithoutSrc(string input)      {                   string p ...

  3. Python 2.x与3.x共存

    (1)检查在Path环境变量中是否有以下4个变量(没有则添加): 1.c:\Python27 2.c:\Python27\Scripts 3.c:\Python35 4.c:\Python35\Scr ...

  4. SMO序列最小最优化算法

    SMO例子: 1 from numpy import * 2 import matplotlib 3 import matplotlib.pyplot as plt 4 5 def loadDataS ...

  5. eclipse报An error has occurred,See error log for more details. java.lang.NullPointerException错误

    eclipse报An error has occurred,See error log for more details. java.lang.NullPointerException错误,解决办法: ...

  6. C#.NET vs2010中使用IrisSkin4.dll轻松实现WinForm窗体换肤功能

    IrisSkin2.dll是一款很不错的免费皮肤控件,利用它可以轻松的实现WinForm窗体换肤 然而IrisSkin2.dll只能在.NET Faremwork 4.0以及之前的版本使用,所以要在V ...

  7. PhoneGap 在 Android 上的插件开发方法介绍

    移动应用开发已经成为软件开发的一个重要方向,但是移动开发面临的一个重要问题就是跨平台的问题.PhoneGap 作为一个多平台的软件开发框架,提供了一次编写多个平台的运行.目前已经支持多达 6 个移动平 ...

  8. lucene之排序、设置权重、优化、分布式搜索(转)

    lucene之排序.设置权重.优化.分布式搜索(转) 1. 基本应用 using System;using System.Collections.Generic;using System.Text;u ...

  9. Linux中升级更新命令yum upgrade和yum update的区别

    区别 Linux升级命令有两个分别是yum upgrade和yum update, 这个两个命令是有区别的: 代码如下: yum -y update #升级所有包,同时也升级软件和系统内核 yum - ...

  10. erlang和java通信

    连接在 https://guts.me/2014/07/27/erlang-communicates-with-java/ 代码在 https://github.com/mingshun/jinter ...