2018-10-11Bootstrap06
Bootstrap 列表组
本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：
- 向元素
- 添加 class .list-group。
- 向
- 添加 class .list-group-item。
下面的实例演示了这点：
- 免费域名注册
- 免费 Window 空间托管
- 图像的数量
- 24*7 支持
- 每年更新成本
文章图片
image.png 向列表组添加徽章
我们可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在
- 免费域名注册
- 免费 Window 空间托管
- 图像的数量
-
新
24*7 支持
- 每年更新成本
-
新
折扣优惠
文章图片
image.png 向列表组添加链接
通过使用锚标签代替列表项，我们可以向列表组添加链接。我们需要使用代替
- 元素。下面的实例演示了这点：
- 使用 .panel-heading class 可以很简单地向面板添加标题容器。
- 使用带有 .panel-title class 的 - 来添加预定义样式的标题。
下面的实例演示了这两种方式： - 免费域名注册
- 免费 Window 空间托管
- 图像的数量
- 24*7 支持
- 每年更新成本
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 6、bootstrap-表格
- Bootstrap实战|Bootstrap实战 - 评论列表
- Bootstrap 5都有什么新功能
- Bootstrap实战|Bootstrap实战 - 注册和登录
- Bootstrap实战|Bootstrap实战 - 响应式布局
- 什么是|什么是 bootstrap 中的 break point
- vue|vue 添加 bootstrap
- bootstrap|bootstrap treeview.js 权限加载时，复选框被选中的 demo
- Bootstrap中进度条样式详解
- bootstrap 组件之 进度条 滚动监控 旋转加载 消息推送框 组件学习总结
免费域名注册24*7 支持
免费 Window 空间托管
图像的数量
每年更新成本
文章图片
image.png 向列表组添加自定义内容
我们可以向上面已添加链接的列表组添加任意的 HTML 内容。下面的实例演示了这点：
入门网站包免费域名注册您将通过网页进行免费域名注册。
24*7 支持我们提供 24*7 支持。
商务网站包免费域名注册您将通过网页进行免费域名注册。
24*7 支持我们提供 24*7 支持。
文章图片
image.png Bootstrap 面板（Panels）
本章将讲解 Bootstrap 面板（Panels）。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向元素添加 class .panel 和 class .panel-default 即可，如下面的实例所示：
这是一个基本的面板
文章图片
image.png 面板标题
我们可以通过以下两种方式来添加面板标题：
不带 title 的面板标题面板内容 带有 title 的面板标题
面板内容
文章图片
image.png 面板脚注
我们可以在面板中添加脚注，只需要把按钮或者副文本放在带有 class .panel-footer 的中即可。下面的实例演示了这点：
这是一个基本的面板面板脚注
文章图片
image.png
面版脚注不会从带语境色彩的面板中继承颜色和边框，因为它不是前景中的内容。
带语境色彩的面板
使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger，来设置带语境色彩的面板，实例如下:
面板标题
这是一个基本的面板面板标题
这是一个基本的面板面板标题
这是一个基本的面板面板标题
这是一个基本的面板面板标题
这是一个基本的面板
文章图片
image.png 带表格的面板
为了在面板中创建一个无边框的表格，我们可以在面板中使用 class .table。假设有个包含 .panel-body，我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的 ，则组件会无中断地从面板头部移动到表格。
下面的实例演示了这点：
面板标题
这是一个基本的面板
产品 价格
产品 A 200 产品 B 400
面板标题
产品 价格
产品 A 200 产品 B 400
文章图片
image.png 带列表组的面板
我们可以在任何面板中包含列表组，通过在元素中添加 .panel 和 .panel-default 类来创建面板，并在面板中添加列表组。您可以从 列表组 一章中学习如何创建列表组。
面板标题这是一个基本的面板内容。这是一个基本的面板内容。
这是一个基本的面板内容。这是一个基本的面板内容。
这是一个基本的面板内容。这是一个基本的面板内容。
这是一个基本的面板内容。这是一个基本的面板内容。
文章图片
image.png Bootstrap Well
Well 是一种会引起内容凹陷显示或插图效果的容器 。为了创建 Well，只需要简单地把内容放在带有 class .well 的中即可。下面的实例演示了一个默认的 Well：
您好，我在 Well 中！
文章图片
image.png 尺寸大小
【2018-10-11Bootstrap06】您可以使用可选类 well-lg 或 well-sm 来改变 Well 的尺寸大小。这两个类是与 .well 类结合使用的。这两个类会影响内边距（padding），根据使用的类，Well 会显示得更大或者更小。
您好，我在大的 Well 中！
您好，我在小的 Well 中！
文章图片
image.png Bootstrap 创建一个网页
接下来我们通过 Bootstrap3 来创建一个简单的响应式网页。
在学习之前我们可以先看下效果：https://www.runoob.com/try/demo_source/bootstrap3-makewebsite.htm
文章图片
image.png
文章图片
image.png
我的第一个 Bootstrap 页面重置浏览器窗口大小查看效果！
关于我
我的照片:
这边插入图像关于我的介绍..
链接
描述文本。
标题
副标题
图像一些文本..
菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！
标题
副标题
图像一些文本..
菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！
底部内容