From d640c3b14b78bd17407ba123cbc718a6e34bb5d5 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Tue, 6 Sep 2011 23:30:21 -0700
Subject: [PATCH] update diagrams to use smaller border radius, add new
 container-app example

---
 docs/assets/img/example-diagram-01.png | Bin 1675 -> 1641 bytes
 docs/assets/img/example-diagram-02.png | Bin 1831 -> 1742 bytes
 docs/assets/img/example-diagram-03.png | Bin 1531 -> 1428 bytes
 docs/index.html                        |   6 +-
 examples/container-app.html            | 111 +++++++++++++++++++++++++
 5 files changed, 114 insertions(+), 3 deletions(-)
 create mode 100644 examples/container-app.html

diff --git a/docs/assets/img/example-diagram-01.png b/docs/assets/img/example-diagram-01.png
index 16ac0c44ee5d1b4eeff1ad556742030d77ae05d7..0cece3b3eadb7de46b803b42b42304093ae268c5 100644
GIT binary patch
delta 733
zc-rgceaW*Sib=u3#nRH%$;H{l(AdS$(AB`n&CSf!!qC{l(be3|#K3rR6_X51krPfu
z+nACR+|1403=Pdq49txT%q$EIEnJ+O+zbpYjV;VfEle#9CR;Gq)tmYHyk=lvn(pc1
z7*cWT%^hpMI{_jM4|k?K5xS_LcyZ|&tqAteX@Z>{?%x_+rsf_n%XneaWyHHkTB=wl
zP{G6SNco%U^nL!jI?ny*sIRG5b~C5UnwjmUF_VB02WJZl2s<$;GCDP#^@zPblL^8H
zi#1MQP&{bQc1FCrRrA1w36D$)&poc`FV0cfu+8k8@0|ErkMP2}8Jsmy{~uU(e^%X^
z``i4UrHSy5{L{9A2NT-=^)ML;2u<F=qQwC+sd0jX$K*y9!}?PknVCEWCpPiFyd{$`
zVRq%7ogJ5tSoRjDsBPG0Us!ki=geE%O!*`<N@LTx6jVU2gt!#ss@WWx=Tc9~C$!j|
zJU%_hNW3_5w*6v=*$opEwD1381G5jzp73bSn_mKtjy`#JI03A#UT>a9!dB+hbL&Nq
z#jGi7m~bE~z12{BwQR&&hShVyVqj??>&($C_Au)Ww;~fktcbS=l?|C;yX$RVt&;aq
z)jo4$^ZG=+;2OIsCC6pzm!_<jQMKzVdsXK>)Az0MSN|`H&6RVSE#e=)=`T6E+=9PQ
zj(fiEx}8^w>h~v~PhI`&rv1cyy*5++UeBJUcReO+=lzY(H-&zF<D8|oBQN-%y3gk1
z@6ng{ny9w1q;O=K9xM$PJ(IQ-EVjmr=cV1b&mGrm>h`9+EIPY%+Hcuvy=YT^d-p1P
z0ekmZDP~*GU%Bov;j!zn^&Ft!P*4G30im4v;*4yf3<>(ia-l~juVVlLPgg&ebxsLQ
E04TL7F#rGn

delta 742
zc-ni()6Kgfib=uT&BfBhz|_py&D7b@(AB`n#Kg$L!p+3Q)Wq4s+}Le$6_X51ktt3^
z+nAD=49q7hFeyy7Vy>yL<km}MU|`zm>EaktaqG=($Gpo9A`OZDPQgn(M4O~HJQ0!U
zoqf>sMnMbL#*8N}B^Am#AyXB$Zro`5?YpP))(swir^MHJUcO>-_Bq>&)MOR~6#*d*
zP7rQkabjv=`R{(payHWr<;DpP9t}VYl2=e+c&2Il^OxE=JD+n`C;w-z)0StoI%;`j
z=lgyCg-@HEyRE12pwcU#ys$2B_l$d;9C2&D6vw{vd)j^dt`~cZ*yY2^s(o2v^7e1M
z<d`2m``GT{3*n!*BPAv;V=<gu#-dSwFv|JVF^0WQgf5+wSuj1A^JN0xh0_aLO5U$y
znSQ_5%lY=Z*=FZT=d9g%pj&BI_vZ<6f0MzkId`t-!Ti3v-itP!t=!DlHmOKV<jYg>
zO{ji4rzy|<%jCJd!E>9F=cfl5i5C~TGbuv+mmu}8hv`oJM36rpT+Ci#A%ESjrDE=n
zr|S<cNzr@u>CeuJ&5Ucx61HwWG^6_}--cU_SI==J>xEfwxWyP|t=+RT;_ZPfb}$Ph
zk3;3<HD%B9O0V)Sn<Sd{=H_*S>6-KUK@taR!gg!sA1tnqeH~W1H~4%i=jR&H=e~2k
z7v{NFosloxcl4*-=jUewidR0ZIzI38qGyp|yZM#*pKhx@vr{@tZ)?o^8^w`VY`i^o
zbIO&69~4g8zUlSamr-TKJe(2=OUjy#=W5UJ-3=DIW!d({^jzVQ<2GgemgUZ8mri>v
zTdmhUYx(y5=Xp(z-oC&19MJYJC)p%2wlaf4O_9+F6i5k)b({taRra?w7B)X&X8;0E
LS3j3^P6<r_Av;NY

diff --git a/docs/assets/img/example-diagram-02.png b/docs/assets/img/example-diagram-02.png
index 90c30e6a137e87ed2859766e5e193b29f3300bc5..557edd3112250f67e8491d68ab97acb31105c27d 100644
GIT binary patch
delta 855
zc-mXecaC>MG?ToGrKPKrtAUH5v5TRhtAUf7o0+SHp|ORdtGSzrf$`)jCRvCY7dM=0
zwlO6sxS5-~85)|K7?>Lwm{}MaTDUklxfvK*8e5o|T9{fIOtxUIt5@uiKghtq^vBc1
zF{I+wn>!n`L>wg!e2li;#$(35scf2E>-og${)EX35?Br{7YO<(^~^M9O;P&<w>R%*
z74rFQwCH~D?u~ize)%2`ow9WE|8L4Y_vCGisEK6w|8$}^gA<ct;{*mEcJNS8aquwc
z)m!>Rt3h3egR_MNgzJF{7@e9pb++Gro5L>O_VE1u=QjKjk2|kC|Ejot_nu2fUcakY
z^H2VH@TVA^>@DY?r~Z3f8#lf6Q0=tqv-ik7FD-p^-+LZ+&$pj76-sN<EgHWv+w)Ca
z%dfaL&EmtWM)~#=Vf(V#m1{RM3c&3ITge1=Q^RBqR=&yKSp+!r7$H)V_poTy|0{bx
zEnwmA48__a{}mU`8r|UBdwTWx*P(I#cjcRY&%6G7&pkKp%=y<}KW@ru;mnj^D{s#F
zxlR^h0@#Aa2@Szcf76_=mtLQ!ALjM)R^8j{!kj&23Mv9Z3Mw;Vw%^RT6m$Gry!r<h
zkcOs&MSs%{pAOS6@p^f!uKxDj_4#H8JQm-T$v^d?S0OWRi}fDO$Egn=-;;RzX8YEQ
z?>@Bk$cv}moAU9y^sCsXTg`7>4D#448{=Uj98|}0+){FJ-(N1ybJOKd9OC%naBW5M
zem84_Ta6dbWu#x(7{6Fn;_ZQq^evl#tb{Ghi{}O&uj?%Xvd-mfu{I5Ak*#M>lPmR#
zU!Ae|?u_5&w;a9wm;AY^btrtrtMAeuxszL}t-qFjlH!c2?ww+L@^xjLcx&Hx<MsKK
ze^=D(FMhB5>aT9u+(ot%<3#qI5I>%LZQuQ!-vz(^6Wi@~(dpIsCo_U&cCS}hvhQl~
z2PsY|p3HK!<8vO}*v(~kzijP1=PeWVJ@ehFU$N)!#~EASm%poZ*}MPfy5Je|Cw^H5
y)mE=~dC#wQ?jE<MY4bb+jQv#*v3l{3Py)jot=<dU)}>!$00K`}KbLh*2~7ZYlzYnn

delta 910
zc-lM1yPR)BG?To!rMa`Cfu*yXsk5P>tAUe=iIIhcn~903iL-^dvD@S-CRwN&3!G}U
zF(ok>m`_$<QkZPTTvK1|6|sqdfjQLE#WAGf)|)#A^DcXdG$i`Za`BqL^=gu;_q-<e
z*Rv01Z%91J720qmEH`B4#u-W>POh!Cc8}}kn_OC2{;=n*{QPCAD_`&WF8d)q%#V?S
zvxUWp34|3JCom`;Gzq%@{Tx$;QsV>%j|L!CP!SMPP?_N{>+^&9{r?RtmOjb4u;y#?
zif@%~Ki%q)xEXL-asBH(>rT!8ulhkVj@zfm{{H<1>Xmb+&Mxyh%)R5p>vt2?gVtVW
zT738XYN6n@(&fQ@Q{^g!Iy=Jt?3y2*+Hxzz?#Dm<|M~h#QazdbweGiH*;f7Ny5gq0
zS<BQ9JnM{azu><#)cm}4(#uYc`1TW%<WC&pn0$*xiwER1nDZvjV^OI$*?&)Up=0fq
z34H4~d97TyU*0lZ=y?62)2>e;i?%MmSa9F%kK9Wq9}|&_1^d6fZqR?Hw_d;U?dMxh
zx0deZc($!Zx+wJDr}x(!<6nGuq<6aM!=aWd-|zig7F(yl4Go+|aCkhJ5wQQ}gdnT_
znoYm<*>8{k{ndqOu`EYDFd#WN)uw-{vc0^~{`Yd>3MEFTrj5?ClJ^;1-l%an-;8H|
zOVDp-x4t^B0I!#KgZxYW)qQCGt5?4N@N8cFPgRjWcijK9>q{E5x76FLdX2{mWrW4P
zx=77=QabJWGAEbA?62-lJ-$Eic%8WDrN8z5Ul;b&*DScVaY6#8;@OYer`2m8FmmcD
zF_tcU6YlY$=jT~A3CAt<S$S7B#xItYc+0SOE>LT4S;7|Po-#Mt-=?=3FY*Cd){Fc8
zO1(Xh!S1%Z(|vccvg?h)glB=vzwPWYyVbk19;Ed^#`g~!?Y}423I6W2N<33ryWGzI
zb;9%Cp>g@2tk#z7d0$z3>UDPg<KJ_u<pbB}Z~ZKiyQMn%r^@_k$=mkb-}zne>#s0t
z|BFty>?SAs6~4)3R?MCLOKQ(e25z30&t}RLcO~C9DcFBk=c_3&(vrV_4vx&;se3%9
zc7O4E<yT+Vmd!i#$Kl%T`?>EHPkn9uwer(!-VFyX^1+iWFq8%V2qcIyxU+q{#jp6q
Qn*j(sUHx3vIVCg!03WKXUH||9

diff --git a/docs/assets/img/example-diagram-03.png b/docs/assets/img/example-diagram-03.png
index 00401e0b16fc3d807796e8f60fc7e5755e5f8919..acf819d408cdd36bdfaa1a14657fadc9a6146be0 100644
GIT binary patch
delta 428
zc-s5TJ%xKi6qACbiKU6FrHiGDp|Ojhp{s$Do12-dg`u&9qpP`_iGlItDkd42A`6^~
zwlO6sxS5-~85)|K7?>Lwm{}MaTDUklxfvK*8e5o|T9{fIOtxUIt3UJZE;|DQ;~`HM
z$B>F!Z>}3=wK#}0Je=E`@_s|CU((~ROqR~CT5W@JbewOg?6R(GYW$MuCb5rSZrY-K
z@}^&F=kp)fFLRekK!}60g$0D2m=qbEnv8<Z?EGLUS9~r%&vdtLrI&x<k8f^F^UD-e
z96S_MK&l}+CZA*BXKI)*xsFA9aypCb<YO%25U%m$3qbBU7Vdh-*NRV5Bkk^FecSLh
zF7HvViSOm3%BlPttFMRM^Z1@95qGSxX72N!cNZ^hE4_YgZui~lxbh8OegYkE$WkuJ
z&v5R4Bdy5CkxBcK@|N1a-zD|m<92J!zfO(Hb0YV4-k<T#^xwo?UE*c8*=9X9=7zeT
iNwIOl0!Mo$9)<(LH?5LZ+wOhE00f?{elF{r5}E)bKcUkA

delta 520
zc-ou7{hND36qAC5xuv<Yqk)UFo2j#*p{s$DiHVVgg`0_qsfn|Nxv|^iDkd42B4?b6
zwlO6!8CXnKU{aWD#avS#l)Ld00|S$$r;B4q#jQ8D46_aeFf=?|X6C2MclXX0E?H}h
zFD#F4ZB75+v~Jzn3me&ATwB<*OI&72*anrC+%7LJtyF9LQ2T*nSId*9=e>_)7)Yd~
zAJ{*~npHtXK!}4Agj-mgm|9q#b{u*!ZBKvMv{dcovu^2q(s<Q+_F$JRi`-iWkA?{j
z9w7A)JuNH{J&KHz@35#%c3@#)Qc#(^oW&SPWb$(sfyrB0RO){@i`7_Py`t!QdHo-$
zoFiRZZoj?fqgi_6{rC61krS`I{<>ImDc|a=uU2Ym2boFrE_--xgTdO6JyN=#ve$P_
zh)Rr^x_9!~w8=T!Z%=<%P$7N%<5taOT^(wZPadwZ`_CaidDD0C){ARj2pYZn{(Ji7
zn{W1Ae|@*qYOeI<vnyMrzrD^b+F2vlfBf=>zdZ3z?Ms&Wa=w%Z-p919JNNXK;HD)K
z?Mbu4HeT-L;y2Kp7kXLg!Q+O>d;9-OWs1IcD{U#Uxp1WBvdO=j3_#B|PGA6H2agL5
b_DnnsnG+IUon<-B#Q+4Ju6{1-oD!M<Rn^;b

diff --git a/docs/index.html b/docs/index.html
index 7d58032691..bb8ac6c67f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -153,7 +153,7 @@
           <a href="../examples/fluid.html"><img src="assets/img/example-diagram-02.png" class="diagram" alt="Fluid layout with static sidebar"></a>
         </div>
         <div class="span4">
-          <a href="../examples/application.html"><img src="assets/img/example-diagram-03.png" class="diagram" alt="Simple hanging container for apps"></a>
+          <a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" class="diagram" alt="Simple hanging container for apps"></a>
         </div>
       </div>
     </div>
@@ -961,7 +961,7 @@
             <li class="active dropdown">
               <a href="#" class="dropdown-toggle">Dropdown</a>
               <ul class="dropdown-menu">
-                <li class="active"><a href="#">Secondary link</a></li>
+                <li><a href="#">Secondary link</a></li>
                 <li><a href="#">Something else here</a></li>
                 <li class="divider"></li>
                 <li><a href="#">Another link</a></li>
@@ -998,7 +998,7 @@
     </div>
     <div class="span6 columns">
       <h4>Dropdowns included</h4>
-      <p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done.</p>
+      <p>As part of the main navigation, we’ve included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it’s done. Dropdowns <code>li</code> tags also support <code>.active</code> for showing current page selection.</p>
     </div>
   </div>
   <p><strong>Note:</strong> When using the topbar on any page, be sure to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>body</code>.</p>
diff --git a/examples/container-app.html b/examples/container-app.html
new file mode 100644
index 0000000000..98f9cd69fd
--- /dev/null
+++ b/examples/container-app.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Bootstrap, from Twitter</title>
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <!-- Le styles -->
+    <link href="../bootstrap-1.2.0.css" rel="stylesheet">
+    <style type="text/css">
+      /* Override some defaults */
+      html, body {
+        background-color: #eee;
+      }
+      body {
+        padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
+      }
+      .container > footer p {
+        text-align: center; /* center align it with the container */
+      }
+      .container {
+        width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
+      }
+
+      /* The white background content wrapper */
+      .content {
+        background-color: #fff;
+        padding: 20px;
+        margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
+        -webkit-border-radius: 0 0 6px 6px;
+           -moz-border-radius: 0 0 6px 6px;
+                border-radius: 0 0 6px 6px;
+        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
+           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
+                box-shadow: 0 1px 2px rgba(0,0,0,.15);
+      }
+
+      /* Page header tweaks */
+      .page-header {
+        background-color: #f5f5f5;
+        padding: 20px 20px 10px;
+        margin: -20px -20px 20px;
+      }
+
+      /* Styles you shouldn't keep as they are for displaying this base example only */
+      .content .span10,
+      .content .span4 {
+        min-height: 500px;
+      }
+      /* Give a quick and non-cross-browser friendly divider */
+      .content .span4 {
+        margin-left: 0;
+        padding-left: 19px;
+        border-left: 1px solid #eee;
+      }
+
+    </style>
+
+    <!-- Le fav and touch icons -->
+    <link rel="shortcut icon" href="images/favicon.ico">
+    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
+  </head>
+
+  <body>
+
+    <div class="topbar">
+      <div class="fill">
+        <div class="container">
+          <h3><a href="#">Project name</a></h3>
+          <ul class="nav">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#contact">Contact</a></li>
+          </ul>
+          <p class="pull-right">Logged in as <a href="#">username</a></p>
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+
+      <div class="content">
+        <div class="page-header">
+          <h1>Page name <small>Supporting text or tagline</small></h1>
+        </div>
+        <div class="row">
+          <div class="span10">
+            <h2>Main content</h2>
+          </div>
+          <div class="span4">
+            <h3>Secondary content</h3>
+          </div>
+        </div>
+      </div>
+
+      <footer>
+        <p>&copy; Company 2011</p>
+      </footer>
+
+    </div> <!-- /container -->
+
+  </body>
+</html>
-- 
2.47.2