When the whole world is about to rain, let's make it clear in our heart together

热爱前端开发,专注于前端

bootstrap-表单二

<!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">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title></title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<!-- form-inline类使表单水平呈现-->
<form  >
       <!-- 所有设置了form-control类的input,textarea,select,元素都将被默认为width:100%   -->
       <div  class="form-group">
               <label   for="exampleInputEmail">Email  address</label>
               <input   type="email"   class="form-control"  id="exampleInputEmail"  placeholder="input">
       </div>
        <div  class="form-group">
               <label   for="exampleInputEmail">Email  address</label>
               <input   type="password"   class="form-control"  id="exampleInputEmail"  placeholder="input">
       </div>
       <div  class="form-group">
              
                <input  type="text"   id="idCard"  aria-label="身份证">
                <p  class="help-block">Example  block-level </p>
       </div>
       <div  class="form-group">
                <label  for="idCard">身份证</label>
                <input  type="text"   id="idCard"  >
                <p  class="help-block">Example  block-level </p>
       </div>
       <label  for="hello1">hello</label><input  type="text"   id="hello"><br>
        <label  for="jiang">hello</label><input  type="text"   id="jiang"><br>
       <!-- sr-only将label标签进行隐藏-->
       <!-- laria-abel 和aria-labelledby的区别-->
       <!--  for标签属性的作用 -->
</form>
<br>
<form   class="form-inline">
           <div  class="form-group">
                     <label  class="src-only"  for="exampleInputAmount">Amount</label>
                     <div  class="input-group">
                                <div  class="input-group-addon">$</div>
                                <input  type="text"  class="form-control "  id="exampleInputAmount"  placeholder="Amount">
                                <div   class="input-group-addon">@</div>
                     </div>
           </div>
           <button  type="submit"  class="btn  btn-primary">search</button>

</form>
<br>
<!--  水平排列的表单control-label文本采用右对齐 -->
<form   class="form-horizontal" >
       <div  class="form-group">
         <label  for="inputEmail"   class="col-sm-2  control-label">Email:</label>
          <div  class="col-sm-10">
                  <input  type="email"   class="form-control"   id="inputEmail"  placeholder="email">
          </div>
       </div>
      <div  class="form-group">
         <label  for="inputPassword"   class="col-sm-2  control-label">Password:</label>
          <div  class="col-sm-10">
                  <input  type="password"   class="form-control"   id="inputPassword"  placeholder="password">
          </div>
       </div>
</form>
<!--  输入框的属性text  password  datetime  datetime-local  date  month  time  week  number  email  week  url  tel  color-->
<!-- disabled表示禁用  -->
<textarea  class="form-control"   rows="3"></textarea><br><br>
<div  class="checkbox  class="checkbox-inline" ">
           <label  class="checkbox-inline"><input  type="checkbox"   value="">choose 1</label>
</div>
<div  class="checkbox  class="checkbox-inline" ">
           <label  class="checkbox-inline"><input  type="checkbox"   value="">choose 2</label>
</div>
<div  class="checkbox  class="checkbox-inline" ">
           <label  class="checkbox-inline"><input  type="checkbox"   value="">choose 3</label>
</div>
<!-- 横向排列控件  -->
<br><br><br>
  <label  class="checkbox-inline"><input  type="checkbox"   value="">choose 1</label>
  <label  class="checkbox-inline"><input  type="checkbox"   value="">choose 2</label>
  <label  class="checkbox-inline"><input  type="checkbox"   value="">choose 3</label>
<!-- 不带label文本的checkbox和radio -->
<div  class="checkbox">
        <label>
                 <input  type="checkbox"   id="blankCheckbox"   value="option1"  aira-label="checkBox">
        </label>
</div>
<div  class="radio">
        <label>
                 <input  type="radio"   id="blankRadio"   value="option1"  aria-label="checkRadio">
        </label>
</div>

<!--  下拉列表 -->
<select   multiple   class="form-control">
         <option>1111</option>
          <option>2222</option>
          <option>3333</option>
          <option>4444</option>
           <option>5555</option>

</select>
<br><br><br>
<!-- 将纯文本和label元素放置到同一行,给p元素加form-control-static类  -->
<form   class="form-horizontal">
             <div  class="form-group">
                     <label    class="col-sm-2   control-label">Email</label>
                     <div  class="col-sm-10">
                              <p  class="form-control-static">email@example.com</p>
                     </div>
             </div>
             <div  class="form-group">
                     <label    class="col-sm-2   control-label"  for="inputPassword">Email</label>
                      <div  class="col-sm-10">
                            <input  type="password"  class="form-control"  id="inputPassword"  disabled="">
                     </div>
             </div>

</form>



























</body>
</html>

 

posted @ 2016-06-03 10:26  婷风  阅读(97)  评论(0编辑  收藏  举报