总是听到同行的朋友一天最晚报怨,程序开发是一个苦B又烦索的工作,每次除了代码,还有无休止的bug,看着身边的人一个个高楼大厦住着,豪华轿车进进出出,换女朋友比换衣服还勤快,自己只能坐在电脑旁,敲打着键盘,看着冰冷的显示器改改删删,每天忙到深夜。其时,我想说的事,无论何事,只要用心,多想想,有时换个思路,你也会发现,这也行!不信,咱们往下看:
一、 下面咱们以网上的那些登录 、注册的表单和按钮为例
<body>
<form action=" " method="get">
用户名:<input type="text" name="uname" placeholder="请输入用户名" id="uname"><br />
密 码:<input type="password" name="pass" placeholder="请输入密码"><br />
</form>
<body>
运行程序:结果如下,
用户名:
密 码:
二、为什么,自己做出来的东西,就是没别人美观,靓丽,报怨过来,报怨过去,又是写样式,改代码,结果,时时如水般的流走了,自己还在原地,一动不动。事实上,bootstrp为我们封装了CSS,我们只要把别人做好的东西嵌入到代码中去,只要两三钟的功夫,你就成大神了 !
1、首先我们为表单规划一个组,让它在横向显示,在<form>添加类.form-group, 表示这个表单是一个组,form-inline在一行上显示
<div class="form-group form-inline">
2、在用户名和密码的前面添加一个<label>,为用户名和密码框添加两个id名“uname”和“pass”——表示点击文字的时候,光标在文本框内显示,多用在移动开发端
<div class="form-group form-inline">
<label for="uname">用户名:</label>
<input type="text" name="uname" placeholder="请输入用户名" id="uname"><br />
<label for="pass">密 码:</label>
<input type="password" name="pass" placeholder="请输入密码" id="pass"><br/>
</div>
3、运行程序,结果如下:
密 码:
<button type="submit" value="确定" class="btn btn-primary">确定</button>
<button type="reset" value="刷新" class="btn btn-warning">刷新</button>
确定刷新
5、最后结果如图:(如果觉得不喜欢,我们还可以为两个按钮添加样式:margin间距 等,在这就不做演示)
用户名:
密 码:确定刷新