第五次学习周记

第五周学习周记
本周主要内容：有关Bootstrap的简介、表格（元素、样式、应用）、按钮（基本样式、大小调整）、图片（简单样式、< img >类、响应式图片）

一、Bootstrap简介
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架，它的基础是 HTML、CSS、JAVASCRIPT 。

响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

二、Bootstrap表格
1、基本表格元素
Bootstrap 提供了一个清晰的创建表格的布局。以下列出了 Bootstrap 支持的一些表格元素：
① < table > 为表格添加基础样式。
② < thead > 表格标题行的容器元素（< tr >），用来标识表格列。
③< tbody > 表格主体中的表格行的容器元素（< tr >）。
④< tr > 一组出现在单行上的表格单元格的容器元素（< td> 或 < th>）。
⑤< td> 默认的表格单元格。
⑥< th> 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 < thead> 内使用。
⑦< caption> 关于表格存储内容的描述或总结。

2、基本表格样式
下列样式可用于表格中：
①.table 为任意 < table> 添加基本样式 (只有横向分隔线)
②.table-striped 在 < tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
③.table-bordered 为所有表格的单元格添加边框
④.table-hover 在 < tbody> 内的任一行启用鼠标悬停状态
⑤.table-condensed 让表格更加紧凑

3、表格应用
①基本表格
一个只带有内边距（padding）和水平分割的基本表
方法：添加 class .table

②条纹表格
通过添加 .table-striped class，将在 < tbody> 内的行上看到条纹

③边框表格
通过添加 .table-bordered class，将看到每个元素周围都有边框，且占整个表格是圆角的

④悬停表格
通过添加 .table-hover class，当指针悬停在行上时会出现浅灰色背景

⑤精简表格
通过添加 .table-condensed class，行内边距（padding）被切为两半，以便让表看起来更紧凑

三、Bootstrap按钮
1、按钮基本样式
任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式。

以下样式可用于< a>, < button>, 或 < input> 元素上：
①.btn 为按钮添加基本样式
②.btn-default 默认/标准按钮
③.btn-primary 原始按钮样式（未被操作）
④.btn-success 表示成功的动作
⑤.btn-info 该样式可用于要弹出信息的按钮
⑥.btn-warning 表示需要谨慎操作的按钮
⑦.btn-danger 表示一个危险动作的按钮操作
⑧.btn-link 让按钮看起来像个链接 (仍然保留按钮行为)
⑨.btn-lg 制作一个大按钮
⑩.btn-sm 制作一个小按钮
.btn-xs 制作一个超小按钮
.btn-block 块级按钮(拉伸至父元素100%的宽度)
.active 按钮被点击
.disabled 禁用按钮

写入程序

运行结果

2、按钮大小调整
下表列出了获得各种大小按钮的 class：

写入程序

运行结果

四、Bootstrap图片
1、图片的简单样式
Bootstrap 提供了三个可对图片应用简单样式的 class：
①.img-rounded：添加 border-radius:6px 来获得图片圆角。
②.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
③.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

写入程序

运行结果

2、< img>类
①.img-rounded 为图片添加圆角
②.img-circle 将图片变为圆形
③.img-thumbnail 缩略图功能
④.img-responsive 图片响应式 (将很好地扩展到父元素)

3、响应式图片
通过在 标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。

.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上

写入程序