codecamp

Bootstrap Well

Bootstrap Well

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

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 默认的 Well</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head><body>

 <div class="well">您好,我在 Well 中!</div></body></html>

结果如下所示:

默认的 Well

尺寸大小

您可以使用可选类 well-lgwell-sm 来改变 Well 的尺寸大小。这两个类是与 .well 类结合使用的。这两个类会影响内边距(padding),根据使用的类,Well 会显示得更大或者更小。

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - Well 的尺寸大小</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head><body><div class="well well-lg">您好,我在大的 Well 中!</div><div class="well well-sm">您好,我在小的 Well 中!</div></body></html>

结果如下所示:

Well 的尺寸大小

Well 容器练习

添加Bootstrap well容器

通过 Bootstrap 的 Well 容器,能使你创建的列有一种视觉深度的层次感。

在Bootstrap well容器中加按钮

通过这个练习,你可以往你所创建的 div 里添加按钮标签。

Bootstrap 面板
Bootstrap 插件概览
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Bootstrap 相关教程

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }