mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-16 10:34:07 +02:00
4.0.0 stable
This commit is contained in:
Mark Otto
@@ -13,37 +13,93 @@
|
||||
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet">
|
||||
<link href="blog.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="blog-masthead">
|
||||
<div class="container">
|
||||
<nav class="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 class="container">
|
||||
<header class="blog-header py-3">
|
||||
<div class="row flex-nowrap justify-content-between align-items-center">
|
||||
<div class="col-4 pt-1">
|
||||
<a class="text-muted" href="#">Subscribe</a>
|
||||
</div>
|
||||
<div class="col-4 text-center">
|
||||
<a class="blog-header-logo text-dark" href="#">Large</a>
|
||||
</div>
|
||||
<div class="col-4 d-flex justify-content-end align-items-center">
|
||||
<a class="text-muted" href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
|
||||
</a>
|
||||
<a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="nav-scroller py-1 mb-2">
|
||||
<nav class="nav d-flex justify-content-between">
|
||||
<a class="p-2 text-muted" href="#">World</a>
|
||||
<a class="p-2 text-muted" href="#">U.S.</a>
|
||||
<a class="p-2 text-muted" href="#">Technology</a>
|
||||
<a class="p-2 text-muted" href="#">Design</a>
|
||||
<a class="p-2 text-muted" href="#">Culture</a>
|
||||
<a class="p-2 text-muted" href="#">Business</a>
|
||||
<a class="p-2 text-muted" href="#">Politics</a>
|
||||
<a class="p-2 text-muted" href="#">Opinion</a>
|
||||
<a class="p-2 text-muted" href="#">Science</a>
|
||||
<a class="p-2 text-muted" href="#">Health</a>
|
||||
<a class="p-2 text-muted" href="#">Style</a>
|
||||
<a class="p-2 text-muted" href="#">Travel</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="jumbotron p-3 p-md-5 text-white rounded bg-dark">
|
||||
<div class="col-md-6 px-0">
|
||||
<h1 class="display-4 font-italic">Title of a longer featured blog post</h1>
|
||||
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what's most interesting in this post's contents.</p>
|
||||
<p class="lead mb-0"><a href="#" class="text-white font-weight-bold">Continue reading...</a></p>
|
||||
</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 class="row mb-2">
|
||||
<div class="col-md-6">
|
||||
<div class="card flex-md-row mb-4 box-shadow h-md-250">
|
||||
<div class="card-body d-flex flex-column align-items-start">
|
||||
<strong class="d-inline-block mb-2 text-primary">World</strong>
|
||||
<h3 class="mb-0">
|
||||
<a class="text-dark" href="#">Featured post</a>
|
||||
</h3>
|
||||
<div class="mb-1 text-muted">Nov 12</div>
|
||||
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#">Continue reading</a>
|
||||
</div>
|
||||
<img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Card image cap">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card flex-md-row mb-4 box-shadow h-md-250">
|
||||
<div class="card-body d-flex flex-column align-items-start">
|
||||
<strong class="d-inline-block mb-2 text-success">Design</strong>
|
||||
<h3 class="mb-0">
|
||||
<a class="text-dark" href="#">Post title</a>
|
||||
</h3>
|
||||
<div class="mb-1 text-muted">Nov 11</div>
|
||||
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#">Continue reading</a>
|
||||
</div>
|
||||
<img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Card image cap">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<main role="main" class="container">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-sm-8 blog-main">
|
||||
<div class="col-md-8 blog-main">
|
||||
<h3 class="pb-3 mb-4 font-italic border-bottom">
|
||||
From the Firehose
|
||||
</h3>
|
||||
|
||||
<div class="blog-post">
|
||||
<h2 class="blog-post-title">Sample blog post</h2>
|
||||
@@ -111,14 +167,15 @@
|
||||
|
||||
</div><!-- /.blog-main -->
|
||||
|
||||
<aside class="col-sm-3 ml-sm-auto 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>
|
||||
<aside class="col-md-4 blog-sidebar">
|
||||
<div class="p-3 mb-3 bg-light rounded">
|
||||
<h4 class="font-italic">About</h4>
|
||||
<p class="mb-0">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">
|
||||
|
||||
<div class="p-3">
|
||||
<h4 class="font-italic">Archives</h4>
|
||||
<ol class="list-unstyled mb-0">
|
||||
<li><a href="#">March 2014</a></li>
|
||||
<li><a href="#">February 2014</a></li>
|
||||
<li><a href="#">January 2014</a></li>
|
||||
@@ -133,8 +190,9 @@
|
||||
<li><a href="#">April 2013</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="sidebar-module">
|
||||
<h4>Elsewhere</h4>
|
||||
|
||||
<div class="p-3">
|
||||
<h4 class="font-italic">Elsewhere</h4>
|
||||
<ol class="list-unstyled">
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Twitter</a></li>
|
||||
@@ -161,5 +219,13 @@
|
||||
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
|
||||
<script src="../../../../assets/js/vendor/popper.min.js"></script>
|
||||
<script src="../../../../dist/js/bootstrap.min.js"></script>
|
||||
<script src="../../../../assets/js/vendor/holder.min.js"></script>
|
||||
<script>
|
||||
Holder.addTheme('thumb', {
|
||||
bg: '#55595c',
|
||||
fg: '#eceeef',
|
||||
text: 'Thumbnail'
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user