继续上篇的基础部分延伸,主要说一下列表,表格,表单相关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. swift开源项目精选

    Swift 开源项目精选-v1.0 2016-03-07 22:11 542人阅读 评论(0) 收藏 举报  分类: iOS(55)   Swift(4)    目录(?)[+]   转自 http: ...

  2. Ubuntu配置VNC server

    安装vncserver后,默认的配置下只有一个很"朴素"的图形界面(没有抓图,就一个黑白窗口),要支持Ubuntu的桌面,并且支持和windows之前复制粘贴文字,需要修改xsta ...

  3. pyqt4:连接的一个带有参数的方法

    一般在pyqt4中的信号连接很少连接带参数的方法,很多时候连接带参数的方法节约不少代码量. self.s5_thread=scene.Worker5() self.log_get=QtCore.QTi ...

  4. 【jq】c#零基础学习之路（1）Hello World！

    从今天起我会持续发表,这个就是一个日记型的,学习编程是枯燥的,况且我们还是零基础. 学前准备 1.编译环境 vs2010.vs2012.vs2015...(本人用的是vs2010旗舰版).vs2010 ...

  5. win10突然不能使用usb大容量存储设备（移动硬盘）的解决方法

    昨天开始使用usb硬盘,发现一块无法识别,一块识别好了以后不能打开. 可能是之前一次系统更新有bug,但是一直也没有用移动硬盘,所以没有发现. 开始尝试各种方案,已经尝试过并且无效的有以下几个: 1, ...

  6. bind绑定多个事件切换

    eg:  $(function(){         $("div").bind('mouseover mouseover',function(){      $(this.tog ...

  7. (zhuan) Deep Reinforcement Learning Papers

    Deep Reinforcement Learning Papers A list of recent papers regarding deep reinforcement learning. Th ...

  8. 安卓，支付宝app登录时，提示 服务器安全证书已过期或不可信任，请问怎么解决

    安卓,支付宝app登录时,提示 服务器安全证书已过期或不可信任,请问怎么解决 请把手机时间调成当前时间.

  9. C#调试心经(1)(转)

    我们在做程序开发时,难免会遇到错误异常.如何快速地找到出错的地方.分析错误的原因以及找到解决问题的方案,是许多初级程序员困扰的问题,这也正是经验的宝贵之处.下面我将简单介绍在Visual Studio ...

  10. winform基本控件的使用2（用户登录界面的设计）

    首先还是通过例子来讲解,这次的实验主要是使用messageBox的使用方法,关于messageBox的使用方法在我的博客里面有相关的转载,请自己查看,下面说一下实验要求. 功能要求:模拟一个用户登陆的 ...