Bootstrap框架(基础篇)之列表,表格,表单
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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框架(基础篇)之列表,表格,表单的主要内容，如果未能解决你的问题，请参考以下文章
Web开发·期末不挂之第三章·HTML基础二（html实现表格和表单）
Ten——tornado操作之使用 Bootstrap 前端框架美化项目（Bootstrap的使用及font- awesome插件的使用—图标集和工具包）+静态文件的处理