【Bootstrap历练实例：默认的Well】的更多相关文章

Bootstrap历练实例：默认的媒体对象

Bootstrap 多媒体对象(Media Object) 本章我们将讲解 Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的代码来实现媒体对象与文字的混排. 媒体对象轻量标记.易于扩展的特性是通过向简单的标记应用 class 来实现的.你可以在 HTML 标签中添加以下两种形式来设置媒体对象: .media:该 class 允许将媒体对象里的多媒…

Bootstrap历练实例：默认的列表组

Bootstrap 列表组 本章我们将讲解列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 class .list-group-item. 下面的实例演示了这点: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q…

Bootstrap历练实例：默认的面板(Panels)

Bootstrap 面板(Panels) 本章将讲解 Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可,如下面的实例所示: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="…

Bootstrap历练实例：默认的Well

Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了一个默认的 Well: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <…

Bootstrap历练实例：默认的进度条

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:默认的进度条</title> <meta charset="utf-8" /> <meta name="viewpo…

Bootstrap历练实例：默认的缩略图

本章将讲解Bootstrap缩略图,大多数站点都需要要在网格中布局图像,视频,文本.Bootstrap通过缩略图为此提供了一些简便的方法,使用Bootstrap创建缩略图的步骤如下: 1.在图像的周围添加带class.thumbnail类的<a>标签. 2.这会添加四个像素的内边距和一个灰色的边框. 3.当鼠标悬停在图像上时,会动画显示出图像的轮廓. 实例: <!DOCTYPE html><html><head> <meta http-equiv=&q…

Bootstrap历练实例：禁用的按钮

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bootstrap历练实例:禁用的按钮</title> <meta charset="utf-8" /> <meta name="viewp…

Bootstrap历练实例：点击激活的按钮

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bootstrap历练实例:点击激活的按钮</title> <meta charset="utf-8" /> <meta name="vie…

Bootstrap历练实例：表单控件大小

表单控件大小 您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度. 实例: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:表单控件大小</title> <met…

Bootstrap历练实例：轮播(carousel)

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edge" /> <meta name="viewport"…