• Bootstrap 杂记


    1,Bootstrap表单生成器: http://www.bootcss.com/p/bootstrap-form-builder/

    2,表单样式: 默认模式、内联模式、水平模式:

    2.1 表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框下拉选择框、单选按钮、复选按钮文本域按钮等。其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同。

      Bootstrap中主要将这些元素的marginpaddingborder等进行了细化设置。当然表单除了这几个元素之外,还有inputselecttextarea等元素,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。

      1. 宽度变成了100%

      2. 设置了一个浅灰色(#ccc)的边框

      3. 具有4px的圆角

      4. 设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化

      5. 设置了placeholder的颜色为#999

    2.2 Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右)

      在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:
      1、在<form>元素是使用类名“form-horizontal”。
      2、配合Bootstrap框架的网格系统。

      在<form>元素上使用类名“form-horizontal”主要有以下几个作用:
      1、设置表单控件padding和margin值。
      2、改变“form-group”的表现形式,类似于网格系统的“row”。

    2.3 有时候我们需要将表单的控件都在一行内显示。在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline”即可

      如果你要在input前面添加一个label标签时,会导致input换行显示。如果你必须添加这样的一个label标签,并且不想让input换行,你需要将label标签也放在容器“form-group”中。

    在label标签运用了一个类名“sr-only”,可以将label标签影藏起来

    2.4

      每一个表单都是由表单控件组成。离开了控件,表单就失去了意义。接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识。

      单行输入框,常见的文本输入框,也就是inputtype属性值为text。在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的。

    转自:http://www.cnblogs.com/qingyuan/p/4598609.html

  • 相关阅读:
    利用闭包向post回调函数传参数
    在seajs中使用require加载静态文件的问题
    jqGrid标题行与第一行之间有很大空白的问题解决。
    关于bootstrapValidator提交问题的解决
    心得(一)
    使用心得(一)
    Dreamweaver CC 2018/64位下载地址及安装教程
    tf.test.is_gpu_available()报错false的解决方案
    Tensorflow——[Could not load dynamic library cudart64_101.dll]解决方案
    如何验证是否正确安装了CUDA
  • 原文地址:https://www.cnblogs.com/jimcsharp/p/5859659.html
Copyright © 2020-2023  润新知