Bootstrap横向表单
主要内容
-
在form上应用.form-horizontal
2.使用栅格系统
3.实际操作
操作
1、新建一个demo03.html,接着再打开demo03.html,将移动设备优和css文件先导入到头文件(粘贴过来就行了),保存一下。
<meta name="viewport"
//移动设备优
content="width=device-width,initial-scale=1, user-scalable=no”>
<title>demo01></title>
//css文件
<link rel="stylesheet" href="css/bootstrap.min.css"/>
2、定义一个div,我们先做两个表单项。
<div class="container">
<form class="form-horizontal" role="from">
<div class="form-group">
<label>用户名:</label>
<input type="text" />
</div>
<div class="form-group">
<label 密码:</label>
<input type="password" />
</div>
3、运行效果
3.4结合栅格系统进行修改,在label上加一个样式,input要放在div里面。相当于form-group占一行,用户名的label标签占两格,这个文本框我们可以设成form-control,因为form-control可以占满整个容器。
<form class="form-horizontal" role="from">
//在表单上设置.form-horizontal这个样式
<div class="form-group">
//我们把form-group当成一行
<label class=" col-sm-2 ">用户名:</label>
//用栅格系统我们可以指定label占多少列
<div class="col-sm-8">
<input type="text" class="form-control"/>
(注意:要给一个control-label,让里面的input占满全屏。)
</div>
</div>
5、运行效果
这里有一个问题,就是当它小于这个768的分辨率时,就变成这样排列了。所以横向排列只适合在大于768的分辨率时候使用。
6、同时,我们发现这还有个 问题就是用户名和文本框之间有一个间距,我们可以在这个地方给一个control-label来调整间距。
<label class=" col-sm-2 control-label">用户名:</label>
7、运行效果,它可以自适应。
8、横向表单第一步是在表单上设置.form-horizontal这个样式,我们把form-group当成一行,现在我们要用栅格系统我们可以指定label占多少列,注意:要给一个control-label。接下来,增加一个div让这个div占栅格的几格,让里面的input占满全屏。我们可以在bootstrap.css中查找一下form-horizontal可以发现它只做了一些边距的设置等。
9、同样的我们可以设置密码的这个label,原理和上面讲的一样。
<div class="form-group">
<label class="control-label col-sm-2">密码:</label>
<div class="col-sm-8">
<input type="password" class="form-control"/>
</div>
</div>
10、运行效果
当分辨率小于768px,就变成纵向排列了。