程序猿的那些事,你知道多少?

       总是听到同行的朋友一天最晚报怨,程序开发是一个苦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、运行程序,结果如下:

用户名:
密 码:


4、在表单一下添加两个按钮:看看,有什么变化

<button type="submit" value="确定" class="btn btn-primary">确定</button>

<button  type="reset" value="刷新"  class="btn btn-warning">刷新</button>


确定刷新 

5、最后结果如图:(如果觉得不喜欢,我们还可以为两个按钮添加样式:margin间距  等,在这就不做演示)

用户名:
密 码:

确定刷新




      

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,337评论 19 139
  • 22年12月更新:个人网站关停,如果仍旧对旧教程有兴趣参考 Github 的markdown内容[https://...
    tangyefei阅读 35,294评论 22 257
  • 之前在Sencha Cmd创建Ext JS示例项目演示了用Sencha Cmd来创建一个Login示例。在这里会演...
    写意悠悠阅读 12,911评论 4 24
  • 今天有幸看到了美丽的玉渊日出
    格物知味阅读 2,578评论 0 0
  • 室友的鼾声 锯断了我的睡眠 脑波音乐、绵长呼吸 复活不了哪怕一刻 黑暗的原力搅动往事 慌慌的心跳撑开了眼皮
    逸童阅读 793评论 0 0