一.表单

基本格式

注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式。

支持的输入框控件 包括:text、password、datetime、datetime-local、date、month、time、week、 number、email、url、search、tel 和 color。

<form>
<div class="form-group">
<label>电子邮件</label>
<input type="email" class="form-control" placeholder="请输入您的电子邮件">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control" placeholder="请输入您的密码">
</div>
</form>
效果图:

2.内联表单

//让表单左对齐浮动,并表现为 inline-block 内联块结构

注:当小于 768px,会恢复独占样式

<form class="form-inline">
<div class="form-group">
<label>电子邮件</label>
<input type="email" class="form-control" placeholder="请输入您的电子邮件">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control" placeholder="请输入您的密码">
</div>
</form>

3.表单合组

//前后增加片段

<div class="input-group">
<div class="input-group-addon">¥</div>
<input type="text" class="form-control">
<div class="input-group-addon">.00</div>
</div>
效果图:

4.水平排列

//让表单内的元素保持水平排列

<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">电子邮件</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="请输 入您的电子邮件">
</div>
</div>
</form> 效果图

5.复选框和单选框

//设置复选框,在一行

<div class="checkbox">
<label>
<input type="checkbox">
体育 </label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
音乐 </label>
</div>

//设置禁用的复选框

<div class="checkbox disabled">
<label>
<input type="checkbox" disabled> 音乐
</label>
</div>

//设置内联一行显示的复选框

<label class="checkbox-inline">
<input type="checkbox">体育
</label>
<label class="checkbox-inline">
<input type="checkbox" disabled>音乐
</label>

//设置单选框

<div class="radio disabled">
<label>
<input type="radio" name="sex" disabled> 男
</label>
</div>

6.下拉列表

//设置下拉列表

<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

7.校验状态

//设置为错误状态

//label 标签同步相应状态

<label class="control-label">Input with success</label>

<form>
<div class="form-group has-error">
<label class="control-label">电子邮件</label>
<input type="email" class="form-control" placeholder="请输入你的电子邮件">
</div>
</form>

8.添加额外的图标

//文本框右侧内置文本图标

 <form>
<div class="form-group has-feedback">
<label>电子邮件</label>
<input type="email" class="form-control">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</form>

9.控制尺寸

//从大到小

<input type="password" class="form-control input-lg">
<input type="password" class="form-control">
<input type="password" class="form-control input-sm">
注:也可以设置父元素 form-group-lg、form-group-sm,来调整。

二.图片

1.图片形状

//三种形状

<img src="yhmgc/img/4.jpg" alt="图片" class="img-rounded">
<img src="yhmgc/img/4.jpg" alt="图片" class="img-circle">
<img src="yhmgc/img/4.jpg" alt="图片" class="img-thumbnail">
效果图如下

第三种最常用,带边框,是一种微缩图样式的。

//响应式图片

<img src="img/pic.png" alt="图片" class="img-responsive">

Bootstrap 表单和图片 (内联表单,表单合组,水平排列,复选框和单选框,下拉列表,校验状态,添加额外的图标,控制尺寸,图片)的更多相关文章

  1. Jquery学习笔记:操作form表单元素之二(复选框和单选框)

    在上面文章的基础上,我们介绍如何操作表单元素中的 复选框和单选框. 一.复选框 <label> <input type="checkbox" id="i ...

  2. [每日一题] OCP1z0-047 :2013-07-30 表连接――内联视图当作表使用

    用sys用户登录,给oe用户授权dba,以便可以用oe用户查看执行计划: oe@OCM> conn / as sysdba Connected. sys@OCM> grant dba to ...

  3. Bootstrap 一. 排版样式(内联文本元素,对齐,大小写,缩略语,地址文本,引用文本,列表排版 ,代码 )

    第 2 章 排版样式 在 h1 ~ h6 元素之间,还可以嵌入一个 small 元素作为副标题 <h1>Bootstrap 框架 <small>Bootstrap 小标题< ...

  4. SQL内联多个表

    SQL多个表组合成一个表: strSql.Append(@"Select N.NotificationOptionId, S.FullName, No.Title, N.SortCode, ...

  5. JavaScript的DOM_StyleSheet操作内联或链接样式表

    使用 style 属性,仅仅只能获取和设置行内的样式,如果是通过内联<style>或链接<link>提供的样式规则就无可奈何了,使用 getComputedStyle 和cur ...

  6. PHP表单生成器,快速生成现代化的form表单,快速上手

    form-builder PHP表单生成器,快速生成现代化的form表单.包含复选框.单选框.输入框.下拉选择框等元素以及省市区三级联动.时间选择.日期选择.颜色选择.树型.文件/图片上传等功能. 详 ...

  7. web兼容学习分析笔记--块级、内联、内联块级元素

    一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inli ...

  8. css position, display, float 内联元素、块级元素

    position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...

  9. 你好,C++(28)用空间换时间 5.2 内联函数 5.3 重载函数

    5.2  内联函数 通过5.1节的学习我们知道,系统为了实现函数调用会做很多额外的幕后工作:保存现场.对参数进行赋值.恢复现场等等.如果函数在程序内被多次调用,且其本身比较短小,可以很快执行完毕,那么 ...

随机推荐

  1. 安装完最小化 RHEL/CentOS 7 后需要做的 30 件事情(三)码农网

    12. 安装 Apache Tomcat Tomcat 是由 Apache 设计的用来运行 Java HTTP web 服务器的 servlet 容器.按照下面的方法安装 tomcat,但需要指出的是 ...

  2. [hive小技巧]使用limit查询变成抽样,而不是全盘扫描

    将set hive.limit.optimize.enable=true 时,limit限制数据时就不会全盘扫,而是根据限制的数量进行抽样. 同时还有两个配置项需要注意: 1.hive.limit.r ...

  3. 关于遍历javascript 中的json串浏览器输出的结果不统一的情况

    我们在做项目的时候经常会用到javascript的json. 首先说一下javascript的json串是什么,json串属于javascript的一个对象,有键和值对应的对象. 一般的格式是: a ...

  4. ArduinoYun的电源插座

    ArduinoYun的电源插座 Arduino Yun有两排插座,这些插座可以按类型分为三类:电源.数字IO和模拟输入.电源部分主要集中在如图1.7所示的部分本文选自Arduino Yun快速入门教程 ...

  5. Play on Words[HDU1116]

    Play on Words Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  6. BZOJ1444 : [Jsoi2009]有趣的游戏

    建立AC自动机,并求出转移矩阵. 再用$\sum E(终止节点)=1$去替换第一个方程,高斯消元即可. 时间复杂度$O(n^3l^3)$. 注意精度问题,要特判0.00的情况. #include< ...

  7. HTML5离线应用无法更新的定位与解决

    一.些许前提 最近在制作一个Web应用, 其中用到了HTML5的离线应用功能(offline application), 离线应用的概念就不再阐述, 可以查看这两篇文章: http://www.ibm ...

  8. wp ApplicationBar

    WP7中的菜单栏 一个应用程序的菜单栏的内容是有限的,最多不超过4个,排列顺序是以菜单栏中间为中心,然后从左往右排列. WP7提供了两种类型的菜单栏,一种是全局的菜单栏,也就是说在所有的页面中都会出现 ...

  9. TYVJ 1011 NOIP 2008&&NOIP 2000 传纸条&&方格取数 Label:多线程dp

    做题记录:2016-08-15 15:47:07 背景 NOIP2008复赛提高组第三题 描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行 ...

  10. BZOJ3238: [Ahoi2013]差异 (后缀自动机)

    Description Input 一行,一个字符串S Output 一行,一个整数,表示所求值 Sample Input cacao Sample Output 54 HINT 2<=N< ...