Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 7.21 KB
Newer Older
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
1
2
3
4 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
Patrick H. Lauke's avatar
Add shrink-to-fit viewport directive    
Patrick H. Lauke committed
5 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
6
7 
    <meta name="description" content="">
    <meta name="author" content="">
XhmikosR's avatar
Move apple-touch-icon-precomposed.png and favicon.ico in docs root.    
XhmikosR committed
8 
    <link rel="icon" href="../../favicon.ico">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
9
Nicole's avatar
change file names to example names    
Nicole committed
10 
    <title>Off Canvas Template for Bootstrap</title>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
11
12 

    <!-- Bootstrap core CSS -->
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
13 
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
14
15 

    <!-- Custom styles for this template -->
Nicole's avatar
add git ignore    
Nicole committed
16 
    <link href="offcanvas.css" rel="stylesheet">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
17
18
19 
  </head>

  <body>
Mark Otto's avatar
update navbars in jumbotron, offcanvas, starter examples to flex versions    
Mark Otto committed
20
Mark Otto's avatar
rename from .navbar-toggleable to .navbar-expand to reflect mobile first approach everywhere else    
Mark Otto committed
21 
    <nav class="navbar navbar-expand-md fixed-top navbar-inverse bg-inverse">
Mark Otto's avatar
more docs updates    
Mark Otto committed
22
23 
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
Mark Otto's avatar
update navbars in jumbotron, offcanvas, starter examples to flex versions    
Mark Otto committed
24
25
26
27 
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
Mark Otto's avatar
update all examples    
Mark Otto committed
28 
        <ul class="navbar-nav mr-auto">
Mark Otto's avatar
update navbars in jumbotron, offcanvas, starter examples to flex versions    
Mark Otto committed
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45 
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
Kevin Kirsche's avatar
Fix Navbar at top of v4 Offcanvas example    
Kevin Kirsche committed
46 
        </ul>
Mark Otto's avatar
update navbars in jumbotron, offcanvas, starter examples to flex versions    
Mark Otto committed
47 
        <form class="form-inline my-2 my-lg-0">
Patrick H. Lauke's avatar
Add explicit aria-label to placeholder-only inputs    
Patrick H. Lauke committed
48 
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
Mark Otto's avatar
update navbars in jumbotron, offcanvas, starter examples to flex versions    
Mark Otto committed
49
50
51
52 
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
53
54
55
56 

    <div class="container">

      <div class="row row-offcanvas row-offcanvas-right">
Mark Otto's avatar
fixes alignment and nav list in offcanvas example    
Mark Otto committed
57
Mark Otto's avatar
pull in changes from #19832 to fix offcanvas    
Mark Otto committed
58 
        <div class="col-12 col-md-9">
Mark Otto's avatar
update instances of old classes in the docs    
Mark Otto committed
59 
          <p class="float-right d-md-none">
vsn4ik's avatar
Remove dropped btn-xs and btn-group-xs from docs    
vsn4ik committed
60 
            <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
61
62
63
64
65
66 
          </p>
          <div class="jumbotron">
            <h1>Hello, world!</h1>
            <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
          </div>
          <div class="row">
Eric Nolte's avatar
Update docs to reflect new breakpoint naming convention    
Eric Nolte committed
67 
            <div class="col-6 col-lg-4">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
68
69 
              <h2>Heading</h2>
              <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>
Mark Otto's avatar
.btn-default to .btn-secondary    
Mark Otto committed
70 
              <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
71 
            </div><!--/span-->
Eric Nolte's avatar
Update docs to reflect new breakpoint naming convention    
Eric Nolte committed
72 
            <div class="col-6 col-lg-4">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
73
74 
              <h2>Heading</h2>
              <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>
Mark Otto's avatar
.btn-default to .btn-secondary    
Mark Otto committed
75 
              <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
76 
            </div><!--/span-->
Eric Nolte's avatar
Update docs to reflect new breakpoint naming convention    
Eric Nolte committed
77 
            <div class="col-6 col-lg-4">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
78
79 
              <h2>Heading</h2>
              <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>
Mark Otto's avatar
.btn-default to .btn-secondary    
Mark Otto committed
80 
              <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
81 
            </div><!--/span-->
Eric Nolte's avatar
Update docs to reflect new breakpoint naming convention    
Eric Nolte committed
82 
            <div class="col-6 col-lg-4">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
83
84 
              <h2>Heading</h2>
              <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>
Mark Otto's avatar
.btn-default to .btn-secondary    
Mark Otto committed
85 
              <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
86 
            </div><!--/span-->
Eric Nolte's avatar
Update docs to reflect new breakpoint naming convention    
Eric Nolte committed
87 
            <div class="col-6 col-lg-4">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
88
89 
              <h2>Heading</h2>
              <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>
Mark Otto's avatar
.btn-default to .btn-secondary    
Mark Otto committed
90 
              <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
91 
            </div><!--/span-->
Eric Nolte's avatar
Update docs to reflect new breakpoint naming convention    
Eric Nolte committed
92 
            <div class="col-6 col-lg-4">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
93
94 
              <h2>Heading</h2>
              <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>
Mark Otto's avatar
.btn-default to .btn-secondary    
Mark Otto committed
95 
              <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
96
97
98 
            </div><!--/span-->
          </div><!--/row-->
        </div><!--/span-->
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
99
Mark Otto's avatar
pull in changes from #19832 to fix offcanvas    
Mark Otto committed
100 
        <div class="col-6 col-md-3 sidebar-offcanvas" id="sidebar">
Mark Otto's avatar
fixes alignment and nav list in offcanvas example    
Mark Otto committed
101
102
103
104
105
106
107
108
109
110
111
112 
          <div class="list-group">
            <a href="#" class="list-group-item active">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
          </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
113 
        </div><!--/span-->
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
114
115
116
117
118 
      </div><!--/row-->

      <hr>

      <footer>
Mark Otto's avatar
pull in changes from #19832 to fix offcanvas    
Mark Otto committed
119 
        <p>&copy; Company 2017</p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
120
121
122
123 
      </footer>

    </div><!--/.container-->
Mark Otto's avatar
add respond.js to all examples (fixes #9731)    
Mark Otto committed
124
125
126
127 

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
Mark Otto's avatar
bump to jquery 3.2.1    
Mark Otto committed
128 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
XhmikosR's avatar
Add a local jQuery fallback.    
XhmikosR committed
129 
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
Bardi Harborow's avatar
Update dependencies.    
Bardi Harborow committed
130 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
131 
    <script src="../../dist/js/bootstrap.min.js"></script>
Chris Rebert's avatar
Fix #14164: move Windows Phone 8 IE10 viewport bug workaround script to footer of pages    
Chris Rebert committed
132
133 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
Nicole's avatar
add git ignore    
Nicole committed
134 
    <script src="offcanvas.js"></script>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
135 
  </body>
Mark Otto's avatar
add respond.js to all examples (fixes #9731)    
Mark Otto committed
136 
</html>