zoukankan      html  css  js  c++  java
  • bootstrap基础学习【表单含按钮】(二)

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>bootstrap基础学习【表单】(二)</title>
            <link rel="stylesheet" href="css/bootstrap.min.css" />
        </head>
        <body style="padding-left: 20px;">
            <h3><strong>1.基础表单</strong></h3>
            在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。
            1、宽度变成了100%
            2、设置了一个浅灰色(#ccc)的边框
            3、具有4px的圆角
            4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化
            5、设置了placeholder的颜色为#999
            <form role="form">
              <div class="form-group">
                <label for="exampleInputEmail1">邮箱:</label>
                <input type="email"  class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">密码</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox"> 记住密码
                </label>
              </div>
              <button type="submit" class="btn btn-default">进入邮箱</button>
            </form>
            
            <h3><strong>2.水平表单  必须满足1、在form元素是使用类名“form-horizontal”。2、配合Bootstrap框架的网格系统。</strong></h3>
            <form class="form-horizontal" role="form">
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
                </div>
              </div>
              <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox"> 记住密码
                    </label>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-default">进入邮箱</button>
                </div>
              </div>
            </form>
            
            <h3><strong>3.内联表单  sr-only 隐藏了lable 为了屏幕阅读器识别输入控件</strong></h3>
            <form class="form-inline" role="form">
              <div class="form-group">
                <!--<label class="sr-only" for="exampleInputEmail2">邮箱</label>-->
                <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
              </div>
              <div class="form-group">
                <label class="sr-only" for="exampleInputPassword2">密码</label>
                <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox"> 记住密码
                </label>
              </div>
              <button type="submit" class="btn btn-default">进入邮箱</button>
            </form>  
            
            <h3><strong>4.表单控件——输入框input 其中type属性是必须的  form-control设置了风格样式</strong></h3>
            <form role="form">
                <div class="form-group">
                    <input type="email" class="form-control" placeholder="Enter email">
                </div>
            </form>
            
            <h3><strong>5.表单控件——下拉选择框select元素 多行选择设置multiple属性的值为multiple</strong></h3>
            <form role="form">
              <div class="form-group">
                <select class="form-control"> 
                  <option>1</option> 
                  <option>2</option> 
                  <option>3</option> 
                  <option>4</option> 
                  <option>5</option> 
                  </select>
              </div>
              <div class="form-group">
                  <select multiple class="form-control"> 
                    <option>1</option> 
                    <option>2</option> 
                    <option>3</option> 
                    <option>4</option> 
                    <option>5</option> 
                  </select>
              </div>
            </form> 
            
            <h3><strong>6.表单控件(文本域textarea) 如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto</strong></h3>
            <form role="form">
              <div class="form-group">
                <textarea class="form-control" rows="3"></textarea>
              </div>
            </form>
            
            <h3><strong>7.表单控件(复选框checkbox和单选择按钮radio)</strong></h3>
            <form role="form">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="">
                        记住密码
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
                        喜欢
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
                        不喜欢
                    </label>
                </div>
            </form>
            
            <h3><strong>8.表单控件(复选框和单选按钮水平排列)</strong></h3>
            <form role="form">
              <div class="form-group">
                <label class="checkbox-inline">
                  <input type="checkbox"  value="option1">游戏
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox"  value="option2">摄影
                </label>
                <label class="checkbox-inline">
                <input type="checkbox"  value="option3">旅游
                </label>
              </div>
              <div class="form-group">
                <label class="radio-inline">
                  <input type="radio"  value="option1" name="sex">男性
                </label>
                <label class="radio-inline">
                  <input type="radio"  value="option2" name="sex">女性
                </label>
                <label class="radio-inline">
                  <input type="radio"  value="option3" name="sex">中性
                </label>
              </div>
            </form>
            
            <h3><strong>9.表单控件大小</strong></h3>
            <h1>案例1</h1>
            <form role="form">
              <div class="form-group">
                <label class="control-label">控件变大</label>
                <input class="form-control input-lg" type="text" placeholder="添加.input-lg,控件变大">
              </div>
              <div class="form-group">
                <label class="control-label">正常大小</label>
                <input class="form-control" type="text" placeholder="正常大小">
              </div>  
              <div class="form-group">
                <label class="control-label">控件变小</label>
                <input class="form-control input-sm" type="text" placeholder="添加.input-sm,控件变小">
              </div> 
            </form> 
              <br>
              <br>
              <br>
             <h1>案例2</h1>
            <form role="form" class="form-horizontal">
              <div class="form-group">
                <div class="col-xs-4">
                  <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
                </div>
                <div class="col-xs-4">
                  <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
                </div>
                <div class="col-xs-4">
                  <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
                </div>
              </div>
              <div class="form-group">
                <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div>
                <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div>
                
              </div>  
              <div class="form-group">
                <div class="col-xs-5">
                  <input class="form-control input-sm" type="text" placeholder=".col-xs-5">
                </div>
                <div class="col-xs-7">
                  <input class="form-control input-sm" type="text" placeholder=".col-xs-7">
                </div>
              </div> 
            </form>
            
            <div class="row">
                <div class="col-xs-4">
                    <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
                </div>
                <div class="col-xs-4">
                    <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
                </div>
                <div class="col-xs-4">
                    <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
                </div>
            </div>
            
            <h3><strong>10.表单控件状态(焦点状态) 添加form-control类</strong></h3>
            <form role="form" class="form-horizontal">
              <div class="form-group">
                <div class="col-xs-6">
                  <input class="form-control input-lg" type="text" placeholder="不是焦点状态下效果">
                </div>
                <div class="col-xs-6">
                  <input class="form-control input-lg" type="text" placeholder="焦点点状态下效果">
                </div>
              </div> 
            </form> 
            
            <h3><strong>11.表单控件状态——禁用状态</strong></h3>
            <h3>示例1</h3>
            <form role="form" class="form-horizontal">
              <div class="form-group">
                <div class="col-xs-6">
                  <input class="form-control input-lg" type="text" placeholder="不是焦点状态下效果">
                </div>
                <div class="col-xs-6">
                  <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用,不可输入" disabled>
                </div>
              </div> 
            </form> 
            <br>
            <br>
            <br>
            <h3>示例2</h3>   
            <form role="form">
              <fieldset disabled>
                <div class="form-group">
                  <label for="disabledTextInput">禁用的输入框</label>
                  <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
                </div>
                <div class="form-group">
                  <label for="disabledSelect">禁用的下拉框</label>
                  <select id="disabledSelect" class="form-control">
                    <option>不可选择</option>
                  </select>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox"> 无法选择
                  </label>
                </div>
                <button type="submit" class="btn btn-primary">提交</button>
              </fieldset>
            </form> 
            <br>
            <br>
            <br>
            <h3>示例3</h3>
            <form role="form">
              <fieldset disabled>
                <legend><input type="text" class="form-control" placeholder="显然我颜色变灰了,但是我没被禁用,不信?单击试一下" /></legend>
                <div class="form-group">
                  <label for="disabledTextInput">禁用的输入框</label>
                  <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
                </div>
                <div class="form-group">
                  <label for="disabledSelect">禁用的下拉框</label>
                  <select id="disabledSelect" class="form-control">
                    <option>不可选择</option>
                  </select>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox"> 无法选择
                  </label>
                </div>
                <button type="submit" class="btn btn-primary">提交</button>
              </fieldset>
            </form> 
            
            <h3><strong>12.表单控件状态(验证状态) 1、.has-warning:警告状态(黄色)2、.has-error:错误状态(红色)3、.has-success:成功状态(绿色)
            has-feedback”,此类名要与“has-error”、“has-warning”和“has-success”在一起    记得引入fonts文件夹</strong></h3>
            <h3>示例1</h3>
            <form role="form">
              <div class="form-group has-success">
                <label class="control-label" for="inputSuccess1">成功状态</label>
                <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
              </div>
              <div class="form-group has-warning">
                <label class="control-label" for="inputWarning1">警告状态</label>
                <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
              </div>
              <div class="form-group has-error">
                <label class="control-label" for="inputError1">错误状态</label>
                <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
              </div>
            </form>  
            <br>
            <br>
            <br>
            <h3>示例2</h3>   
            <form role="form">
              <div class="form-group has-success has-feedback">
                <label class="control-label" for="inputSuccess1">成功状态</label>
                <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
                <span class="glyphicon glyphicon-ok form-control-feedback"></span>
              </div>
              <div class="form-group has-warning has-feedback">
                <label class="control-label" for="inputWarning1">警告状态</label>
                <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
                <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
              </div>
              <div class="form-group has-error has-feedback">
                <label class="control-label" for="inputError1">错误状态</label>
                <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
                <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
              </div>
            </form>
            
            <h3><strong>12.表单提示信息</strong></h3>
            <h3>示例1</h3>
            <form role="form">
              <div class="form-group has-success has-feedback">
                <label class="control-label" for="inputSuccess1">成功状态</label>
                <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
                <span class="help-block">你输入的信息是正确的</span>
                <span class="glyphicon glyphicon-ok form-control-feedback"></span>
              </div>
              <div class="form-group has-warning has-feedback">
                <label class="control-label" for="inputWarning1">警告状态</label>
                <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
                <span class="help-block">请输入正确信息</span>
                <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
              </div>
              <div class="form-group has-error has-feedback">
                <label class="control-label" for="inputError1">错误状态</label>
                <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
                
                <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
              </div>
            </form>    
            <br>
            <br>
            <br>
            <h3>示例2</h3>
            <form role="form">
              <div class="form-group">
                <label class="control-label" for="inputSuccess1">成功状态</label>
                <div class="row">
                  <div class="col-xs-6">
                    <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
                  </div>
                   <span class="col-xs-6 help-block">你输入的信息是正确的</span>
                </div>
              </div> 
            </form>
            
            <h3><strong>13.按钮 建议使用button或a标签来制作按钮</strong></h3>
           <button class="btn">基础按钮.btn</button>
           <br>  
           <button class="btn btn-default" type="button">默认按钮.btn-default</button> 
           <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> 
           <button class="btn btn-success" type="button">成功按钮.btn-success</button> 
           <button class="btn btn-info" type="button">信息按钮.btn-info</button> 
           <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> 
           <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> 
           <button class="btn btn-link" type="button">链接按钮.btn-link</button>
       
       
            <h3><strong>14.按钮大小</strong></h3>
            <button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button> 
            <button class="btn btn-primary" type="button">正常按钮</button>
            <button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>
            <button class="btn btn-primary btn-xs" type="button">小型按钮.btn-sm</button>
        
            <h3><strong>15.块状按钮</strong></h3>
            <button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button> 
            <button class="btn btn-primary  btn-block" type="button">正常按钮</button>
            <button class="btn btn-primary btn-sm  btn-block" type="button">小型按钮.btn-sm</button>
            <button class="btn btn-primary btn-xs" type="button">超小型按钮.btn-xs</button>
        
            <h3><strong>16.按钮状态——禁用状态</strong></h3>
            在Bootstrap框架中,要禁用按钮有两种实现方式:
            方法1:在标签中添加disabled属性
            方法2:在元素标签中添加类名“disabled”
            两者的主要区别是:
            .disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为,则需要通过JavaScript这样的语言来处理。
            对于 a 标签也存在类似问题,如果通过类名“.disable”来禁用按钮,其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。
            <button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button> 
            <button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
            <button class="btn btn-primary btn-sm btn-block" type="button">未禁用的按钮</button>
            
            <h3><strong>17.图像</strong></h3>
            <div class="container">
              <div class="row">
                <div class="col-sm-4">
                  <img   alt="140x140" src="http://placehold.it/140x140">
                    <div>默认图片</div>
                </div>
                <div class="col-sm-4">
                  <img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140"> 
                    <div>圆角图片</div>
                </div>
                <div class="col-sm-4">
                  <img  class="img-circle" alt="140x140" src="http://placehold.it/140x140">
                    <div>圆形图片</div>
                </div>
                  <div class="row">
                    <div class="col-sm-6">
                      <img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140"> 
                        <div>缩略图</div>
                    </div>
                    <div class="col-sm-6">
                      <img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140" /> 
                      <div>响应式图片</div>
                    </div>
                  </div>
              </div>
            </div> 
            <h3><strong>18.图标(一)Bootstrap框架中的图标都是字体图标,其实现原理就是通过@font-face属性加载了字体。添加“glyphicon”类名来实现<br>
                所有名称查看:点击:http://getbootstrap.com/components/#glyphicons</strong></h3>
            <span class="glyphicon glyphicon-search"></span>
            <span class="glyphicon glyphicon-asterisk"></span>
            <span class="glyphicon glyphicon-plus"></span>
            <span class="glyphicon glyphicon-cloud"></span>
        </body>
    </html>
  • 相关阅读:
    【leetcode】106. Construct Binary Tree from Inorder and Postorder Traversal
    【leetcode】105. Construct Binary Tree from Preorder and Inorder Traversal
    【leetcode】236. Lowest Common Ancestor of a Binary Tree
    【leetcode】235. Lowest Common Ancestor of a Binary Search Tree
    【leetcode】352. Data Stream as Disjoint Intervals
    【leetcode】897. Increasing Order Search Tree
    【leetcode】900. RLE Iterator
    BEC listen and translation exercise 26
    BEC listen and translation exercise 25
    BEC listen and translation exercise 24
  • 原文地址:https://www.cnblogs.com/ryans/p/6577587.html
Copyright © 2011-2022 走看看