Bootstrap系列 -- 18. 表单控件大小
前面看到的表单控件都正常的大小。可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。这两个类名是:
1. input-sm:让控件比正常大小更小
2. input-lg:让控件比正常大小更大
这两个类适用于表单中的input,textarea和select控件
<h1>案例1</h1>
<form role="form">
<div class="form-group">
<label class="control-label">控件变大</label>
<input class="form-control input-lg" type="text" placeholder="添加.input-lg,控件变大">
</div>
<div class="form-group">
<label class="control-label">正常大小</label>
<input class="form-control" type="text" placeholder="正常大小">
</div>
<div class="form-group">
<label class="control-label">控件变小</label>
<input class="form-control input-sm" type="text" placeholder="添加.input-sm,控件变小">
</div>
Bootstrap系列 -- 18. 表单控件大小的更多相关文章
- Bootstrap系列 -- 14. 表单控件输入框input
每一个表单都是由表单控件组成.离开了控件,表单就失去了意义.接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识. 单行输入框,常见的文本输入框,也就是input的type属性值为tex ...
- Bootstrap历练实例:表单控件大小
表单控件大小 您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度. 实例: <!DOCTYPE html><html><hea ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:表单控件大小
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- AnjularJS系列2 —— 表单控件功能相关指令
第二篇,表单控件功能相关指令. ng-checked控制radio和checkbox的选中状态 ng-selected控制下拉框的选中状态 ng-disabled控制失效状态 ng-multiple控 ...
- bootstrap -- css -- 表单控件
若干css样式 .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14p ...
- Bootstrap的表单控件
支持的表单控件 Bootstrap 支持最常见的表单控件,主要是 input.textarea.checkbox.radio 和 select. 输入框(Input) 最常见的表单文本字段是输入框 i ...
- Bootstrap_表单_表单控件
一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确 ...
- bootstrap 表单控件 控件状态 控件大小 help-block
bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...
- Bootstrap关于表单控件(按扭)
按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现: ☑ input[type=“submit”] ☑ input[type=“button”] ☑ input[type=“r ...
随机推荐
- AngularJS的一点学习笔记
ng-options="item.action for item in todos" ng-options表达式的基本形式, 形如 "<标签> for < ...
- linux—【用户和组的管理操作】(5)
用户:user 组:group 增加:add 修改:modify mod 删除:delete del useradd 增加用户 usermod 修改用户 userdel ...
- Genesis 2.8-2.12
And the LORD God planted a garden eastward in Eden; and there he put the man whom he had formed. 9 A ...
- 【Android UI设计与开发】8.顶部标题栏(一)ActionBar 奥义·详解
一.ActionBar介绍 在Android 3.0中除了我们重点讲解的Fragment外,Action Bar也是一个非常重要的交互元素,Action Bar取代了传统的tittle bar和men ...
- Dev C++支持c++11标准的编译方法
一开始学C++的时候老师推荐的就是Dev C++这个IDE,用起来感觉还不错,使用起来比较简单,而且属于比较轻量级的,不怎么占用内存:缺点可能就是调试功能没有项VS那种大型IDE齐全和好用,不过对于一 ...
- 页面分享代码share
在开发一个页面的时候常常会有这么一个小功能,就是分享该页面中的信息. 常见的分享代码有百度分享,JiaThis分享插件,bshare分享插件等,我主要分享一下自定义分享代码,如下: function ...
- UESTC 900 方老师炸弹 --Tarjan求割点及删点后连通分量数
Tarjan算法. 1.若u为根,且度大于1,则为割点 2.若u不为根,如果low[v]>=dfn[u],则u为割点(出现重边时可能导致等号,要判重边) 3.若low[v]>dfn[u], ...
- Android学习----自适应国际化语言
[前言] 自适应的知识与编程无关,关键在于配置文件的修改.自适应的内容包括:语言.屏幕.平台.今天就来说一下如何自适应国际化言. internationalization (国际化)简称:i18n,因 ...
- 第三方登录之qq登录(转载)
iOS QQ第三方登实现 我们经常会见到应用登陆的时候会有QQ,微信,微博等的第三方登陆 如图: 下面我们主要讲一下qq的第三方登陆如何实现 首先,到官网注册: http://wiki.conne ...
- JCS 的基本使用
JCS 是一款简单的内存缓存,基本使用如下 1.在 classpath 下配置 cache.ccf ,可以使用默认配置 jcs.default= 2.代码 package org.zln.jcs; i ...