一个简单的表单样式:

	<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. 二十四种设计模式:外观模式(Facade Pattern)

    外观模式(Facade Pattern) 介绍为子系统中的一组接口提供一个一致的界面,Facade模式定义了一个高层接口,这个接口使得这一子系统更加容易使用.示例有一个Message实体类,某对象对它 ...

  2. unity, 读写xls

    可以用npoi: http://npoi.codeplex.com/ 把npoi.dll放在unity里即可. 读取代码: using System.IO;using NPOI.SS.UserMode ...

  3. Linux 下SVN自动更新

    1.找到svn的所在目录: 我的目录在/usr/local/svn/myproject 2.新建post-commit vim hooks/post-commit #!/bin/shexport LA ...

  4. string 字符串的分隔处理与list的相互转换

    在指定 String 数组的每个元素之间串联指定的分隔符 String,从而产生单个串联的字符串.(来源于MSDN) 有两个重载函数:[C#]public static string Join(   ...

  5. windows中用eclipse开发Android环境搭建SDK安装异常

    SDK更新时的“https://dl-ssl.google.com refused”错误 Download interrupted: hostname in certificate didn't ma ...

  6. python图像识别--验证码

    1.pip3 install pyocr 2.pip3 install pillow or easy_install Pillow 3.安装tesseract-ocr:http://jaist.dl. ...

  7. html之ol标签

    有序列表,请使用 CSS 来定义列表的类型. 通常和li配对使用 HTML5新属性: compact reversed:降序 start:有序列表的起始值 type:在列表中使用标记类型(1,A,a, ...

  8. jquery显示隐藏toggle

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. no ocijdbc11 in java.library.path linux

    no ocijdbc11 in java.library.path linux vi /etc/profile export ORACLE_HOME=/oracle/database/oracle/p ...

  10. HadoopDoctor:来自腾讯数据仓库TDW的MR诊断系统

    TDW是基于Hadoop生态圈研发的大数据处理平台,MapReduce计算引擎在TDW平台中承担了所有的离线数据计算,是TDW最重要的底层支撑平台之一.在TDW 平台中,除了MR程序会生成MapRed ...