zoukankan      html  css  js  c++  java
  • 第二百三十四节,Bootstrap表单和图片

    Bootstrap表单和图片

    学习要点:

      1.表单

      2.图片

    本节课我们主要学习一下 Bootstrap 表单和图片功能,通过内置的 CSS 定义,显示各 种丰富的效果。

    一.表单

    Bootstrap 提供了一些丰富的表单样式供开发者使用。

    1.基本格式

    实现基本的表单样式

    form-control样式class类,写在<input>里,设置输入框样式(Bootstrap)
    form-group样式class类,写在输入框外面的<div>里,设置输入框与输入框之间的样式(Bootstrap)

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

    注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式。支持的输入框控件 包括:text、password、datetime、datetime-local、date、month、time、week、 number、email、url、search、tel 和 color。

    2.内联表单

    让表单左对齐浮动,并表现为 inline-block 内联块结构,当小于 768px,会恢复独占样式

    form-inline样式class类,写在<form>里,让表单左对齐浮动,并表现为 inline-block 内联块结构,当小于 768px,会恢复独占样式(Bootstrap)

    <form class="form-inline">
        <div class="form-group">
            <label>电子邮件</label>
            <input type="email" class="form-control" placeholder="请输入您的电子邮件">
        </div>
        <div class="form-group">
            <label>密码</label>
            <input type="password" class="form-control" placeholder="请输入您的密码">
        </div>
    </form>

    大于768px

    小于768px

    3.表单合组

    前后增加片段,给输入框前后加上片段

    input-group-addon样式class类,写在input同级的<div>里,给输入框加一个片段(Bootstrap)
    input-group样式class类,写在input父级的<div>里,将输入框和片段合并(Bootstrap)

    <form class="form-inline">
        <div class="form-group">
            <label>电子邮件</label>
            <input type="email" class="form-control" placeholder="请输入您的电子邮件">
        </div>
        <div class="form-group">
            <label>密码</label>
            <input type="password" class="form-control" placeholder="请输入您的密码">
        </div>
    
        <label>金额</label>
        <div class="input-group">
            <div class="input-group-addon"></div>
            <input type="text" class="form-control">
            <div class="input-group-addon">.00</div>
        </div>
    </form>

    4.水平排列

    让表单内的元素保持水平排列

    form-horizontal样式class类,写在<form>里,让表单内的元素保持水平排列(Bootstrap)
    col-sm-2样式class类,写在<label>里,给输入框的标题设置所占比例(Bootstrap)
    col-sm-10样式class类,写在input的父级<div>里,给输入框设置所占比例(Bootstrap)
    control-label样式class类,写在<label>里,让输入框标题和form元素同步(Bootstrap)

    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">电子邮件</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" placeholder="请输入您的电子邮件">
            </div>
        </div>
    
        <div class="form-group">
            <label class="col-sm-2 control-label">电子邮件</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="请输入名称">
            </div>
        </div>
    </form>

    大屏

    小屏

    注:这里用到了 col-sm 栅格系统,后面章节会重点讲解,而 control-label 表示和 父元素样式同步。

    5.复选框和单选框

    设置复选框,为区块一行

    checkbox样式class类,写在input外层<div>里,设置复选框为区块一行样式(Bootstrap)

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

    设置禁用的复选框

    disabled样式class类,写在input外层<div>里,禁止复选框文字选择(Bootstrap)

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

    设置内联一行显示的复选框

    checkbox-inline样式class类,写在input外层<label>里,设置内联一行显示的复选框(Bootstrap)

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

    设置单选框区块一行显示

    radio样式class类,写在input外层<div>里,设置单选框区块一行显示(Bootstrap)

        <div class="radio">
            <label>
                <input type="radio" name="sex"></label>
        </div>
            <div class="radio">
            <label>
                <input type="radio" name="sex"></label>
        </div>

    设置单选框内联一行显示

    radio-inline样式class类,写在input外层<div>里,设置单选框内联一行显示(Bootstrap)

        <div class="radio-inline">
            <label>
                <input type="radio" name="sex"></label>
        </div>
            <div class="radio-inline">
            <label>
                <input type="radio" name="sex"></label>
        </div>

    注意:禁用单选框和禁用复选框一样

    6.下拉列表

    设置下拉列表

    form-control样式class类,写在<select>里,设置下拉列表(Bootstrap)

        <select class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>

    7.校验状态

    设置校验状态,也就是设置输入框的校验状态样式,

    has-error样式class类,写在input最外层<div>里,设置校验状态,也就是设置输入框的校验状态样式,错误状态(Bootstrap)
    has-success样式class类,写在input最外层<div>里,设置校验状态,也就是设置输入框的校验状态样式,成功状态(Bootstrap)
    has-warning样式class类,写在input最外层<div>里,设置校验状态,也就是设置输入框的校验状态样式,警告状态(Bootstrap)

        <div class="form-group has-error">
            <label class="col-sm-2 control-label">电子邮件</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="请输入名称">
            </div>
        </div>
        <div class="form-group has-success">
            <label class="col-sm-2 control-label">电子邮件</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="请输入名称">
            </div>
        </div>
        <div class="form-group has-warning">
            <label class="col-sm-2 control-label">电子邮件</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="请输入名称">
            </div>
        </div>

    label 标签同步相应状态,如果标题名字没有同步校验状态可以在label标签加class="control-label"同步

    control-label样式class类,写在要同步样式的标签里,将当前元素与最外层div样式同步,也就共用样式(Bootstrap)

        <div class="form-group has-error">
            <label class="col-sm-2 control-label">电子邮件</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="请输入名称">
            </div>
        </div>
        <div class="form-group has-success">
            <label class="col-sm-2 control-label">电子邮件</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="请输入名称">
            </div>
        </div>
        <div class="form-group has-warning">
            <label class="col-sm-2 control-label">电子邮件</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="请输入名称">
            </div>
        </div>

     

    8.给输入框添加额外的文字图标

    文本框右侧内置文本图标

    glyphicon样式class类,写在input同级的<span>里,设置文本图标基础样式(Bootstrap)
    glyphicon-ok样式class类,写在input同级的<span>里,设置文本图标(Bootstrap)
    form-control-feedback样式class类,写在input同级的<span>里,设置文本图标的位置(Bootstrap)
    has-feedback样式class类,写在input最外层的<div>里,将文本图标位置应用到输入框(Bootstrap)

        <div class="form-group has-warning has-feedback">
            <label class="col-sm-2 control-label">电子邮件</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="请输入名称">
                <span class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
        </div>

    图标样式

    glyphicon-ok样式class类,写在input同级的<span>里,成功状态图标(Bootstrap)
    glyphicon-warning-sign样式class类,写在input同级的<span>里,警告状态图标(Bootstrap)
    glyphicon-remove样式class类,写在input同级的<span>里,错误状态图标(Bootstrap)

        <div class="form-group has-success has-feedback">
            <label class="col-sm-2 control-label">电子邮件</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="请输入名称">
                <span class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
        </div>
        <div class="form-group has-warning has-feedback">
            <label class="col-sm-2 control-label">电子邮件</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="请输入名称">
                <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
            </div>
        </div>
        <div class="form-group has-error has-feedback">
            <label class="col-sm-2 control-label">电子邮件</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="请输入名称">
                <span class="glyphicon glyphicon-remove form-control-feedback"></span>
            </div>
        </div>

    9.输入框控制尺寸

    从大到小

    input-lg样式class类,写在<input>里,大尺寸输入框(Bootstrap)
    input-sm样式class类,写在<input>里,小尺寸输入框(Bootstrap)

        <div class="form-group has-success has-feedback">
            <label class="col-sm-2 control-label">电子邮件</label>
            <div class="col-sm-10">
                <input type="text" class="form-control input-lg" placeholder="请输入名称">
                <span class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
        </div>
        <div class="form-group has-warning has-feedback">
            <label class="col-sm-2 control-label">电子邮件</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="请输入名称">
                <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
            </div>
        </div>
        <div class="form-group has-error has-feedback">
            <label class="col-sm-2 control-label">电子邮件</label>
            <div class="col-sm-10">
                <input type="text" class="form-control input-sm" placeholder="请输入名称">
                <span class="glyphicon glyphicon-remove form-control-feedback"></span>
            </div>
        </div>

    注:也可以设置父元素 form-group-lg、form-group-sm,来调整。

    二.图片

    Bootstrap 提供了一些丰富的图片样式供开发者使用。

    1.图片形状

    img-rounded样式class类,写在<img>里,设置图片圆角样式(Bootstrap)
    img-circle样式class类,写在<img>里,设置图片圆形,图片时正方形的就是圆形,图片时长方形的就是椭圆(Bootstrap)
    img-thumbnail样式class类,写在<img>里,设置图片缩略图样式(Bootstrap)

    <img src="img/pic.png" alt="图片" class="img-rounded">
    <img src="img/pic.png" alt="图片" class="img-circle">
    <img src="img/pic.png" alt="图片" class="img-thumbnail">

     2响应式图片

    img-responsive样式class类,写在<img>里,设置图片响应式(Bootstrap)

    <img src="img/pic.png" alt="图片" class="img-thumbnail img-responsive">
    <img src="img/pic.png" alt="图片" class="img-thumbnail img-responsive">
    <img src="img/pic.png" alt="图片" class="img-thumbnail img-responsive">

  • 相关阅读:
    如何使用wei-ui框架,wei-ui框架有哪些组件
    微信小程序tabbar如何配置
    如何使用promise封装wx.request()、
    微信有哪些小程序内置组件,目录结构
    uni-app生命周期
    vue任意关系组件通信与跨组件监听状态 vue-communication
    vue父子组件状态同步的最佳方式续章(v-model篇)
    webstorm中emmet展开a标签和行内元素不换行的解决办法
    深入理解 vue 中 scoped 样式作用域的规则
    javascript事件环微任务和宏任务队列原理
  • 原文地址:https://www.cnblogs.com/adc8868/p/6777725.html
Copyright © 2011-2022 走看看