zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    mac 10.15.7 修改PATH
    oc 属性类型一般用法
    ubuntu解压zip文件名乱码
    telnet 退出
    docker 根据容器创建镜像
    mac android adb device 没有显示设备
    Yii2 查看所有的别名 alias
    Yii2 App Advanced 添加 .gitignore
    ubuntu 18.04 搜狗突然就提示乱码
    An error occured while deploying the file. This probably means that the app contains ARM native code and your Genymotion device cannot run ARM instructions. You should either build your native code to
  • 原文地址:https://www.cnblogs.com/jimcsharp/p/5859659.html
Copyright © 2011-2022 走看看