aboutsummaryrefslogtreecommitdiff
path: root/docs/examples/theme/index.html
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2014-07-07 22:10:22 -0700
committerMark Otto <[email protected]>2014-07-07 22:10:22 -0700
commit81b59d35368bc51d361d0352cc92fe99dc580fbf (patch)
tree2395d5e79edaaa8c0a7ad82e99931ec895421532 /docs/examples/theme/index.html
parentfed2b0f7eb78438eb1b768782b04651881d88740 (diff)
parentddee04038f946ac103eb4e70c8eb7adeb2cf563b (diff)
downloadbootstrap-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/index.html')
-rw-r--r--docs/examples/theme/index.html301
1 files changed, 286 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>