Bootstrap学习笔记1--表单样式

简介: 最近感觉学Python有点懵了,想想前端的技能一直比较弱,又偷懒的不愿意一项项仔细去学。思来想去,还是简单的前台框架吧 --> Bootstrap


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


To Be Continue ...




相关文章
N..
|
7月前
|
开发框架 前端开发 UED
Bootstrap表单
Bootstrap表单
N..
72 0
|
7月前
|
前端开发
【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
|
前端开发 程序员 Android开发
Bootstrap+jQuery实现卡片标签样式的分页
Bootstrap+jQuery实现卡片标签样式的分页
69 0
|
6月前
|
机器学习/深度学习 JSON 移动开发
详细解读BootStrap智能表单系列八表单配置json详解
详细解读BootStrap智能表单系列八表单配置json详解
36 0
|
7月前
|
前端开发 JavaScript 容器
Bootstrap 5 保姆级教程(十五):表单
Bootstrap 5 保姆级教程(十五):表单
|
7月前
|
前端开发
bootstrap样式代码案例
bootstrap样式代码案例
|
7月前
|
前端开发 JavaScript 容器
bootstrap样式
bootstrap样式
|
7月前
|
前端开发
uni-app中基于bootstrap的css样式
uni-app中基于bootstrap的css样式
121 0
|
7月前
|
前端开发 JavaScript 容器
BootStrap 组件和样式
BootStrap 组件和样式
67 0