博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
第二百四十一节,Bootstrap进度条媒体对象和 Well 组件
阅读量:6300 次
发布时间:2019-06-22

本文共 4429 字,大约阅读时间需要 14 分钟。

第二百四十一节,Bootstrap进度条媒体对象和 Well 组件

 

学习要点:

  1.Well 组件

  2.进度条组件

  3.媒体对象组件

 

本节课我们主要学习一下 Bootstrap 的三个组件功能:Well 组件、进度条组件、媒体对 象组件。

 

一.Well 组件

这个组件可以实现简单的嵌入效果。

嵌入效果

well样式class类,写在<div>里,设置一个div区块嵌入效果(Bootstrap)

well-lg样式class类,写在<div>里,设置一个div区块嵌入效果大尺寸(Bootstrap)
well-sm样式class类,写在<div>里,设置一个div区块嵌入效果小尺寸(Bootstrap)

Bootstrap
Bootstrap
Bootstrap

 

 

二.进度条组件

进度条组件为当前工作流程或动作提供时时反馈。

基本进度条

 

progress样式class类,写在<div>里,声明一个进度条区域(Bootstrap)

 

progress-bar样式class类,写在<div>里,设置一个进度条默认样式(Bootstrap)

60%

 

 

最低值进度条

0%

 

 

结合情景的进度条

progress-bar-success样式class类,写在<div>元素里,设置进度条绿色(Bootstrap)

progress-bar-info样式class类,写在<div>元素里,设置进度条蓝色(Bootstrap)
progress-bar-warning样式class类,写在<div>元素里,设置进度条橙色(Bootstrap)
progress-bar-danger样式class类,写在<div>元素里,设置进度条红色(Bootstrap)

60%
60%
60%
60%

 

 

条纹状,IE10+支持,IE10以下不支持

progress-bar-striped样式class类,写在<div>元素里,设置条纹状进度条(Bootstrap)

60%

 

 

条纹状动画效果,必须将进度条设置条纹状

active样式class类,写在进度条<div>里,设置进度条,条纹状动画效果(Bootstrap)

60%

 

 

进度条堆叠效果

30%
20%
50%

 

 

 

三.媒体对象组件,论坛常用

媒体对象可以包含图片、视频或音频等媒体,以达到对象和文本组合显示的样式效果。

基本实例

media样式class类,写在<div>里,声明一个媒体对象div(Bootstrap)

media-left样式class类,写在<div>里,设置一个媒体对象里的媒体区域左边显示(Bootstrap)
media-object样式class类,写在<img>里,设置一个媒体样式(Bootstrap)
media-body样式class类,写在<div>里,声明一个媒体内容div(Bootstrap)
media-heading样式class类,写在<h1-h4>里,设置一个媒体内容标题样式(Bootstrap)

标题

企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17 种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状; 羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。

 

 

 

媒体对象在右边

media-right样式class类,写在<div>里,设置一个媒体对象里的媒体区域右边显示(Bootstrap)

标题

企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17 种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状; 羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。

 

 

 

媒体对象列表,也就是声明一个媒体对象列表然后嵌套媒体对象

media-list样式class类,写在<ul>里,声明一个媒体对象列表(Bootstrap)

 

  • 内容标题

    企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有17种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔;脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状;羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个种的主要区别在于头部色型和个体大小。

    内容标题

    企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有17种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔;脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状;羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个种的主要区别在于头部色型和个体大小。

    内容标题

    企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有17种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔;脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状;羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个种的主要区别在于头部色型和个体大小。

    内容标题

    企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有17种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔;脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状;羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个种的主要区别在于头部色型和个体大小。

  • 内容标题

    企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有17种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔;脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状;羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个种的主要区别在于头部色型和个体大小。

 

 

转载地址:http://lagta.baihongyu.com/

你可能感兴趣的文章
Java的对象和类
查看>>
格式化字符串漏洞利用 一、引言
查看>>
Oracle NetSuite推出全球首款智能云套件
查看>>
软件项目进度控制表(自制)
查看>>
企业若不改进其IT运营模式则可能错失未来市场机遇
查看>>
基于epoll封装的事件回调miniserver
查看>>
天猫高管全面解读大快消2018新零售打法
查看>>
idea springboot热部署无效问题
查看>>
第八章 进程间通信
查看>>
HttpSession接口中的方法(Jsp中的session类的用法)
查看>>
「镁客早报」AI可预测心脏病人死亡时间;机器人开始在美国送外卖
查看>>
MoQ(基于.net3.5,c#3.0的mock框架)简单介绍
查看>>
物联网全面升级,十年内推动工业进入智能化新阶段
查看>>
spring-通过ListFactory注入List
查看>>
一种基于SDR实现的被动GSM嗅探
查看>>
阿里云ECS每天一件事D1:配置SSH
查看>>
SQL Server 性能调优(性能基线)
查看>>
uva 10801 - Lift Hopping(最短路Dijkstra)
查看>>
Unity 3D换装系统教程/Demo
查看>>
[Java Web]servlet/filter/listener/interceptor区别与联系
查看>>