diff options
| author | Mark Otto <[email protected]> | 2014-07-07 22:10:22 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-07-07 22:10:22 -0700 |
| commit | 81b59d35368bc51d361d0352cc92fe99dc580fbf (patch) | |
| tree | 2395d5e79edaaa8c0a7ad82e99931ec895421532 /docs/examples/theme | |
| parent | fed2b0f7eb78438eb1b768782b04651881d88740 (diff) | |
| parent | ddee04038f946ac103eb4e70c8eb7adeb2cf563b (diff) | |
| download | bootstrap-81b59d35368bc51d361d0352cc92fe99dc580fbf.tar.xz bootstrap-81b59d35368bc51d361d0352cc92fe99dc580fbf.zip | |
Merge branch 'master' into derp
Conflicts:
docs/_layouts/default.html
docs/assets/css/docs.min.css
docs/assets/css/src/docs.css
docs/assets/js/docs.min.js
docs/assets/js/src/application.js
Diffstat (limited to 'docs/examples/theme')
| -rw-r--r-- | docs/examples/theme/index.html | 301 | ||||
| -rw-r--r-- | docs/examples/theme/theme.css | 4 |
2 files changed, 290 insertions, 15 deletions
diff --git a/docs/examples/theme/index.html b/docs/examples/theme/index.html index 2d49cc764..2412b2206 100644 --- a/docs/examples/theme/index.html +++ b/docs/examples/theme/index.html @@ -6,7 +6,7 @@ <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"> + <link rel="icon" href="../../favicon.ico"> <title>Theme Template for Bootstrap</title> @@ -18,13 +18,17 @@ <!-- Custom styles for this template --> <link href="theme.css" rel="stylesheet"> - <!-- Just for debugging purposes. Don't actually copy this line! --> + <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> + <script src="../../assets/js/ie-emulation-modes-warning.js"></script> + + <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> + <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> <!-- 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> + <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> + <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> @@ -34,7 +38,7 @@ <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"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -48,8 +52,8 @@ <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"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -118,6 +122,148 @@ <div class="page-header"> + <h1>Tables</h1> + </div> + <div class="row"> + <div class="col-md-6"> + <table class="table"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Username</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <td>2</td> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <td>3</td> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> + </table> + </div> + <div class="col-md-6"> + <table class="table table-striped"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Username</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <td>2</td> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <td>3</td> + <td>Larry</td> + <td>the Bird</td> + <td>@twitter</td> + </tr> + </tbody> + </table> + </div> + </div> + + <div class="row"> + <div class="col-md-6"> + <table class="table table-bordered"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Username</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="2">1</td> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <td>Mark</td> + <td>Otto</td> + <td>@TwBootstrap</td> + </tr> + <tr> + <td>2</td> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <td>3</td> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> + </table> + </div> + <div class="col-md-6"> + <table class="table table-condensed"> + <thead> + <tr> + <th>#</th> + <th>First Name</th> + <th>Last Name</th> + <th>Username</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>Mark</td> + <td>Otto</td> + <td>@mdo</td> + </tr> + <tr> + <td>2</td> + <td>Jacob</td> + <td>Thornton</td> + <td>@fat</td> + </tr> + <tr> + <td>3</td> + <td colspan="2">Larry the Bird</td> + <td>@twitter</td> + </tr> + </tbody> + </table> + </div> + </div> + + + + <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"> @@ -125,10 +271,85 @@ <div class="page-header"> + <h1>Labels</h1> + </div> + <h1> + <span class="label label-default">Default</span> + <span class="label label-primary">Primary</span> + <span class="label label-success">Success</span> + <span class="label label-info">Info</span> + <span class="label label-warning">Warning</span> + <span class="label label-danger">Danger</span> + </h1> + <h2> + <span class="label label-default">Default</span> + <span class="label label-primary">Primary</span> + <span class="label label-success">Success</span> + <span class="label label-info">Info</span> + <span class="label label-warning">Warning</span> + <span class="label label-danger">Danger</span> + </h2> + <h3> + <span class="label label-default">Default</span> + <span class="label label-primary">Primary</span> + <span class="label label-success">Success</span> + <span class="label label-info">Info</span> + <span class="label label-warning">Warning</span> + <span class="label label-danger">Danger</span> + </h3> + <h4> + <span class="label label-default">Default</span> + <span class="label label-primary">Primary</span> + <span class="label label-success">Success</span> + <span class="label label-info">Info</span> + <span class="label label-warning">Warning</span> + <span class="label label-danger">Danger</span> + </h4> + <h5> + <span class="label label-default">Default</span> + <span class="label label-primary">Primary</span> + <span class="label label-success">Success</span> + <span class="label label-info">Info</span> + <span class="label label-warning">Warning</span> + <span class="label label-danger">Danger</span> + </h5> + <h6> + <span class="label label-default">Default</span> + <span class="label label-primary">Primary</span> + <span class="label label-success">Success</span> + <span class="label label-info">Info</span> + <span class="label label-warning">Warning</span> + <span class="label label-danger">Danger</span> + </h6> + <p> + <span class="label label-default">Default</span> + <span class="label label-primary">Primary</span> + <span class="label label-success">Success</span> + <span class="label label-info">Info</span> + <span class="label label-warning">Warning</span> + <span class="label label-danger">Danger</span> + </p> + + + + <div class="page-header"> + <h1>Badges</h1> + </div> + <p> + <a href="#">Inbox <span class="badge">42</span></a> + </p> + <ul class="nav nav-pills" role="tablist"> + <li class="active"><a href="#">Home <span class="badge">42</span></a></li> + <li><a href="#">Profile</a></li> + <li><a href="#">Messages <span class="badge">3</span></a></li> + </ul> + + + <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> + <a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></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> @@ -140,6 +361,21 @@ + <div class="page-header"> + <h1>Navs</h1> + </div> + <ul class="nav nav-tabs" role="tablist"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li><a href="#">Messages</a></li> + </ul> + <ul class="nav nav-pills" role="tablist"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Profile</a></li> + <li><a href="#">Messages</a></li> + </ul> + + <div class="page-header"> <h1>Navbars</h1> @@ -148,7 +384,7 @@ <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"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -162,8 +398,8 @@ <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"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -181,7 +417,7 @@ <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"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> @@ -195,8 +431,8 @@ <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"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> @@ -250,6 +486,9 @@ <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-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">100% Complete</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> @@ -371,13 +610,45 @@ </div> + + <div class="page-header"> + <h1>Carousel</h1> + </div> + <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> + <ol class="carousel-indicators"> + <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> + <li data-target="#carousel-example-generic" data-slide-to="1"></li> + <li data-target="#carousel-example-generic" data-slide-to="2"></li> + </ol> + <div class="carousel-inner" role="listbox"> + <div class="item active"> + <img data-src="holder.js/1140x500/auto/#777:#555/text:First slide" alt="First slide"> + </div> + <div class="item"> + <img data-src="holder.js/1140x500/auto/#666:#444/text:Second slide" alt="Second slide"> + </div> + <div class="item"> + <img data-src="holder.js/1140x500/auto/#555:#333/text:Third slide" alt="Third slide"> + </div> + </div> + <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> + <span class="glyphicon glyphicon-chevron-left"></span> + <span class="sr-only">Previous</span> + </a> + <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> + <span class="glyphicon glyphicon-chevron-right"></span> + <span class="sr-only">Next</span> + </a> + </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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script> <script src="../../assets/js/docs.min.js"></script> </body> diff --git a/docs/examples/theme/theme.css b/docs/examples/theme/theme.css index 181f99842..b7c8d4cd2 100644 --- a/docs/examples/theme/theme.css +++ b/docs/examples/theme/theme.css @@ -12,3 +12,7 @@ body { .theme-showcase > p > .btn { margin: 5px 0; } + +.theme-showcase .navbar .container { + width: auto; +} |
