Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 9.55 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">
Julian Thilo's avatar
Disable IE Compatibility Mode in docs, examples    
Julian Thilo committed
5 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
Patrick H. Lauke's avatar
Add shrink-to-fit viewport directive    
Patrick H. Lauke committed
6 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Kevin Kirsche's avatar
Fix issue #15601 — Position of X-UA-Compatible    
Kevin Kirsche committed
7 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
8
9 
    <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
10 
    <link rel="icon" href="../../favicon.ico">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
11
Nicole's avatar
change file names to example names    
Nicole committed
12 
    <title>Carousel Template for Bootstrap</title>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
13
14 

    <!-- Bootstrap core CSS -->
wangsai's avatar
fix assets links in all examples    
wangsai committed
15 
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
16
17 

    <!-- Custom styles for this template -->
Nicole's avatar
add git ignore    
Nicole committed
18 
    <link href="carousel.css" rel="stylesheet">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
19
20
21 
  </head>
  <body>
Bardi Harborow's avatar
Normalize examples and update where relevant.    
Bardi Harborow committed
22 
    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
Mark Otto's avatar
new look for carousel example, convert to rems    
Mark Otto committed
23 
      <a href="#" class="navbar-brand">Carousel</a>
Maurice Wahba's avatar
Fixes to examples    
Maurice Wahba committed
24 
      <ul class="nav navbar-nav">
Mark Otto's avatar
new look for carousel example, convert to rems    
Mark Otto committed
25
26
27
28
29
30
31
32
33
34
35
36
37
38 
        <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="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </nav>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
39
Chris Rebert's avatar
use data-ride="carousel" in the docs & examples; fixes #11005    
Chris Rebert committed
40 
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
41
42
43
44
45 
      <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
46 
      <div class="carousel-inner" role="listbox">
Chris Rebert's avatar
rename .item => .carousel-item    
Chris Rebert committed
47 
        <div class="carousel-item active">
Mark Otto's avatar
keep the base64    
Mark Otto committed
48 
          <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
49 
          <div class="container">
Mark Otto's avatar
redo the carousel example to match    
Mark Otto committed
50 
            <div class="carousel-caption d-none d-md-block text-left">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
51 
              <h1>Example headline.</h1>
Chris Rebert's avatar
remove more Glyphicon references from the docs    
Chris Rebert committed
52 
              <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
53 
              <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
54
55
56 
            </div>
          </div>
        </div>
Chris Rebert's avatar
rename .item => .carousel-item    
Chris Rebert committed
57 
        <div class="carousel-item">
Mark Otto's avatar
keep the base64    
Mark Otto committed
58 
          <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
59 
          <div class="container">
Mark Otto's avatar
redo the carousel example to match    
Mark Otto committed
60 
            <div class="carousel-caption d-none d-md-block">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
61
62 
              <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
63 
              <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
64
65
66 
            </div>
          </div>
        </div>
Chris Rebert's avatar
rename .item => .carousel-item    
Chris Rebert committed
67 
        <div class="carousel-item">
Mark Otto's avatar
keep the base64    
Mark Otto committed
68 
          <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
69 
          <div class="container">
Mark Otto's avatar
redo the carousel example to match    
Mark Otto committed
70 
            <div class="carousel-caption d-none d-md-block text-right">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
71
72 
              <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
73 
              <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
74
75
76
77 
            </div>
          </div>
        </div>
      </div>
Mark Otto's avatar
drop the .carousel-control base class    
Mark Otto committed
78 
      <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
79 
        <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
80
81 
        <span class="sr-only">Previous</span>
      </a>
Mark Otto's avatar
drop the .carousel-control base class    
Mark Otto committed
82 
      <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
83 
        <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
84
85 
        <span class="sr-only">Next</span>
      </a>
Mark Otto's avatar
redo the carousel example to match    
Mark Otto committed
86 
    </div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
87
88
89
90
91
92
93
94
95
96 


    <!-- 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
97 
        <div class="col-lg-4">
Eddie Lau 3dd13's avatar
replace img-circle by rounded-circle css class    
Eddie Lau 3dd13 committed
98 
          <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
99
100 
          <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
101 
          <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
102 
        </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
103 
        <div class="col-lg-4">
Eddie Lau 3dd13's avatar
replace img-circle by rounded-circle css class    
Eddie Lau 3dd13 committed
104 
          <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
105
106 
          <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
107 
          <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
108 
        </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
109 
        <div class="col-lg-4">
Eddie Lau 3dd13's avatar
replace img-circle by rounded-circle css class    
Eddie Lau 3dd13 committed
110 
          <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
111
112 
          <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
113 
          <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
114
115
116
117
118
119
120
121 
        </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
122 
      <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
123 
        <div class="col-md-7">
Mark Otto's avatar
basic cleanup on carousel example (fixes #9709 and #9700)    
Mark Otto committed
124
125
126 
          <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
127 
        <div class="col-md-5">
vsn4ik's avatar
v4: Fix outdated utilites classes    
vsn4ik committed
128 
          <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
129 
        </div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
130
131
132
133 
      </div>

      <hr class="featurette-divider">
Mark Otto's avatar
basic cleanup on carousel example (fixes #9709 and #9700)    
Mark Otto committed
134 
      <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
135 
        <div class="col-md-7 push-md-5">
Mark Otto's avatar
basic cleanup on carousel example (fixes #9709 and #9700)    
Mark Otto committed
136
137
138 
          <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
139 
        <div class="col-md-5 pull-md-7">
vsn4ik's avatar
v4: Fix outdated utilites classes    
vsn4ik committed
140 
          <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
141 
        </div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
142
143
144
145 
      </div>

      <hr class="featurette-divider">
Mark Otto's avatar
basic cleanup on carousel example (fixes #9709 and #9700)    
Mark Otto committed
146 
      <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
147 
        <div class="col-md-7">
Mark Otto's avatar
basic cleanup on carousel example (fixes #9709 and #9700)    
Mark Otto committed
148
149
150 
          <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
151 
        <div class="col-md-5">
vsn4ik's avatar
v4: Fix outdated utilites classes    
vsn4ik committed
152 
          <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
153 
        </div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
154
155
156
157
158
159
160
161
162 
      </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
163 
        <p class="float-right"><a href="#">Back to top</a></p>
Julian Thilo's avatar
Update copyright notices in all places    
Julian Thilo committed
164 
        <p>&copy; 2014 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
165
166
167 
      </footer>

    </div><!-- /.container -->
Mark Otto's avatar
fix up carousel holder and navbar probs    
Mark Otto committed
168
169
170
171
172 


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
Chris Rebert's avatar
Support jQuery v3 in Bootstrap v4 (#20191)    
Chris Rebert committed
173 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
XhmikosR's avatar
Add a local jQuery fallback.    
XhmikosR committed
174 
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
XhmikosR's avatar
Examples: Update tether to v1.2.0.    
XhmikosR committed
175 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
176 
    <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
177 
    <!-- 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
178 
    <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
179
180 
    <!-- 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
181 
  </body>
Mark Otto's avatar
fix up carousel holder and navbar probs    
Mark Otto committed
182 
</html>