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: 0;
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: 1;
}禁用属性也有例外的时候下面这个例子就是在整个标签中禁用之后 部分控件未被禁用的例子:
在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;
}转载于:https://www.cnblogs.com/workstation-liunianguowang/p/5207742.html
Bootstrap框架(基础篇)之列表,表格,表单相关推荐
- 定义列表的特点html,HTML的列表表格表单知识点
无序列表格式 ...
- (18)C#传智:HTML,属性,标签,元素,body,Font,A,列表,表格,表单,Div,Span,框架
比较简单,无事的跳过,直接w3c.school 一.HTML简介 一个实例:右键查看源文件(标签,属性,内容...) HTML文档=网页 HTML超文本标记语言(Hyper ...
- 初学HTML代码笔记3终结篇之列表和表单(pink老师)
一.代码部分 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
- css文本,背景,动画和html列表,表格,表单总结
css文本标签的应用 文本 text-shadow文本阴影:1px 2px 3px color 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 第2个长度值用来设置对象的阴影垂直偏移值.可以为负 ...
- html语法中表格命令具备哪些属性,html 语法介绍 标签及有关属性 列表 表格 表单...
1.HTML简介 HTML是用来做网页 HTML:Herp Text MarkUp Language 超文本标记语言 超文本:超:超链接 包含超链接的文本 标记语言: 标记:标签 语言:制作网页的语言 ...
- HTML基本结构 标签 列表 表格 表单 form input 单选框radio 多选框checkbox 列表框select option 按钮button
文章目录 HTML HTML基本结构 网页的基本标签 标题标签 段落标签 换行标签 水平线 字体样式标签 HTML注释和特殊符号 图像标签 常见的图片格式 语法 案例 链接标签 页面间链接 语法 锚链 ...
- js table 生成序号_el-table树形表格表单验证(列表生成序号)
树形表格表单验证预览 树形列表生成序号 首先需要生成一个序号用来确定表单验证的目标row,通过广度优先遍历,以1,1.1,1.1.1的规则对树形列表生成确定唯一值的索引,因为列表自身可以做CURD,因 ...
- CSS基础——CSS 列表和表单【学习笔记】
CSS 列表和表单 1. 列表标签(重点) 表格是用来显示数据的,列表是用来布局的. 概念: 容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表 特点: 列表最大的特点就是 整齐 .整洁. 有 ...
- bootstrap框架基础使用
bootstrap框架基础使用 bootstrap简介 bootstrap引入和使用 网络引用 本地引用 bootstrap基础 bootstrap组成 bootstrap组件 bootstrap简介 ...
最新文章
- 2018考研英语：10篇必背的真题文章
- ScrollView中的LinearLayout不能使用android:layout_heig...
- 《可穿戴创意设计：技术与时尚的融合》一一第2章 与可穿戴设备有关的故事...
- Winforn中使用FastReport实现点击导出按钮PDF预览并弹出另存为对话框
- fastjson safemode_它又又又来了，Fastjson 最新高危漏洞来袭！
- scikit-learn学习笔记（五）Logistic regression（逻辑回归）
- 第1章 Ext JS介绍与快速入门[1/4]
- import 和 export -- ES6
- ar5b97无线网卡驱动linux 版下载,atheros ar5b97驱动
- 内存泄漏工具asan
- RGB与CMYK颜色模式调色原理
- 解决软件安装的2203报错
- OpenStack挂载ISO，安装原版windows
- html5微信语音转文字,文字转换语音软件：我有个朋友不会识字 怎么能把微信上别人发给他的文字转换成语音...
- Mac node切换版本，指定版本
- 越狱Season 1-Episode 12:Odd Man Out
- EMQX安装、处理安装遇到的问题
- 不忘初心,历久弥坚 —— 以博客申请 纪念 码系团诞生
- 手机续航能力测试软件,手机续航哪个好 2020年热门手机续航能力评测分析
- 分词词频分析和高频词搜索分布