Bootstrap学习笔记1--表单样式-优快云博客

序

最近感觉学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>

看下表单效果：