本文实例为大家分享了引导表单布局的具体代码,供大家参考,具体内容如下
引导提供了下列类型的表单布局:
垂直表单(默认)
内联表单
水平表单
小妞妞做的表单实例:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title>引导教学意见调查表& lt;/title>
& lt;元charset=皍tf - 8”比;
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/css/bootstrap.min.css " rel=巴獠縩ofollow”比;
& lt; style>
身体{
padding-top: 150 px;
padding-bottom: 40像素;
background - color: # D0E9C6;
字体类型:“楷体”;
字体大小:22 px;
}
.col-sm-2 control-label.form-control {
位置:相对;
高度:60 px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-horizontal {
max-width: 800 px;
填充:15 px;
保证金:0汽车;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="容器"比;
& lt;形式类==靶问健毙卸?癴orm-horizontal”角色“#”方法=皃ost”比;
祝辞& lt; div class="形式的班级”;
& lt;标签=皀ame”class=癱ol-sm-2 control-label”祝辞名字& lt;/label>
& lt; div类=癱ol-sm-10”比;
& lt;输入类型=拔谋尽眂lass=氨淼タ丶d=癴irstname”占位符=扒胧淙朊帧痹?
& lt;/div>
& lt;/div>
祝辞& lt; div class="形式的班级”;
& lt;标签="类" class=" col-sm-2 control-label”在班级& lt;/label>
& lt; div类=癱ol-sm-10”比;
& lt;输入类型=拔谋尽眂lass=氨淼タ丶d="姓"占位符=扒胧淙氚嗉丁北?
& lt;/div>
& lt;/div>
祝辞& lt; div class="形式的班级”;
& lt;标签=把ぁ眂lass=癱ol-sm-2 control-label”祝辞学号& lt;/label>
& lt; div类=癱ol-sm-10”比;
& lt;输入类型=拔谋尽眂lass=氨淼タ丶d="学号"占位符=扒胧淙胙Ш拧痹?
& lt;/div>
& lt;/div>
祝辞& lt; div class="形式的班级”;
& lt;标签=発emu”class=癱ol-sm-2 control-label”在科目名称& lt;/label>
& lt; div类=癱ol-sm-10”比;
& lt;输入类型=拔谋尽眂lass=氨淼タ丶d=発emu”占位符=扒胧淙肟颇棵啤氨?
& lt;/div>
& lt;/div>
祝辞& lt; div class="形式的班级”;
& lt;标签=皀ame2”class=癱ol-sm-2 control-label”祝辞意见& lt;/label>
& lt; div类=癱ol-sm-10”比;
& lt;输入类型=拔谋尽崩?=?”比“表单控件”行;
& lt;/div>
& lt;/div>
& lt; div=爸行摹痹诙云?
类& lt;输入类型=疤峤弧?癰tn-success”价值=" https://www.yisu.com/zixun/提交”/比;
& lt;输入类型=鞍磁ァ崩?癰tn-info”价值=" https://www.yisu.com/zixun/取消”/比;
& lt;/div>
& lt;/form>
& lt;/div>
& lt;脚本src=" https://www.yisu.com/zixun/js/jquery.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/js/bootstrap.min.js "祝辞& lt;/script>
& lt;/body>
& lt;/html>
之前
效果图:
参考地址:http://www.w3cschool.cn/bootstrap/bootstrap-v2-forms.html
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
