Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可。下面的实例演示了一个默认的 Well：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：默认的Well</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div style="padding:20px">
<div class="well">
Hello、 bootstrap、 我在Well中。
</div>
</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

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

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

    Bootstrap 多媒体对象(Media Object) 本章我们将讲解 Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论), ...

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

    Bootstrap 列表组 本章我们将讲解列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-grou ...

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

    Bootstrap 面板(Panels) 本章将讲解 Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素 ...

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

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

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

    本章将讲解Bootstrap缩略图,大多数站点都需要要在网格中布局图像,视频,文本.Bootstrap通过缩略图为此提供了一些简便的方法,使用Bootstrap创建缩略图的步骤如下: 1.在图像的周围 ...

  6. Bootstrap历练实例：禁用的按钮

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

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

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

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

    表单控件大小 您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度. 实例: <!DOCTYPE html><html><hea ...

  9. Bootstrap历练实例：轮播(carousel)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. React `controlled` 及 `uncontrolled` 组件

    通过 props 来设置其 value 值的组件便是一种 controlled 组件.典型的 form 表单中,像 输入框 <input> 下拉框 <select> 多选框 & ...

  2. Java基础笔记（一）——JDK、JRE、JVM

    JDK.JRE和JVM三者的关系 Java程序执行过程 JVM(java virtual machine) 注:由于各种操作系统(windows.linux等)支持的指令集(二进制可执行代码)不同,程 ...

  3. day6作业详解

    1.day6题目 1,老男孩好声⾳选秀⼤赛评委在打分的时候呢, 可以进⾏输入. 假设, 老男孩有10个评委. 让10个评委进⾏打分, 要求, 分数必须⼤于5分, 小于10分. 电影投票. 程序先给出⼀ ...

  4. 利用sizeof，得到二维数组的维度

    #include <iostream> #include <stdlib.h> using namespace std; int main() { ][]; cout < ...

  5. VUE中获取url中的值

    如图:获取值 一:main.js中写入 const router = new VueRouter({ routes: [ { path: '/goodsinfo/:goodsId', componen ...

  6. bzoj 5337 [TJOI2018] str

    bzoj 5337 [TJOI2018] str Link Solution 水题 直接 \(f[i][j]\) 表示以第 \(i\) 位为结束位置,当前已经匹配了前 \(j\) 个氨基酸的方案数 使 ...

  7. restful 风格 加上springmvc

    一.spring 版本:spring-framework-3.2.7.RELEASE 二.所需其它Jar包: 三.主要代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  8. thymeleaf中th:attr用法以及相关的thymeleaf基本表达式

    额,有人写的很好,我直接搬了 thymeleaf中th:attr用法 1.写死的单个属性值添加 th:attr="class=btn" 2.写死的多个属性值添加 th:attr=& ...

  9. http://circles.arenaofthemes.com/

    http://pan.baidu.com/share/link?shareid=492277&uk=637823677 http://circles.arenaofthemes.com/ ht ...

  10. 像音乐播放App一样移动背景

    如果你经常听歌,你会发现歌曲app的背景会随着音乐移动的,从左到右或者从上到下,这种动画虽然简单,但是这里有一个技巧.如果你还不明白这种动效看看下面的demo (更多详细请参考:https://git ...