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

html:

  1. <div>
  2. <div class="well">
  3. well测试
  4. </div>
  5. </div>

尺寸大小

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

代码:

  1. <h2>Well</h2>
  2. <div class="well well-lg">
  3. 在大的Well中
  4. </div>
  5. <div class="well">
  6. 在一般的Well中
  7. </div>
  8. <div class="well well-sm">
  9. 在小的的Well中
  10. </div>

本节完..

Bootstrap学习笔记 Well的更多相关文章

  1. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  2. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  3. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  4. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  5. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  6. Bootstrap学习笔记博客

    本片博客用于记录之后要用到Bootstrap的学习笔记   概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...

  7. bootstrap学习笔记--bootstrap安装环境

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...

  8. Bootstrap学习笔记系列1-------Bootstrap网格系统

    Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...

  9. bootstrap 学习笔记(1)---介绍bootstrap和栅格系统

    学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...

  10. bootstrap 学习笔记

    bootstrap作为当下的流行框架不知道它怎么能行呢? 之前也看过好多bootstrap的网上教程,可是发现光看真的记不住,说起来也真是忧桑~重点还是要自己做才是真正的印象深刻.后来我发现解析模板是 ...

随机推荐

  1. 【最短路】NOIP模拟赛 虫洞

    虫洞 [题目描述] N个虫洞,M条单向跃迁路径.从一个虫洞沿跃迁路径到另一个虫洞需要消耗一定量的燃料和1单位时间.虫洞有白洞和黑洞之分.设一条跃迁路径两端的虫洞质量差为delta. 1. 从白洞跃迁到 ...

  2. 【构造】【分类讨论】Codeforces Round #435 (Div. 2) C. Mahmoud and Ehab and the xor

    题意:给你n,x,均不超过10^5,让你构造一个无重复元素的n个元素的非负整数集合(每个元素不超过10^6),使得它们的Xor和恰好为x. 如果x不为0: 随便在x里面找一个非零位,然后固定该位为0, ...

  3. git远程仓库创建及权限管理(一)单个项目

    最近接手公司git权限管理,既然负责此事个人觉得应该深入学习下,不仅为当前工作也为进一步发展.网上查找了一番,找到了完整的教程,所以这里不再一步一步描述,具体链接已给出,本文只对操作过程中遇到的问题的 ...

  4. Promise小结

    Promise是异步里面的一种解决方案,解决了回调嵌套的问题,es6将其进行了语言标准,同意了用法,提供了`promise`对象, promise对象有三种状态:pending(进行中) .Resol ...

  5. Office(Excel、Word)二次开发——VSTO

    Office(Excel.Word)二次开发——VSTO Office(Excel.Word)二次开发——VSTO Office二次开发模式: 1) VBA(visual studio for app ...

  6. [Linux Memory] 用/proc/stat计算cpu的占用率

    转载自:http://blog.csdn.net/pppjob/article/details/4060336 在Linux下,CPU利用率分为用户态,系统态和空闲态,分别表示CPU处于用户态执行的时 ...

  7. 面经 | 我是如何通过校招拿到京东的Offer的

    本文来自粉丝投稿,原作者:红鼻子熊. 版权归Hollis所有. OFFER:京东2018校招物流研发岗 个人:211小硕 面试时间:2017年秋天 整体:三轮面试,前两轮为技术面试,最后为hr面试 一 ...

  8. WAF攻击与防御

    背景 对于腾讯的业务来说,有两个方面决定着WAF能否发挥效果,一个是合适处理海量流量的架构,另一个关键因素则是规则系统.架构决定着WAF能否承受住海量流量的挑战,这个在之前的篇章中简单介绍过(详情见主 ...

  9. http://my.oschina.net/lenglingx/blog/205269

    http://my.oschina.net/lenglingx/blog/205269 http://www.2cto.com/os/201402/281465.html 单点登录原理: http:/ ...

  10. scrapy-splash抓取动态数据例子七

    一.介绍 本例子用scrapy-splash抓取36氪网站给定关键字抓取咨询信息. 给定关键字:个性化:融合:电视 抓取信息内如下: 1.资讯标题 2.资讯链接 3.资讯时间 4.资讯来源 二.网站信 ...