Bootstrap:表单和图片

痛定思痛。 2022-06-13 14:37 219阅读 0赞

## 表单 ##

--------------------

> 1.基本格式：实现基本的表单样式

> 2.内联表单：让所有的表单元素居于一行，表现为inline-block内联块结构。当页面小于768px，会恢复独占样式

> 3.表单合组：前后增加片段

> 4.水平排列：让表单内的元素保持水平排列

> 5.复选框和单选框

<div class="checkbox">
            <label>
                <input type="checkbox" >体育
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" >音乐
            </label>
        </div>
    
    <div class="checkbox disabled">
            <label>
                <input type="checkbox" disabled>音乐
            </label>
        </div>
    
    <label class="checkbox-inline">
            <input type="checkbox">体育
        </label>
        <label class="checkbox-inline">
            <input type="checkbox">音乐
        </label>

> 6.下拉列表：设置下拉列表

> 7.校验状态

*  has-error 错误状态
 *  has-success 成功状态
 *  has-warning 警告状态

<div class="form-group has-success">
            <label class="control-label">电子邮件：</label>
            <input type="email" class="form-control" placeholder="请输入您的电子邮件" >
        </div>

> 8.添加额外的图标：文本框右侧内置文本图标

*  glyphicon-ok 成功状态
 *  glyphicon-warning-sign 警告状态
 *  glyphicon-remove 错误状态

> 9.控制尺寸：从大到小

--------------------

## 图片 ##

--------------------

> 图片形状

<img src="../img/1.jpg" alt="图片" class="img-rounded">
    <img src="../img/1.jpg" alt="图片" class="img-circle">
    <img src="../img/1.jpg" alt="图片" class="img-thumbnail">
    
    <img src="../img/1.jpg" alt="图片" class="img-responsive">