BootStrap -- API学习（三）

**************************第三章 表单*******************************
表单:文本输入框   下拉框   单选框   复选框   文本域   按钮

水平表单:class="form-horizontal"

内联表单:class="form-inline" (联想内联列表)

表单控件:
    输入框input 
        <form role="form">
            <div class="form-group">
                <input type="email" class="form-control" placeholder="Email From">
            </div>
        </form>
    
    下拉框select
        单选：
        <form role="form">
            <div class="form-group">
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
            </div>
        <form>
        
        多选：multiple
        <form role="form">
            <div class="form-group">
                <select multiple class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
            </div>
        <form>
        
    文本域textarea :rows用来定义高度
        <form role="form">
            <div class="form-group">
                <textarea class="form-control" rows="3"></textarea>
            </div>
        </form>
        
    单选框
        <form role="form" class="form-inline">
            <div class="radio">
                <label>
                    <input type="radio" name="hobby" value="football">踢球
                </label>
                <label>
                    <input type="radio" name="hobby" value="game">打游戏
                </label>
                <label>
                    <input type="radio" name="hobby" value="basketball">篮球
                </label>
            </div>
        </form>
    
    复选框
        <form role="form" class="form-inline">
            <div class="checkout">
                <label>
                    <input type="checkbox" name="hobby" value="football">踢球
                </label>
                <label>
                    <input type="checkbox" name="hobby" value="game">打游戏
                </label>
                <label>
                    <input type="checkbox" name="hobby" value="basketball">篮球
                </label>
            </div>
        </form>
    
    水平排列：
    单选框  radio-inline
        <form role="form" >
            <div class="radio">
                <label class="radio-inline">
                    <input type="radio" name="hobby" value="football">踢球
                </label>
                <label class="radio-inline">
                    <input type="radio" name="hobby" value="game">打游戏
                </label>
                <label class="radio-inline">
                    <input type="radio" name="hobby" value="basketball">篮球
                </label>
            </div>
        </form>
    
    复选框  checkout-inline
        <form role="form" >
            <div class="checkout">
                <label class="checkout-inline">
                    <input type="checkbox" name="hobby" value="football">踢球
                </label>
                <label class="checkout-inline">
                    <input type="checkbox" name="hobby" value="game">打游戏
                </label>
                <label class="checkout-inline">
                    <input type="checkbox" name="hobby" value="basketball">篮球
                </label>
            </div>
        </form>
    
    表单控件大小:input-lg  input-sm
        <form role="form">
            <div class="form-group">
                <label>
                    <input type="text" class="form-control input-sm">
                </label>
            </div>
        </form>
        
    表单聚焦状态：
    form-control 触发焦点
    disabled 禁用状态
    <fieldset disable></fieldset> 禁用一个区域
    验证状态  has-success  has-waring  has-error
    
    提示状态
        <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>
        
    
    按钮 (建议使用button 和 a 来制作按钮)
        <button class="btn" type="button">基础按钮.btn</button>  
        <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> 
        
    按钮大小 btn-lg  btn-sm (联想 上面的表单 input-lg  input-sm)
    
    块状按钮 btn-block(没有padding和margin)
    
    按钮状态 diable（禁用）
    
    图像：
        1、img-responsive：响应式图片，主要针对于响应式设计
        2、img-rounded：圆角图片
        3、img-circle：圆形图片
        4、img-thumbnail：缩略图片
        5、默认
        
    图标： 
        <span class="glyphicon glyphicon-search"></span>