1556 lines
78 KiB
Plaintext
1556 lines
78 KiB
Plaintext
# HTML5 - Bootstrap 4
|
|
snippet htmlb4
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>$1</title>
|
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
|
|
</head>
|
|
<body>
|
|
<h1>${3:Hello, world!}</h1>
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
|
|
</body>
|
|
</html>
|
|
endsnippet
|
|
|
|
# Carousel template - Bootstrap 4
|
|
snippet htmlca
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" href="http://v4-alpha.getbootstrap.com/favicon.ico">
|
|
|
|
<title>Carousel Template for Bootstrap</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="http://v4-alpha.getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="http://v4-alpha.getbootstrap.com/examples/carousel/carousel.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar navbar-default navbar-static-top">
|
|
<a href="#" class="navbar-brand">Carousel</a>
|
|
<ul class="nav nav-pills">
|
|
<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>
|
|
|
|
|
|
<!-- Carousel
|
|
================================================== -->
|
|
<div id="myCarousel" class="carousel slide" data-ride="carousel">
|
|
<!-- Indicators -->
|
|
<ol class="carousel-indicators">
|
|
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
|
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
|
|
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
|
|
</ol>
|
|
<div class="carousel-inner" role="listbox">
|
|
<div class="carousel-item active">
|
|
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
|
|
<div class="container">
|
|
<div class="carousel-caption text-left">
|
|
<h1>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>
|
|
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
|
|
<div class="container">
|
|
<div class="carousel-caption">
|
|
<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>
|
|
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
|
|
<div class="container">
|
|
<div class="carousel-caption text-right">
|
|
<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>
|
|
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
|
|
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
|
<span class="sr-only">Previous</span>
|
|
</a>
|
|
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
|
|
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
</div><!-- /.carousel -->
|
|
|
|
|
|
<!-- 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">
|
|
<div class="col-lg-4">
|
|
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
|
|
<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>
|
|
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
|
</div><!-- /.col-lg-4 -->
|
|
<div class="col-lg-4">
|
|
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
|
|
<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>
|
|
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
|
</div><!-- /.col-lg-4 -->
|
|
<div class="col-lg-4">
|
|
<img class="img-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
|
|
<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>
|
|
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
|
</div><!-- /.col-lg-4 -->
|
|
</div><!-- /.row -->
|
|
|
|
|
|
<!-- START THE FEATURETTES -->
|
|
|
|
<hr class="featurette-divider">
|
|
|
|
<div class="row featurette">
|
|
<div class="col-md-7">
|
|
<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>
|
|
<div class="col-md-5">
|
|
<img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="500x500" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDUwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzUwMHg1MDAvYXV0bwpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE1MDA0YjlkNGM4IHRleHQgeyBmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MjVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTUwMDRiOWQ0YzgiPjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjRUVFRUVFIi8+PGc+PHRleHQgeD0iMTg1LjEzMjgxMjUiIHk9IjI2MS4xIj41MDB4NTAwPC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true">
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="featurette-divider">
|
|
|
|
<div class="row featurette">
|
|
<div class="col-md-7 col-md-push-5">
|
|
<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>
|
|
<div class="col-md-5 col-md-pull-7">
|
|
<img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="500x500" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDUwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzUwMHg1MDAvYXV0bwpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE1MDA0YjliZmI0IHRleHQgeyBmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MjVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTUwMDRiOWJmYjQiPjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjRUVFRUVFIi8+PGc+PHRleHQgeD0iMTg1LjEzMjgxMjUiIHk9IjI2MS4xIj41MDB4NTAwPC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true">
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="featurette-divider">
|
|
|
|
<div class="row featurette">
|
|
<div class="col-md-7">
|
|
<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>
|
|
<div class="col-md-5">
|
|
<img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="500x500" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDUwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzUwMHg1MDAvYXV0bwpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE1MDA0YjlkMjE5IHRleHQgeyBmaWxsOiNBQUFBQUE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6MjVwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTUwMDRiOWQyMTkiPjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjRUVFRUVFIi8+PGc+PHRleHQgeD0iMTg1LjEzMjgxMjUiIHk9IjI2MS4xIj41MDB4NTAwPC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true">
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="featurette-divider">
|
|
|
|
<!-- /END THE FEATURETTES -->
|
|
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<p class="pull-right"><a href="#">Back to top</a></p>
|
|
<p>© 2014 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
|
|
</footer>
|
|
|
|
</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/2.1.4/jquery.min.js"></script>
|
|
<script>window.jQuery || document.write('<script src="http://v4-alpha.getbootstrap.com/assets/js/vendor/jquery.min.js"><\/script>')</script>
|
|
<script src="http://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>
|
|
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
|
|
<script src="http://v4-alpha.getbootstrap.com/assets/js/vendor/holder.min.js"></script>
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="http://v4-alpha.getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
width="500"
|
|
height="500"
|
|
viewBox="0 0 500 500"
|
|
preserveAspectRatio="none"
|
|
style="
|
|
display: none;
|
|
visibility: hidden;
|
|
position: absolute;
|
|
top: -100%;
|
|
left: -100%;
|
|
"
|
|
>
|
|
<defs>
|
|
<style type="text/css"></style>
|
|
</defs>
|
|
<text
|
|
x="0"
|
|
y="25"
|
|
style="
|
|
font-weight:bold;
|
|
font-size:25pt;
|
|
font-family:Arial, Helvetica, Open Sans, sans-serif
|
|
"
|
|
>
|
|
500x500
|
|
</text>
|
|
</svg>
|
|
</body>
|
|
</html>
|
|
endsnippet
|
|
|
|
# Cover template - Bootstrap 4
|
|
snippet htmlco
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" href="http://v4-alpha.getbootstrap.com/favicon.ico">
|
|
|
|
<title>Cover Template for Bootstrap</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="http://v4-alpha.getbootstrap.com/examples/cover/cover.css" rel="stylesheet">
|
|
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="http://v4-alpha.getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="site-wrapper">
|
|
|
|
<div class="site-wrapper-inner">
|
|
|
|
<div class="cover-container">
|
|
|
|
<div class="masthead clearfix">
|
|
<div class="inner">
|
|
<h3 class="masthead-brand">Cover</h3>
|
|
<nav class="nav nav-masthead">
|
|
<a class="nav-link active" href="#">Home</a>
|
|
<a class="nav-link" href="#">Features</a>
|
|
<a class="nav-link" href="#">Contact</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="inner cover">
|
|
<h1 class="cover-heading">Cover your page.</h1>
|
|
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
|
|
<p class="lead">
|
|
<a href="#" class="btn btn-lg btn-secondary">Learn more</a>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mastfoot">
|
|
<div class="inner">
|
|
<p>Cover template for <a href="http://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
|
<script>window.jQuery || document.write('<script src="http://v4-alpha.getbootstrap.com/assets/js/vendor/jquery.min.js"><\/script>')</script>
|
|
<script src="http://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="http://v4-alpha.getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
|
|
|
|
</body>
|
|
</html>
|
|
endsnippet
|
|
|
|
# Dashboard template - Bootstrap 4
|
|
snippet htmlda
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" href="http://v4-alpha.getbootstrap.com/favicon.ico">
|
|
|
|
<title>Dashboard Template for Bootstrap</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="http://v4-alpha.getbootstrap.com/examples/dashboard/dashboard.css" rel="stylesheet">
|
|
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="http://v4-alpha.getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<nav class="navbar navbar-inverse navbar-fixed-top">
|
|
<div class="container-fluid">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="#">Project name</a>
|
|
</div>
|
|
<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 0px;">
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="#">Dashboard</a></li>
|
|
<li><a href="#">Settings</a></li>
|
|
<li><a href="#">Profile</a></li>
|
|
<li><a href="#">Help</a></li>
|
|
</ul>
|
|
<form class="navbar-form navbar-right">
|
|
<input type="text" class="form-control" placeholder="Search...">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-sm-3 col-md-2 sidebar">
|
|
<ul class="nav nav-sidebar">
|
|
<li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
|
|
<li><a href="#">Reports</a></li>
|
|
<li><a href="#">Analytics</a></li>
|
|
<li><a href="#">Export</a></li>
|
|
</ul>
|
|
<ul class="nav nav-sidebar">
|
|
<li><a href="">Nav item</a></li>
|
|
<li><a href="">Nav item again</a></li>
|
|
<li><a href="">One more nav</a></li>
|
|
<li><a href="">Another nav item</a></li>
|
|
<li><a href="">More navigation</a></li>
|
|
</ul>
|
|
<ul class="nav nav-sidebar">
|
|
<li><a href="">Nav item again</a></li>
|
|
<li><a href="">One more nav</a></li>
|
|
<li><a href="">Another nav item</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
|
|
<h1 class="page-header">Dashboard</h1>
|
|
|
|
<div class="row placeholders">
|
|
<div class="col-xs-6 col-sm-3 placeholder">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
|
|
<h4>Label</h4>
|
|
<span class="text-muted">Something else</span>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 placeholder">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
|
|
<h4>Label</h4>
|
|
<span class="text-muted">Something else</span>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 placeholder">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
|
|
<h4>Label</h4>
|
|
<span class="text-muted">Something else</span>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3 placeholder">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
|
|
<h4>Label</h4>
|
|
<span class="text-muted">Something else</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="sub-header">Section title</h2>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Header</th>
|
|
<th>Header</th>
|
|
<th>Header</th>
|
|
<th>Header</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1,001</td>
|
|
<td>Lorem</td>
|
|
<td>ipsum</td>
|
|
<td>dolor</td>
|
|
<td>sit</td>
|
|
</tr>
|
|
<tr>
|
|
<td>1,002</td>
|
|
<td>amet</td>
|
|
<td>consectetur</td>
|
|
<td>adipiscing</td>
|
|
<td>elit</td>
|
|
</tr>
|
|
<tr>
|
|
<td>1,003</td>
|
|
<td>Integer</td>
|
|
<td>nec</td>
|
|
<td>odio</td>
|
|
<td>Praesent</td>
|
|
</tr>
|
|
<tr>
|
|
<td>1,003</td>
|
|
<td>libero</td>
|
|
<td>Sed</td>
|
|
<td>cursus</td>
|
|
<td>ante</td>
|
|
</tr>
|
|
<tr>
|
|
<td>1,004</td>
|
|
<td>dapibus</td>
|
|
<td>diam</td>
|
|
<td>Sed</td>
|
|
<td>nisi</td>
|
|
</tr>
|
|
<tr>
|
|
<td>1,005</td>
|
|
<td>Nulla</td>
|
|
<td>quis</td>
|
|
<td>sem</td>
|
|
<td>at</td>
|
|
</tr>
|
|
<tr>
|
|
<td>1,006</td>
|
|
<td>nibh</td>
|
|
<td>elementum</td>
|
|
<td>imperdiet</td>
|
|
<td>Duis</td>
|
|
</tr>
|
|
<tr>
|
|
<td>1,007</td>
|
|
<td>sagittis</td>
|
|
<td>ipsum</td>
|
|
<td>Praesent</td>
|
|
<td>mauris</td>
|
|
</tr>
|
|
<tr>
|
|
<td>1,008</td>
|
|
<td>Fusce</td>
|
|
<td>nec</td>
|
|
<td>tellus</td>
|
|
<td>sed</td>
|
|
</tr>
|
|
<tr>
|
|
<td>1,009</td>
|
|
<td>augue</td>
|
|
<td>semper</td>
|
|
<td>porta</td>
|
|
<td>Mauris</td>
|
|
</tr>
|
|
<tr>
|
|
<td>1,010</td>
|
|
<td>massa</td>
|
|
<td>Vestibulum</td>
|
|
<td>lacinia</td>
|
|
<td>arcu</td>
|
|
</tr>
|
|
<tr>
|
|
<td>1,011</td>
|
|
<td>eget</td>
|
|
<td>nulla</td>
|
|
<td>Class</td>
|
|
<td>aptent</td>
|
|
</tr>
|
|
<tr>
|
|
<td>1,012</td>
|
|
<td>taciti</td>
|
|
<td>sociosqu</td>
|
|
<td>ad</td>
|
|
<td>litora</td>
|
|
</tr>
|
|
<tr>
|
|
<td>1,013</td>
|
|
<td>torquent</td>
|
|
<td>per</td>
|
|
<td>conubia</td>
|
|
<td>nostra</td>
|
|
</tr>
|
|
<tr>
|
|
<td>1,014</td>
|
|
<td>per</td>
|
|
<td>inceptos</td>
|
|
<td>himenaeos</td>
|
|
<td>Curabitur</td>
|
|
</tr>
|
|
<tr>
|
|
<td>1,015</td>
|
|
<td>sodales</td>
|
|
<td>ligula</td>
|
|
<td>in</td>
|
|
<td>libero</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
|
<script>window.jQuery || document.write('<script src="http://v4-alpha.getbootstrap.com/assets/js/vendor/jquery.min.js"><\/script>')</script>
|
|
<script src="http://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>
|
|
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
|
|
<script src="http://v4-alpha.getbootstrap.com/assets/js/vendor/holder.min.js"></script>
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="http://v4-alpha.getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
|
|
|
|
</body>
|
|
</html>
|
|
endsnippet
|
|
|
|
# Grids template - Bootstrap 4
|
|
snippet htmlgd
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" href="http://v4-alpha.getbootstrap.com/favicon.ico">
|
|
|
|
<title>Grid Template for Bootstrap</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="http://v4-alpha.getbootstrap.com/examples/grid/grid.css" rel="stylesheet">
|
|
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="http://v4-alpha.getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
|
|
<div class="page-header">
|
|
<h1>Bootstrap grid examples</h1>
|
|
<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
|
|
</div>
|
|
|
|
<h3>Five grid tiers</h3>
|
|
<p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-4">.col-xs-4</div>
|
|
<div class="col-xs-4">.col-xs-4</div>
|
|
<div class="col-xs-4">.col-xs-4</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-4">.col-sm-4</div>
|
|
<div class="col-sm-4">.col-sm-4</div>
|
|
<div class="col-sm-4">.col-sm-4</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-4">.col-md-4</div>
|
|
<div class="col-md-4">.col-md-4</div>
|
|
<div class="col-md-4">.col-md-4</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-4">.col-lg-4</div>
|
|
<div class="col-lg-4">.col-lg-4</div>
|
|
<div class="col-lg-4">.col-lg-4</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xl-4">.col-xl-4</div>
|
|
<div class="col-xl-4">.col-xl-4</div>
|
|
<div class="col-xl-4">.col-xl-4</div>
|
|
</div>
|
|
|
|
<h3>Three equal columns</h3>
|
|
<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
|
|
<div class="row">
|
|
<div class="col-md-4">.col-md-4</div>
|
|
<div class="col-md-4">.col-md-4</div>
|
|
<div class="col-md-4">.col-md-4</div>
|
|
</div>
|
|
|
|
<h3>Three unequal columns</h3>
|
|
<p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
|
|
<div class="row">
|
|
<div class="col-md-3">.col-md-3</div>
|
|
<div class="col-md-6">.col-md-6</div>
|
|
<div class="col-md-3">.col-md-3</div>
|
|
</div>
|
|
|
|
<h3>Two columns</h3>
|
|
<p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
|
|
<div class="row">
|
|
<div class="col-md-8">.col-md-8</div>
|
|
<div class="col-md-4">.col-md-4</div>
|
|
</div>
|
|
|
|
<h3>Full width, single column</h3>
|
|
<p class="text-warning">No grid classes are necessary for full-width elements.</p>
|
|
|
|
<hr>
|
|
|
|
<h3>Two columns with two nested columns</h3>
|
|
<p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
|
|
<p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
.col-md-8
|
|
<div class="row">
|
|
<div class="col-md-6">.col-md-6</div>
|
|
<div class="col-md-6">.col-md-6</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">.col-md-4</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h3>Mixed: mobile and desktop</h3>
|
|
<p>The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
|
|
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
|
|
<div class="row">
|
|
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
|
|
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
|
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
|
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-6">.col-xs-6</div>
|
|
<div class="col-xs-6">.col-xs-6</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h3>Mixed: mobile, tablet, and desktop</h3>
|
|
<p></p>
|
|
<div class="row">
|
|
<div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
|
|
<div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
|
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
|
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h3>Column clearing</h3>
|
|
<p><a href="http://getbootstrap.com/css/#grid-responsive-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p>
|
|
<div class="row">
|
|
<div class="col-xs-6 col-sm-3">
|
|
.col-xs-6 .col-sm-3
|
|
<br>
|
|
Resize your viewport or check it out on your phone for an example.
|
|
</div>
|
|
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
|
|
|
<!-- Add the extra clearfix for only the required viewport -->
|
|
<div class="clearfix visible-xs"></div>
|
|
|
|
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
|
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h3>Offset, push, and pull resets</h3>
|
|
<p>Reset offsets, pushes, and pulls at specific breakpoints.</p>
|
|
<div class="row">
|
|
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
|
|
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
|
|
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
|
|
</div>
|
|
|
|
|
|
</div> <!-- /container -->
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
|
|
</body>
|
|
</html>
|
|
endsnippet
|
|
|
|
# Jumbotron template - Bootstrap 4
|
|
snippet htmljb
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" href="http://v4-alpha.getbootstrap.com/favicon.ico">
|
|
|
|
<title>Jumbotron Template for Bootstrap</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="http://v4-alpha.getbootstrap.com/examples/jumbotron/jumbotron.css" rel="stylesheet">
|
|
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="http://v4-alpha.getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<nav class="navbar navbar-inverse navbar-static-top">
|
|
<a class="navbar-brand" href="#">Project name</a>
|
|
<ul class="nav nav-pills">
|
|
<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="#">About</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Main jumbotron for a primary marketing message or call to action -->
|
|
<div class="jumbotron">
|
|
<div class="container">
|
|
<h1>Hello, world!</h1>
|
|
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
|
|
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- Example row of columns -->
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<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>
|
|
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<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>
|
|
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<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>
|
|
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<footer>
|
|
<p>© Company 2014</p>
|
|
</footer>
|
|
</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/2.1.4/jquery.min.js"></script>
|
|
<script>window.jQuery || document.write('<script src="http://v4-alpha.getbootstrap.com/assets/js/vendor/jquery.min.js"><\/script>')</script>
|
|
<script src="http://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>
|
|
|
|
</body>
|
|
</html>
|
|
endsnippet
|
|
|
|
# Navbar template - Bootstrap 4
|
|
snippet htmlnb
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" href="http://v4-alpha.getbootstrap.com/favicon.ico">
|
|
|
|
<title>Navbar Template for Bootstrap</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="http://v4-alpha.getbootstrap.com/examples/navbar/navbar.css" rel="stylesheet">
|
|
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="http://v4-alpha.getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<div class="collapse" id="navbar-header">
|
|
<div class="inverse p-a">
|
|
<h3>Collapsed content</h3>
|
|
<p>Toggleable via the navbar brand.</p>
|
|
</div>
|
|
</div>
|
|
<div class="navbar navbar-default navbar-static-top">
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
|
|
☰
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Main component for a primary marketing message or call to action -->
|
|
<div class="jumbotron">
|
|
<h1>Navbar example</h1>
|
|
<p>This example is a quick exercise to illustrate how the default navbar works. It's placed within a <code>.container</code> to limit its width and will scroll with the rest of the page's content.</p>
|
|
<p>
|
|
<a class="btn btn-lg btn-primary" href="http://v4-alpha.getbootstrap.com/components/#navbar" role="button">View navbar docs »</a>
|
|
</p>
|
|
</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/2.1.4/jquery.min.js"></script>
|
|
<script>window.jQuery || document.write('<script src="http://v4-alpha.getbootstrap.com/assets/js/vendor/jquery.min.js"><\/script>')</script>
|
|
<script src="http://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>
|
|
|
|
</body>
|
|
</html>
|
|
endsnippet
|
|
|
|
# Fixed Navbar template - Bootstrap 4
|
|
snippet htmlnbfx
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" href="http://v4-alpha.getbootstrap.com/favicon.ico">
|
|
|
|
<title>Fixed top navbar example for Bootstrap</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="http://v4-alpha.getbootstrap.com/examples/navbar-top-fixed/navbar-top-fixed.css" rel="stylesheet">
|
|
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="http://v4-alpha.getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="pos-f-t">
|
|
<div class="collapse" id="navbar-header">
|
|
<div class="container-fluid inverse p-a">
|
|
<h3>Collapsed content</h3>
|
|
<p>Toggleable via the navbar brand.</p>
|
|
</div>
|
|
</div>
|
|
<div class="navbar navbar-default navbar-static-top">
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
|
|
☰
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="jumbotron">
|
|
<h1>Navbar example</h1>
|
|
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
|
|
<a class="btn btn-lg btn-primary" href="http://v4-alpha.getbootstrap.com/components/#navbar" role="button">View navbar docs »</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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.1/jquery.min.js"></script>
|
|
<script src="http://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>
|
|
|
|
</body>
|
|
</html>
|
|
endsnippet
|
|
|
|
# Justified nav template - Bootstrap 4
|
|
snippet htmlnbj
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" href="http://v4-alpha.getbootstrap.com/favicon.ico">
|
|
|
|
<title>Justified Nav Template for Bootstrap</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="http://v4-alpha.getbootstrap.com/examples/justified-nav/justified-nav.css" rel="stylesheet">
|
|
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="http://v4-alpha.getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<!-- The justified navigation menu is meant for single line per list item.
|
|
Multiple lines will require custom code not provided by Bootstrap. -->
|
|
<div class="masthead">
|
|
<h3 class="text-muted">Project name</h3>
|
|
<nav>
|
|
<ul class="nav nav-justified">
|
|
<li class="active"><a href="#">Home</a></li>
|
|
<li><a href="#">Projects</a></li>
|
|
<li><a href="#">Services</a></li>
|
|
<li><a href="#">Downloads</a></li>
|
|
<li><a href="#">About</a></li>
|
|
<li><a href="#">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Jumbotron -->
|
|
<div class="jumbotron">
|
|
<h1>Marketing stuff!</h1>
|
|
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
|
|
<p><a class="btn btn-lg btn-success" href="#" role="button">Get started today</a></p>
|
|
</div>
|
|
|
|
<!-- Example row of columns -->
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<h2>Safari bug warning!</h2>
|
|
<p class="text-danger">As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
|
|
<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>
|
|
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<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>
|
|
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<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.</p>
|
|
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Site footer -->
|
|
<footer class="footer">
|
|
<p>© Company 2014</p>
|
|
</footer>
|
|
|
|
</div> <!-- /container -->
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
|
|
</body>
|
|
</html>
|
|
endsnippet
|
|
|
|
# Static top Navbar template - Bootstrap 4
|
|
snippet htmlnbst
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" href="http://v4-alpha.getbootstrap.com/favicon.ico">
|
|
|
|
<title>Top navbar example for Bootstrap</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="http://v4-alpha.getbootstrap.com/examples/navbar-top/navbar-top.css" rel="stylesheet">
|
|
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="http://v4-alpha.getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="collapse" id="navbar-header" aria-expanded="false" style="height: 0px;">
|
|
<div class="container-fluid inverse p-a">
|
|
<h3>Collapsed content</h3>
|
|
<p>Toggleable via the navbar brand.</p>
|
|
</div>
|
|
</div>
|
|
<div class="navbar navbar-default navbar-static-top">
|
|
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar-header" aria-expanded="false">
|
|
☰
|
|
</button>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="jumbotron">
|
|
<h1>Navbar example</h1>
|
|
<p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
|
|
<a class="btn btn-lg btn-primary" href="http://v4-alpha.getbootstrap.com/components/#navbar" role="button">View navbar docs »</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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.1/jquery.min.js"></script>
|
|
<script src="http://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>
|
|
|
|
</body>
|
|
</html>
|
|
endsnippet
|
|
|
|
# Sticky footer template - Bootstrap 4
|
|
snippet htmlsf
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" href="http://v4-alpha.getbootstrap.com/favicon.ico">
|
|
|
|
<title>Sticky Footer Template for Bootstrap</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="http://v4-alpha.getbootstrap.com/examples/sticky-footer/sticky-footer.css" rel="stylesheet">
|
|
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="http://v4-alpha.getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Begin page content -->
|
|
<div class="container">
|
|
<div class="page-header">
|
|
<h1>Sticky footer</h1>
|
|
</div>
|
|
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
|
|
<p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
|
|
</div>
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<p class="text-muted">Place sticky footer content here.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
|
|
</body>
|
|
</html>
|
|
endsnippet
|
|
|
|
# Sticky footer w/ navbar template - Bootstrap 4
|
|
snippet htmlsfn
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" href="http://v4-alpha.getbootstrap.com/favicon.ico">
|
|
|
|
<title>Sticky Footer Navbar Template for Bootstrap</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="http://v4-alpha.getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css" rel="stylesheet">
|
|
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="http://v4-alpha.getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Fixed navbar -->
|
|
<nav class="navbar navbar-default navbar-fixed-top">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="#">Project name</a>
|
|
</div>
|
|
<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 0px;">
|
|
<ul class="nav navbar-nav">
|
|
<li class="active"><a href="#">Home</a></li>
|
|
<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" role="button" aria-expanded="false">Dropdown</a>
|
|
<div class="dropdown-menu">
|
|
<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 role="separator" class="dropdown-divider"></div>
|
|
<h6 class="dropdown-header">Nav header</h6>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
<a class="dropdown-item" href="#">One more separated link</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div><!--/.nav-collapse -->
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Begin page content -->
|
|
<div class="container">
|
|
<div class="page-header">
|
|
<h1>Sticky footer with fixed navbar</h1>
|
|
</div>
|
|
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
|
|
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
|
|
</div>
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<p class="text-muted">Place sticky footer content here.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
|
<script>window.jQuery || document.write('<script src="http://v4-alpha.getbootstrap.com/assets/js/vendor/jquery.min.js"><\/script>')</script>
|
|
<script src="http://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>
|
|
|
|
</body>
|
|
</html>
|
|
endsnippet
|
|
|
|
# Sign-in template - Bootstrap 4
|
|
snippet htmlsi
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" href="http://v4-alpha.getbootstrap.com/favicon.ico">
|
|
|
|
<title>Signin Template for Bootstrap</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="http://v4-alpha.getbootstrap.com/examples/signin/signin.css" rel="stylesheet">
|
|
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="http://v4-alpha.getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<form class="form-signin">
|
|
<h2 class="form-signin-heading">Please sign in</h2>
|
|
<label for="inputEmail" class="sr-only">Email address</label>
|
|
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="">
|
|
<label for="inputPassword" class="sr-only">Password</label>
|
|
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required="">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" value="remember-me"> Remember me
|
|
</label>
|
|
</div>
|
|
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
|
|
</form>
|
|
|
|
</div> <!-- /container -->
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
|
|
</body>
|
|
</html>
|
|
endsnippet
|
|
|
|
# Blog template - Bootstrap 4
|
|
snippet htmlbl
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" href="http://v4-alpha.getbootstrap.com/favicon.ico">
|
|
|
|
<title>Blog Template for Bootstrap</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="http://v4-alpha.getbootstrap.com/examples/blog/blog.css" rel="stylesheet">
|
|
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="http://v4-alpha.getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="blog-masthead">
|
|
<div class="container">
|
|
<nav class="nav blog-nav">
|
|
<a class="nav-link active" href="#">Home</a>
|
|
<a class="nav-link" href="#">New features</a>
|
|
<a class="nav-link" href="#">Press</a>
|
|
<a class="nav-link" href="#">New hires</a>
|
|
<a class="nav-link" href="#">About</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="blog-header">
|
|
<div class="container">
|
|
<h1 class="blog-title">The Bootstrap Blog</h1>
|
|
<p class="lead blog-description">An example blog template built with Bootstrap.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-sm-8 blog-main">
|
|
|
|
<div class="blog-post">
|
|
<h2 class="blog-post-title">Sample blog post</h2>
|
|
<p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
|
|
|
|
<p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
|
|
<hr>
|
|
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
|
|
<blockquote>
|
|
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
</blockquote>
|
|
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
|
<h2>Heading</h2>
|
|
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
|
<h3>Sub-heading</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
|
<pre><code>Example code block</code></pre>
|
|
<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
|
|
<h3>Sub-heading</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
|
<ul>
|
|
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
|
|
<li>Donec id elit non mi porta gravida at eget metus.</li>
|
|
<li>Nulla vitae elit libero, a pharetra augue.</li>
|
|
</ul>
|
|
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
|
|
<ol>
|
|
<li>Vestibulum id ligula porta felis euismod semper.</li>
|
|
<li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
|
|
<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
|
|
</ol>
|
|
<p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
|
|
</div><!-- /.blog-post -->
|
|
|
|
<div class="blog-post">
|
|
<h2 class="blog-post-title">Another blog post</h2>
|
|
<p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>
|
|
|
|
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
|
|
<blockquote>
|
|
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
</blockquote>
|
|
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
|
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
|
</div><!-- /.blog-post -->
|
|
|
|
<div class="blog-post">
|
|
<h2 class="blog-post-title">New feature</h2>
|
|
<p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p>
|
|
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
|
<ul>
|
|
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
|
|
<li>Donec id elit non mi porta gravida at eget metus.</li>
|
|
<li>Nulla vitae elit libero, a pharetra augue.</li>
|
|
</ul>
|
|
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
|
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
|
|
</div><!-- /.blog-post -->
|
|
|
|
<nav>
|
|
<ul class="pager">
|
|
<li><a href="#">Older</a></li>
|
|
<li class="disabled"><a href="#">Newer</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
</div><!-- /.blog-main -->
|
|
|
|
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
|
|
<div class="sidebar-module sidebar-module-inset">
|
|
<h4>About</h4>
|
|
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
|
</div>
|
|
<div class="sidebar-module">
|
|
<h4>Archives</h4>
|
|
<ol class="list-unstyled">
|
|
<li><a href="#">March 2014</a></li>
|
|
<li><a href="#">February 2014</a></li>
|
|
<li><a href="#">January 2014</a></li>
|
|
<li><a href="#">December 2013</a></li>
|
|
<li><a href="#">November 2013</a></li>
|
|
<li><a href="#">October 2013</a></li>
|
|
<li><a href="#">September 2013</a></li>
|
|
<li><a href="#">August 2013</a></li>
|
|
<li><a href="#">July 2013</a></li>
|
|
<li><a href="#">June 2013</a></li>
|
|
<li><a href="#">May 2013</a></li>
|
|
<li><a href="#">April 2013</a></li>
|
|
</ol>
|
|
</div>
|
|
<div class="sidebar-module">
|
|
<h4>Elsewhere</h4>
|
|
<ol class="list-unstyled">
|
|
<li><a href="#">GitHub</a></li>
|
|
<li><a href="#">Twitter</a></li>
|
|
<li><a href="#">Facebook</a></li>
|
|
</ol>
|
|
</div>
|
|
</div><!-- /.blog-sidebar -->
|
|
|
|
</div><!-- /.row -->
|
|
|
|
</div><!-- /.container -->
|
|
|
|
<footer class="blog-footer">
|
|
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
|
|
<p>
|
|
<a href="#">Back to top</a>
|
|
</p>
|
|
</footer>
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
|
<script>window.jQuery || document.write('<script src="http://v4-alpha.getbootstrap.com/assets/js/vendor/jquery.min.js"><\/script>')</script>
|
|
<script src="http://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js"></script>
|
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
|
<script src="http://v4-alpha.getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
|
|
</body>
|
|
</html>
|
|
endsnippet
|
|
|
|
# Starter template - Bootstrap 4
|
|
snippet htmlst
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" href="${1:/favicon.ico}">
|
|
|
|
<title>$2</title>
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
|
|
<!-- Custom styles for this template -->
|
|
<link rel="stylesheet" href="http://v4-alpha.getbootstrap.com/examples/starter-template/starter-template.css">
|
|
<!-- ${4:My} CSS -->
|
|
<link rel="stylesheet" href="${5:css/style.css}">
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-inverse navbar-fixed-top">
|
|
<a class="navbar-brand" href="#">Project name</a>
|
|
<ul class="nav nav-pills">
|
|
<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="#">About</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
|
|
<div class="starter-template">
|
|
<h1>Bootstrap starter template</h1>
|
|
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
|
|
</div>
|
|
|
|
</div><!-- /.container -->
|
|
|
|
<!-- jQuery first, then Bootstrap JS. -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/${6:2.1.4}/jquery.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
|
|
</body>
|
|
</html>
|
|
endsnippet
|
|
|
|
# CSS & JS\'s CDN - Bootstrap 4
|
|
snippet cdn-b4
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/${2:2.1.4}/jquery.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
|
|
endsnippet
|
|
|
|
# CSS \'s CDN - Bootstrap 4
|
|
snippet cdncs
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
|
|
endsnippet
|
|
|
|
# JS \'s CDN - Bootstrap 4
|
|
snippet cdnjs
|
|
<!-- jQuery first, then Bootstrap JS. -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/${1:2.1.4}/jquery.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
|
|
endsnippet
|
|
|
|
# Local CSS - Bootstrap 4
|
|
snippet loccs
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" href="$1/css/bootstrap.css">
|
|
endsnippet
|
|
|
|
# Local JS - Bootstrap 4
|
|
snippet locjs
|
|
<!-- jQuery first, then Bootstrap JS. -->
|
|
<script src="$1/js/jquery.min.js"></script>
|
|
<script src="$1/js/bootstrap.js"></script>
|
|
endsnippet
|
|
|