• Floating production, storage and offloading vessel delivered in Qingdao 2018-05-20
  • 汽車定位跟蹤官員意圖敲詐 追蹤器該怎麼管 2018-05-20
  • 工作队精准发力助力贫困村“摘帽” 2018-05-20
  • 中消协发布榨汁机比较试验结果 2018-05-20
  • 游花海林芝,赏野生桃花 2018林芝桃花节29日开幕 2018-05-20
  • 19米99轻松卫冕 巩立姣:没突破20米有点可惜 2018-05-18
  • 海南省工商局出实招提高干部素质 强化工作作风 2018-05-18
  • 栾蕾英亮相TOP100时尚盛典 盛装亮相仙气十足 2018-05-18
  • 以合法形式掩盖非法目的的合同效力 2018-05-18
  • 4月解放领跑重卡行业 红岩保持增幅第一 2018-05-17
  • 不查“后来”,中国电影难有未来 2018-05-16
  • 欧盟公司与伊朗合作将遭美国制裁?德媒:欧美或渐行渐远 2018-05-16
  • 《青草的清香》:探索感官和情感的发展史 2018-05-16
  • 徒步穿越纪念汶川地震十周年 2018-05-16
  • 警方提示:提防打火机、香水让车辆“上火” 2018-05-15
  • 【bootstrap教程】Bootstrap Well

    栏目: bootstrap 发布于: 2014-11-28 12:50:54

    Bootstrap Well

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

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 默认的 Well</title>
       <link rel="nofollow" href="http://www.rocksun.cn/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://www.rocksun.cn/scripts/jquery.min.js"></script>
       <script src="http://www.rocksun.cn/bootstrap/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 rel="nofollow" href="http://www.rocksun.cn/bootstrap/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://www.rocksun.cn/scripts/jquery.min.js"></script>
       <script src="http://www.rocksun.cn/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="well well-lg">您好,我在大的 Well 中!</div>
    <div class="well well-sm">您好,我在小的 Well 中!</div>
    
    </body>
    </html>
    

    结果如下所示:

    Well 的尺寸大小

    本文转载自:w3cschool
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:【bootstrap教程】Bootstrap Well
    IT技术书籍推荐:
    深入PHP:面向对象、模式与实践(第3版)
    深入PHP:面向对象、模式与实践(第3版)
    Mart Zandstra (作者), 陈浩 (译者), 吴孙滨 (译者), 胡丹 (译者), 李静 (译者)
    《深入PHP:面向对象、模式与实践(第3版)》是PHP专家经典力作的最新版本。书中主要介绍了如何使用面向对象技术和设计模式编写稳定的、可维护的代码,如何使用Subversion管理多个开发人员,如何使用Phing和PEAR进行构建和安装,以及将构建和测试过程自动化的策略,包括持续集成?!渡钊隤HP:面向对象、模式与实践(第3版)》适合中高级PHP程序员阅读。