mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-09 02:46:15 +01:00
f4a1a35cf2
manual backport of #34886 per https://www.w3.org/TR/html-aria/#docconformance > It is NOT RECOMMENDED to use `aria-disabled="true"` on an `a` element with an `href` attribute. > >NOTE >If a link needs to be "disabled", remove the `href` attribute. This PR removes the unnecessary `href="#"`, `tabindex="-1"`, and `aria-disabled="true"` from disabled links in both docs pages and examples. `aria-disabled="true"` *is* kept for disabled link-based buttons (that have `role="button"`) as there it's appropriate to use (you *want* to convey to assistive technologies that this thing you're claiming is a button is also disabled at the moment) Further, the PR extends the "Link functionality caveat" to show the "proper" way (removing `href` and adding `.disabled` class only) to disable a link, but then explains what to do if that's not possible (and then keeps an example with all the traditional `href="#" tabindex="-1" aria-disabled="true"`, but explains clearly that it's not ideal). Same sort of explanation is also added to the pointer event utilities page
81 lines
3.6 KiB
HTML
81 lines
3.6 KiB
HTML
---
|
||
layout: examples
|
||
title: Jumbotron Template
|
||
extra_css:
|
||
- "jumbotron.css"
|
||
---
|
||
|
||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||
<a class="navbar-brand" href="#">Navbar</a>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
|
||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||
<ul class="navbar-nav mr-auto">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link disabled">Disabled</a>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
|
||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||
<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>
|
||
</li>
|
||
</ul>
|
||
<form class="form-inline my-2 my-lg-0">
|
||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||
</form>
|
||
</div>
|
||
</nav>
|
||
|
||
<main role="main">
|
||
|
||
<!-- Main jumbotron for a primary marketing message or call to action -->
|
||
<div class="jumbotron">
|
||
<div class="container">
|
||
<h1 class="display-3">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>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
|
||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<h2>Heading</h2>
|
||
<p>Standing on the frontline when the bombs start to fall. Heaven is jealous of our love, angels are crying from up above. Can't replace you with a million rings. Boy, when you're with me I'll give you a taste. There’s no going back. Before you met me I was alright but things were kinda heavy. Heavy is the head that wears the crown.</p>
|
||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<h2>Heading</h2>
|
||
<p>Playing ping pong all night long, everything's all neon and hazy. Yeah, she's so in demand. She's sweet as pie but if you break her heart. But down to earth. It's time to face the music I'm no longer your muse. I guess that I forgot I had a choice.</p>
|
||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||
</div>
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
</div> <!-- /container -->
|
||
|
||
</main>
|
||
|
||
<footer class="container">
|
||
<p>© Company 2017-{{< year >}}</p>
|
||
</footer>
|