在文档的右上角显示文本？

Question

The new twitter-bootstrap docs have a nice interface for delimiting examples.

How do I get this same effect, but within the well ?

My attempt: http://jsfiddle.net/YdusM/

Answer 1

How about that: jsFiddle

Apply .well:before {...} instead .corner_text:before {...}

UPDATE:

Apply 'example element' for specific well-block: jsFiddle

Answer 2

You can just inspect the code in the docs, and you wil find this css, applied to the exmaple wrapper:

.bs-docs-example::after {
content: "Example";
position: absolute;
top: -1px;
left: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: whiteSmoke;
border: 1px solid #DDD;
color: #9DA0A4;
-webkit-border-radius: 4px 0 4px 0;
-moz-border-radius: 4px 0 4px 0;
border-radius: 4px 0 4px 0;
}

Add something similar as a custom class to your css, or you could even do it in less to use the bootstrap variables and mixins. If you want the text to be addaptable, it would perhaps be better to forget about the :after and adapt this styling a bit to apply it to a specific element holding the text you want and place it inside the wrapper.

edit:
For the positioning to work, you should set the wrapper to position: relative; as well. Not sure what you are after, but i updated your fiddle to demonstrate: http://jsfiddle.net/YdusM/9/

Answer 3

Instead of applying :before to outer div. I made it to .well and adjusted the padding top and left to -20px ..

ie

.well:before {
  position: relative;
  content: "Example";
  top: -20px;
  left: -20px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #9da0a4;
  -webkit-border-radius: 4px 0 4px 0;
     -moz-border-radius: 4px 0 4px 0;
          border-radius: 4px 0 4px 0;
}

Check the fiddle http://jsfiddle.net/YdusM/7/