一.表单(以下示例 * 代表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的更多相关文章

随机推荐

  1. 修改maven默认的jdk版本

    修改maven默认的jdk版本,想改彻底需要在maven的全局配文件(settings.xml)增加以下信息:   在profiles 节点下增加: <profile> <id> ...

  2. 搭建高可用mongodb集群(一)——配置mongodb

    在大数据的时代,传统的关系型数据库要能更高的服务必须要解决高并发读写.海量数据高效存储.高可扩展性和高可用性这些难题.不过就是因为这些问题Nosql诞生了. NOSQL有这些优势: 大数据量,可以通过 ...

  3. 2.java相对路径与绝对路径

    1.基本概念的理解 绝对路径:绝对路径就是你的主页上的文件或目录在硬盘上真正的路径,(URL和物理路径)例如:C:xyz/test.txt 代表了test.txt文件的绝对路径.http://www. ...

  4. visual studio code 输出乱码

    问题: 解决方法: 首先,这个与VS本身无关,问题是出现在windows的dos显示设置上. 如何解决这个问题? 1.打开运行,输入cmd: 2.界面顶部右键,选择默认值: 3.将437(OEM-美国 ...

  5. Oracle PL/SQL Dev工具(破解版)被植入勒索病毒的安全预警及自查通告

    [问题描述] 近日,有项目组遇到了勒索软件攻击:勒索代码隐藏在Oracle PL/SQL Dev软件中(网上下载的破解版),里面的一个文件afterconnet.sql被黑客注入了病毒代码.这个代码会 ...

  6. 安装SCOM2012在连接数据库时报错:" SQL Server 的安装版本不受支持"

       在SQL群集上有两个实例,分别为:SQLCSNET1\MSSQLSERVER1和SQLCSNET2\MSSQLSERVER2,在计算机sccmz上安装SCOM2012 SP1中的组件 管理服务器 ...

  7. MP4个人制作

  8. (转)如何解决VC中的警告warning C4251 needs to have dll-interface

    这通常是由于以数据成员方式在DLL导出类中使用了模板类造成的.比如: #include <iostream> #include <vector> using namespace ...

  9. ios 性能优化概述

    在开发IOS程序的时候,不止是简简单单的把代码堆砌起来,或者说有一个比较好的架构,程序就ok的.还需要在程序性能上进行优化.所谓优化,并非只是简单的优化几个算法,让程序看起来跑的更快.优化是有目标的, ...

  10. Eclipse html 编辑器插件下载安装

    需要在eclipse里面编辑html和jsp,语法高亮和语法提示,自动补全等. 一.下载GEF(依赖包): 1.下载地址:http://www.eclipse.org/downloads/downlo ...