Commit 083ef3fd authored by Mark Otto's avatar Mark Otto
Browse files

Merge pull request #18149 from davidjb/html-order-navs

Reorder HTML attributes in Navs documentation
parents 33103c0b 206472e1
main cleanup-floating-forms cssvar-function dependabot/npm_and_yarn/stylelint-and-stylelint-config-twbs-bootstrap-15.3.0 extend-snippets feat/data-target floating-always-visible floating-labels-icons fod-main-banner form-controls-with-icons github/fork/719media/patch-13 github/fork/719media/patch-14 github/fork/719media/patch-9 github/fork/ChellyAhmed/fix-typo-reboot.md github/fork/ChellyAhmed/offcanvas-scroll-back github/fork/CtrlAltLilith/main github/fork/Elysiome/offcanvas-optional-window-resizing github/fork/JanSargsyan/main github/fork/LunicLynx/support-different-line-height-for-buttons github/fork/Psixodelik/main github/fork/Ronid1/ronid1/offcanvas_static_backdrop github/fork/RyanBerliner/tooltip-accessibility github/fork/SantiagoPVazquez/Feature-default-border-bottom-to-dropdown-item github/fork/Sir-Genius/utils github/fork/Sumit-Singh-8/main github/fork/Viktor-VERA2020/offcanvas-slide github/fork/Zivangu9/input-group-for-form-control-plaintext github/fork/alpadev/alpadev/call-dispose-on-component-reinstantiation github/fork/astagi/fix/tree-shake-modules github/fork/compnerd/dark-accordion-icon github/fork/derSascha/dropdown-dont-close-on-input-click github/fork/dev-ph1l/main github/fork/donquixote/issue-33861-utl-mixin github/fork/florianlacreuse/mixin-make-row-gutter-y github/fork/gregorw/main github/fork/iteggmbh/transitionend-dispose-race github/fork/jdelStrother/patch-1 github/fork/jonnysp/form-floating github/fork/jonnysp/independent-offcanvas github/fork/jonnysp/theme-dark-on-card-and-modal-fix github/fork/josefdlange/floating-label-placeholder-opacity github/fork/julien-deramond/enhance-change-version.js github/fork/julien-deramond/main-jd-fix-offset-content github/fork/julien-deramond/main-jd-issue-with-utitlies github/fork/julien-deramond/main-xmr-pa11y-ci-jd-add-hideElements github/fork/kyletsang/fix-tooltip-padding github/fork/lacutah/CheckboxCenteringDocumentation github/fork/lekoala/patch-3 github/fork/louismaximepiton/main-kld-lmp-collapse-proposal github/fork/louismaximepiton/main-lmp-card-inner-border-radius-fix github/fork/louismaximepiton/main-lmp-carousel-multiple-images github/fork/louismaximepiton/main-lmp-css-var-init github/fork/louismaximepiton/main-lmp-disabled-floating-label-fix github/fork/louismaximepiton/main-lmp-input-range-fix github/fork/louismaximepiton/main-lmp-shift-color github/fork/louismaximepiton/main-lmp-table-active-tr-fix github/fork/maciek-szn/switch github/fork/michael-roth/feature/19964-multiple-tab-targets github/fork/mistic100/dom-utils github/fork/nkdas91/accordion github/fork/nstungcom/fix-missing-modal-open-class github/fork/oraliahdz/animation-utilities github/fork/pine3ree/patch-7 github/fork/pouwerkerk/unindent-scss-docs-shortcode github/fork/smares/smares-no-scolling-on-modal-close github/fork/tgm-git/patch-1 gs-forms gs-toasts-with-animated-progress-bar gs/add-history-helper gs/change-version-dir-on-docs gs/data-must-set-onlu-one-instance gs/docs/fix-drop-down-error gs/event-handler-2 gs/make-docs-js-build gs/make-simple-attribute-toggler gs/popover-fix-doc gs/provide-steConfig-method gs/scrollspy-smoothscroll-option-use-browser-history gs/streamline-jqueryInterface gs/support-drop-down-in-navbar gs/test-js-generic-trigger gs/try-web-components gs/tweak-collapse-js-selector gs/use-event-handler-in-cocmponent gs/use-rollup-replace-for-version jo-docs-thanks-page jo-ssr-friendly logical-props-spacing-utils main-fod-disabled-form-check-label main-fod-nested-accordion main-fod-simpler-table-structure main-fod-table-separator main-fod-utilities-contrast main-jd-abbr-title main-jd-add-chips main-jd-add-doc-for-sass-custom-colors main-jd-add-enable-host-to-handle-web-components main-jd-browserstack-fine-tune main-jd-browserstack-updates main-jd-docs-consistent-usage-of-css-sections-step-2 main-jd-fix-docs-headers-in-white main-jd-fix-highlight-docs-border-radius main-jd-fix-placeholder-color-background-params-for-img-markup main-jd-glossary-experiment main-jd-postcss-drop-empty-css-vars main-jd-proto-doc-astro main-jd-skip-navigation-component main-jd-stackblitz-for-examples main-jd-upgrade-browserlistrc main-jd-use-host main-lmp-dark-theme-customization main-lmp-handle-scroll-target main-lmp-tab-fix main-mc-opensearch main-xmr-bundlewatch-action main-xmr-eslint-plugin-compat main-xmr-hugo-docs-vendor main-xmr-hugo-rm-ver main-xmr-linkinator-prod main-xmr-min-mangle main-xmr-pa11y-ci more-darkmode-examples nested-dropdowns patrickhlauke-issue37428 patrickhlauke-use-of-color-tweaks pr/34102 pr/37590 previous-next-docs-links sticky-thead utilities-functions-mixin v4-dev v4-dev-dropdown-hide-method v530-dev v6-postcss-custom-media v6-spinner-dots v6/gs/use-floating-ui-in-place-of-popper xmr/dev xmr/docs-png xmr/docs-svgs xmr/hugo-reorg-files xmr/js-2 xmr/markdownlint xmr/prepare-530-alpha2 xmr/xo v5.3.0-alpha1 v5.2.3 v5.2.2 v5.2.1 v5.2.0 v5.2.0-beta1 v5.1.3 v5.1.2 v5.1.1 v5.1.0 v5.0.2 v5.0.1 v5.0.0 v5.0.0-beta3 v5.0.0-beta2 v5.0.0-beta1 v5.0.0-alpha3 v5.0.0-alpha2 v5.0.0-alpha1 v4.6.2 v4.6.1 v4.6.0 v4.5.3 v4.5.2 v4.5.1 v4.5.0 v4.4.1 v4.4.0 v4.3.1 v4.3.0 v4.2.1 v4.2.0 v4.1.3 v4.1.2 v4.1.1 v4.1.0 v4.0.0 v4.0.0-beta.3 v4.0.0-beta.2 v4.0.0-beta v4.0.0-alpha.6 v4.0.0-alpha.5 v4.0.0-alpha.4 v4.0.0-alpha.3 v4.0.0-alpha.2
40 merge requests!28721Hot test,!27561Adds font-weight-medium to font weight classes,!26437merge,!26197V4 dev xmr,!20778V4 dev,!20539Allow multiple modals,!18988Blockquote border width,!20854Fixes 15534,!19272V4 dev xmr grunt html,!19581V4 fix popover,!18283Tether docs fix,!20493V4 dev display,!20636Fix docs for heading sizes,!19824blockquote-center,!22547Finished a new translation for bootstrap,!19534Docs 17264,!19533Npm deps,!22143Fix selectable disabled toggle radio buttons,!19084V4 rhythm,!22598test,!18829Add prefix to carousel classes,!18581Check getting started files for broken links - Issue 18568,!20099V4.0.0 alpha.3,!18477add utility color-contrast function,!18864Feature/navbar toggler support color schemes,!19602V4 palettes arun,!18311V4 dev xmr,!19448New pull request for testing,!19358XXL grid size,!19825.blockquote-center,!25326Adjust examples,!23995Add back cursor: pointer for .btn-link,!23178Spinner,!19754Issue template,!19753Card img overlay padding,!19747Blockquote border width,!19580ExitStars,!18684Docs: change "Button" to "Go somewhere",!18661Docs: accessibility fix-up of collapsible content navbar, change site-wide main navbar,!17021v4
Showing with 48 additions and 48 deletions
+48 -48
......@@ -54,16 +54,16 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
{% example html %}
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#" class="nav-link active">Active</a>
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Another link</a>
<a class="nav-link" href="#">Another link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
......@@ -75,16 +75,16 @@ Take that same HTML, but use `.nav-pills` instead:
{% example html %}
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#" class="nav-link active">Active</a>
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Another link</a>
<a class="nav-link" href="#">Another link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
......@@ -96,16 +96,16 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
{% example html %}
<ul class="nav nav-pills nav-stacked">
<li class="nav-item">
<a href="#" class="nav-link active">Active</a>
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Another link</a>
<a class="nav-link" href="#">Another link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
......@@ -119,7 +119,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
{% example html %}
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#" class="nav-link active">Active</a>
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
......@@ -132,10 +132,10 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Another link</a>
<a class="nav-link" href="#">Another link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
......@@ -145,7 +145,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
{% example html %}
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#" class="nav-link active">Active</a>
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
......@@ -158,10 +158,10 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Another link</a>
<a class="nav-link" href="#">Another link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
......@@ -171,34 +171,34 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
<div class="bd-example bd-example-tabs" role="tabpanel">
<ul id="myTab" class="nav nav-tabs" role="tablist">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a>
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a>
<a class="dropdown-item" href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a>
<a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">@fat</a>
<a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a>
</div>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-content" id="myTabContent">
<div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledBy="home-tab">
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledBy="profile-tab">
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledBy="profile-tab">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledBy="dropdown1-tab">
<div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledBy="dropdown1-tab">
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledBy="dropdown2-tab">
<div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledBy="dropdown2-tab">
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
</div>
</div>
......@@ -213,25 +213,25 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#home" role="tab" data-toggle="tab">Home</a>
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile" role="tab" data-toggle="tab">Profile</a>
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#messages" role="tab" data-toggle="tab">Messages</a>
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#settings" role="tab" data-toggle="tab">Settings</a>
<a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
{% endhighlight %}
</div>
......@@ -262,10 +262,10 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a
{% highlight html %}
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
<div role="tabpanel" class="tab-pane fade" id="profile">...</div>
<div role="tabpanel" class="tab-pane fade" id="messages">...</div>
<div role="tabpanel" class="tab-pane fade" id="settings">...</div>
<div class="tab-pane fade in active" id="home" role="tabpanel">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>
{% endhighlight %}
......@@ -276,26 +276,26 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a
Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM.
{% highlight html %}
<ul class="nav nav-tabs" role="tablist" id="myTab">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a>
<a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a>
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#messages" role="tab" data-toggle="tab" aria-controls="messages">Messages</a>
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#settings" role="tab" data-toggle="tab" aria-controls="settings">Settings</a>
<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
<script>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment