bootstrap学习4-表单和图片

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <title>表单和图片</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body style="margin:50px;">
  <!--form 表单
      from-group 表单群组
      form-control 表单基本样式
      from-inline 内联表单样式 让所有表单样式居于一行
      input-group input群组
      input-group-addon表单合并
  -->
  <form class="form-inline" >
  <div class="form-group">
  <label>电子邮箱</label>
  <input type="email" class="form-control" placeholder="请输入您的电子邮箱"/>    
  </div>
  <div class="form-group">
  <label>密码</label>
  <input type="password" class="form-control" placeholder="请输入您的密码"/>    
  </div>
  <div class="input-group">
  <input type="text" class="form-control" placeholder="请输入价格" />
  <div class="input-group-addon">.00</div>
  <div class="input-group-addon">$</div>
  </div>
  </form>
  
  <!--表单水平排列
      form-horizontal
      col-sm-2 格栅系统
  -->
   <form class="form-horizontal" >
  <div class="form-group">
  <label class="col-sm-2 control-label">电子邮箱</label>
  <div class="col-sm-10">
  <input type="email" class="form-control" placeholder="请输入您的电子邮箱"/>    
  </div>
  </div>
  <div class="form-group">
  <label class="col-sm-2 control-label">密码</label>
  <div class="col-sm-10">
  <input type="password" class="form-control" placeholder="请输入您的密码"/>    
  </div>
  </div>
 
  <!--
      checkbox 选择样式
      disabled 禁用
      checkbox-inline 内联一行
  -->
  <div class="checkbox">
  <label class="checkbox-inline">
  <input type="checkbox"/>体育
  </label>
  </div>
  
  <div class="checkbox disabled">
  <label class="checkbox-inline">
  <input type="checkbox"/>数学
  </label>
  </div>
  
  <label class="checkbox-inline">
  <input type="checkbox"/>体育
  </label>
  <label class="checkbox-inline">
  <input type="checkbox"/>数学
  </label>
  </form>
    <!--
      form-control
  -->
  <select class="form-control">
      <option value="">1</option>
      <option value="">2</option>
      <option value="">3</option>
      <option value="">4</option>
      <option value="">5</option>
  </select>
    <!--
      校验状态
      has-error    错误状态
      has-success  成功状态 
      has-warning  警告状态
  -->
  <form>
      <div class="form-group has-success" >
      <label class="control-label">表单</label>
      <input type="email" class="form-control"  placeholder="请输入电子邮箱"/>
      </div>
  </form>
    <!--
      校验状态
      glyphicon-ok  成功图标
      glyphicon-warning-sign  警告图标 
      glyphicon-remove  错误图标
  -->
  <form>
      <div class="form-group has-success has-feedback" >
      <label class="control-label">表单</label>
      <input type="email" class="form-control"  placeholder="请输入电子邮箱"/>
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
  </form>
  <!--控制大小 input-lg input-sm-->
  <input type="text" class="form-control input-lg" />
  <input type="text" class="form-control input-sm" />
  <!--
      图片
      img-rounded 圆角矩形
      img-circle 圆
      img-thumbnail 缩略图
      img-responsive 响应式
  -->
  <img src="img/1.png" alt="图片" class="img-rounded" />
  <img src="img/1.png" alt="图片" class="img-circle" />
  <img src="img/1.png" alt="图片" class="img-thumbnail img-responsive"  />
  
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

 

posted @ 2017-02-12 15:52  daniel-lij  阅读(536)  评论(0编辑  收藏  举报