Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 9.89 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>Carousel Template for Bootstrap</title>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
11
12 

    <!-- Bootstrap core CSS -->
wangsai's avatar
fix assets links in all examples    
wangsai 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="carousel.css" rel="stylesheet">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
17
18
19 
  </head>
  <body>
Mark Otto's avatar
rename from .navbar-toggleable to .navbar-expand to reflect mobile first approach everywhere else    
Mark Otto committed
20 
    <nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse">
Mark Otto's avatar
more docs updates    
Mark Otto committed
21
22 
      <a class="navbar-brand" href="#">Carousel</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
Mark Otto's avatar
put new toggler markup to use    
Mark Otto committed
23
24 
        <span class="navbar-toggler-icon"></span>
      </button>
Mark Otto's avatar
fix carousel navbar    
Mark Otto committed
25 
      <div class="collapse navbar-collapse" id="navbarCollapse">
Mark Otto's avatar
update all examples    
Mark Otto committed
26 
        <ul class="navbar-nav mr-auto">
Mark Otto's avatar
fix carousel navbar    
Mark Otto committed
27
28
29
30
31
32
33
34
35
36 
          <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>
        </ul>
Mark Otto's avatar
unify alignment of all these dang navbar forms    
Mark Otto committed
37 
        <form class="form-inline mt-2 mt-md-0">
Patrick H. Lauke's avatar
Add explicit aria-label to placeholder-only inputs    
Patrick H. Lauke committed
38 
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
Mark Otto's avatar
unify alignment of all these dang navbar forms    
Mark Otto committed
39 
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
Mark Otto's avatar
fix carousel navbar    
Mark Otto committed
40
41 
        </form>
      </div>
Mark Otto's avatar
new look for carousel example, convert to rems    
Mark Otto committed
42 
    </nav>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
43
Chris Rebert's avatar
use data-ride="carousel" in the docs & examples; fixes #11005    
Chris Rebert committed
44 
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
45
46
47
48
49 
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
Chris Rebert's avatar
add role="listbox" to .carousel-inner to improve accessibility of Carousels    
Chris Rebert committed
50 
      <div class="carousel-inner" role="listbox">
Chris Rebert's avatar
rename .item => .carousel-item    
Chris Rebert committed
51 
        <div class="carousel-item active">
Mark Otto's avatar
keep the base64    
Mark Otto committed
52 
          <img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
53 
          <div class="container">
Mark Otto's avatar
redo the carousel example to match    
Mark Otto committed
54 
            <div class="carousel-caption d-none d-md-block text-left">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
55 
              <h1>Example headline.</h1>
Chris Rebert's avatar
remove more Glyphicon references from the docs    
Chris Rebert committed
56 
              <p>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.</p>
Lipis's avatar
Updated the old btn-large in carousel example    
Lipis committed
57 
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
58
59
60 
            </div>
          </div>
        </div>
Chris Rebert's avatar
rename .item => .carousel-item    
Chris Rebert committed
61 
        <div class="carousel-item">
Mark Otto's avatar
keep the base64    
Mark Otto committed
62 
          <img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
63 
          <div class="container">
Mark Otto's avatar
redo the carousel example to match    
Mark Otto committed
64 
            <div class="carousel-caption d-none d-md-block">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
65
66 
              <h1>Another example headline.</h1>
              <p>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.</p>
Lipis's avatar
Updated the old btn-large in carousel example    
Lipis committed
67 
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
68
69
70 
            </div>
          </div>
        </div>
Chris Rebert's avatar
rename .item => .carousel-item    
Chris Rebert committed
71 
        <div class="carousel-item">
Mark Otto's avatar
keep the base64    
Mark Otto committed
72 
          <img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
73 
          <div class="container">
Mark Otto's avatar
redo the carousel example to match    
Mark Otto committed
74 
            <div class="carousel-caption d-none d-md-block text-right">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
75
76 
              <h1>One more for good measure.</h1>
              <p>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.</p>
Lipis's avatar
Updated the old btn-large in carousel example    
Lipis committed
77 
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
78
79
80
81 
            </div>
          </div>
        </div>
      </div>
Mark Otto's avatar
drop the .carousel-control base class    
Mark Otto committed
82 
      <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
Mark Otto's avatar
redo the carousel example to match    
Mark Otto committed
83 
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
Chris Rebert's avatar
Add screenreader text to prev/next carousel buttons in examples to improve accessibility    
Chris Rebert committed
84
85 
        <span class="sr-only">Previous</span>
      </a>
Mark Otto's avatar
drop the .carousel-control base class    
Mark Otto committed
86 
      <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
Mark Otto's avatar
redo the carousel example to match    
Mark Otto committed
87 
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
Chris Rebert's avatar
Add screenreader text to prev/next carousel buttons in examples to improve accessibility    
Chris Rebert committed
88
89 
        <span class="sr-only">Next</span>
      </a>
Mark Otto's avatar
redo the carousel example to match    
Mark Otto committed
90 
    </div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
91
92
93
94
95
96
97
98
99
100 


    <!-- Marketing messaging and featurettes
    ================================================== -->
    <!-- Wrap the rest of the page in another container to center all the content. -->

    <div class="container marketing">

      <!-- Three columns of text below the carousel -->
      <div class="row">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
101 
        <div class="col-lg-4">
Eddie Lau 3dd13's avatar
replace img-circle by rounded-circle css class    
Eddie Lau 3dd13 committed
102 
          <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
103
104 
          <h2>Heading</h2>
          <p>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.</p>
Mark Otto's avatar
.btn-default to .btn-secondary    
Mark Otto committed
105 
          <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
106 
        </div><!-- /.col-lg-4 -->
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
107 
        <div class="col-lg-4">
Eddie Lau 3dd13's avatar
replace img-circle by rounded-circle css class    
Eddie Lau 3dd13 committed
108 
          <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
109
110 
          <h2>Heading</h2>
          <p>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.</p>
Mark Otto's avatar
.btn-default to .btn-secondary    
Mark Otto committed
111 
          <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
112 
        </div><!-- /.col-lg-4 -->
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
113 
        <div class="col-lg-4">
Eddie Lau 3dd13's avatar
replace img-circle by rounded-circle css class    
Eddie Lau 3dd13 committed
114 
          <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
115
116 
          <h2>Heading</h2>
          <p>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.</p>
Mark Otto's avatar
.btn-default to .btn-secondary    
Mark Otto committed
117 
          <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
118
119
120
121
122
123
124
125 
        </div><!-- /.col-lg-4 -->
      </div><!-- /.row -->


      <!-- START THE FEATURETTES -->

      <hr class="featurette-divider">
Mark Otto's avatar
basic cleanup on carousel example (fixes #9709 and #9700)    
Mark Otto committed
126 
      <div class="row featurette">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
127 
        <div class="col-md-7">
Mark Otto's avatar
basic cleanup on carousel example (fixes #9709 and #9700)    
Mark Otto committed
128
129
130 
          <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
          <p class="lead">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.</p>
        </div>
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
131 
        <div class="col-md-5">
vsn4ik's avatar
v4: Fix outdated utilites classes    
vsn4ik committed
132 
          <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
Mark Otto's avatar
basic cleanup on carousel example (fixes #9709 and #9700)    
Mark Otto committed
133 
        </div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
134
135
136
137 
      </div>

      <hr class="featurette-divider">
Mark Otto's avatar
basic cleanup on carousel example (fixes #9709 and #9700)    
Mark Otto committed
138 
      <div class="row featurette">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
139 
        <div class="col-md-7 push-md-5">
Mark Otto's avatar
basic cleanup on carousel example (fixes #9709 and #9700)    
Mark Otto committed
140
141
142 
          <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
          <p class="lead">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.</p>
        </div>
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
143 
        <div class="col-md-5 pull-md-7">
vsn4ik's avatar
v4: Fix outdated utilites classes    
vsn4ik committed
144 
          <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
Nikita Rushmanov's avatar
Fix image order in carousel example    
Nikita Rushmanov committed
145 
        </div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
146
147
148
149 
      </div>

      <hr class="featurette-divider">
Mark Otto's avatar
basic cleanup on carousel example (fixes #9709 and #9700)    
Mark Otto committed
150 
      <div class="row featurette">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
151 
        <div class="col-md-7">
Mark Otto's avatar
basic cleanup on carousel example (fixes #9709 and #9700)    
Mark Otto committed
152
153
154 
          <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
          <p class="lead">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.</p>
        </div>
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
155 
        <div class="col-md-5">
vsn4ik's avatar
v4: Fix outdated utilites classes    
vsn4ik committed
156 
          <img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
Mark Otto's avatar
basic cleanup on carousel example (fixes #9709 and #9700)    
Mark Otto committed
157 
        </div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
158
159
160
161
162
163
164
165
166 
      </div>

      <hr class="featurette-divider">

      <!-- /END THE FEATURETTES -->


      <!-- FOOTER -->
      <footer>
Starsam80's avatar
Rename `.navbar-toggleable-xs` to `.navbar-toggleable` + more cleanup (#21226)    
Starsam80 committed
167 
        <p class="float-right"><a href="#">Back to top</a></p>
Quan You's avatar
Update more copyright years to 2017 (#21491)    
Quan You committed
168 
        <p>&copy; 2017 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
169
170
171 
      </footer>

    </div><!-- /.container -->
Mark Otto's avatar
fix up carousel holder and navbar probs    
Mark Otto committed
172
173
174
175
176 


    <!-- 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
177 
    <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
178 
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
Bardi Harborow's avatar
Update dependencies.    
Bardi Harborow committed
179 
    <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
180 
    <script src="../../dist/js/bootstrap.min.js"></script>
Chris Rebert's avatar
Use just holder.js instead of docs.min.js in examples when possible    
Chris Rebert committed
181 
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
XhmikosR's avatar
Update Holder.js to v2.6.0.    
XhmikosR committed
182 
    <script src="../../assets/js/vendor/holder.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
183
184 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
185 
  </body>
Mark Otto's avatar
fix up carousel holder and navbar probs    
Mark Otto committed
186 
</html>