Bootstrap学习笔记(3)--表格和表单

Bootstrap表格

 表格类:

.table只会在表行之间增加横线;

.table-striped会在表格行之间增减斑马线;

.table-hover会给表设置鼠标悬停状态;

.table-border会为所有的表格添加边框;

.table-condensed让表格更加紧凑;

tr,td,th类

.active让某一行单元格或者行处于激活状态;

.success表示成功的样式;

.warning表示警告的样式;

.danger表示危险的样式;

.info表示信息的样式;

  表单类:

  创建表单的基本步骤

(1)首先向form元素添加role="form";

(2)把标签和控件放在一个带有class .form-group的<div>中,这是获取最佳间距锁必须的;

(3)向所有的文本元素<intput><textarea>和<select>添加class .form-control;

  几种表单格式;

  垂直表单-采用以上样式创建的普通表单;

水平表单-在form中增加class .form-horizontal;

内联表单-在form中增加class .form-inline,对于标签元素可以使用.sr-only来隐藏该标签元素(label)

  支持的表单控件:

input,textarea,checkbox,radio,select(可以增加multiple实现多选)

这里特别说明一点,实现内联的复选框或者单选按钮使用checkbox-line属性.

如果想在想放置纯文本那么可以对<p>元素使用.form-control-static

表单控件状态:

可以对div设置has-warning,has-error,has-success来显示内部控件的状态.

可以设置.input-large或者.input-sm来显示控件的大小,或者使用col-lg-*来显示控件占的列数.

可以使用.class-bloc来显示一段内容的解释.

时间: 2024-10-27 05:46:38

Bootstrap学习笔记(3)--表格和表单的相关文章

html+css学习笔记 5[表格、表单]

表格 -- 默认样式重置 表格标签:     table 表格     thead 表格头     tbody 表格主体     tfoot 表格尾     tr 表格行     th 元素定义表头     td 元素定义表格单元 表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充   单元格合并 rowspan  属性规定单元格可横跨的行数.     <td rowspan="2"

bootstrap学习笔记一 登录水平表单

先上效果图: 样式定义: <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="UserName">用户名</label> <div class="controls"> <input type="tex

Bootstrap学习笔记(一)-----表单

水平表单效果 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:1.在<form>元素上使用类名“form-horizontal”.2.配合Bootstrap框架的网格系统. 内联表单效果 有时候我们需要将表单的控件都在一行内显示,只需要在<form>元素上添加类名“form-inline”即可 表单控件样式 需要加上“form-control”,表单focus时才有bootstap样式: 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4

Bootstrap学习笔记(三) 表单

表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 一.基础表单 1.初始化:对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset.legend.label标签进行了定制.如: fieldset {min-width: 0;padding: 0;margin: 0;border: 0;} legend {display: block;width: 100%;padding: 0;margin-bottom: 20px;

Bootstrap快速学习笔记(2)表单系列之二

欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之二 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 表单控件大小 表单控件状态 按钮 图像 详细介绍 表单控件大小表单控件大小可以通过给表单控件添加class类来实现,如果想要比较大,则添加input-lg类,如果想要比较小, 则添加input-sm类,但这仅是对高度进行了处理,如果要对宽度进行处理,需要在每个input控件外围添加div容器并带有col-xs-4类,并 且要在这组控件的外围

Bootstrap快速学习笔记(2)表单系列之一

欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之一 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: .form-control类 水平表单 内联表单 详细介绍 form-control类把该类直接添加到控件上: 1.宽度变成了100%:2.设置了一个浅灰色(#ccc)的边框:3.具有4px的圆角:4.设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化:5.设置了placeholder的颜色为#999 水平表单最外层form标签要

HTML5学习笔记(二)——表单1

表单一直是网页必不可少的一部分,一直以来,表单的作用被无限扩展,发展出了诸多新奇的用法,老版的HTML只支持很少的一部分常用表单,许多的新表单都需要借助CSS与JavaScript语言来进行构建,现在HTML5来了,她带来了新的表单,这些强大的表单项,可以省去一大块复杂的JavaScript代码,很值得去学习. 而且在新的表单里面,不再像以前每个表单都必须位于<form></form>之内,只要在<form></form>内定义一个id,然后在网页任何位置都

Django学习笔记(五)—— 表单

疯狂的暑假学习之  Django学习笔记(五)-- 表单 参考:<The Django Book> 第7章 1. HttpRequest对象的信息 request.path                                 除域名以外的请求路径,斜杠开头                      "/hello/" request.get_host()                      主机名                              

HTML&amp;CSS基础学习笔记1.26-input重置表单

重置表单 <input>的[type]属性值为"button"的时候表示一个普通的按钮,相当于一个<button>标签. <input>的[type]属性值为"reset"时,表示表单重置,它在页面的表现形式也是个按钮,但点击他的时候会让表单重置到页面刚加载时的状态. 看一段代码吧: <!DOCTYPE html> <html lang="en"> <head> <me

HTML之学习笔记(十)表单元素

html表单元素的基本格式为(必须包含在form标签中) 大致可以分为文本类.按钮类.复选框和单选框.文件选择几类 1.文本类 文本框标签<input type = “text“ />,属性size文本框的宽度.maxlength可输入的最大字节长度.readonly=“readonly”文本只读,无法修改 密码框标签<input type = “password” />,在页面显示为黑色小圆点 隐藏标签(隐藏域)<input type=“hidden” />,不会对页