Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识.
1.列表篇
除了HTML提供的三种基本列表样式:
无序列表
<ul>
<li>…</li>
</ul>
有序列表
<ol>
<li>…</li>
</ol>
定义列表
<dl>
<dt>…</dt>
<dd>…</dd>
</dl>
Bootstrap根据平时的使用情形提供了六种形式的列表：
☑ 普通列表
☑ 有序列表
☑ 去点列表
☑ 内联列表
☑ 描述列表
☑ 水平描述列表
以有序列表为例 有时候我们不需要列表前面的数字 那么就需要用到框架中一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
说白了就是把以前自带的样式全都去掉了.
说到这里简单说一下很多框架都出了一些看似很鸡肋的样式,比如这个还有一些去除字体样式巴拉巴拉的(说实话开始我也觉得就是多此一举) 但是使用框架那么尽量不要手动去修改或者自己写一些样式去替代框架样式,也许当时解决了你得一时之需以后代码维护网站更新起来这些零零散散的修改会影响到整体网站布局,所以尽量能使用框架样式就使用框架的且尽量不要修改.
.list-unstyled {
padding-left:;
list-style: none;
}
Bootstrap像去点列表一样，通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示.
对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。
/*源码请查看bootstrap.css文件第594行~第607行*/
dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}
这个列表也可以水平显示,
水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
/*源码请查看bootstrap.css文件第608行~第621行*/
@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
}
此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式：
1、将dt设置了一个左浮动，并且设置了一个宽度为160px
2、将dd设置一个margin-left的值为180px，达到水平的效果
3、当标题宽度超过160px时，将会显示三个省略号
代码块(平时用到时候比较少):
在使用代码时，用户可以根据具体的需求来使用不同的类型：
1、<code>：一般是针对于单个单词或单个句子的代码
2、<pre>：一般是针对于多行代码（也就是成块的代码）
3、<kbd>:一般是表示用户要通过键盘输入的内容
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>代码</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head> <body>
code风格：
<div>Bootstrap的代码风格有三种：<code><code></code>、<code><pre></code>和<code><kbd></code></div>
pre风格：
<div>
<pre>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</pre>
</div>
kbd风格：
<div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div> <!--下面是代码任务部分--> <p>请使用ctrl+x复制代码，然后使用ctrl+shift+v将复制的代码粘贴到需要的地方。</p> </body>
</html>
二.表格
Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：
☑ .table：基础表格
☑ .table-striped：斑马线表格
☑ .table-bordered：带边框的表格
☑ .table-hover：鼠标悬停高亮的表格
☑ .table-condensed：紧凑型表格
☑ .table-responsive：响应式表格
其中既有Less版本和Sass版本两种,详情请参阅Bootstrap源码.
这里着重说一下响应式表格,下面是框架介绍:
随着各种手持设备的出现，要想让你的Web页面适合千罗万像的设备浏览，响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果，将其称为响应式表格。
Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将<table class="table">置于这个容器当中，这样表格也就具有响应式效果。
Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。示例如下：
<div class="table-responsive">
<table class="table table-bordered">
…
</table>
</div> 表格部分改变相对较少感觉与平时用的表格样式形式差不多所以没有过多去写这方面的理解. 下面介绍一下表单部分:
Bootstrap并未对其做太多的定制性效果设计，仅仅对表单内的fieldset、legend、label标签进行了定制。如：
/*源码请查阅bootstrap.css文件第1631行~第1652行*/
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 20px;
font-size: 21px;
line-height: inherit;
color: #333;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
label {
display: inline-block;
margin-bottom: 5px;
font-weight: bold;
}
主要将这些元素的margin、padding和border等进行了细化设置。
当然表单除了这几个元素之外，还有input、select、textarea等元素，在Bootstrap框架中，通过定制了一个类名`form-control`，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。
1、宽度变成了100%
2、设置了一个浅灰色（#ccc）的边框
3、具有4px的圆角
4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999
三.表单
状态的作用：
每一种状态都能给用户传递不同的信息，比如表单有焦点的状态可以告诉用户可以输入或选择东西，禁用状态可以告诉用户不可以输入或选择东西，还有就是表单控件验证状态，可以告诉用户的操作是否正确等。那么在Bootstrap框架中的表单控件也具备这些状态。
焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果。
表单框架中特意修改了一下获取焦点之后的状态,通过伪类:focus来实现的,同时很多空间也使用可这个伪类来实现效果在Bootstrap框架中，file、radio和checkbox控件在焦点状态下的效果也与普通的input控件不太一样，主要是因为Bootstrap对他们做了一些特殊处理：
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
表单禁用状态框架中同样做了一些简单的处理:
Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled”。和其他表单的禁用状态不同的是，Bootstrap框架做了一些样式风格的处理
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity:;
}
禁用属性也有例外的时候下面这个例子就是在整个标签中禁用之后 部分控件未被禁用的例子:
在Bootstrap框架中，如果fieldset设置了disabled属性，整个域都将处于被禁用状态。整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的。我们一起来验证一下：
<form role="form">
<fieldset disabled>
<legend><input type="text" class="form-control" placeholder="显然我颜色变灰了，但是我没被禁用，不信？单击试一下" /></legend>
…
</fieldset>
</form>
表单验证状态的时候也会出现很多种状态这里框架提供了三种样式:
1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
从效果可以看出，三种状态下效果都是一样的，只是颜色不一样而以。
其他两种状态省略源码不在此展示。
很多时候，在表单验证的时候，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起：
<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功状态</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
<span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
......
</div>
<div class="form-group has-error has-feedback">
......
</div>
</form>
既然有输入错误 当然叶少不了错误信息的提示:
平常在制作表单验证时，要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。
举个例子:
<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功状态</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
<span class="help-block">你输入的信息是正确的</span>
<span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
…
</form>
还有一种是现在在控件后面的 平行显示的,在Bootstrap V2.x版本中还提供了一个行内提示信息，其使用了类名“help-inline”。一般让提示信息显示在控件的后面，也就是同一水平显示。如果你想在BootstrapV3.x版本也有这样的效果，你可以添加这段代码
.help-inline{
display:inline-block;
padding-left:5px;
color: #737373;
}
Bootstrap框架(基础篇)之列表,表格,表单的更多相关文章
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- bootstrap 列表 表格 表单 复选 单选 多选 输入框组
一.列表 ul li 二.表格 table (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...
- Bootstrap框架(基础篇)
本文引用慕课网http://www.imooc.com/learn/141 作者大漠 讲的很详细,我没有全篇都引用,其中很多是添加了自己的一些理解. Bootstrap框架是基于JQuery 所以 ...
- Bootstrap学习笔记（3）--表格\表单\图片
Bootstrap表格 表格类: .table只会在表行之间增加横线; .table-striped会在表格行之间增减斑马线; .table-hover会给表设置鼠标悬停状态; ...
- WEB学习-基础知识：列表、表单、div和span、注释、字符实体、HTML废弃标签介绍
列表 无序列表 无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的. ul就是英语unordered list,“无序列表”的意思. li 就是英语list item , “列 ...
- HTML的列表表格表单知识点
无序列表格式 ...
- Bootsrap表格表单及其使用方法
bootstrap的使用 bootstrap中的js插件依赖于jQuery 因此jQuery要在bootstrap之前引入 参考官网标准引入方法和引入样式 排版 标题 Bootstrap和普通的HTM ...
- HTML--绝对路径, 表格,表单, 框架
URL, URI, URN URL: 统一资源定位符: Uniform Resource Locator URN: 持久可用的资源标准名称 Uniform Resource Name , 比如邮箱 U ...
- HTML表格表单综合——用户注册表
今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
随机推荐
- 只需三步 快速完善网站Sitemap
越来越多的SEOer把优化的重点放在了站内优化上,细心的朋友应该查看一些前辈的robots.txt的时候不难发现,他们的robots中都加 入了一句Sitemap: http://www.dewang ...
- error LNK2019: 无法解析的外部符号 _WinMain@16，该符号在函数 ___tmainCRTStartup 中被引用
MSVCRTD.lib(crtexew.obj) : error LNK2019: 无法解析的外部符号 _WinMain@16,该符号在函数 ___tmainCRTStartup 中被引用 Debug ...
- Chromuim proxy Api 提取代里proxy调用Chrome隐身多窗口 多COOKIE 工具
Chromuim proxy Api提取proxy调用Chrome隐身 多COOKIES 多窗口工具每一个代理拥有一个独立的窗口和USERDATA 独立COOKIES 伪装UA UA:<scri ...
- mysql relay log参数汇总
前言:MySQL进行主主复制或主从复制的时候会在配置文件制定的目录下面产生相应的relay log,本文档总结这些相关参数的定义及解释. 1.什么是relay log The relay log, l ...
- electron知识点
1.打开chrome开发工具栏: BrowserWindow.openDevTools();
- Oracle索引失效问题：WHERE C1='' OR C2 IN(SubQuery)，并发请求时出现大量latch: cache buffers chains等待
问题描述: 项目反馈某功能响应时间很长,高峰期时系统整体响应很慢... 获取相应的AWR,问题确实比较严重,latch: cache buffers chains等待,因为这些会话SQL执行时间太长, ...
- HTTP POST 提交问题
最近用http+post方式实现了系统间数据交互的需求. 常用的方式是 application/json方式直接post json对象 . 告诉服务器数据格式将会是 { Name : 'John Sm ...
- MySQL服务 - MySQL变量类型及变量设置
一.MySQL变量类型: MySQL通过变量来定义当前服务器的特性,保存状态信息等.我们可以通过手动更改变量的值来配置MySQL,也可以通过变量获得MySQL的当前状态信息.MySQL的变量类型可以从 ...
- js嵌套对象相等比较的一种方法 （原创）
做前端开发经常会遇到比较js对象是否相等的情况, 或者说其它问题往往会归结到这个问题上来:比如对象数组的去重复. 网上看到过很多例子, 但是基本上都是那种比较简单的对象结构, 而复杂的对象结构,比如对 ...
- Android学习笔记（十）
Android控件——ListView ListView允许用户通过手指上下滑动的方式将屏幕外的数据滚动到屏幕内,同时 屏幕上原有的数据则会滚动出屏幕. 1.ListView的简单用法 新建一个Lis ...