一个简单的表单样式:

	<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. Unity模型导入导出

    从3DMAX导出,参考: http://tieba.baidu.com/p/2807225555 -> 使用3dmax 2013,会自带导出 fbx 的功能 -> 从 3dmax 导出 - ...

  2. Maximum number of WAL files in the pg_xlog directory (2)

    Jeff Janes: Hi, As part of our monitoring work for our customers, we stumbled upon an issue with our ...

  3. datagrid combobox事件更新编辑状态下的datagrid行

    请问如何从上图状态 点击下拉的combobox中值然后在不取消datagrid编辑状态下更新这一行另一列的数据,达到下图这样的效果: 非常感谢! 给你的combobox  绑定一个onSelect 事 ...

  4. c# 图片XML序列化与反序列化

    var xmlDoc = new XmlDocument(); xmlDoc.Load(@"C:\Users\*\Desktop\*.xml"); ].ChildNodes[]; ...

  5. axure 母版 模板

    axure的模板区域是非常重要的一个功能,网站的头部.尾部部分等很多页面同时用到的内容,都可以使用母版,因为在母版中只需要修改一次,就可以实现所有的页面更新,可以大大的加速原型的制作速度.需要重复理解 ...

  6. 螺旋矩阵 noip2014普及组

    本题可以直接模拟填数字,也可以直接计算结果. 代码一:(这个代码,缺陷在于数组太大,浪费内存啊.另外,循环次数也不少.总之,时间空间的消耗都不小.) /*======================= ...

  7. Jenkins初探

    最近搞搞接口测试,Postman脚本搞好了,但是每次都要手动运行,是不是太low了?Yes,it is. 最近好多人都在用Jenkins搞自动化部署集成之类的,我也凑热闹搞一下. 前提: 1. 已经安 ...

  8. 使用ExpandableListView——当有Group选项展开时,如何正确获取长按的Group选项。

    当我们使用ExpandableListView时,实现点击一个GroupView则展开ChidView,那么这个时候,Adapter的大小前后是有变化的. 例如:假设有20个GroupView,每个G ...

  9. MySQLAdmin用法

    MySQLAdmin用法用于执行管理性操作.语法是:shell> mysqladmin [OPTIONS] command [command-option] command ...通过执行mys ...

  10. [mysql] MariaDB 10.0.10 GTID复制

    一:概念理解:    1.TID:Transaction ID,即Mysql服务器的事务ID号. 2.GTID:Global Transaction ID,全局事务ID,在整个主从复制架构中任何两个事 ...