第五次学习周记

  • 时间:
  • 浏览:
  • 来源:互联网

第五周学习周记
本周主要内容:有关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; 样式应用在图片上

写入程序
在这里插入图片描述

本文链接http://metronic.net.cn/metronic/show-16426.html