bootstrap20-水平表单

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>水平表单</title>

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>

<div class="container">

<form action="" role="form" class="form-horizontal">

<div class="form-group">

<label for="firstname" class="col-sm-2 control-label">名称</label>

<div class="col-sm-10">

<input type="text" class="form-control" id="firstname" placeholder="请输入名称">

</div>

</div>

<div class="form-group">

<label for="lastname" class="col-sm-2 control-label">姓</label>

<div class="col-sm-10">

<input type="text" class="form-control" id="lastname" placeholder="请输入姓">

</div>

</div>

<div class="form-group">

<div class="col-sm-offset-2 col-sm-10">

<div class="checkbox">

<label for="">

<input type="checkbox">

</label>

</div>

</div>

</div>

<div class="form-group">

<div class="col-sm-offset-2 col-sm-10">

<button type="submit" class="btn btn-default">登录</button>

</div>

</div>

</form>

</div>

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

时间： 2024-10-21 13:33:30

bootstrap20-水平表单的相关文章

Bootstrap系列 -- 12. 水平表单

Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右) 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1.在<form>元素是使用类名“form-horizontal”. 2.配合Bootstrap框架的网格系统. 在<form>元素上使用类名“form-horizontal”主要有以下几个作用: 1.设置表单控件padding和margin值. 2.改变“form-group”的表现形式,类似于网格系统的

Bootstrap关于表单（二）：水平表单

Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右) 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1.在<form>元素是使用类名“form-horizontal”. 2.配合Bootstrap框架的网格系统.(网格布局会在以后的章节中详细讲解) 在<form>元素上使用类名“form-horizontal”主要有以下几个作用: 1.设置表单控件padding和margin值. 2.改变“form-gr

关于bootstrap--表单（水平表单）

在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:1.在<form>元素是使用类名“form-horizontal”.2.配合Bootstrap框架的网格系统.(网格布局会在以后的章节中详细讲解) 在<form>元素上使用类名“form-horizontal”主要有以下几个作用:1.设置表单控件padding和margin值.2.改变“form-group”的表现形式,类似于网格系统的“row”. <form class="form-horizon

bootstrap学习笔记一 登录水平表单

先上效果图: 样式定义: <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="UserName">用户名</label> <div class="controls"> <input type="tex

Bootstrap表单

Bootstrap通过写简单的html标签和扩展类即可创建不同样式的表单. 一.表单布局 基本的表单结构是Bootstrap自带的,创建一个基本表单的步骤如下: 向<form>元素添加role="form"; 把所有表单控件和标签都放在带有类.form-group的<div>元素中: 在所有文本元素<input>.<textarea>.<select>中添加类.form-control: Bootstrap提供了下列类型的布局

Bootstrap_表单_表单样式

一.基础表单 <form > <div class="form-group"> <label>邮箱:</label> <input type="email" class="form-control" placeholder="请输入您的邮箱地址"> </div> <div class="form-group"> <la

Bootstrap关于表单控件（按扭）

按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现:   ?  input[type=“submit”]   ?  input[type=“button”]   ?  input[type=“reset”]   ?  <button> 这里先让大家看看Bootstrap的按钮长成什么样: 表单控件的大小: 前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了

Boottarp学习（三）表单

基础表单 表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同. 同样,表单也是Bootstrap框架中的核心内容,下面向大家介绍Bootstrap框架中表单的制作. 表单源码查询 Bootstrap框架的表单,其源码占据了大量的代码,同样的,根据不同的Bootstrap版本,你可以轻松获取相应的

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果

bootstrap 表单类

bootstrap 表单类 表单美化 用法: 向父元素 <form role="form"></form>     添加 role="form" 把标签和控件放在   .form-control 类的div里面 向所有的文本元素   input  textarea   seclect   添加类   .form-control 三种表单布局类:  垂直表单(默认)    内联表单     水平表单 摘自菜鸟教程 默认表单<form ro