Bootstrap03
一.表单(以下示例 * 代表class)
注意:a.使用表单的关键字form
b.所有的提示词使用label包裹
c.所写内容按div分类,使得层次分明
1.基本表单+表单组合+内联表单
*=form-inline 使得标签都归为一行,即为内联
*=form-group 分组,使得层次分明
*=input-group 使指定符号与输入框分组
*=input-group-addon 使指定符号位于输入框之前
<form class="form-inline">
<div class="form-group">
<label>姓名</label>
<input type="text" name="" id="" value="" />
</div>
<div class="form-group">
<label>密码</label>
<input type="password" name="" id="" value="" />
</div>
<div class="form-group">
<label>薪资</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" name="" id="" value="" />
</div>
</div>
</form>
2.水平排列
*=form-horizontal 表示水平分布
*=control-label 控件组与水平分布一同实现inline所有标签同行的效果
<form class="form-horizontal">
<label class="col-md-6 control-label">用户名</label>
<input class="col-md-6" type="text" name="" id="" value="" />
<label class="col-md-6 control-label">邮箱</label>
<input class="col-md-6" type="email" name="" id="" value="" />
</form>
3.多选框与禁用
*=checkbox disabled 表示多选与禁用
<div class="checkbox disabled">
<label>
<input type="checkbox" disabled="disabled" name="" id="" value="" />吃饭
</label>
</div>
<div class="checkbox">
<label >
<input type="checkbox" name="" id="" value="" />睡觉 </label>
</div>
<div class="checkbox ">
<label>
<input type="checkbox" name="" id="" value="" />打豆豆 </label>
</div>
二.图片
1.响应式图片 img-responsive
2.图片形状
a.img-rounded
b.img-circle
c.img-thumbnail
三.辅助类
1.文本颜色
*=text-muted 灰白色
*=text-primary 海军蓝
*=text-success 成功绿
*=text-info 天空蓝
*=text-danger 危险红
*=text-warning 警告黄
2.背景颜色
*=bg-primary 海军蓝
*=bg-info 天空蓝
*=bg-warning 警告黄
*=bg-danger 危险红
*=success 成功绿
3.关闭按钮 *=close
4.三角符号 *=caret
四.响应式
1.显示 *=visible-lg/md/sm/xs-block/inline
2.隐藏 *=hidden-lg/md/sm/xs
Bootstrap03的更多相关文章
随机推荐
- 修改maven默认的jdk版本
修改maven默认的jdk版本,想改彻底需要在maven的全局配文件(settings.xml)增加以下信息: 在profiles 节点下增加: <profile> <id> ...
- 搭建高可用mongodb集群(一)——配置mongodb
在大数据的时代,传统的关系型数据库要能更高的服务必须要解决高并发读写.海量数据高效存储.高可扩展性和高可用性这些难题.不过就是因为这些问题Nosql诞生了. NOSQL有这些优势: 大数据量,可以通过 ...
- 2.java相对路径与绝对路径
1.基本概念的理解 绝对路径:绝对路径就是你的主页上的文件或目录在硬盘上真正的路径,(URL和物理路径)例如:C:xyz/test.txt 代表了test.txt文件的绝对路径.http://www. ...
- visual studio code 输出乱码
问题: 解决方法: 首先,这个与VS本身无关,问题是出现在windows的dos显示设置上. 如何解决这个问题? 1.打开运行,输入cmd: 2.界面顶部右键,选择默认值: 3.将437(OEM-美国 ...
- Oracle PL/SQL Dev工具(破解版)被植入勒索病毒的安全预警及自查通告
[问题描述] 近日,有项目组遇到了勒索软件攻击:勒索代码隐藏在Oracle PL/SQL Dev软件中(网上下载的破解版),里面的一个文件afterconnet.sql被黑客注入了病毒代码.这个代码会 ...
- 安装SCOM2012在连接数据库时报错:" SQL Server 的安装版本不受支持"
在SQL群集上有两个实例,分别为:SQLCSNET1\MSSQLSERVER1和SQLCSNET2\MSSQLSERVER2,在计算机sccmz上安装SCOM2012 SP1中的组件 管理服务器 ...
- MP4个人制作
- (转)如何解决VC中的警告warning C4251 needs to have dll-interface
这通常是由于以数据成员方式在DLL导出类中使用了模板类造成的.比如: #include <iostream> #include <vector> using namespace ...
- ios 性能优化概述
在开发IOS程序的时候,不止是简简单单的把代码堆砌起来,或者说有一个比较好的架构,程序就ok的.还需要在程序性能上进行优化.所谓优化,并非只是简单的优化几个算法,让程序看起来跑的更快.优化是有目标的, ...
- Eclipse html 编辑器插件下载安装
需要在eclipse里面编辑html和jsp,语法高亮和语法提示,自动补全等. 一.下载GEF(依赖包): 1.下载地址:http://www.eclipse.org/downloads/downlo ...