Bootstrap页面布局11 - BS表单
表单之 文本框 text
<input type='text' value='' placeholder='输入您的用户名' class='input-mini' />
①几个类控制文本框长度
input-mini:最小
如图:
input-small:次小
如图:
input-medium:中等
如图:
input-max:最长
如图:
spanN:N代表数字,最大12,N表示1个网格的宽度
例如:span4表示对应的input框占用4个网格的宽度
②属性:placeholder="输入您的用户名",当用户开始输入时,提示文字自动消失。
看图如下:
代码如下:
<label for='username'>用户名</label>
<input id='username' type='text' title='输入您的用户名' class='span-medium' placeholder="输入您的用户名" /><span class='help-block'>以字母开头,16位的字母、数字、下划线的组合</span>
.help-block | .help-inline
提示文字【这里的提示文字是 “以字母开头,16位的字母、数字、下划线的组合”】另起一行显示/在输入框后显示
-----------------------------------------------------------------------------------------------------------------------------------------------------
文本框的前缀和后缀
<div class='input-prepend input-append'><span class='add-on'>¥</span><input type='text' placeholder='输入金额' class='input-medium' /><span class='add-on'>.00</span></div>
说明:
类
.input-prepend:添加前缀
.input-append: 添加后缀
.add-on:修饰要添加的字符,一般使用它的元素为span标签
这时候如图:
在给文本框添加前缀或者是后缀的时候需要添加以下css样式
<style>
.input-prepend input, .input-append input {
margin-top:10px;
}
</style>
这时候再看:
将按钮作为后缀
<div class='input-append'><input type='text' placeholder='请输入搜索内容' class='input-medium' /><button class='btn'>搜索</button></div>
说明:
button:按钮标签
.btn:定义的一个按钮的样式
.input-append:将按钮作为后缀
如果文本框和按钮错位,同样需要设置文本框的margin-top:10px;
-----------------------------------------------------------------------------------------------------------------------------------------------------
表单之单选按钮 radio
简单用法:
<label>性别</label>
<label class='radio'><input type='radio' name='sex' value='1' />男</label>
<label class='radio'><input type='radio' name='sex' value='2' />女</label>
<label class='radio'><input type='radio' name='sex' value='0' />保密</label>
如果要排在同一行上,那么设置label属性的 class='radio inline'
如图效果:
-----------------------------------------------------------------------------------------------------------------------------------------------------
表单之复选按钮 checkbox
<label>请选择下面的书籍类别</label>
<label class='checkbox inline'><input type='checkbox' name='type[]' value='1' />人物传记</label>
<label class='checkbox inline'><input type='checkbox' name='type[]' value='2' />财经</label>
<label class='checkbox inline'><input type='checkbox' name='type[]' value='3' />法律</label>
如果设置label元素的class='checkbox',那么每个checkbox各占一行。
以上代码块中如图效果:
-----------------------------------------------------------------------------------------------------------------------------------------------------
表单之下拉列表 select
<label for='go-where'>到哪去?</label>
<select id='go-where' multiple='multiple'>
<option value='1'>荷兰</option>
<option value='2'>新西兰</option>
<option value='3'>法国</option>
<option value='4'>德国</option>
</select>
注意这里的 multiple="multiple" 表示多选,去掉则是单选下拉列表
以上代码块中的效果如图:
-----------------------------------------------------------------------------------------------------------------------------------------------------
Bootstrap页面布局11 - BS表单的更多相关文章
- Bootstrap页面布局12 - BS表单元素的排版
首先看看这行代码: <label for='account'>帐 号</label> <input id='account' name='account' type='t ...
- Bootstrap页面布局3 - BS布局以及流动布局
1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...
- Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单
代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...
- Bootstrap页面布局9 - BS列表
列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编 ...
- Bootstrap页面布局20 - BS缩略图
<div class='container-fluid'> <h2 class='page-header'>Bootstrap 缩略图</h2> <ul cl ...
- Bootstrap页面布局18 - BS导航路径以及分页器
导航路径:又叫“面包屑”,功能是让用户知道所处的位置. <!--面包屑--> <ul class='breadcrumb'> <li><a href='#'& ...
- Bootstrap页面布局17 - BS选项卡
代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> < ...
- Bootstrap页面布局6 - BS把已有的固定宽度布局转换成响应式布局
首先引入文件bootstrap-responsive.css <link href="bootstrap/css/bootstrap-responsive.css" rel= ...
- Bootstrap页面布局24 - BS旋转木马功能
代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> < ...
随机推荐
- javascript实现的图数据结构的广度优先 搜索(Breadth-First Search,BFS)和深度优先搜索(Depth-First Search,DFS)
最后一例,搞得快.三天之内走了一次.. 下一步,面象对像的javascript编程. function Dictionary(){ var items = {}; this.has = functio ...
- 烟大 Contest1024 - 《挑战编程》第一章:入门 Problem A: The 3n + 1 problem(水题)
Problem A: The 3n + 1 problem Time Limit: 1 Sec Memory Limit: 64 MBSubmit: 14 Solved: 6[Submit][St ...
- vijos 1006 spfa **
链接:点我 spfa即可
- hdu 2184 01背包变形
转自:http://blog.csdn.net/liuqiyao_01/article/details/8753686 题意:这是又是一道01背包的变体,题目要求选出一些牛,使smartness和fu ...
- Visual Studio从此走入非Windows程序猿家
(此文章同时发表在本人微信公众号"dotNET每日精华文章") 在Build 2015大会上,微软放了很多大招,其中一个让普通(不管是微软生态还是非微软生态的)程序猿都密切关注的就 ...
- strcat函数造成的段错误(Segmentation fault)
转自:http://book.51cto.com/art/201311/419441.htm 3.21 strcat函数造成的段错误 代码示例 int main() { char dest[7]=& ...
- 面试整理之DOM事件阶段
因为快面试了,打开<JavaScript高级程序设计>,对DOM事件进行整理了下 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可 ...
- Linux下配置java的环境变量,So Easy!!
首先,在cd /usr ,mkdir java. 将java安装包放到/usr/java,并解压. 验证java. $ java -version 如果提示有如下安装包包含它,但是没有安装.是环境变量 ...
- throws 和 throw
package unit5; public class Person { private int age; private String name; public String getName() { ...
- 编译x264 for ios
Tested with: x264-snapshot-20140914-2245 我用的是x264-snapshot-20150813-2245.tar.bz2 Xcode 7 依赖gas-prep ...