首页 / html教程

    Bootstrap中的按钮样式,图片样式 介绍

    作者:PHP中文网2018-10-13 17:22:40

    php中文网赞助会员本篇文章就给大家介绍Bootstrap中的按钮与表单结合的样式,图片样式。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。如果大家想要学习和获取更多的bootstrap相关视频教程也可以访问:bootstrap教程

    Bootstrap按钮样式

    1. 表单组

    .form-group : 把表单组合起来

    .form-control : 将样式设置为 width为100% ,圆角边框,适当的蓝色阴影...

    格式:

    <form>
       <p class="form-group">
       <label></label>
       <input type="text" class="form-control"/>
       </p>
    </form>

    注意:只有正确设置了输入框的 type 类型,才能被赋予正确的样式。

    2. 内联表单

    .form-inline : 让表单左对齐浮动,排成一行

    格式:

    <form class="form-inline">
       <input type="text" class="form-control"/>
       <input type="text" class="form-control"/>
    </form>

    3. 表单合组

    .input-group : 和 form-group 作用一样,在合组的时候使用

    .input-group-addon : 要合组的一个元素

    格式:

    <form>
       <p class="input-group">
       <p class="input-group-addon">合组</p>
       <input type="text" class="form-control"/>
       </p>
    </form>

    4. 水平排列

    .form-horizontal : 水平排列的表单,通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了

    格式:

    <form class="form-horizontal">
       <p class="form-group">
       <label></label>
       <input.../>
       </p>
    </form>

    5. 单选复选框

    .checkbox : 复选框的父级元素使用,将复选框变为块级元素

    .checkbox-inline : 复选框的父级元素使用,将复选框拍成一行

    .radio : 单选框的父级元素使用,将单选框变为块级元素

    .radio-inline : 单选框的父级元素使用,将单选框拍成一行

    格式:

    <form>
       <p class="radio">
       <label>
       <input type="radio" name="check" id="" value="" />选择1
       </label>
       </p>
       <p class="radio">
       <label>
       <input type="radio" name="check" id="" value="" />选择2
       </label>
       </p>
    </form>

    6. 下拉列表

    .from-control : 将样式设置为 width为100% ,圆角边框,适当的蓝色阴影...

    格式 :

    <form>
       <select class="form-control">
       <option>下拉列表1</option>
       <option>下拉列表2</option>
       </select>
    </form>

    7. 校验状态

    改变获取焦点时边框和阴影的颜色

    .has-error : 错误的红色

    .has-success : 成功的绿色

    .has-warning : 警告的黄色

    .control-label : 标签同步相应状态

    格式 :

    <form>
       <p class="form-group has-warning">
       <label for="user" class="control-label">用户</label>
       <input type="text" class="form-control" id="user" placeholder="请输入用户名"/>
       </p>
    </form>

    control-label 这个类是 label 同步相应的状态

    8. 添加额外的图标

    .has-feedback : 设置一个位置

    .form-control-feedback : 设置一个元素,相对于有has-feedback类的元素定位

    .glyphicon glyphicon-ok : 对号图标

    .glyphicon-warning-sign : 警告图标

    glyphicon-remove : 错误图标

    ....

    格式 :

    <p class="form-group has-feedback">
       <input type="text" class="form-control">
       <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </p>

    给 span 设置 form-control-feedback 这个类,让它相对于 has-feedback 进行定位,定位到input 框里面的右侧

    9. 控制输入框大小

    .input-lg : 大输入框

    .input-small : 小输入框

    .form-group-lg : 大输入框

    .form-group-sm : 小输入框

    格式 :

    <input type="text" class="form-control input-sm">

    或者直接给父元素设置

    <p class="form-group-lg"></p>

    响应式图片:

    .img-responive : 图片会跟随屏幕的缩放而缩放

    .img-rounded : 圆角矩形图片

    .img-circle : 圆形图片

    .img-thumbnail : 给图片加一个边框

    以上就是Bootstrap中的按钮样式,图片样式 介绍的详细内容,更多请关注php中文网其它相关文章!

    标签:

PHP中文网

未登录