From 8e50e7a8f264c65b453a9b7133c7532c439730f5 Mon Sep 17 00:00:00 2001 From: Nicole Date: Sun, 23 Jun 2013 17:17:08 -0700 Subject: Update remaining templates to match starter template --- carousel/example.css | 136 ++++++++++++++++++++++++++++++++++++++++ carousel/index.html | 172 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 308 insertions(+) create mode 100644 carousel/example.css create mode 100644 carousel/index.html (limited to 'carousel') diff --git a/carousel/example.css b/carousel/example.css new file mode 100644 index 000000000..d31149b2e --- /dev/null +++ b/carousel/example.css @@ -0,0 +1,136 @@ + +/* GLOBAL STYLES +-------------------------------------------------- */ +/* Padding below the footer and lighter body text */ + +body { + padding-bottom: 40px; + color: #5a5a5a; +} + + + +/* CUSTOMIZE THE NAVBAR +-------------------------------------------------- */ + +/* Special class on .container surrounding .navbar, used for positioning it into place. */ +.navbar-wrapper { + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 10; +} + + + +/* CUSTOMIZE THE CAROUSEL +-------------------------------------------------- */ + +/* Carousel base class */ +.carousel { + margin-bottom: 60px; +} +/* Since positioning the image, we need to help out the caption */ +.carousel-caption { + z-index: 10; +} + +/* Declare heights because of positioning of img element */ +.carousel .item { + height: 500px; +} +.carousel img { + position: absolute; + top: 0; + left: 0; + min-width: 100%; + height: 500px; +} + + + +/* MARKETING CONTENT +-------------------------------------------------- */ + +/* Pad the edges of the mobile views a bit */ +.marketing { + padding-left: 15px; + padding-right: 15px; +} + +/* Center align the text within the three columns below the carousel */ +.marketing .col-lg-4 { + text-align: center; + margin-bottom: 20px; +} +.marketing h2 { + font-weight: normal; +} +.marketing .col-lg-4 p { + margin-left: 10px; + margin-right: 10px; +} + + +/* Featurettes +------------------------- */ + +.featurette-divider { + margin: 80px 0; /* Space out the Bootstrap

+ +

Example headline.

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Another example headline.

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Learn more

One more for good measure.

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Browse gallery

+ + +

+ + + + + + +

+ + +

Heading

Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.

View details »

Heading

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

View details »

Heading

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

View details »

+ + + + +

+ +

First featurette heading. It'll blow your mind.

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

+ +

Oh yeah, it's that good. See for yourself.

+ +

And lastly, this one. Checkmate.

+ +

+ + + + + + + +

+ + \ No newline at end of file -- cgit v1.2.3 From 1a2ef331fdbe0a9f1e886146eba6d750f0ea5d3d Mon Sep 17 00:00:00 2001 From: Ross Allen Date: Thu, 18 Jul 2013 14:57:27 -0700 Subject: Let .navbar-wrapper flow in Carousel example A .navbar-wrapper followed by a .carousel works well in this example, but when the navbar is not followed by a carousel, content flows underneath the navbar because it is absolutely positioned. Letting .navbar-wrapper be part of the flow and moving the negative margin to the .carousel to bring it underneath the navbar makes these example styles suitable for pages without carousels. --- carousel/example.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) (limited to 'carousel') diff --git a/carousel/example.css b/carousel/example.css index d31149b2e..3d997481e 100644 --- a/carousel/example.css +++ b/carousel/example.css @@ -15,10 +15,6 @@ body { /* Special class on .container surrounding .navbar, used for positioning it into place. */ .navbar-wrapper { - position: absolute; - top: 0; - left: 0; - right: 0; z-index: 10; } @@ -30,6 +26,9 @@ body { /* Carousel base class */ .carousel { margin-bottom: 60px; + + /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */ + margin-top: -90px; } /* Since positioning the image, we need to help out the caption */ .carousel-caption { @@ -119,7 +118,6 @@ body { /* Navbar positioning foo */ .navbar-wrapper { margin-top: 20px; - margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */ } /* The navbar becomes detached from the top, so we round the corners */ .navbar-wrapper .navbar { @@ -133,4 +131,4 @@ body { line-height: 1.4; } -} \ No newline at end of file +} -- cgit v1.2.3 From bf51e24700627b17df5041f3a369f6f6b4a4bfbb Mon Sep 17 00:00:00 2001 From: Nicole Date: Sat, 20 Jul 2013 23:17:01 -0700 Subject: change file names to example names --- carousel/carousel.css | 134 ++++++++++++++++++++++++++++++++++++++++++++++++++ carousel/example.css | 134 -------------------------------------------------- carousel/index.html | 2 +- 3 files changed, 135 insertions(+), 135 deletions(-) create mode 100644 carousel/carousel.css delete mode 100644 carousel/example.css (limited to 'carousel') diff --git a/carousel/carousel.css b/carousel/carousel.css new file mode 100644 index 000000000..3d997481e --- /dev/null +++ b/carousel/carousel.css @@ -0,0 +1,134 @@ + +/* GLOBAL STYLES +-------------------------------------------------- */ +/* Padding below the footer and lighter body text */ + +body { + padding-bottom: 40px; + color: #5a5a5a; +} + + + +/* CUSTOMIZE THE NAVBAR +-------------------------------------------------- */ + +/* Special class on .container surrounding .navbar, used for positioning it into place. */ +.navbar-wrapper { + z-index: 10; +} + + + +/* CUSTOMIZE THE CAROUSEL +-------------------------------------------------- */ + +/* Carousel base class */ +.carousel { + margin-bottom: 60px; + + /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */ + margin-top: -90px; +} +/* Since positioning the image, we need to help out the caption */ +.carousel-caption { + z-index: 10; +} + +/* Declare heights because of positioning of img element */ +.carousel .item { + height: 500px; +} +.carousel img { + position: absolute; + top: 0; + left: 0; + min-width: 100%; + height: 500px; +} + + + +/* MARKETING CONTENT +-------------------------------------------------- */ + +/* Pad the edges of the mobile views a bit */ +.marketing { + padding-left: 15px; + padding-right: 15px; +} + +/* Center align the text within the three columns below the carousel */ +.marketing .col-lg-4 { + text-align: center; + margin-bottom: 20px; +} +.marketing h2 { + font-weight: normal; +} +.marketing .col-lg-4 p { + margin-left: 10px; + margin-right: 10px; +} + + +/* Featurettes +------------------------- */ + +.featurette-divider { + margin: 80px 0; /* Space out the Bootstrap

more */ +} +.featurette { + padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */ + overflow: hidden; /* Vertically center images part 2: clear their floats. */ +} +.featurette-image { + margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */ +} + +/* Give some space on the sides of the floated elements so text doesn't run right into it. */ +.featurette-image.pull-left { + margin-right: 40px; +} +.featurette-image.pull-right { + margin-left: 40px; +} + +/* Thin out the marketing headings */ +.featurette-heading { + font-size: 50px; + font-weight: 300; + line-height: 1; + letter-spacing: -1px; +} + + + +/* RESPONSIVE CSS +-------------------------------------------------- */ + +@media (min-width: 768px) { + + /* Remve the edge padding needed for mobile */ + .marketing { + padding-left: 0; + padding-right: 0; + } + + /* Navbar positioning foo */ + .navbar-wrapper { + margin-top: 20px; + } + /* The navbar becomes detached from the top, so we round the corners */ + .navbar-wrapper .navbar { + border-radius: 4px; + } + + /* Bump up size of carousel content */ + .carousel-caption p { + margin-bottom: 20px; + font-size: 21px; + line-height: 1.4; + } + +} diff --git a/carousel/example.css b/carousel/example.css deleted file mode 100644 index 3d997481e..000000000 --- a/carousel/example.css +++ /dev/null @@ -1,134 +0,0 @@ - -/* GLOBAL STYLES --------------------------------------------------- */ -/* Padding below the footer and lighter body text */ - -body { - padding-bottom: 40px; - color: #5a5a5a; -} - - - -/* CUSTOMIZE THE NAVBAR --------------------------------------------------- */ - -/* Special class on .container surrounding .navbar, used for positioning it into place. */ -.navbar-wrapper { - z-index: 10; -} - - - -/* CUSTOMIZE THE CAROUSEL --------------------------------------------------- */ - -/* Carousel base class */ -.carousel { - margin-bottom: 60px; - - /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */ - margin-top: -90px; -} -/* Since positioning the image, we need to help out the caption */ -.carousel-caption { - z-index: 10; -} - -/* Declare heights because of positioning of img element */ -.carousel .item { - height: 500px; -} -.carousel img { - position: absolute; - top: 0; - left: 0; - min-width: 100%; - height: 500px; -} - - - -/* MARKETING CONTENT --------------------------------------------------- */ - -/* Pad the edges of the mobile views a bit */ -.marketing { - padding-left: 15px; - padding-right: 15px; -} - -/* Center align the text within the three columns below the carousel */ -.marketing .col-lg-4 { - text-align: center; - margin-bottom: 20px; -} -.marketing h2 { - font-weight: normal; -} -.marketing .col-lg-4 p { - margin-left: 10px; - margin-right: 10px; -} - - -/* Featurettes -------------------------- */ - -.featurette-divider { - margin: 80px 0; /* Space out the Bootstrap

more */ -} -.featurette { - padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */ - overflow: hidden; /* Vertically center images part 2: clear their floats. */ -} -.featurette-image { - margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */ -} - -/* Give some space on the sides of the floated elements so text doesn't run right into it. */ -.featurette-image.pull-left { - margin-right: 40px; -} -.featurette-image.pull-right { - margin-left: 40px; -} - -/* Thin out the marketing headings */ -.featurette-heading { - font-size: 50px; - font-weight: 300; - line-height: 1; - letter-spacing: -1px; -} - - - -/* RESPONSIVE CSS --------------------------------------------------- */ - -@media (min-width: 768px) { - - /* Remve the edge padding needed for mobile */ - .marketing { - padding-left: 0; - padding-right: 0; - } - - /* Navbar positioning foo */ - .navbar-wrapper { - margin-top: 20px; - } - /* The navbar becomes detached from the top, so we round the corners */ - .navbar-wrapper .navbar { - border-radius: 4px; - } - - /* Bump up size of carousel content */ - .carousel-caption p { - margin-bottom: 20px; - font-size: 21px; - line-height: 1.4; - } - -} diff --git a/carousel/index.html b/carousel/index.html index 295e47bca..f9b2358c2 100644 --- a/carousel/index.html +++ b/carousel/index.html @@ -6,7 +6,7 @@ - Carousel template for Bootstrap + Carousel Template for Bootstrap -- cgit v1.2.3 From 6d269c2ed7e035101bac75eecd1551df5004ed1f Mon Sep 17 00:00:00 2001 From: Nicole Date: Sat, 20 Jul 2013 23:30:08 -0700 Subject: add git ignore --- carousel/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'carousel') diff --git a/carousel/index.html b/carousel/index.html index f9b2358c2..2bc48b380 100644 --- a/carousel/index.html +++ b/carousel/index.html @@ -12,7 +12,7 @@ - + -- cgit v1.2.3 From 9c13af8cb10f6e16322c50dfc82ae9263d99b82a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 26 Jul 2013 20:42:47 -0700 Subject: massive update, including new index page --- carousel/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'carousel') diff --git a/carousel/index.html b/carousel/index.html index 2bc48b380..4d2e5fd98 100644 --- a/carousel/index.html +++ b/carousel/index.html @@ -9,7 +9,7 @@ Carousel Template for Bootstrap - + -- cgit v1.2.3 From 2998929b39eb3a4d587c6237d98095f9f5b0df2f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 26 Jul 2013 20:48:10 -0700 Subject: fix up carousel holder and navbar probs --- carousel/carousel.css | 1 + carousel/index.html | 11 ++++++++++- 2 files changed, 11 insertions(+), 1 deletion(-) (limited to 'carousel') diff --git a/carousel/carousel.css b/carousel/carousel.css index 3d997481e..49f8483a2 100644 --- a/carousel/carousel.css +++ b/carousel/carousel.css @@ -15,6 +15,7 @@ body { /* Special class on .container surrounding .navbar, used for positioning it into place. */ .navbar-wrapper { + position: relative; z-index: 10; } diff --git a/carousel/index.html b/carousel/index.html index 4d2e5fd98..9111e3bf1 100644 --- a/carousel/index.html +++ b/carousel/index.html @@ -168,5 +168,14 @@ + + + + + + + + - \ No newline at end of file + -- cgit v1.2.3 From c834b4027c88f3d3fe28597f136968c9fdac848f Mon Sep 17 00:00:00 2001 From: Ross Allen Date: Sat, 27 Jul 2013 20:14:49 -0700 Subject: Match .carousel-inner specificity to beat styles '.carousel ing' was replaced with '.carousel-inner > .item > img' in 3.0 and now loses the specificity war. To make carousel images 500px tall, match specificity to make carousel.css win. --- carousel/carousel.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'carousel') diff --git a/carousel/carousel.css b/carousel/carousel.css index 49f8483a2..24b96f9c3 100644 --- a/carousel/carousel.css +++ b/carousel/carousel.css @@ -40,7 +40,7 @@ body { .carousel .item { height: 500px; } -.carousel img { +.carousel-inner > .item > img { position: absolute; top: 0; left: 0; -- cgit v1.2.3 From ce1fdc5ded80c3bfd0f0e7b1cce124f4e86ade6a Mon Sep 17 00:00:00 2001 From: Ross Allen Date: Sat, 27 Jul 2013 20:17:53 -0700 Subject: Update carousel example JS path 'bootstrap.min.js' lives in '../bootstrap/js' now. Switch to the minified version for a smaller download since this example is focused on CSS changes, not JavaScript ones. --- carousel/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'carousel') diff --git a/carousel/index.html b/carousel/index.html index 9111e3bf1..042473ad8 100644 --- a/carousel/index.html +++ b/carousel/index.html @@ -175,7 +175,7 @@ ================================================== --> - + -- cgit v1.2.3 From a9144b50ea5de168f09a1d8136e72921edf0e8e2 Mon Sep 17 00:00:00 2001 From: Gerhard Date: Tue, 30 Jul 2013 16:23:34 +0200 Subject: .navbar-wrapper need higher z-index to be on top of the carousel --- carousel/carousel.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'carousel') diff --git a/carousel/carousel.css b/carousel/carousel.css index 49f8483a2..a68857c6b 100644 --- a/carousel/carousel.css +++ b/carousel/carousel.css @@ -1,4 +1,3 @@ - /* GLOBAL STYLES -------------------------------------------------- */ /* Padding below the footer and lighter body text */ @@ -16,7 +15,7 @@ body { /* Special class on .container surrounding .navbar, used for positioning it into place. */ .navbar-wrapper { position: relative; - z-index: 10; + z-index: 15; } -- cgit v1.2.3 From 97a5c3613cb6d4f6ccce5d71175ab19bad32a363 Mon Sep 17 00:00:00 2001 From: Jesse Hu Date: Tue, 6 Aug 2013 02:34:36 -0400 Subject: Added glyphicons to index.html --- carousel/index.html | 1 + 1 file changed, 1 insertion(+) (limited to 'carousel') diff --git a/carousel/index.html b/carousel/index.html index 042473ad8..efb4bcf3c 100644 --- a/carousel/index.html +++ b/carousel/index.html @@ -10,6 +10,7 @@ + -- cgit v1.2.3