码迷,mamicode.com
首页 > 其他好文 > 详细

bootstarp表单

时间:2016-11-19 20:15:15      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:cal   支持   boot   remove   com   elements   style   row   div   

<!DOCTYPE html>
<html lang="zh-cn">
     <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>

      <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
     </head>
  <body>
       <div class="input-group">
          <span  class="input-group-addon">用户名</span>
          <input type="text" class="form-control">
       </div>
       <br>
       <div class="input-group input-group-sm">
          <span class="input-group-addon">密码</span>
          <input type="text" class="form-control">
        </div>
          <br>
          <button class="btn btn-success">提交</button>
          <button class="btn btn-warning">取消</button>
    <hr>
        <form action="" method="post">
            <div class="form-group">
              <label for="idd">e-mail</label>
              <input type="email" class="form-control" id="idd" placeholder="username"><br>
            </div>
            <div class="form-group">
              <label for="iid">密码</label>
              <input type="passwd" class="form-control" id="iid" placeholder="userpwd"><br>
            </div>
            <div>
              <label for="ii">file</label>
              <input type="file" id="ii">
              <p class="help-block">text here.</p>
            </div>
            <div class="checkbox">
              <label for="">
                <input type="checkbox">check me out
              </label>
            </div>
            <button type="sunmit" class="btn btn-default">submit</button>
        </form>
<hr>
<br>

<!-- 输入框 type 属性的输入包括大部分控件、文本输入域控件,还支持所有 HTML5 类型的输入控件: text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。 <input type="控件" class="form-control" placeholder="username">-->
<!-- 内联表单    为 <form> 元素添加 .form-inline。 -->
<!-- 水平排列的表单<form> 元素添加 .form-horizontal -->
       <form class="form-inline" role="form">
            <div class="form-group">
              <label class="sr-only" for="idd">e-mail</label>
              <input type="email" class="form-control" id="idd" placeholder="username">
            </div>

            <div class="form-group">
              <div class="input-group">
                <div class="input-group-addon">@</div>
                <input type="passwd" class="form-control" placeholder="userpwd">
              </div>
            </div>
            
            <div class="form-group">
              <label class="sr-only" for="ii">file</label>
              <input type="file" class="form-group" id="ii">
              <p class="help-block">text here.</p>
            </div>
            <div class="checkbox">
              <label for="">
                <input type="checkbox">check me out
              </label>
            </div>
            <button type="sunmit" class="btn btn-default">submit</button>
        </form>

<!-- 静态控件 -->
    <form action="" class="form-horizontal" role="form">
       <div class="form-group">
          <label for="" class="col-sm-3 control-label">email</label>
          <div class="col-sm-9">
            <p class="form-control-static">email@example.com</p>
          </div>
       </div>
      <div class="form-group hsa-success has-feedback">
          <label for="1" class="col-sm-3 control-label">passwd</label>
          <div class="col-sm-9">
            <input type="passwd" id="1" class="form-control">
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
          </div>
       </div>
    </form>
<br>

<!-- 为被禁用的输入框设置 disabled  -->
       <div class="form-group">
          <input type="text" class="form-control" placeholder="userpwd" disabled>
        </div>

<!-- 为只读输入框设置 readonly 属性 -->
        <div class="form-group">
          <input type="text" class="form-control" placeholder="email" readonly>
        </div>
<!-- 校验状态,如 error、warning 和 success 状态,都定义了样式。使用时,添加 .has-warning、.has-error 或 .has-success -->
<!-- 添加额外的图标<div>.has-feedback 类并添加<span class="图标名称+form-control-feedback"></span> -->
    <div class="form-group has-success has-feedback">
      <label for="11" class="control-label">input with success</label>
      <input type="text" class="form-control" id="11">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
    <div class="form-group has-warning has-feedback">
       <label for="22" class="control-label">input with warning</label>
       <input type="text" class="form-control" id="22">
       <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
    </div>
    <div class="form-group has-error has-feedback">
       <label for="22" class="control-label">input with error</label>
       <input type="text" class="form-control" id="22">
       <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
     <div class="checkbox has-success">
        <label for="">
            <input type="checkbox">check with success
        </label>
    </div>
    <div class="has-error">
      <div class="radio">
         <label for="">
          <input type="radio">radio with error
          </label>
      </div>
    </div>

<!-- 控件尺寸通过 .input-lg、xs、sm、 类高度尺寸 -->
<!-- 水平排列的表单组的尺寸通过添加 .form-group-lg 或 .form-group-sm 类 -->
  <div class="form-horizontal" role="form">
    <div class="form-group input-lg">
      <label for="111" class="col-sm-3 control-label">inupt lgsmxsmd</label>
        <div class="col-sm-9">
          <input type="text" class="form-control" id="111">
        </div>
     </div>
     <div class="form-group form-control-lg">
      <label for="111" class="col-sm-3 control-label">inupt lgsmxsmd</label>
        <div class="col-sm-9">
          <input type="text" class="form-control" id="111">
        </div>
     </div>
     <div class="form-group input form-control-sm">
          <label for="1" class="col-sm-3 control-label">passwd</label>
          <div class="col-sm-9">
            <input type="passwd" id="1" class="form-control">
            <span class="help-block">辅助文本辅助文本辅助文本辅助文本辅助文本</span><!-- 辅助文本.help-block -->
          </div>
       </div>   
    </div>

    <!-- 调整列(column)尺寸 -->
    <div class="row">
      <div class="col-xs-2">
        <input type="text" class="form-control" placeholder="col-xs-2">
      </div>
    </div>
    <div class="row">
      <div class="col-xs-3">
        <input type="text" class="form-control" placeholder="col-xs-3">
      </div>
    </div>
    <div class="row">
      <div class="col-xs-4">
        <input type="text" class="form-control" placeholder="col-xs-4">
      </div>
    </div>
<br>
<br>
<br>
<br>
<br>
<br>
    <!-- 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>

  

bootstarp表单

标签:cal   支持   boot   remove   com   elements   style   row   div   

原文地址:http://www.cnblogs.com/xiaoyumi666/p/6081143.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!