zoukankan      html  css  js  c++  java
  • bootstrap课程6 bootstrap的表单注意事项有哪些

    bootstrap课程6 bootstrap的表单注意事项有哪些

    一、总结

    一句话总结:

    1、bootstrap中的表单中的每一项是什么样的形式?

    div.form-group>label +input的形式

    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">

    2、form里面的.form-control 类的 input、textarea 和 select 元素都将被默认设置宽度属性为 100%;这样在手机端字太小的时候需要加什么?

    meta viewpoint 这个,这样字就变大了

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    3、上传文件框怎么做到好看?

    用一个图片来代替,把真正的上传文件框隐藏即可
    其实可以去网上找好看的上传样式,直接把样式或者图片弄过来即可

    4、给一个div设置col-sm-2和col-md-2的区别是什么?

    col-sm-2样式在更小的时候才堆叠,换成xs是始终不发生堆叠,也就是总是水平排列

     超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
    栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C
    .container 最大宽度 None (自动) 750px 970px 1170px
    类前缀 .col-xs- .col-sm- .col-md- .col-lg-
    列(column)数 12
    最大列(column)宽 自动 ~62px ~81px ~97px
    槽(gutter)宽 30px (每列左右均有 15px)
    可嵌套
    偏移(Offsets)
    列排序

    5、如何给表单里面的所有input,包括button都添加disabled或者readonly属性?

    别一个个来,那样太麻烦了,直接用<fieldset disabled></fieldset>把需要disabled的属性的包起来

    <form>
      <fieldset disabled>
        <div class="form-group">
          <label for="disabledTextInput">Disabled input</label>
          <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </fieldset>
    </form>

    6、什么是fieldset?

    就是一块区域,上面有字,
    fieldset+legend的形式,legend就是上面提示的字,这个框框上面提示的字

    7、表单用户填写之后的feedback效果是什么?

    就是用户填写对了之后表单后面出现一个对勾,填写错了之后表单后面出现一个叉叉
    在form-group上面添加 has-feedback 实现

    8、表单如何动态显示用户输入正确还是输入错误(比如注册里面的用户名是否已经被注册)?

    ajax+表单的feedback效果+校验色,也就是输入不对之后后面出现比如小叉叉
    可以去参照云之梦的官网

    二、bootstrap的表单注意事项有哪些

    1、相关知识

    表单:
    .form-group
    .form-control
    .checkbox
    .radio
    .form-inline
    .input-group
    .input-group-addon
    .form-horizontal
    .control-label
    .form-control-static
    [readonly]
    [disabled]
    fieldset
    legend

     

     
  • 相关阅读:
    AT89C51单片机的主要组成结构
    Keil C51的库函数
    Keil C51程序设计
    bootchart 使用说明及代码分析
    [转]android下编译libusb和libhackrf
    [转]Android系统编译过程分析
    [转]Android U 盘功能实现和分析
    [转]深入理解Android之设备加密Device Encryption
    [转]Makefile 中:= ?= += =的区别
    [转]Makefile中常用的函数
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9305467.html
Copyright © 2011-2022 走看看