序
最近感觉学Python有点懵了,想想前端的技能一直比较弱,又偷懒的不愿意一项项仔细去学。
思来想去,还是简单的前台框架吧 --> Bootstrap
Bootstrap简介
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷
学习Bootstrap需要具备的条件
只要您具备 HTML 和 CSS 的基础知识,您就可以阅读本教程,进而开发出自己的网站。在您学习完本教程后,您即可达到使用 Bootstrap 开发 Web 项目的中等水平
这样的描述,简直让人心花怒放...
Bootstap表单
这几天开发Web可能都要和表单接触,就先草草的学下from相关的内容吧。
form-group
堆叠表单,添加表单组form-inline
内联表单,将多个form子标签放置在一行中from-control
为input元素添加表单控件form-control-label
为input元素添加表单标签input-lg input-sm
使输入框变大/小
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>栅格</title> <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> <style type="text/css"> .container-small{ max-width: 400px; } </style> </head> <body> <form class="container container-small"> <div class="form-group has-success"> <label class="control-label">姓</label> <input class="form-control" /> </div> <div class="form-group has-error"> <label class="control-label">名</label> <input class="form-control" /> </div> <div class="form-group"> <label class="control-label">充值金额</label> <div class="input-group"> <div class="input-group-addon"> $ </div> <input class="form-control" /> </div> </div> <div class="form-group"> <label>来自:</label> <select class="form-control "> <option value="1">西安</option> <option value="2">北京</option> <option value="3">天津</option> </select> </div> <label>银行卡号:</label> <div class="row"> <div class="col-sm-4"> <input type="text" class="form-control" placeholder="xxxx" /> </div> <div class="col-sm-4"> <input type="text" class="form-control" placeholder="xxxx" /> </div> <div class="col-sm-4"> <input type="text" class="form-control" placeholder="xxxx" /> </div> </div> </form> </body> </html>
看下表单效果:
网络异常,图片无法展示
|
表单.png