bootstrap组件 -- (笔记三)
添加该 pagination样式来在页面上显示分页
分页的项也可以禁用与选中(disabled 与 active, 这两个样式几乎都是通用的)
分页的大小(和按钮组那种类型, 整体调整大小 pagination-lg代表大, pagination-sm代表小)
翻页:
比如看小说, 有前一页, 后一页的标识
使用page样式获得翻页链接
使用previous靠左, 使用next靠右(默认是居中的)
使用disabled禁用链接
bootstrap标签:
bootstrap标签指的是label样式, 这里不是指元素
标签可用于计数、提示或页面上其他的标记显示
默认标签
主要标签
成功标签
信息标签
警告标签
危险标签bootstrap徽章:
徽章与标签相似，主要的区别在于徽章的边角更加圆滑
主要用于突出显示新的或未读的项
超大屏幕样式:
使用jumbotron样式支持超大屏幕特性
该组件可以增加标题(h1-h6, p标签等)的大小，并为它们添加更多的外边距, 整个内容带灰色背景
缩略图:
大多数站点都需要在网格中布局图像、视频、文本
Bootstrap 通过缩略图为此提供了一种简便的方式
创建缩略图需要在外面加上样式 thumbnail
此样式会添加四个像素的内边距（padding）和一个灰色的边框
警告:
alert 使用文本居中, alert-*文本背景色
成功！很好地完成了提交。
信息！请注意这个信息。
警告！请不要提交。
错误！请进行一些更改。可取消警告的文本(button带有data-dismissable='alert'属性)
成功！很好地完成了提交。
在警告文本中也可以添加链接
进度条:
先创建一个带progress的div
再里面再创建一个带progress-bar的div, 并设置style的宽度表示当前的进度百分比
进度条的颜色( progress-bar-* )
条纹进度条(progress-striped)
动画进度条(progress-striped和active)
多种颜色进度条(把多个进度条放在相同的progress中)
多媒体对象:
包括图像、视频、音频等
我们可以在组件中使用 图文混排，图像可以左对齐或者右对齐
使用类样式media包裹, 扩展使用 media-left, media-body, media-right, media-heading等样式
在
.media 类来创建一个多媒体对象。
使用 .media-left 类让多媒体对象(图片)来实现左对齐，同样 .media-right 类实现了右对齐。
文本内容放在 class="media-body" 的 div 中
图片左对齐则放在 class="media-body" 之前，图片右对齐则放在 class="media-body" 之后。
还可以使用 .media-heading 类来设置标题
左对齐
这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。
右对齐
这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。
图文的相对位置
置顶, 居中, 置底(在媒体对象上加media-top, media-middle, media-bottom)
置顶
这是一些示例文本...
内嵌多媒体对象
一个多媒体对象里面可以包括其它的多媒体(在media-body中包含media)
RUNOOB-1 Posted on February 19, 2016
这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。
RUNOOB-2 Posted on February 19, 2016
这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。
...
列表组:
使用list-group创建列表组(也可以不使用)
使用list-group-item创建列表项
- 免费域名注册
- 免费 Window 空间托管
- 图像的数量
- 24*7 支持
- 每年更新成本
向列表组添加徽章(徽章会居右)
- 免费域名注册
- 免费 Window 空间托管
- 图像的数量
-
新
24*7 支持
- 每年更新成本
-
新
折扣优惠
向列表组添加链接
通常列表组中的列表项需要一个链接
免费域名注册
24*7 支持
免费 Window 空间托管
图像的数量
每年更新成本在列表项中添加内容
list-group-item-heading向列表项中添加标题
list-group-item-text向列表项中添加内容
免费域名注册
您将通过网页进行免费域名注册。
bootstrap面板:
面板组件用于把 DOM 组件插入到一个盒子中。
创建一个基本的面板，只需要向
这是一个基本的面板
面板标题
使用 .panel-heading class 可以很简单地向面板添加标题容器。
使用带有 .panel-title class 的
- 来添加预定义样式的标题
不带 title 的面板标题
面板内容
带有 title 的面板标题
面板内容
不带 title 的面板标题
面板内容
带有 title 的面板标题
面板内容
面板脚注(用panel-footer样式)
这是一个基本的面板
给面板添加色彩(将panel-default改为panel-*)
面板色彩样式有: panel-success, panel-info, panel-warning, panel-danger
它与按钮颜色, 背景色等这些些是相似的设计
面板标题
这是一个基本的面板
在面板中放置表格
与panel-heading, panel-body并列放置表格
面板标题
面板内容
产品 价格
产品 A 200 产品 B 400
面板中放置列表组
与panel-heading, panel-body并列放置列表组
面板标题
这是一个基本的面板内容。这是一个基本的面板内容。
这是一个基本的面板内容。这是一个基本的面板内容。
这是一个基本的面板内容。这是一个基本的面板内容。
这是一个基本的面板内容。这是一个基本的面板内容。
- 免费域名注册
- 免费 Window 空间托管
- 图像的数量
- 24*7 支持
- 每年更新成本
bootstrap well窗口
well 是一种会引起内容凹陷显示或插图效果的容器
为了创建 Well，只需要简单地把内容放在带有 class .well 的
well-lg, well-sm与well结合使用, 改变well的尺寸大小
您好，我在小的 Well 中！
您好，我在大的 Well 中！
您好，我在小的 Well 中！
创建一个t简单网页:
我的第一个 Bootstrap 页面
重置浏览器窗口大小查看效果！
关于我
我的照片:
这边插入图像
关于我的介绍..
链接
描述文本。
标题
副标题
图像
一些文本..
菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！
标题
副标题
图像
一些文本..
菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！
底部内容