mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-10 23:54:08 +02:00
Add v5.0.0 docs (#33648)
This commit is contained in:
XhmikosR
GitHub
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.82.0">
|
||||
<meta name="generator" content="Hugo 0.83.1">
|
||||
<title>Blog Template · Bootstrap v5.0</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/blog/">
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
@@ -127,7 +127,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row g-5">
|
||||
<div class="col-md-8">
|
||||
<h3 class="pb-4 mb-4 fst-italic border-bottom">
|
||||
From the Firehose
|
||||
@@ -135,61 +135,118 @@
|
||||
|
||||
<article 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 class="blog-post-meta">January 1, 2021 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>
|
||||
<p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.</p>
|
||||
<hr>
|
||||
<p>Yeah, she dances to her own beat. Oh, no. You could've been the greatest. 'Cause, baby, <a href="#">you're a firework</a>. Maybe a reason why all the doors are closed. Open up your heart and just let it begin. So très chic, yeah, she's a classic.</p>
|
||||
<blockquote>
|
||||
<p>Bikinis, zucchinis, Martinis, no weenies. I know there will be sacrifice but that's the price. <strong>This is how we do it</strong>. I'm not sticking around to watch you go down. You think you're so rock and roll, but you're really just a joke. I know one spark will shock the world, yeah yeah. Can't replace you with a million rings.</p>
|
||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
||||
<h2>Blockquotes</h2>
|
||||
<p>This is an example blockquote in action:</p>
|
||||
<blockquote class="blockquote">
|
||||
<p>Quoted text goes here.</p>
|
||||
</blockquote>
|
||||
<p>Trying to connect the dots, don't know what to tell my boss. Before you met me I was alright but things were kinda heavy. You just gotta ignite the light and let it shine. Glitter all over the room <em>pink flamingos</em> in the pool. </p>
|
||||
<h2>Heading</h2>
|
||||
<p>Suiting up for my crowning battle. If you only knew what the future holds. Bring the beat back. Peach-pink lips, yeah, everybody stares.</p>
|
||||
<h3>Sub-heading</h3>
|
||||
<p>You give a hundred reasons why, and you say you're really gonna try. Straight stuntin' yeah we do it like that. Calling out my name. ‘Cause I, I’m capable of anything.</p>
|
||||
<pre><code>Example code block</code></pre>
|
||||
<p>Before you met me I was alright but things were kinda heavy. You just gotta ignite the light and let it shine.</p>
|
||||
<h3>Sub-heading</h3>
|
||||
<p>You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out.</p>
|
||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
||||
<h3>Example lists</h3>
|
||||
<p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout. This is an example unordered list:</p>
|
||||
<ul>
|
||||
<li>Got a motel and built a fort out of sheets.</li>
|
||||
<li>Your kiss is cosmic, every move is magic.</li>
|
||||
<li>Suiting up for my crowning battle.</li>
|
||||
<li>First list item</li>
|
||||
<li>Second list item with a longer description</li>
|
||||
<li>Third list item to close it out</li>
|
||||
</ul>
|
||||
<p>Takes you miles high, so high, 'cause she’s got that one international smile.</p>
|
||||
<p>And this is an ordered list:</p>
|
||||
<ol>
|
||||
<li>Scared to rock the boat and make a mess.</li>
|
||||
<li>I could have rewrite your addiction.</li>
|
||||
<li>I know you get me so I let my walls come down.</li>
|
||||
<li>First list item</li>
|
||||
<li>Second list item with a longer description</li>
|
||||
<li>Third list item to close it out</li>
|
||||
</ol>
|
||||
<p>After a hurricane comes a rainbow.</p>
|
||||
</article><!-- /.blog-post -->
|
||||
<p>And this is a definiton list:</p>
|
||||
<dl>
|
||||
<dt>HyperText Markup Language (HTML)</dt>
|
||||
<dd>The language used to describe and define the content of a Web page</dd>
|
||||
<dt>Cascading Style Sheets (CSS)</dt>
|
||||
<dd>Used to describe the appearance of Web content</dd>
|
||||
<dt>JavaScript (JS)</dt>
|
||||
<dd>The programming language used to build advanced Web sites and applications</dd>
|
||||
</dl>
|
||||
<h2>Inline HTML elements</h2>
|
||||
<p>HTML defines a long list of available inline tags, a complete list of which can be found on the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">Mozilla Developer Network</a>.</p>
|
||||
<ul>
|
||||
<li><strong>To bold text</strong>, use <code class="language-plaintext highlighter-rouge"><strong></code>.</li>
|
||||
<li><em>To italicize text</em>, use <code class="language-plaintext highlighter-rouge"><em></code>.</li>
|
||||
<li>Abbreviations, like <abbr title="HyperText Markup Langage">HTML</abbr> should use <code class="language-plaintext highlighter-rouge"><abbr></code>, with an optional <code class="language-plaintext highlighter-rouge">title</code> attribute for the full phrase.</li>
|
||||
<li>Citations, like <cite>— Mark Otto</cite>, should use <code class="language-plaintext highlighter-rouge"><cite></code>.</li>
|
||||
<li><del>Deleted</del> text should use <code class="language-plaintext highlighter-rouge"><del></code> and <ins>inserted</ins> text should use <code class="language-plaintext highlighter-rouge"><ins></code>.</li>
|
||||
<li>Superscript <sup>text</sup> uses <code class="language-plaintext highlighter-rouge"><sup></code> and subscript <sub>text</sub> uses <code class="language-plaintext highlighter-rouge"><sub></code>.</li>
|
||||
</ul>
|
||||
<p>Most of these elements are styled by browsers with few modifications on our part.</p>
|
||||
<h2>Heading</h2>
|
||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
||||
<h3>Sub-heading</h3>
|
||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
||||
<pre><code>Example code block</code></pre>
|
||||
<p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.</p>
|
||||
</article>
|
||||
|
||||
<article 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 class="blog-post-meta">December 23, 2020 by <a href="#">Jacob</a></p>
|
||||
|
||||
<p>I am ready for the road less traveled. Already <a href="#">brushing off the dust</a>. Yeah, you're lucky if you're on her plane. I used to bite my tongue and hold my breath. Uh, She’s a beast. I call her Karma (come back). Black ray-bans, you know she's with the band. I can't sleep let's run away and don't ever look back, don't ever look back.</p>
|
||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
||||
<blockquote>
|
||||
<p>Growing fast into a <strong>bolt of lightning</strong>. Be careful Try not to lead her on</p>
|
||||
<p>Longer quote goes here, maybe with some <strong>emphasized text</strong> in the middle of it.</p>
|
||||
</blockquote>
|
||||
<p>I'm intrigued, for a peek, heard it's fascinating. Oh oh! Wanna be a victim ready for abduction. She's got that international smile, oh yeah, she's got that one international smile. Do you ever feel, feel so paper thin. I’m gon’ put her in a coma. Sun-kissed skin so hot we'll melt your popsicle.</p>
|
||||
<p>This is transcendental, on another level, boy, you're my lucky star.</p>
|
||||
</article><!-- /.blog-post -->
|
||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
||||
<h3>Example table</h3>
|
||||
<p>And don't forget about tables in these posts:</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Upvotes</th>
|
||||
<th>Downvotes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Alice</td>
|
||||
<td>10</td>
|
||||
<td>11</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bob</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charlie</td>
|
||||
<td>7</td>
|
||||
<td>9</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Totals</td>
|
||||
<td>21</td>
|
||||
<td>23</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
<p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.</p>
|
||||
</article>
|
||||
|
||||
<article 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 class="blog-post-meta">December 14, 2020 by <a href="#">Chris</a></p>
|
||||
|
||||
<p>From Tokyo to Mexico, to Rio. Yeah, you take me to utopia. I'm walking on air. We'd make out in your Mustang to Radiohead. I mean the ones, I mean like she's the one. Sun-kissed skin so hot we'll melt your popsicle. Slow cooking pancakes for my boy, still up, still fresh as a Daisy.</p>
|
||||
<p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
|
||||
<ul>
|
||||
<li>I hope you got a healthy appetite.</li>
|
||||
<li>You're never gonna be unsatisfied.</li>
|
||||
<li>Got a motel and built a fort out of sheets.</li>
|
||||
<li>First list item</li>
|
||||
<li>Second list item with a longer description</li>
|
||||
<li>Third list item to close it out</li>
|
||||
</ul>
|
||||
<p>Don't need apologies. Boy, you're an alien your touch so foreign, it's <em>supernatural</em>, extraterrestrial. Talk about our future like we had a clue. I can feel a phoenix inside of me.</p>
|
||||
</article><!-- /.blog-post -->
|
||||
<p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.</p>
|
||||
</article>
|
||||
|
||||
<nav class="blog-pagination" aria-label="Pagination">
|
||||
<a class="btn btn-outline-primary" href="#">Older</a>
|
||||
@@ -199,42 +256,43 @@
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="p-4 mb-3 bg-light rounded">
|
||||
<h4 class="fst-italic">About</h4>
|
||||
<p class="mb-0">Saw you downtown singing the Blues. Watch you circle the drain. Why don't you let me stop by? Heavy is the head that <em>wears the crown</em>. Yes, we make angels cry, raining down on earth from up above.</p>
|
||||
</div>
|
||||
<div class="position-sticky" style="top: 2rem;">
|
||||
<div class="p-4 mb-3 bg-light rounded">
|
||||
<h4 class="fst-italic">About</h4>
|
||||
<p class="mb-0">Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.</p>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<h4 class="fst-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>
|
||||
<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="p-4">
|
||||
<h4 class="fst-italic">Archives</h4>
|
||||
<ol class="list-unstyled mb-0">
|
||||
<li><a href="#">March 2021</a></li>
|
||||
<li><a href="#">February 2021</a></li>
|
||||
<li><a href="#">January 2021</a></li>
|
||||
<li><a href="#">December 2020</a></li>
|
||||
<li><a href="#">November 2020</a></li>
|
||||
<li><a href="#">October 2020</a></li>
|
||||
<li><a href="#">September 2020</a></li>
|
||||
<li><a href="#">August 2020</a></li>
|
||||
<li><a href="#">July 2020</a></li>
|
||||
<li><a href="#">June 2020</a></li>
|
||||
<li><a href="#">May 2020</a></li>
|
||||
<li><a href="#">April 2020</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<h4 class="fst-italic">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 class="p-4">
|
||||
<h4 class="fst-italic">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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.row -->
|
||||
|
||||
</main><!-- /.container -->
|
||||
</main>
|
||||
|
||||
<footer class="blog-footer">
|
||||
<p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
|
||||
|
||||
Reference in New Issue
Block a user