继续上篇的基础部分延伸,主要说一下列表,表格,表单相关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>&lt;code&gt;</code>、<code>&lt;pre&gt;</code>和<code>&lt;kbd&gt;</code></div>

pre风格：

<div>

<pre>

&lt;ul&gt;

&lt;li&gt;...&lt;/li&gt;

&lt;li&gt;...&lt;/li&gt;

&lt;li&gt;...&lt;/li&gt;

&lt;/ul&gt;

</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框架(基础篇)之列表,表格,表单的更多相关文章

  1. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  2. bootstrap 列表 表格 表单 复选 单选 多选 输入框组

    一.列表 ul li 二.表格 table  (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...

  3. Bootstrap框架(基础篇)

    本文引用慕课网http://www.imooc.com/learn/141  作者大漠  讲的很详细,我没有全篇都引用,其中很多是添加了自己的一些理解. Bootstrap框架是基于JQuery 所以 ...

  4. Bootstrap学习笔记（3）--表格\表单\图片

    Bootstrap表格   表格类:    .table只会在表行之间增加横线;    .table-striped会在表格行之间增减斑马线;    .table-hover会给表设置鼠标悬停状态; ...

  5. WEB学习-基础知识：列表、表单、div和span、注释、字符实体、HTML废弃标签介绍

    列表 无序列表 无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的. ul就是英语unordered list,“无序列表”的意思. li 就是英语list item , “列 ...

  6. HTML的列表表格表单知识点

    无序列表格式                                                                                              ...

  7. Bootsrap表格表单及其使用方法

    bootstrap的使用 bootstrap中的js插件依赖于jQuery 因此jQuery要在bootstrap之前引入 参考官网标准引入方法和引入样式 排版 标题 Bootstrap和普通的HTM ...

  8. HTML--绝对路径, 表格,表单, 框架

    URL, URI, URN URL: 统一资源定位符: Uniform Resource Locator URN: 持久可用的资源标准名称 Uniform Resource Name , 比如邮箱 U ...

  9. HTML表格表单综合——用户注册表

    今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

随机推荐

  1. 浅析c#中登录窗体和欢迎窗体关闭的问题

    第一次在cnbogs发文章,这次来个很基础的,主要给小白看. 在c#的winform编程中,我们经常会做登录窗体或欢迎窗体,并把他们作为启动窗体. 但是,我们有可能会遇到一些问题. 请看下面的代码: ...

  2. 让CPU的占有率曲线听我指挥

    最近我要在公司的一个study group负责AWS的AutoScaling功能的介绍.AWS可以根据instance(虚拟机)的CPU使用量进行scaling. 为了做demo,于是就有这样一个需求 ...

  3. 在chrome 总调试cordova出现Detached from the target. Remote debugging has been terminated with reason: Connection lost. Please re-attach to the new target

    在chrome 总调试cordova出现如下错误: "Detached from the target. Remote debugging has been terminated with ...

  4. MYSQL file types redo log

    https://blogs.oracle.com/mysqlinnodb/entry/data_organization_in_innodb https://blogs.oracle.com/mysq ...

  5. ivy 配置 maven代理

    Ivy 是一个依赖管理工具,直观感受是其跟maven 的作用差不多:但这两个其实是不同的工具: maven 是面向整个项目的工程管理及构建工具:ivy 仅作为依赖管理工具,与ant 高度集成. 需要了 ...

  6. 存储过程procedure

                       存储过程(procedure) 修改mysql结束符   delimiter name procedure创建语法:     create procedure p ...

  7. mybatis 与 日志

    如上图所示,mybatis默认支持7种日志记录的方式,也可以自己实现Log接口,然后将实现类通过LogFactory注入到日志工厂中. LogFactory是日志模块的入口,外层通过getLog获取L ...

  8. 关于SAP日期操作的几个函数

    1.拆分年月---其实可以直接通过截取字符串的方法得到 CALL FUNCTION 'CACS_DATE_GET_YEAR_MONTH' EXPORTING I_DATE = SY-DATUM IMP ...

  9. Android ShapeDrawable无法上色

    在Android中的View设置背景时,使用ShapeDrawable有可能出现无法上色的问题(最终背景为黑色),例如,使用如下的代码为控件设置颜色时,控件背景将会变成黑色 ShapeDrawable ...

  10. USVN

    我们最近将快盘上的东西迁移到了svn上,因为快盘总是不会不小心删掉或者修改了某些文件.为了能保留历史记录我们统一迁移到svn上.为了方便权限管理,我对比了几个svn的权限管理工具,最后觉得还是usvn ...