diff options
Diffstat (limited to 'docs/examples')
30 files changed, 559 insertions, 160 deletions
diff --git a/docs/examples/blog/blog.css b/docs/examples/blog/blog.css index 82ba9d0d5..575076a8d 100644 --- a/docs/examples/blog/blog.css +++ b/docs/examples/blog/blog.css @@ -13,10 +13,10 @@ h3, .h3, h4, .h4, h5, .h5, h6, .h6 { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;; + margin-top: 0; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; color: #333; - margin-top: 0; } @@ -41,9 +41,6 @@ h6, .h6 { } /* Nav links */ -.blog-nav { - -} .blog-nav-item { position: relative; display: inline-block; @@ -65,15 +62,14 @@ h6, .h6 { position: absolute; bottom: 0; left: 50%; - display: block; - content: " "; width: 0; height: 0; margin-left: -5px; vertical-align: middle; - border-right: 5px solid transparent; - border-left: 5px solid transparent; + content: " "; + border-right: 5px solid transparent; border-bottom: 5px solid; + border-left: 5px solid transparent; } @@ -165,4 +161,6 @@ h6, .h6 { background-color: #f9f9f9; border-top: 1px solid #e5e5e5; } - +.blog-footer p:last-child { + margin-bottom: 0; +} diff --git a/docs/examples/carousel/carousel.css b/docs/examples/carousel/carousel.css index a728bd899..08448b99c 100644 --- a/docs/examples/carousel/carousel.css +++ b/docs/examples/carousel/carousel.css @@ -16,19 +16,19 @@ body { .navbar-wrapper { position: absolute; top: 0; - left: 0; right: 0; + left: 0; z-index: 20; } /* Flip around the padding for proper display in narrow viewports */ .navbar-wrapper .container { - padding-left: 0; padding-right: 0; + padding-left: 0; } .navbar-wrapper .navbar { - padding-left: 15px; padding-right: 15px; + padding-left: 15px; } @@ -65,21 +65,21 @@ body { /* Pad the edges of the mobile views a bit */ .marketing { - padding-left: 15px; padding-right: 15px; + padding-left: 15px; } /* Center align the text within the three columns below the carousel */ .marketing .col-lg-4 { - text-align: center; margin-bottom: 20px; + text-align: center; } .marketing h2 { font-weight: normal; } .marketing .col-lg-4 p { - margin-left: 10px; margin-right: 10px; + margin-left: 10px; } @@ -106,8 +106,8 @@ body { /* Remove the edge padding needed for mobile */ .marketing { - padding-left: 0; padding-right: 0; + padding-left: 0; } /* Navbar positioning foo */ @@ -115,12 +115,12 @@ body { margin-top: 20px; } .navbar-wrapper .container { - padding-left: 15px; padding-right: 15px; + padding-left: 15px; } .navbar-wrapper .navbar { - padding-left: 0; padding-right: 0; + padding-left: 0; } /* The navbar becomes detached from the top, so we round the corners */ @@ -138,7 +138,6 @@ body { .featurette-heading { font-size: 50px; } - } @media (min-width: 992px) { diff --git a/docs/examples/cover/cover.css b/docs/examples/cover/cover.css index bac1b08c9..9fcc9274f 100644 --- a/docs/examples/cover/cover.css +++ b/docs/examples/cover/cover.css @@ -48,8 +48,8 @@ body { vertical-align: top; } .cover-container { - margin-left: auto; margin-right: auto; + margin-left: auto; } /* Padding for spacing */ @@ -73,8 +73,8 @@ body { margin-left: 20px; } .masthead-nav > li > a { - padding-left: 0; padding-right: 0; + padding-left: 0; font-size: 16px; font-weight: bold; color: #fff; /* IE8 proofing */ @@ -84,6 +84,7 @@ body { .masthead-nav > li > a:hover, .masthead-nav > li > a:focus { background-color: transparent; + border-bottom-color: #a9a9a9; border-bottom-color: rgba(255,255,255,.25); } .masthead-nav > .active > a, diff --git a/docs/examples/dashboard/dashboard.css b/docs/examples/dashboard/dashboard.css index bf242a257..e0e3632b8 100644 --- a/docs/examples/dashboard/dashboard.css +++ b/docs/examples/dashboard/dashboard.css @@ -17,6 +17,13 @@ body { border-bottom: 1px solid #eee; } +/* + * Top navigation + * Hide default border to remove 1px line. + */ +.navbar-fixed-top { + border: 0; +} /* * Sidebar @@ -29,12 +36,14 @@ body { @media (min-width: 768px) { .sidebar { position: fixed; - top: 0; - left: 0; + top: 51px; bottom: 0; + left: 0; z-index: 1000; display: block; - padding: 70px 20px 20px; + padding: 20px; + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ background-color: #f5f5f5; border-right: 1px solid #eee; } @@ -42,15 +51,17 @@ body { /* Sidebar navigation */ .nav-sidebar { - margin-left: -20px; margin-right: -21px; /* 20px padding + 1px border */ margin-bottom: 20px; + margin-left: -20px; } .nav-sidebar > li > a { - padding-left: 20px; padding-right: 20px; + padding-left: 20px; } -.nav-sidebar > .active > a { +.nav-sidebar > .active > a, +.nav-sidebar > .active > a:hover, +.nav-sidebar > .active > a:focus { color: #fff; background-color: #428bca; } @@ -65,8 +76,8 @@ body { } @media (min-width: 768px) { .main { - padding-left: 40px; padding-right: 40px; + padding-left: 40px; } } .main .page-header { @@ -89,5 +100,6 @@ body { margin-bottom: 20px; } .placeholder img { + display: inline-block; border-radius: 50%; } diff --git a/docs/examples/grid/grid.css b/docs/examples/grid/grid.css index 963b128e3..a7a106d06 100644 --- a/docs/examples/grid/grid.css +++ b/docs/examples/grid/grid.css @@ -1,6 +1,6 @@ .container { - padding-left: 15px; padding-right: 15px; + padding-left: 15px; } h4 { @@ -17,12 +17,12 @@ h4 { padding-top: 15px; padding-bottom: 15px; background-color: #eee; - border: 1px solid #ddd; background-color: rgba(86,61,124,.15); + border: 1px solid #ddd; border: 1px solid rgba(86,61,124,.2); } hr { margin-top: 40px; margin-bottom: 40px; -}
\ No newline at end of file +} diff --git a/docs/examples/jumbotron-narrow/jumbotron-narrow.css b/docs/examples/jumbotron-narrow/jumbotron-narrow.css index ae7a83f32..fb7c49ab1 100644 --- a/docs/examples/jumbotron-narrow/jumbotron-narrow.css +++ b/docs/examples/jumbotron-narrow/jumbotron-narrow.css @@ -8,8 +8,8 @@ body { .header, .marketing, .footer { - padding-left: 15px; padding-right: 15px; + padding-left: 15px; } /* Custom page header */ @@ -18,10 +18,10 @@ body { } /* Make the masthead heading the same height as the navigation */ .header h3 { + padding-bottom: 19px; margin-top: 0; margin-bottom: 0; line-height: 40px; - padding-bottom: 19px; } /* Custom page footer */ @@ -47,8 +47,8 @@ body { border-bottom: 1px solid #e5e5e5; } .jumbotron .btn { - font-size: 21px; padding: 14px 24px; + font-size: 21px; } /* Supporting marketing content */ @@ -65,8 +65,8 @@ body { .header, .marketing, .footer { - padding-left: 0; padding-right: 0; + padding-left: 0; } /* Space out the masthead */ .header { diff --git a/docs/examples/justified-nav/index.html b/docs/examples/justified-nav/index.html index b89714ba2..ac20c7dd4 100644 --- a/docs/examples/justified-nav/index.html +++ b/docs/examples/justified-nav/index.html @@ -53,7 +53,7 @@ <div class="row"> <div class="col-lg-4"> <h2>Safari bug warning!</h2> - <p class="text-danger">Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p> + <p class="text-danger">As of v7.0.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary" href="#" role="button">View details »</a></p> </div> diff --git a/docs/examples/justified-nav/justified-nav.css b/docs/examples/justified-nav/justified-nav.css index baf0e1130..50125876f 100644 --- a/docs/examples/justified-nav/justified-nav.css +++ b/docs/examples/justified-nav/justified-nav.css @@ -3,10 +3,10 @@ body { } .footer { - border-top: 1px solid #eee; - margin-top: 40px; padding-top: 40px; padding-bottom: 40px; + margin-top: 40px; + border-top: 1px solid #eee; } /* Main marketing message and sign up button */ @@ -15,33 +15,33 @@ body { background-color: transparent; } .jumbotron .btn { - font-size: 21px; padding: 14px 24px; + font-size: 21px; } /* Customize the nav-justified links to be fill the entire space of the .navbar */ .nav-justified { background-color: #eee; - border-radius: 5px; border: 1px solid #ccc; + border-radius: 5px; } .nav-justified > li > a { - margin-bottom: 0; padding-top: 15px; padding-bottom: 15px; - color: #777; + margin-bottom: 0; font-weight: bold; + color: #777; text-align: center; - border-bottom: 1px solid #d5d5d5; background-color: #e5e5e5; /* Old browsers */ - background-repeat: repeat-x; /* Repeat the gradient */ - background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */ + background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */ - background-image: -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */ + background-image: -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */ + background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ - background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */ + background-repeat: repeat-x; /* Repeat the gradient */ + border-bottom: 1px solid #d5d5d5; } .nav-justified > .active > a, .nav-justified > .active > a:hover, @@ -63,16 +63,16 @@ body { max-height: 52px; } .nav-justified > li > a { - border-left: 1px solid #fff; border-right: 1px solid #d5d5d5; + border-left: 1px solid #fff; } .nav-justified > li:first-child > a { border-left: 0; border-radius: 5px 0 0 5px; } .nav-justified > li:last-child > a { - border-radius: 0 5px 5px 0; border-right: 0; + border-radius: 0 5px 5px 0; } } @@ -82,7 +82,7 @@ body { .masthead, .marketing, .footer { - padding-left: 0; padding-right: 0; + padding-left: 0; } } diff --git a/docs/examples/navbar-static-top/navbar-static-top.css b/docs/examples/navbar-static-top/navbar-static-top.css index 59a37e75a..b48cc1442 100644 --- a/docs/examples/navbar-static-top/navbar-static-top.css +++ b/docs/examples/navbar-static-top/navbar-static-top.css @@ -4,4 +4,4 @@ body { .navbar-static-top { margin-bottom: 19px; -}
\ No newline at end of file +} diff --git a/docs/examples/non-responsive/non-responsive.css b/docs/examples/non-responsive/non-responsive.css index 9813bb9fe..c36e82e38 100644 --- a/docs/examples/non-responsive/non-responsive.css +++ b/docs/examples/non-responsive/non-responsive.css @@ -6,9 +6,14 @@ /* Account for fixed navbar */ body { + min-width: 970px; padding-top: 70px; padding-bottom: 30px; - min-width: 970px; +} + +/* Don't let the lead text change font-size. */ +.lead { + font-size: 16px; } /* Finesse the page header spacing */ @@ -28,8 +33,8 @@ body { /* Reset the container */ .container { - max-width: none !important; width: 970px; + max-width: none !important; } /* Demonstrate the grids */ @@ -37,8 +42,8 @@ body { padding-top: 15px; padding-bottom: 15px; background-color: #eee; - border: 1px solid #ddd; background-color: rgba(86,61,124,.15); + border: 1px solid #ddd; border: 1px solid rgba(86,61,124,.2); } @@ -94,12 +99,12 @@ body { position: absolute; float: left; background-color: #fff; - border: 1px solid #cccccc; - border: 1px solid rgba(0, 0, 0, 0.15); + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, .15); border-width: 0 1px 1px; border-radius: 0 0 4px 4px; - -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); + box-shadow: 0 6px 12px rgba(0, 0, 0, .175); } .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #333; diff --git a/docs/examples/offcanvas/offcanvas.css b/docs/examples/offcanvas/offcanvas.css index ef632dc00..eeace1601 100644 --- a/docs/examples/offcanvas/offcanvas.css +++ b/docs/examples/offcanvas/offcanvas.css @@ -20,9 +20,17 @@ footer { @media screen and (max-width: 767px) { .row-offcanvas { position: relative; - -webkit-transition: all 0.25s ease-out; - -moz-transition: all 0.25s ease-out; - transition: all 0.25s ease-out; + -webkit-transition: all .25s ease-out; + -moz-transition: all .25s ease-out; + transition: all .25s ease-out; + } + + .row-offcanvas-right { + right: 0; + } + + .row-offcanvas-left { + left: 0; } .row-offcanvas-right diff --git a/docs/examples/offcanvas/offcanvas.js b/docs/examples/offcanvas/offcanvas.js index 12f2dff51..ade5751fd 100644 --- a/docs/examples/offcanvas/offcanvas.js +++ b/docs/examples/offcanvas/offcanvas.js @@ -1,5 +1,5 @@ -$(document).ready(function() { - $('[data-toggle=offcanvas]').click(function() { - $('.row-offcanvas').toggleClass('active'); +$(document).ready(function () { + $('[data-toggle=offcanvas]').click(function () { + $('.row-offcanvas').toggleClass('active') }); });
\ No newline at end of file diff --git a/docs/examples/rtl/index.html b/docs/examples/rtl/index.html new file mode 100644 index 000000000..996c515e4 --- /dev/null +++ b/docs/examples/rtl/index.html @@ -0,0 +1,382 @@ +<!DOCTYPE html> +<html lang="ar" dir="rtl"> + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="description" content=""> + <meta name="author" content=""> + <link rel="shortcut icon" href="../../assets/ico/favicon.ico"> + + <title>RTL Template for Bootstrap</title> + + <!-- Bootstrap RTL CSS --> + <link href="../../dist/css/bootstrap.rtl.min.css" rel="stylesheet"> + + <!-- Custom styles for this template --> + <link href="rtl.css" rel="stylesheet"> + + <!-- Just for debugging purposes. Don't actually copy this line! --> + <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> + + <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> + <!--[if lt IE 9]> + <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> + <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> + <![endif]--> + </head> + + <body role="document"> + + <!-- Fixed navbar --> + <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> + <div class="container"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="#">Bootstrap RTL</a> + </div> + <div class="navbar-collapse collapse"> + <ul class="nav navbar-nav"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#about">About</a></li> + <li><a href="#contact">Contact</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li class="dropdown-header">Nav header</li> + <li><a href="#">Separated link</a></li> + <li><a href="#">One more separated link</a></li> + </ul> + </li> + </ul> + </div><!--/.nav-collapse --> + </div> + </div> + + <div class="container theme-showcase" role="main"> + + <!-- Main jumbotron for a primary marketing message or call to action --> + <div class="jumbotron"> + <h1>RTL Bootstrap</h1> + <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> + <p><a href="#" class="btn btn-primary btn-lg" role="button">Learn more »</a></p> + </div> + + + + <div class="page-header"> + <h1>Buttons</h1> + </div> + <p> + <button type="button" class="btn btn-lg btn-default">Default</button> + <button type="button" class="btn btn-lg btn-primary">Primary</button> + <button type="button" class="btn btn-lg btn-success">Success</button> + <button type="button" class="btn btn-lg btn-info">Info</button> + <button type="button" class="btn btn-lg btn-warning">Warning</button> + <button type="button" class="btn btn-lg btn-danger">Danger</button> + <button type="button" class="btn btn-lg btn-link">Link</button> + </p> + <p> + <button type="button" class="btn btn-default">Default</button> + <button type="button" class="btn btn-primary">Primary</button> + <button type="button" class="btn btn-success">Success</button> + <button type="button" class="btn btn-info">Info</button> + <button type="button" class="btn btn-warning">Warning</button> + <button type="button" class="btn btn-danger">Danger</button> + <button type="button" class="btn btn-link">Link</button> + </p> + <p> + <button type="button" class="btn btn-sm btn-default">Default</button> + <button type="button" class="btn btn-sm btn-primary">Primary</button> + <button type="button" class="btn btn-sm btn-success">Success</button> + <button type="button" class="btn btn-sm btn-info">Info</button> + <button type="button" class="btn btn-sm btn-warning">Warning</button> + <button type="button" class="btn btn-sm btn-danger">Danger</button> + <button type="button" class="btn btn-sm btn-link">Link</button> + </p> + <p> + <button type="button" class="btn btn-xs btn-default">Default</button> + <button type="button" class="btn btn-xs btn-primary">Primary</button> + <button type="button" class="btn btn-xs btn-success">Success</button> + <button type="button" class="btn btn-xs btn-info">Info</button> + <button type="button" class="btn btn-xs btn-warning">Warning</button> + <button type="button" class="btn btn-xs btn-danger">Danger</button> + <button type="button" class="btn btn-xs btn-link">Link</button> + </p> + + + + <div class="page-header"> + <h1>Thumbnails</h1> + </div> + <img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera"> + + + + <div class="page-header"> + <h1>Dropdown menus</h1> + </div> + <div class="dropdown theme-dropdown clearfix"> + <a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> + <li class="active" role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> + <li role="presentation" class="divider"></li> + <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> + </ul> + </div> + + + + + <div class="page-header"> + <h1>Navbars</h1> + </div> + + <div class="navbar navbar-default"> + <div class="container"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="#">Project name</a> + </div> + <div class="navbar-collapse collapse"> + <ul class="nav navbar-nav"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#about">About</a></li> + <li><a href="#contact">Contact</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li class="dropdown-header">Nav header</li> + <li><a href="#">Separated link</a></li> + <li><a href="#">One more separated link</a></li> + </ul> + </li> + </ul> + </div><!--/.nav-collapse --> + </div> + </div> + + <div class="navbar navbar-inverse"> + <div class="container"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="#">Project name</a> + </div> + <div class="navbar-collapse collapse"> + <ul class="nav navbar-nav"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#about">About</a></li> + <li><a href="#contact">Contact</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li class="dropdown-header">Nav header</li> + <li><a href="#">Separated link</a></li> + <li><a href="#">One more separated link</a></li> + </ul> + </li> + </ul> + </div><!--/.nav-collapse --> + </div> + </div> + + + + <div class="page-header"> + <h1>Alerts</h1> + </div> + <div class="alert alert-success"> + <strong>Well done!</strong> You successfully read this important alert message. + </div> + <div class="alert alert-info"> + <strong>Heads up!</strong> This alert needs your attention, but it's not super important. + </div> + <div class="alert alert-warning"> + <strong>Warning!</strong> Best check yo self, you're not looking too good. + </div> + <div class="alert alert-danger"> + <strong>Oh snap!</strong> Change a few things up and try submitting again. + </div> + + + + <div class="page-header"> + <h1>Progress bars</h1> + </div> + <div class="progress"> + <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div> + </div> + <div class="progress"> + <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span></div> + </div> + <div class="progress"> + <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></div> + </div> + <div class="progress"> + <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span></div> + </div> + <div class="progress"> + <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">80% Complete (danger)</span></div> + </div> + <div class="progress"> + <div class="progress-bar progress-bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div> + <div class="progress-bar progress-bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div> + <div class="progress-bar progress-bar-danger" style="width: 10%"><span class='sr-only'>10% Complete (danger)</span></div> + </div> + + + + <div class="page-header"> + <h1>List groups</h1> + </div> + <div class="row"> + <div class="col-sm-4"> + <ul class="list-group"> + <li class="list-group-item">Cras justo odio</li> + <li class="list-group-item">Dapibus ac facilisis in</li> + <li class="list-group-item">Morbi leo risus</li> + <li class="list-group-item">Porta ac consectetur ac</li> + <li class="list-group-item">Vestibulum at eros</li> + </ul> + </div><!-- /.col-sm-4 --> + <div class="col-sm-4"> + <div class="list-group"> + <a href="#" class="list-group-item active"> + Cras justo odio + </a> + <a href="#" class="list-group-item">Dapibus ac facilisis in</a> + <a href="#" class="list-group-item">Morbi leo risus</a> + <a href="#" class="list-group-item">Porta ac consectetur ac</a> + <a href="#" class="list-group-item">Vestibulum at eros</a> + </div> + </div><!-- /.col-sm-4 --> + <div class="col-sm-4"> + <div class="list-group"> + <a href="#" class="list-group-item active"> + <h4 class="list-group-item-heading">List group item heading</h4> + <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> + </a> + <a href="#" class="list-group-item"> + <h4 class="list-group-item-heading">List group item heading</h4> + <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> + </a> + <a href="#" class="list-group-item"> + <h4 class="list-group-item-heading">List group item heading</h4> + <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> + </a> + </div> + </div><!-- /.col-sm-4 --> + </div> + + + + <div class="page-header"> + <h1>Panels</h1> + </div> + <div class="row"> + <div class="col-sm-4"> + <div class="panel panel-default"> + <div class="panel-heading"> + <h3 class="panel-title">Panel title</h3> + </div> + <div class="panel-body"> + Panel content + </div> + </div> + <div class="panel panel-primary"> + <div class="panel-heading"> + <h3 class="panel-title">Panel title</h3> + </div> + <div class="panel-body"> + Panel content + </div> + </div> + </div><!-- /.col-sm-4 --> + <div class="col-sm-4"> + <div class="panel panel-success"> + <div class="panel-heading"> + <h3 class="panel-title">Panel title</h3> + </div> + <div class="panel-body"> + Panel content + </div> + </div> + <div class="panel panel-info"> + <div class="panel-heading"> + <h3 class="panel-title">Panel title</h3> + </div> + <div class="panel-body"> + Panel content + </div> + </div> + </div><!-- /.col-sm-4 --> + <div class="col-sm-4"> + <div class="panel panel-warning"> + <div class="panel-heading"> + <h3 class="panel-title">Panel title</h3> + </div> + <div class="panel-body"> + Panel content + </div> + </div> + <div class="panel panel-danger"> + <div class="panel-heading"> + <h3 class="panel-title">Panel title</h3> + </div> + <div class="panel-body"> + Panel content + </div> + </div> + </div><!-- /.col-sm-4 --> + </div> + + + + <div class="page-header"> + <h1>Wells</h1> + </div> + <div class="well"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p> + </div> + + + </div> <!-- /container --> + + + <!-- Bootstrap core JavaScript + ================================================== --> + <!-- Placed at the end of the document so the pages load faster --> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> + <script src="../../dist/js/bootstrap.min.js"></script> + <script src="../../assets/js/docs.min.js"></script> + </body> +</html> diff --git a/docs/examples/rtl/rtl.css b/docs/examples/rtl/rtl.css new file mode 100644 index 000000000..181f99842 --- /dev/null +++ b/docs/examples/rtl/rtl.css @@ -0,0 +1,14 @@ +body { + padding-top: 70px; + padding-bottom: 30px; +} + +.theme-dropdown .dropdown-menu { + position: static; + display: block; + margin-bottom: 20px; +} + +.theme-showcase > p > .btn { + margin: 5px 0; +} diff --git a/docs/examples/screenshots/carousel.jpg b/docs/examples/screenshots/carousel.jpg Binary files differindex a63a1ba9d..500863682 100644 --- a/docs/examples/screenshots/carousel.jpg +++ b/docs/examples/screenshots/carousel.jpg diff --git a/docs/examples/screenshots/grid.jpg b/docs/examples/screenshots/grid.jpg Binary files differindex 2407cf293..ef624e866 100644 --- a/docs/examples/screenshots/grid.jpg +++ b/docs/examples/screenshots/grid.jpg diff --git a/docs/examples/screenshots/jumbotron-narrow.jpg b/docs/examples/screenshots/jumbotron-narrow.jpg Binary files differindex 915d10f4c..3af127c0f 100644 --- a/docs/examples/screenshots/jumbotron-narrow.jpg +++ b/docs/examples/screenshots/jumbotron-narrow.jpg diff --git a/docs/examples/screenshots/justified-nav.jpg b/docs/examples/screenshots/justified-nav.jpg Binary files differindex 5f57923e6..098bf6fb6 100644 --- a/docs/examples/screenshots/justified-nav.jpg +++ b/docs/examples/screenshots/justified-nav.jpg diff --git a/docs/examples/screenshots/navbar-fixed.jpg b/docs/examples/screenshots/navbar-fixed.jpg Binary files differindex 16a03b0bc..419bb7e50 100644 --- a/docs/examples/screenshots/navbar-fixed.jpg +++ b/docs/examples/screenshots/navbar-fixed.jpg diff --git a/docs/examples/screenshots/navbar-static.jpg b/docs/examples/screenshots/navbar-static.jpg Binary files differindex 8fe3529fb..1cd8b37c6 100644 --- a/docs/examples/screenshots/navbar-static.jpg +++ b/docs/examples/screenshots/navbar-static.jpg diff --git a/docs/examples/screenshots/navbar.jpg b/docs/examples/screenshots/navbar.jpg Binary files differindex 3120c507a..b58877c08 100644 --- a/docs/examples/screenshots/navbar.jpg +++ b/docs/examples/screenshots/navbar.jpg diff --git a/docs/examples/screenshots/non-responsive.jpg b/docs/examples/screenshots/non-responsive.jpg Binary files differindex 0b8953ce1..4262d5dd0 100644 --- a/docs/examples/screenshots/non-responsive.jpg +++ b/docs/examples/screenshots/non-responsive.jpg diff --git a/docs/examples/screenshots/starter-template.jpg b/docs/examples/screenshots/starter-template.jpg Binary files differindex 2545aa32f..aaba1b88d 100644 --- a/docs/examples/screenshots/starter-template.jpg +++ b/docs/examples/screenshots/starter-template.jpg diff --git a/docs/examples/screenshots/sticky-footer-navbar.jpg b/docs/examples/screenshots/sticky-footer-navbar.jpg Binary files differindex 6226bf4ac..05b7d8d21 100644 --- a/docs/examples/screenshots/sticky-footer-navbar.jpg +++ b/docs/examples/screenshots/sticky-footer-navbar.jpg diff --git a/docs/examples/signin/signin.css b/docs/examples/signin/signin.css index 7f58f86c5..995df48e9 100644 --- a/docs/examples/signin/signin.css +++ b/docs/examples/signin/signin.css @@ -18,20 +18,20 @@ body { } .form-signin .form-control { position: relative; - font-size: 16px; height: auto; - padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; + padding: 10px; + font-size: 16px; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="email"] { margin-bottom: -1px; - border-bottom-left-radius: 0; border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } .form-signin input[type="password"] { margin-bottom: 10px; diff --git a/docs/examples/sticky-footer-navbar/index.html b/docs/examples/sticky-footer-navbar/index.html index 8e449ddba..9c7566ed6 100644 --- a/docs/examples/sticky-footer-navbar/index.html +++ b/docs/examples/sticky-footer-navbar/index.html @@ -28,54 +28,50 @@ <body> - <!-- Wrap all page content here --> - <div id="wrap"> - - <!-- Fixed navbar --> - <div class="navbar navbar-default navbar-fixed-top" role="navigation"> - <div class="container"> - <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - <a class="navbar-brand" href="#">Project name</a> - </div> - <div class="collapse navbar-collapse"> - <ul class="nav navbar-nav"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#about">About</a></li> - <li><a href="#contact">Contact</a></li> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> - <ul class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> - <li class="divider"></li> - <li class="dropdown-header">Nav header</li> - <li><a href="#">Separated link</a></li> - <li><a href="#">One more separated link</a></li> - </ul> - </li> - </ul> - </div><!--/.nav-collapse --> + <!-- Fixed navbar --> + <div class="navbar navbar-default navbar-fixed-top" role="navigation"> + <div class="container"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="#">Project name</a> </div> + <div class="collapse navbar-collapse"> + <ul class="nav navbar-nav"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#about">About</a></li> + <li><a href="#contact">Contact</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li class="dropdown-header">Nav header</li> + <li><a href="#">Separated link</a></li> + <li><a href="#">One more separated link</a></li> + </ul> + </li> + </ul> + </div><!--/.nav-collapse --> </div> + </div> - <!-- Begin page content --> - <div class="container"> - <div class="page-header"> - <h1>Sticky footer with fixed navbar</h1> - </div> - <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p> - <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p> + <!-- Begin page content --> + <div class="container"> + <div class="page-header"> + <h1>Sticky footer with fixed navbar</h1> </div> + <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p> + <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p> </div> - <div id="footer"> + <div class="footer"> <div class="container"> <p class="text-muted">Place sticky footer content here.</p> </div> diff --git a/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css b/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css index 7ca093add..ee8038063 100644 --- a/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css +++ b/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css @@ -1,24 +1,18 @@ /* Sticky footer styles -------------------------------------------------- */ - -html, -body { - height: 100%; - /* The html and body elements cannot have any padding or margin. */ -} - -/* Wrapper for page content to push down footer */ -#wrap { +html { + position: relative; min-height: 100%; - height: auto; - /* Negative indent footer by its height */ - margin: 0 auto -60px; - /* Pad bottom by footer height */ - padding: 0 0 60px; } - -/* Set the fixed height of the footer here */ -#footer { +body { + /* Margin bottom by footer height */ + margin-bottom: 60px; +} +.footer { + position: absolute; + bottom: 0; + width: 100%; + /* Set the fixed height of the footer here */ height: 60px; background-color: #f5f5f5; } @@ -28,16 +22,16 @@ body { -------------------------------------------------- */ /* Not required for template or sticky footer method. */ -#wrap > .container { +body > .container { padding: 60px 15px 0; } .container .text-muted { margin: 20px 0; } -#footer > .container { - padding-left: 15px; +.footer > .container { padding-right: 15px; + padding-left: 15px; } code { diff --git a/docs/examples/sticky-footer/index.html b/docs/examples/sticky-footer/index.html index 6a58e10d5..5788cd5c9 100644 --- a/docs/examples/sticky-footer/index.html +++ b/docs/examples/sticky-footer/index.html @@ -28,20 +28,16 @@ <body> - <!-- Wrap all page content here --> - <div id="wrap"> - - <!-- Begin page content --> - <div class="container"> - <div class="page-header"> - <h1>Sticky footer</h1> - </div> - <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> - <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p> + <!-- Begin page content --> + <div class="container"> + <div class="page-header"> + <h1>Sticky footer</h1> </div> + <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> + <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p> </div> - <div id="footer"> + <div class="footer"> <div class="container"> <p class="text-muted">Place sticky footer content here.</p> </div> diff --git a/docs/examples/sticky-footer/sticky-footer.css b/docs/examples/sticky-footer/sticky-footer.css index 54ed9e876..b6699e80e 100644 --- a/docs/examples/sticky-footer/sticky-footer.css +++ b/docs/examples/sticky-footer/sticky-footer.css @@ -1,24 +1,18 @@ /* Sticky footer styles -------------------------------------------------- */ - -html, -body { - height: 100%; - /* The html and body elements cannot have any padding or margin. */ -} - -/* Wrapper for page content to push down footer */ -#wrap { +html { + position: relative; min-height: 100%; - height: auto; - /* Negative indent footer by its height */ - margin: 0 auto -60px; - /* Pad bottom by footer height */ - padding: 0 0 60px; } - -/* Set the fixed height of the footer here */ -#footer { +body { + /* Margin bottom by footer height */ + margin-bottom: 60px; +} +.footer { + position: absolute; + bottom: 0; + width: 100%; + /* Set the fixed height of the footer here */ height: 60px; background-color: #f5f5f5; } diff --git a/docs/examples/theme/theme.css b/docs/examples/theme/theme.css index e7559231e..181f99842 100644 --- a/docs/examples/theme/theme.css +++ b/docs/examples/theme/theme.css @@ -4,11 +4,11 @@ body { } .theme-dropdown .dropdown-menu { - display: block; position: static; + display: block; margin-bottom: 20px; } .theme-showcase > p > .btn { margin: 5px 0; -}
\ No newline at end of file +} |
