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

  • 相关阅读:
    Python判断操作系统类型
    Linux之计划任务
    java web 之 WebRoot和WebContent目录
    天坑 之 java web servlet+jsp项目 配置后 404 (MyEclipse转eclipse)
    MyEclipse开发的java web项目在 Eclipse中无法识别
    Tomcat 改BUG之 localhost:8080 404
    (重要) html概念之 input:name与id详解
    html基础之 input:type
    BeanUtils 以及BeanUtils.populate使用
    bootstrap 之 列表组件使用
  • 原文地址:https://www.cnblogs.com/jimcsharp/p/5859659.html
Copyright © 2011-2022 走看看