From 369b9720c6090985c678076eebb59c080c0ed27c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Oct 2011 23:45:35 -0700 Subject: [PATCH] adding responsive stuff to docs to stub that out, updated type to make ul and ol margins match p tags --- bootstrap.css | 4 +- bootstrap.min.css | 2 +- docs/assets/css/docs.css | 17 +++- docs/assets/img/responsive-illustrations.png | Bin 0 -> 2249 bytes docs/index.html | 80 +++++++++++++++++++ lib/type.less | 2 +- 6 files changed, 100 insertions(+), 5 deletions(-) create mode 100644 docs/assets/img/responsive-illustrations.png diff --git a/bootstrap.css b/bootstrap.css index f3ff894d1a..0f6d58ae06 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Mon Oct 17 14:16:58 PDT 2011 + * Date: Mon Oct 17 23:44:56 PDT 2011 */ /* Reset.less * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). @@ -416,7 +416,7 @@ h6 { text-transform: uppercase; } ul, ol { - margin: 0 0 18px 25px; + margin: 0 0 9px 25px; } ul ul, ul ol, diff --git a/bootstrap.min.css b/bootstrap.min.css index 86b68e44a7..31912f2933 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -70,7 +70,7 @@ h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;} h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;} h5{font-size:14px;line-height:18px;} h6{font-size:13px;line-height:18px;color:#bfbfbf;text-transform:uppercase;} -ul,ol{margin:0 0 18px 25px;} +ul,ol{margin:0 0 9px 25px;} ul ul,ul ol,ol ol,ol ul{margin-bottom:0;} ul{list-style:disc;} ol{list-style:decimal;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index bbf71ab778..2d0b87fe21 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -309,7 +309,7 @@ pre.prettyprint { /* Make tables spaced out a bit more */ h2 + table { - margin-top: 10px; + margin-top: 5px; } /* Responsive Docs @@ -347,3 +347,18 @@ h2 + table { } } + + +.supported-devices { + margin-bottom: 9px; + color: #777; +} +.supported-devices strong { + display: block; + font-size: 14px; + line-height: 18px; +} +.supported-devices small { + font-size: 12px; +} + diff --git a/docs/assets/img/responsive-illustrations.png b/docs/assets/img/responsive-illustrations.png new file mode 100644 index 0000000000000000000000000000000000000000..c980da77addecefd57a8294a828fdae2370d1d2e GIT binary patch literal 2249 zcma)8c~nz(77h_C$T|h7Kq(<;MOl&;2#{dFkVTLQO#|9U5EGI|2$;Mq4+zL26tG$> zN~^ZYa$--FRnY;e8IopT3W~Cd^oWB+S+pQ^1*{wMf?(&&q0@PPeDD75yWhRv{oVV= z+s}^LV!g_F6$*v2jtHl7P$&~`#6E1k62Xl4!er#-1T(mBG?WOZ3zQ&=DuNO~OoUV* z205TWl%co`ZbG3}td+!YVJ_>hWFaK=6&PcD)lxaaMxi!^s^tP<3J7BoK(Rzd!9Mu= z4_J&uM8SSSWZ_wI8ki&r&s2iZnNcyq%oHI>gbfYBY*Lev1X2(dVARsxG8I`(!7k(_ zBev0v!(tXf;1mk>jVLaQjiEtG5JU9E`v~y?04BiS7x2fE{7K#z0v^EQ00Isl=mX%% z#6U70z$`vkq?%HcNaoO)i?xsw1)BuJaxxB=o}TWT?&k|B#W;XOBH{1^9D(42MEIyO zWUxT(BU5=SWuSv9p;97;C6Ekb%qU2JQeg@fQTnC@sr+qPnQHNxkPE}91#%qVi#N8k z6v$%z?@+1qZL|vJfWPZqHnA!uLk{9NpbAP=3X#DjdKgQ|$uuP>fFWfJ1npkBMRpPd zL#iZ5j-f>peE|$hAe6|Ao&^SrMUIfEV1Y~sM$jo(B!{m=A|eMcf&hPlAB_nF1_A&B zA4DZF836<)HGs*aGZ@4rE*%o4NXB_Q+jC#q1?2plWyST{V?dpRvWZ#v@ zVsHFxnuXn$0aM2XKq#h;o3qOX z(VeZq%pZ1isngYd-knwJ2kP0jVLCSP`ll^oij9Rv@tihnOB}qPt2d?Pct02><(VB+ z_{5wJXld?l*@w1t=5sCkr!|I?yEoRiC_Fqot|u#8yPmhjuPbmouhZ3Ape_6H6iU5? zjfKgAfZ6j!W@nSy$3LvE+J+Mn+R*R6i~c{f{%NC|`4W@=>hDiE%U;gp*i-7yUze2) zxEic1M-Fy3plq%ce~ZsEvu@OCk9YO-h^MBeZcI!hc78O@Sn;~Ojjhti3ZB#W)D>Ob z-HCI*4qy9hXl5*R-M}%;8D3ldN^V@7!}j$mpMgV8j{b($*4A^mr*%4ti<=ux6dEsl zRqIo9)c9qzql9>SEX0n>7V~(#8?&>`%(6HJ-{kV*gqOzbS=!gvcfbF;$bGMi{f6^S zeJ-A&ZRo z>2rtu>O5~9cpCj;J~Fq^Ih-FHYBN)Nduz|g$cVng*2*ddn(Z*jBLcwTmtR)3bv+Ec zqNOJ?LaY%!sFLT2$#X~73GmYoYDe5}@!rk`)=VsL82EF@_ITI5T{#*E~(~7PO zs`?vSTFSbvUKN#mK&i=b4Q)SrMVr&K=T1_VOJiHmwd~yT<}WjOv9UFd!O0ZGSGtYO z_OT^SgYgeU!O(`U@?~u^iNw+ApQ_6dAH_nNQh7U!e}uQyy*K589d~@NvbR}(toOE; zc^!F8coOgClU{V*x`xt+8h0B1NOYY2R;l}*OAW4{r|dG_F32h!39xl(7Ao4d=51S3 zxt{FRl5{WG5qdfo<6^pf^3I(Z{>hsmvS-N?MMu!JcKWES#Cv6RL({h!9uKomJIC;b zauRytj{i;Q+1K`uosXUtLA2~dPus!b6ZU##bx-9t?}bMtNAaiQHowd^sp#NVspno- zT1g_cihmgnd>^Nfjz-QGX=7(;t!m8^xN6SwaaPWyI&o9YuCVNHt +
+
+

Responsive design Media queries for various devices and resolutions

+
+ +
+
+ Responsive devices +
+
+

Supported devices

+ + + + + + + + + + +
+ Under 480px + Smartphones + + 480px to 768px + Portrait tablet + + 768px to 940px + Landscape tablet + + 940px and up + Default + + 1170px and up + Large screens +
+

With these media queries, Bootstrap provides developers with the core tools necessary to develop responsively on the web for the world's most common devices and resolutions.

+
+
+ +
+ + +

Using the media queries

+
+
+

Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

+
    +
  1. Use the compiled responsive version, bootstrap.reponsive.css
    2. +
  2. Add @import "responsive.less" and recompile Bootstrap
    3. +
  3. Compile responsive.less as a separate file and include that
    4. +
+

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

+
+
+
+  // Landscape phones and down
+  @media (max-width: 480px) { ... }
+
+  // Landscape phone to portrait tablet
+  @media (min-width: 480px) and (max-width: 768px) { ... }
+
+  // Portrait tablet to landscape and desktop
+  @media (min-width: 768px) and (max-width: 940px) { ... }
+
+  // Large desktop
+  @media (min-width: 1210px) { .. }
+
+
+
+ +
+ + + +
diff --git a/lib/type.less b/lib/type.less index 4978dd7869..a490bf5fa1 100644 --- a/lib/type.less +++ b/lib/type.less @@ -74,7 +74,7 @@ h6 { // Unordered and Ordered lists ul, ol { - margin: 0 0 @baseLineHeight 25px; + margin: 0 0 @baseLineHeight / 2 25px; } ul ul, ul ol,