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

时间: 2024-10-09 18:10:24

Bootstrap 杂记的相关文章

bootstrap杂记

http://v3.bootcss.com/ 这个国内的中文站点资料很全 如下看个页面的大体框架 http://www.cnblogs.com/sunhaoyu/p/4275190.html <!-- bootstarp 的导航栏默认高度为 50px class="nav navbar-inverse" 设置导航的条样式(当前北京为黑色) 还可以写成class="nav navbar-default" role="navigation" 表

Bootstrap学习杂记

1.排版样式font-size:14px;line-height:20px;<p>段落元素被设置等于1/2行高即10px颜色被设置为#333 h1到h636px 30px 24px 18px 14px 12pxBootstrap分别对h1~h6进行了css样式重构并且支持普通内联元素定义class=(.h1~h6)来实现相同功能 <h1>Bootstarp<small>框架</small></h1>h1~h3下small占父元素的65%h4~h6

[Flask]学习杂记--模板

这个学习杂记主要不是分享经验,更多是记录下falsk的体验过程,以后做东西在深入研究,因为django之前用的时间比较长,所以很多概念都是一看而过,做个试验了解下flask的功能. flask中使用是jinja2 模板,和django自带的模板很类似,但又比django的模板强大,提供了更多有用的工具,基本使用上基本都是一致的. 写了一个小案例,把模板渲染的基本步骤和变量传递的基本使用练习了下. jinjia2 模板文档 http://jinja.pocoo.org/docs/dev/ flas

Bootstrap + AngularJS+ Ashx + SQL Server/MySQL

去年年底12月,为适应移动端浏览需求,花了1个月时间学习Bootstrap,并将公司ASP网站重构成ASP.NET. 当时采取的网站架构: Bootstrap + jQuery + Ashx + SQL Server 时间紧,没人带,只能硬着头皮,最后如期完成,但是也遗留了几个问题. 问题: 1.页面查询条件太复杂,太多的checkbox,jQuery操作DOM虽然方便,但是组合成json提交给后端还是比较麻烦,有没有天然支持json的前端框架或者脚本语言? html控件做的任何修改,都自动保存

CSS,bootstrap表格控制当td内容过长时用省略号表示,以及在不使用bootstrap时过长也用省略号表示

首先需要在table中设置table-layout:fixed; <table style="table-layout:fixed"></table> 然后在表头th中设置每列的宽度 <table style="table-layout:fixed"> <th width="10%">Title01</th> <th width="20%">Title02

Bootstrap &amp; Font Awesome 学习笔记

学习网站:http://bootstrap.ninghao.net/index.html https://www.freecodecamp.cn http://www.runoob.com/bootstrap/bootstrap-tutorial.html Bootstrap 为快速简单的实施 Web 开发准备的前端架构. Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 -- 强调 响应式设计的概念. 通过响应式设计,你无需再为你的网站设计一个手机版的.它在任何尺寸的屏幕上看起

第二百三十八节,Bootstrap输入框和导航组件

Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一.输入框组件 文本输入框就是可以在<input>元素前后加上文字或按钮,可以实现对表单控件的扩展. 在左侧添加文字 input-group-addon样式class类,写在input同级的span里,给输入框添加一个左片段(Bootstrap)input-group样式class类,写在input外层div里,将

第二百三十一节,Bootstrap 介绍

Bootstrap 介绍 学习要点: 1.Bootstrap 概述 2.Bootstrap 特点 3.Bootstrap 结构 4.创建第一个页面 5.学习的各项准备 本节课我们主要了解一下 Boostrap 历史.特点.用途,以及为什么选择 Boostrap 来开 发我们的 Web 项目. 一.Bootstrap 概述 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于 HTML.CSS.JavaScript 的开源框架.该框架代码简洁.视觉优美,可

java杂记-static

首先是static的概念 借鉴 http://lavasoft.blog.51cto.com/62575/18771/  (好吧,都是复制这个的.写的很好,所以我就复制了) static表示"全局"或者"静态"的意思,用来修饰成员变量和成员方法,也可以形成静态static代码块,java中无全局概念. 被static修饰的成员变量和成员方法独立于该类的任何对象,也就是说,它不依赖类特定的实例,被类的所有实例共享.只要这个类被加载,Java虚拟机就能根据类名在运行时数